Jump to content

Scaling an already finished phaser game. How to?


kriket
 Share

Recommended Posts

So I made a big-ish game in phaser hoping that ScaleManager.SHOW_ALL will come to my rescue later on to scale ALL of the game in one line of code. However, I have found that its not as easy (even though it should be).

After doing a lot of research below are a few ways I found to scale ALL of the game:

1. One method is scaling every game sprite individually but that means TWEENS will give you headaches (and my game does have a lot of sprites being tweened all over the place). This method is very painful for a big game like mine with many sprites and you have to scale everything by hand.

2. Resizing the canvas.

var width=window.innerWidth,
    height=window.innerHeight,
    dpr=window.devicePixelRatio || 1;


var game = window.game[NAMESPACE].game = new Phaser.Game(1024, 480, Phaser.AUTO, 'gameDiv');

var mainState = {

    preload : function () {
        game.scale.scaleMode = Phaser.ScaleManager.RESIZE ;
        //game.canvas.style.width=width+'px';
        game.canvas.style.height=height+'px';

    },

This sounded promising but I am not able to get the scaling done properly as you can see here at testing2.site44.com (Pls check source in dev tools)

It isnt scaling assets at all. 

 

3. Resizing the game in dev tools scales the entire game properly sometimes (including all tweens too). So I am sure there is a way of doing this. I just dont know what it is. :(

 

 

So fellow devs, is there any way to scale a fully-finished game as a whole with a method which is as painless as possible? 

 

 

 

Link to comment
Share on other sites

This is what I use to automatically scale and fit to the window size.  

var Game = {
  w: 768,
  h: 1024
};

Game.Boot = function(game) {
  this.game = game;
};

Game.Boot.prototype = {
  preload: function() {
...
    //Scale Image to Fit Window
    this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    this.game.scale.maxHeight = window.innerHeight;
    this.game.scale.maxWidth = window.innerHeight*(Game.w/Game.h);

  },

...

 

Here's a game I used it in, as an example:  http://divideby5.com/games/rogueslasher/

 

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...