Question - canvas size and scaling

Rus · April 2016

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 · April 2016

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 · April 2016

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 · April 2016

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 · April 2016

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 · April 2016

Uncaught ReferenceError: L2DModelMatrix is not defined

I got this error

CBeam · April 2016

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 · April 2016

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 · April 2016

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

Rus · April 2016

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

The result is still distorted

Rus · April 2016

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 · April 2016

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 · April 2016

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

Rus · April 2016

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 · April 2016

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 · April 2016

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 · April 2016

ok. thank you

Howdy, Stranger!

Quick Links

Categories

Question - canvas size and scaling

Comments