Jump to content

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


IsmaelGames7
 Share

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? :)

Link to comment
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 :).

Link to comment
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);
}

 

Link to comment
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...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...