Dear Users,

Now, we are seeking users who can give us a hand with expertise to evolve our software more dynamically.
If you are willing to help us, we’d like you to make a registration for “Live2D Creators Circle” via the link below.
Designers, programmers, translators are especially welcomed so far.
(More detailed explanation will be given to you before we ask you to do tasks)

https://docs.google.com/forms/d/1G5KK_GL3ozwPXtTHrpi_ktbsI8UZf8jlYRSlDworyBo/viewform?usp=send_form

Question - canvas size and scaling

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.

Comments



  • 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
  • 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?
  • 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.
  • 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
  • Uncaught ReferenceError: L2DModelMatrix is not defined

    I got this error :(
  • edited 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".
  • Hi, Rus .
    Did you see even once the link page in my comment !?
    There is a code that references Live2DFramework.js to HTML file :s
  • Alright. But same problem persists.
    PS: my canvas isn't square

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

    The result is still distorted :(
  • 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
  • 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());
    
  • Ok. This is good. Now I don't need to tweek the live2d one anymore :)
  • 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
  • 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?
  • 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)

Sign In or Register to comment.