Jump to content

Pixi.js for a Childrens Book App Strategy


Recommended Posts

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.

 

 

  

scene7-raccoon01.png

Link to post
Share on other sites

 

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. 

Link to post
Share on other sites

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);
Link to post
Share on other sites
  • 1 year later...

Developing a children's book with Pixi it's a really great job! Such technologies are not only cool but also very useful, many similar children's applications and books, starting from the smallest age for development, entertainment, and language learning. I am interested in this topic and recently wrote a work with the help of this service https://uk.edubirdie.com/top-writers and received a lot of insights and useful information and I agree that technology is very important, they make our life not only brighter but also easier.

Thank you for your work

James

Edited by James B. Gilbert
Link to post
Share on other sites
  • 11 months later...
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.

 

 

  

scene7-raccoon01.png

It's so cool!!

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.

×
×
  • Create New...