Question - canvas size and scaling

Rus

How do I make the canvas fill the entire window width & height and keep the live2d model to it's original proportion?

I try adjusting

canvas.width = window.innerWidth
canvas.height= window.innerHeight
canvas.style.width = window.innerWidth + "px";
canvas.style.height= window.innerHeight+ "px";

The result keep coming out distorted.

I also don't understand this matrix:

var s = 2.0 / live2DModel.getCanvasWidth();
var matrix4x4 = [ s,0,0,0 , 0,-s,0,0 , 0,0,1,0 , -1.0,1,0,1 ];
live2DModel.setMatrix(matrix4x4);

Can someone please explain. Thank you in advance.

Rus

The circles were originally perfect circles, but in the canvas they are distorted.
How do I adjust the matrix4x4, so that the width would fit into the screen, and the height would adjust proportionally to the width ???

Thank you

Rus

I don't want the original proportion of the live2d .moc to change.

So if the width changes by 0.5, the height would also change by 0.5 ;
& if the width changes by 0.25, the height would also change by 0.25.

So that's what I want. Help please anyone?

Rus

I am struggling with this. Now I got:

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

#glcanvas{
position:absolute;
width:100%;
height:100%;
}

I know that the trick lies in Sy
var matrix4x4 = [ Sx,0,0,0 , 0,-Sy,0,0 , 0,0,1,0 , -1.0,1,0,1 ];

But what should Sy be ? Help me on this please.

naotaro

There is a way that can be easily resized .

[ Function ]
setWidth(scale) -> Scale change
setCenterPosition(x,y) -> Position change

[ Sample Code ]

var height = live2DModel.getCanvasHeight();
var width = live2DModel.getCanvasWidth();
var mmat = new L2DModelMatrix(width, height);
mmat.setWidth(2.0);
mmat.setCenterPosition(0.0, 0.0);
live2DModel.setMatrix(mmat.getArray());

Please try to here as a reference ( This page is Japanese )
http://qiita.com/naotaro0123/items/013a9731755cb0a0537a

Rus

Uncaught ReferenceError: L2DModelMatrix is not defined

I got this error

CBeam

I'm not an expert, but in Live2D>Framework, you should have a bunch of .cs files. I believe that can be solved if you add in all of the scripts relevant to L2D Matrixes from that file (or simply all of the scripts altogether), since the error is like the program saying "Hey, what is a L2DModelMatrix? I need to know what it is!". So you need to add in the .cs which contains the definition of what L2DModelMatrix is, thus telling it "Yes, this what a L2DModelMatrix is".

naotaro

Hi, Rus .
Did you see even once the link page in my comment !?
There is a code that references Live2DFramework.js to HTML file

Rus

Alright. But same problem persists.
PS: my canvas isn't square

Rus

I tried
var mmat = new L2DModelMatrix(height, height);
and
canvas.width = window.innerHeight;
canvas.height = window.innerHeight;

The result is still distorted

Rus

never mind. All good now.

However I did have to tweek the Live2DFramework.js

Here's was my solution for anyone who's interested:

Live2DFramework.js - line 850-ish

L2DModelMatrix.prototype.setWidth        = function(w/*float*/)
{
    var scaleX = w / this.width;
    var scaleY = -w / this.height;
    this.scale(scaleX, scaleY);
}

Simple.js

    var mmat = new L2DModelMatrix(window.innerWidth*3.5, window.innerHeight*3.5);
    mmat.setWidth(2.0); 
    mmat.setCenterPosition(0.0, 0.0);
    live2DModel.setMatrix(mmat.getArray());
 

Apparently the ratio of live2DModel.getCanvasWidth() / live2DModel.getCanvasHeight() does not equal window.innerWidth / window.innerHeight

naotaro

OK , try this code .
offsetX is change value .

var height = live2DModel.getCanvasHeight();
var width = live2DModel.getCanvasWidth();
var mmat = new L2DModelMatrix(width, height);
// mmat.setWidth(2.0);
var scaleX = 2.0 / width;
var scaleY = -scaleX;
var offsetX = 1.4;
mmat.scale(scaleX * offsetX, scaleY);

mmat.setCenterPosition(0.0, 0.0);
live2DModel.setMatrix(mmat.getArray());

Rus

Ok. This is good. Now I don't need to tweek the live2d one anymore

Rus

I did realize a quality problem. (see picture)

The quality is good on Live2d Viewer, but the quality is not good on browser.

I noticed that the constant 2 is always used

// mmat.setWidth(2.0);
var scaleX = 2.0 / width;

Does this constant 2 have anything to do with the reduced quality on browsers?
& How do I fix this quality problem?

Thank you

Rus

I found a temporary fix for the quality issue:

			canvas.width = window.innerWidth*2;
			canvas.height = window.innerHeight*2;	

However I am still curious to know, what the constant 2 actually does? Is the quality really halved during the process of loading l2d into web browser?

naotaro

constant value is 2 because Oprhographic projection .

https://en.wikipedia.org/wiki/Orthographic_projection

And normalized to the easy-to-use value in WebGL and OpenGL .

LeftBottom(0, 0) → (-1, -1)
RightTop(413, 310) → (1, 1)

Rus

ok. thank you