[Phaser] Little Plane

[Tom Atom]

Hi, Little Plane is another one-button game made for Gamee platform. Dodge dangerous pillars, pass through deadly tunnels and collect money.

Game was made in Phaser and uses P2 physics.

    

Play it here: https://www.gameeapp.com/game/5IsYwla

 

[PhasedEvolution]

How is the performance in mobile? Did you test it?

[Tom Atom]

4 minutes ago, PhasedEvolution said:

How is the performance in mobile? Did you test it?

I tested it on iPad (iOS) and Asus Memo Pad (Android) and it works well. It is running in Gamee framework and they are doing additional tests on other devices.

From game complexity view:
 - pillars are pooled and when out of screen they are returned back into pool. New pillars are generated on the fly and only very short distance ahead exists,
 - plane has compound collider made of three ones,
 - for particles (smoke, money) I do not use standard Phaser particles, but my particle library. But its performance should be more or less the same,
 - background is scrolling infinitely, but I do not use TileSprite as I had performance problems with it on iOS. Instead there are two sprites for every background scrolling piece and I update their positions and crop rectangles.

[PhasedEvolution]

3 hours ago, Tom Atom said:

I tested it on iPad (iOS) and Asus Memo Pad (Android) and it works well. It is running in Gamee framework and they are doing additional tests on other devices.

From game complexity view:
 - pillars are pooled and when out of screen they are returned back into pool. New pillars are generated on the fly and only very short distance ahead exists,
 - plane has compound collider made of three ones,
 - for particles (smoke, money) I do not use standard Phaser particles, but my particle library. But its performance should be more or less the same,
 - background is scrolling infinitely, but I do not use TileSprite as I had performance problems with it on iOS. Instead there are two sprites for every background scrolling piece and I update their positions and crop rectangles.

That is nice! Very nice really... One of the many difficulties that I have faced when I converted my game to mobile was scaling. I mean I still have that. Could you please help me out with that? How do you do it? In terms of velocity and gravity mostly...

[Tom Atom]

1 hour ago, PhasedEvolution said:

One of the many difficulties that I have faced when I converted my game to mobile was scaling

 Games for Gamee have always fixed base size 640 x 640, so scaling is very easy - it is scaled to fill given square space on page (what is scaled is not game or individual sprites, but whole game canvas after game frame is rendered into it). But as it is evolving they canceled height limit and new games can be 640 x whatever.

 Generaly, scaling strategy should be choosen based on your game. From my experience, one of decision points is whether game is on one screen or whether it is scrolling. For one screen games scaling I wrote article some time ago (http://sbcgamesdev.blogspot.cz/2015/04/phaser-tutorial-manage-different-screen.html). Shortly, I add some areas that are sometimes displayed and sometimes not - depends on screen aspect. If game is scrolling in one direction only, then I scale non-scrolling dimension to fit window, keep scale facotr and recalculate game size in scrolling dimension to fit window after the same scale factor is applied.

 

[PhasedEvolution]

Hmm I see.  Well I made a simple test scrolling game ( I will still read your article). It is supposed to be in landscape mode. I had this code.

game_width = window.innerWidth * window.devicePixelRatio;
game_height = window.innerHeight * window.devicePixelRatio;

if(game_height > 800) {
    var div = game_height / 800; ;
    game_width = game_width / div;
    game_height = 800;
 }

scaleRatio = window.devicePixelRatio / 3;

game = new Phaser.Game(game_width, game_height,Phaser.CANVAS,"game",null,false,false);

Is it any good?

I wasn't sure how to apply this to sprites but I did this; and for gravity and velocity and discovered I had to scale them as well... how?

sprite.width = (game_width * 0.10) * scaleRatio;
sprite.height = (game_height * 0.18) * scaleRatio;

var gravity = 300; // this is a fixed value but should I scale it somehow?
var velocity = 100; // same for velocity?

 

[Tom Atom]

On 4. 1. 2017 at 10:03 PM, PhasedEvolution said:

I wasn't sure how to apply this to sprites ...

What I will write here is how it works for me best - other people may have their own ways. It will be example of horizontal scrolling game and explanation will be applied to this type of game.

 Let's say we have basic resolution 800 x 600 and browser window is 1200 x 700. Grey rect is browser window and blue one is our basic game resolution.

 Besic resolution for me is mainly best resolution from game design point of view. As we are making side scroller, it is ok for us if player can see a little bit more or less to the right. On the other hand we have no extra content to display vertically. So, we want to fit our game into window height primarilly and see what happens to width. First, we calculate vertical scale:
 scaleY = window_height / game_height ... 700/600 = 1,1667 in our case,

 If we scaled game uniformly, what would be its scaled width? It would be 800 * scaleY = 800 * 1,1667 = 933 pixels.
 But window width is 1200 ... we want our uniformly scaled game to fill entire window, but if we scale 800 x 600 by 1,1667 we only get 933 x 700.

 So, we have to consider different game size than 800 x 600 to pass into Phaser. We know, we want to fill 1200 pixels wide window after 1,1667 scale. So our game has to be 1200 / 1,1667 pixels wide ... 1200 / 1,1667 = 1028 pixels (rounded down).

 When creating game, pass 1028 x 600 instead of 800 x 600. Now you game will look like this:

 solid area is original 800 x 600, but together with stripped part it is 1028 x 600. We still do not fill entire window. Now, Phaser scale modes come into play. Following picture is from my book, where is full chapter related to scaling horizontal endless runner game (https://gumroad.com/l/CZuhn). Our current state is in fact NO_SCALE:

 Red rect is game, blue is window. Beside these modes, Phaser also has USER_SCALE that allows you to set custom scale for both x and y.

 As you already recalculated width, you can now simply use EXACT_FIT. It will not deform your game, as you adjusted its width, so it will scale uniformly.

 All these modes scales whole game canvas after it is rendered! Do not scale individual game objects, gravity, velocities, etc. or you will get lost quickly. You do not need it - your game is now 1028 x 600 (originally it was designed for 800 x 600). Y dimension did not change - no reason for changing gravity, height of sprites, etc. In X dimension you can now see more of the level to the right, but again: no reason to change velocities, sprite scales, etc.

 The above is simple example - we are calculating new game dims before game is created. But you can make it all dynamic (which is how it is made in that mentioned book). Phaser tells you when window size is changed and you can handle it. Look at Goblin Run game here: http://sbc.littlecolor.com/goblinrun/ (it is game created in book) and try to resize browser window - game will dynamically match it ... even very crazy dimensions like this:

 

[PhasedEvolution]

23 hours ago, Tom Atom said:

What I will write here is how it works for me best - other people may have their own ways. It will be example of horizontal scrolling game and explanation will be applied to this type of game.

 Let's say we have basic resolution 800 x 600 and browser window is 1200 x 700. Grey rect is browser window and blue one is our basic game resolution.

 Besic resolution for me is mainly best resolution from game design point of view. As we are making side scroller, it is ok for us if player can see a little bit more or less to the right. On the other hand we have no extra content to display vertically. So, we want to fit our game into window height primarilly and see what happens to width. First, we calculate vertical scale:
 scaleY = window_height / game_height ... 700/600 = 1,1667 in our case,

 If we scaled game uniformly, what would be its scaled width? It would be 800 * scaleY = 800 * 1,1667 = 933 pixels.
 But window width is 1200 ... we want our uniformly scaled game to fill entire window, but if we scale 800 x 600 by 1,1667 we only get 933 x 700.

 So, we have to consider different game size than 800 x 600 to pass into Phaser. We know, we want to fill 1200 pixels wide window after 1,1667 scale. So our game has to be 1200 / 1,1667 pixels wide ... 1200 / 1,1667 = 1028 pixels (rounded down).

 When creating game, pass 1028 x 600 instead of 800 x 600. Now you game will look like this:

 solid area is original 800 x 600, but together with stripped part it is 1028 x 600. We still do not fill entire window. Now, Phaser scale modes come into play. Following picture is from my book, where is full chapter related to scaling horizontal endless runner game (https://gumroad.com/l/CZuhn). Our current state is in fact NO_SCALE:

 Red rect is game, blue is window. Beside these modes, Phaser also has USER_SCALE that allows you to set custom scale for both x and y.

 As you already recalculated width, you can now simply use EXACT_FIT. It will not deform your game, as you adjusted its width, so it will scale uniformly.

 All these modes scales whole game canvas after it is rendered! Do not scale individual game objects, gravity, velocities, etc. or you will get lost quickly. You do not need it - your game is now 1028 x 600 (originally it was designed for 800 x 600). Y dimension did not change - no reason for changing gravity, height of sprites, etc. In X dimension you can now see more of the level to the right, but again: no reason to change velocities, sprite scales, etc.

 The above is simple example - we are calculating new game dims before game is created. But you can make it all dynamic (which is how it is made in that mentioned book). Phaser tells you when window size is changed and you can handle it. Look at Goblin Run game here: http://sbc.littlecolor.com/goblinrun/ (it is game created in book) and try to resize browser window - game will dynamically match it ... even very crazy dimensions like this:

 

That's awesome ^^ really. I am converting my game into that logic. It doesn't seem to scale correctly :/ :

var game;
var game_height = 300;
var game_width;


function GetGameScale () {

    var scaleY = window.innerHeight / game_height;
    game_width = window.innerWidth / scaleY;

    return game_width;

}

function startGame () {

    game_width = GetGameScale();

    game = new Phaser.Game(game_width, game_height,Phaser.CANVAS,"game",null,false,false);

}

// and after all that ... 
game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;

 

And what about the velocity of the sprites in the x axis? The effect of player movement is nothing more than all other sprites moving past the player...

[Tom Atom]

On 7. 1. 2017 at 4:43 PM, PhasedEvolution said:

And what about the velocity of the sprites in the x axis?

You do not need to change this. Scale modes are applied to rendered frame. It means that 100 pixels distance in your game is always 100 pixels regardless of final scale. In case you changed x dimension of game... ok, you can now see more of the game world, but 100 pixels is still 100 pixels.

 Here in attachment you will find "minimal game" - just press space to jump from platform to platform (F5 reload when dead). It scales dynamically when running. There are monsters placed on some platforms randomly, which move from left to right (with random speed). Their speed is not changing in code after they are spawn. It may only seem to you that speed on screen changed, if tiles are scaled down or up, but it always takes constatnt time for them to move from left side to right side.

SimpleRunner.zip

 Check app.ts file - it is main (and only) code file. If you do not like TypeScript, there is compiled app.js.

[PhasedEvolution]

22 hours ago, Tom Atom said:

You do not need to change this. Scale modes are applied to rendered frame. It means that 100 pixels distance in your game is always 100 pixels regardless of final scale. In case you changed x dimension of game... ok, you can now see more of the game world, but 100 pixels is still 100 pixels.

 Here in attachment you will find "minimal game" - just press space to jump from platform to platform (F5 reload when dead). It scales dynamically when running. There are monsters placed on some platforms randomly, which move from left to right (with random speed). Their speed is not changing in code after they are spawn. It may only seem to you that speed on screen changed, if tiles are scaled down or up, but it always takes constatnt time for them to move from left side to right side.

SimpleRunner.zip

 Check app.ts file - it is main (and only) code file. If you do not like TypeScript, there is compiled app.js.

Nice, worked perfectly. Thank you a lot. Great simple game with your image logo on it

[Vii]

dude, did you make the sound work with cordova as well. I am tearing my hair, as soon as i compile for android sound wont play

[scheffgames]

Cool little game! I'm curious about the revenue model Gamee offers - on the website they said they're working on a revenue share model - any idea if it's up and running?

[splashshadow]

I love you art style! Good game.