itch.io Community » Game Development » General Development

How do you handle Canvas Resizing with EaselJS on itch.io?

A topic by Acid Prank created May 11, 2017 Views: 2,295 Replies: 5

Viewing posts 1 to 5

Hi everyone, first post in the community,

I'm currently trying to do a little game using EaselJS but I really lack of knowledge about HTML5 and how to handle mobile device. I found some games on itch.io that works very well but they use a different framework like Phaser or Construct 2. For exemple, Tresure Hunter resize correctly in all the browser I tested (Safari, Chrome on windows desktop, Androïd).

Because they use the different framework, it's hard to figure out what they really does for resize correctly..

What I do for the moment is get the width and the height from the body of the itch.io for resize the canvas, but I think that's a bad idea.

Also, I think I've a problem that looks like the one described on Stack Overflow :

http://stackoverflow.com/questions/7919172/what-is...

Here is the meta tags I use in my index.html file :

I admit I stoled these lines in the index.html file from the game Teasure Hunter, I don't understand everything

The canvas in a <div> :

<div>

</canvas>

</div>

And Here is the CSS code I use :

html, body{

width: 100%;

height: 100%;

}

* {

margin: 0;

padding: 0;

}

body {

overflow: hidden;

margin: 0;

padding:0;

position:relative;

}

canvas {

touch-action: none;

display: block;

user-select: none;

margin-left: 0px;

margin-top: 0px;

background-color: black;

}

In advance, thanks for your help and sorry for my bad english ! :s

Like Reply

No Time To PlayModerator7 years ago

Why would it be a bad idea? How else would you handle resizing except by handling the window's resize event and reading the innerWidth/innerHeight properties. The real question is what to do with them; I have games where the canvas covers the entire browser window, and games where I sort of choose a good size to leave room for controls around the edges. But that depends on what you're trying to do.

Like Reply

Acid Prank7 years ago

My game has a original resolution of 1024 / 720

here is the javascript code I use for get the body size and resize canvas.

function getBodySize() {

var w = window,

d = document,

e = d.documentElement,

g = d.getElementsByTagName('body')[0],

x = w.innerWidth || e.clientWidth || g.clientWidth,

y = w.innerHeight|| e.clientHeight|| g.clientHeight;

if (x != new_W || y != new_H) {

new_W = x;

new_H = y;

resizeCanvas();

}

function resizeCanvas() {

var new_canvas_W = W;

var new_canvas_H = H;

if (W > Body_W || H > Body_H) {

new_canvas_W = Body_W;

new_canvas_H = H / 1024 * Body_W;

if (H > Body_H) {

new_canvas_W = W / 720 * Body_H ;

new_canvas_H = Body_H;

}

if (new_canvas_W != canvas.width || new_canvas_H != canvas.height) {

canvas.width = new_canvas_W;

canvas.height = new_canvas_H;

}

stage.scaleX = new_canvas_W / 1024;

stage.scaleY = new_canvas_H / 720;

stage.update();

}

or see paste bin, its more readable https://pastebin.com/hdgnYSVX

I call it periodically in my game loop (every 100 ticks) and everywhere I can . I'm not sure.. but I think it is a bad idea to use the body width and height because its size seems to change after the canvas size has changed : I noticed that in landscape, the canvas grows up its width correctly then just after it grows up again a little more ..., 5 or 6 times. Also If you read the stackoverflow links I give, there is that really annoying problem which does that when you change the tablet orientation, depending of the brower and the model it doesn't act the same way and the body size.

but again, I really lacks of experience with all of this... Could you provide me the code you use for resize ?

Like Reply

No Time To PlayModerator7 years ago(+1)

Here, look at the source code for RogueBot (it's the old version of the framework, which has a bug, but that's elsewhere). In the resize() method of each screen I simply store the width and height (probably overkill) and precalculate some values (this was before I started using whole-canvas scaling systematically). Note how I use innerWidth/innerHeight, because it's supported by every browser that matters, and only re-read them in a resize event handler, because there's no point otherwise. And yes, the browser fires several of those while a window resizes; that's true both on the desktop and mobile, e.g. when playing with the responsive view in Firefox or rotating the device. But it's still better than checking it all the time.

Like Reply

Acid Prank7 years ago(+1)

I think that my problem is solved, thank you ! : )

Like Reply

elmapul7 years ago

actualy, i think this is a bad behavior:

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

because its assumes that the aspect ratio will always be the same.

old monitors where 4:3, nowadays monitors are 16:9 and if your game is mobile, the user may hold it as landscape or portrait mode, breaking the proportions.

Like Reply