Pixi.js for a Childrens Book App Strategy

[momo]

Hello,

What I have done so far, Thanks to this awesome library.

Developing a children's book with Pixi.js and cordova. I just want to reach out to the pros to get some input on my approach on things. Current approach is depending on the type i am resizing all the sprites stretching it positioning where they should be all using body.clientHeight body.clientWidth and some math. All non interactable sprites is as big as the background most of if is transparency to avoid playing around with positioning not sure if this is good.... All working in order as expected, everything looked stretched though. All this I'm doing is without consideration of how do deal with retina and pixel density. 

I attached one of the frame of a sprite. As you can see the frame takes the whole layout. 

Should I be doing this any different? The artist draws on photoshop on a canvas 2048 x 1536 pixels should i be setting the pixi application width height to that?. Whats the approach to maintain aspect without stretching and maybe just get a black bar on either vertical or horizontal side and center the image. Supporting retina?

 

Thanks in advance.

 

 

  

[momo]

 

Anyone running to this, this is helpful resource that answered http://www.williammalone.com/articles/html5-game-scaling/ my question. I used 1024 x 768 for the game view and just downscale the let pixi do its scalling. I got some memory issue with the regular webview but with https://github.com/ionic-team/cordova-plugin-ionic-webview seems to be using less memory. I unload and destroy previous scenes. 

[ivan.popelyshev]

Pixi has no container resizer from package, and i  think the best approach is to make the page background balck and position canvas that way it always has the same aspect ratio

[momo]

Yep thats what i did taking the approach from that william website. i had an issue using padding to center for some reason the button presses layout got weird. using margin works.

var game = {
  element: document.getElementsByTagName("canvas")[0],
  width: 1024,
  height: 768,
};

// Get the dimensions of the viewport
var viewport = {
  width: window.innerWidth,
  height: window.innerHeight
};

// Determine game size
let newGameWidth = viewport.width;
let newGameHeight = (newGameWidth * game.height) / game.width;

// resize
// Determine game size
if (game.height / game.width > viewport.height / viewport.width) {
  newGameHeight = viewport.height;
  newGameWidth = (newGameHeight * game.width) / game.height;
} else {
  newGameWidth = viewport.width;
  newGameHeight = (newGameWidth * game.height) / game.width;
}

let newGameX = (viewport.width - newGameWidth) / 2;
let newGameY = (viewport.height - newGameHeight) / 2;

// Center the game by setting the padding of the game
game.element.style.margin = newGameY + "px " + newGameX + "px";

pixi.renderer.resize(newGameWidth, newGameHeight);

[Nico Ray]

On 2/18/2019 at 5:11 AM, momo said:

Hello,

What I have done so far, Thanks to this awesome library.

Developing a children's book with Pixi.js and cordova. I just want to reach out to the pros to get some input on my approach on things. Current approach is depending on the type i am resizing all the sprites stretching it positioning where they should be all using body.clientHeight body.clientWidth and some math. All non interactable sprites is as big as the background most of if is transparency to avoid playing around with positioning not sure if this is good.... All working in order as expected, everything looked stretched though. All this I'm doing is without consideration of how do deal with retina and pixel density. 

I attached one of the frame of a sprite. As you can see the frame takes the whole layout. 

Should I be doing this any different? The artist draws on photoshop on a canvas 2048 x 1536 pixels should i be setting the pixi application width height to that?. Whats the approach to maintain aspect without stretching and maybe just get a black bar on either vertical or horizontal side and center the image. Supporting retina?

 

Thanks in advance.

 

 

  

What a great job. The development of children's books will always be in demand and necessary. As well as writing children's literature and nursery rhymes. My girlfriend does this and also writes reviews for student assistance services https://www.topwritersreview.com/reviews/unemployedprofessors/ I'm very proud and support all her undertakings, even though I have chosen a different direction for myself.

Edited April 15, 2021 by Nico Ray