IsmaelGames7

How do I make my canvas look the same on other devices?

Recommended Posts

Hello,

How do I make my canvas look the same on all devices?
 

function PixiPlay(){
    var renderer = PIXI.autoDetectRenderer(350,460,{antialias: false, transparent: false});
    document.body.appendChild(renderer.view);
    var root = new PIXI.Container();

I saw a tutorial talking about Pixiv4.
But he talks almost nothing about the canvas :(

Can anyone teach me how to do this, in a simple way, please? :)

Share this post


Link to post
Share on other sites

I'm quite sure by look the same you meant fitting it to the screen size while maintaining the aspect ratio. So I think this here should help you:

var WIDTH = 350;
var HEIGHT = 460;

var renderer = PIXI.autoDetectRenderer(WIDTH, HEIGHT, {antialias: false, transparent: false});
document.body.appendChild(renderer.view);

var root = new PIXI.Container();

var ratio = Math.min(window.innerWidth / WIDTH, window.innerHeight / HEIGHT);

root.scale.x = root.scale.y = ratio;

renderer.resize(Math.ceil(WIDTH * ratio), Math.ceil(HEIGHT * ratio));

Let me know if it doesn't.

 

You can also put that extra code into function and call it upon window resize event, this way the game will be scaled according to browser size as well, just a little tip :).

Share this post


Link to post
Share on other sites


Alternatively, https://github.com/kittykatattack/scaleToWindow

Call like window.scaleToWindow( PIXI.Application.renderer.view), e.g:

var app:PIXI.Application = new PIXI.Application(1024, 720, {backgroundColor : 0x1099bb});

document.body.appendChild(app.view);

doScaleWindow();

window.addEventListener("resize", doScaleWindow);

function doScaleWindow() {
    window.scaleToWindow(app.renderer.view, 0xFFFFFF);
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.