Sign in to follow this  
Laumark

Pixi game responsive for mobile/tablet

Recommended Posts

Hi, I'm developing a small HTML5 game for mobile and tablet.
I am not a very seasoned coder. so I hope somebody can help me out here.

I want to make the game fit the screens of different mobile and tablet platforms. How do I do that the best?
Here is a link to an early prototype of the game, without any attempt for it to be responsive http://christianlaumark.dk/codeShop/shopProto1_5.html.

Thanks in advance!

Share this post


Link to post
Share on other sites

Initialize your renderer with window.innerWidth and window.innerHeight and listen for resize-event. On resize just call renderer.resize(window.innerWidth, window.innerHeight).

After that you have the canvas filling whole screen. Then it's all about what kind of responsivity you want. Easiest way is to scale the game area to fit the screen and add some extra graphics to sides as fillers:
 

//Scale to fit and center
var size = new PIXI.Rectangle(0,0,window.innerWidth, window.innerHeight);
var s = size.width/this.gameArea.width;
if(s > size.height/this.gameArea.height) s = size.height/this.gameArea.height;
this.gameArea.scale.x = this.gameArea.scale.y = s;
this.gameArea.x = Math.round((size.width-this.gameArea.width)/2);

One other way usually used is to have different components each have their own resize-method and the main ui component just gives each component a size they should fit themselves into. For example in your game there's 4 different sections which could each have their own resizes. Something like this:
 

var hideLogo = size.height < HIDE_LOGO_LIMIT;
var split = hideLogo ? 3 : 4;
var componentSize = Math.floor(size.height/split);

this.logo.resize(new PIXI.Rectangle(0,0,size.width, hideLogo? 0 : componentSize));
this.gameView.resize(new PIXI.Rectangle(0,componentSize * (hideLogo?0:1), size.width, componentSize));
this.questionArea.resize(new PIXI.Rectangle(0,componentSize * (hideLogo?1:2), size.width, componentSize));
this.inputArea.resize(new PIXI.Rectangle(0,componentSize * (hideLogo?2:3), size.width, componentSize));

//And in each component the resize method would be something like this
function resize(size){
  this.bg.width = size.width;
  this.bg.height = size.height;
  this.x = size.x;
  this.y = size.y;
  this.text.x = 20;
  this.text.y = 20;
  this.text.style.wordWrapWidth = size.width-40;
}

Then there's also anchor based method where instead of absolute pixel values you align items with values from 0 to 1 in relation to parent. Haven't done those with pixi so cant give a proper example.

You could also scale the game canvas with css to fit the screen, but that might provide ugly results.

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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.