# Tom Atom

Members

594

6

## Reputation Activity

1. Tom Atom got a reaction from Taz in [Phaser] Brick Stacker
@NumbOfAthma - problem of physics engines is in how they work. If you have two bricks - one on top of other, then gravity sinks upper brick into bottom one. Physics engin then solves this penetration and repels birck from each other to restore position befeore they started to penetrate. But it can happen, that another new penetrations may appear (with floor, other bricks on side, ...) For this physics engines usually have several iterations for solving positions per frame.
Problem is, that with pile of bricks you have really lot of interactions betwwen them. With 5-6 bricks, that should stay still, usuall number of iterations per frame is not enough. Bricks start to strangely slide on top of each other and so on. When bricks are falling and should bounce from each other, then everything is OK, but not when it should be static and stable... so I had to come with another solution...
Fortunatelly, I drink a lot of tea! It has no impact on my skills, but I have lot of empty boxes, that look like brick Simply, when will such brick fall off your table? When more than half of it is over edge. If brick above is too much left over edge or too much right (see first row on picture) it will fall. Then I used boxes do simulate more complex situations and I found, that for game it would be enough to take brick N and: take all bricks above current brick and sum their parts to the left and to the right from edge of brick N. See second row. On series of pictures on right you can see increasing tower one by on. In step 1 and 2 brick is still OK, because more of the mass is still above bottom brick. When 3rd brick is dropped, mass on right is higher then on left and all three bricks will fall. I do this check for every brick in pile - always suming all bricks above it as described, because point of break can be at different places.

This is fake physics, but it looks good. When I find point of instability, I rotate upper part of tower around it by 5-10 degrees and then I switch bricks that should fall into P2 objects to just let them fall nicely. Because it is already rotated and gravity continues fall immediatelly, it does not suffer from looking like elastic soft bodies (which would if it was not rotated ... because of interactions - iterations problem above).
Next thing: only visible part of tower is calculated - it would be unfair to break it two or three screens below display when player can not see it. Tower below screen is just recorded - no actual bricks are there. When game ends and camera scrolls down, sprites for bricks are placed at correct positions according to recorded data.
2. Tom Atom got a reaction from nimohe in Nine Patch Plugin for Phaser
Gap problem is really rounding / rendering problem. Part of it can come from rounding and part from way in which OpenGL works (if rendering with WebGL) - with bilinear filtering pixel color is equal to color of pixel in texture only if taken from the very middle of the pixel (https://en.wikipedia.org/wiki/Bilinear_interpolation).

Even the tilemaps in Phaser are prerendered (only the visible part) to:
1) increase performance,
2) avoid these problems

You can scale the prerendered image too, but it is not as nice as if growing in size (not scaling) in your solution. I think, that to achieve this you can:
1) prerender image,
2) fake growing with 4 sprites and croping rectangles - make 4 sprites using prerendered texture and crop them to show only needed part,
3) maybe you will run into the same problems with gaps again if combined with scaling, but you can avoid it by duplicate rendering + overlapping of last column and row for top left part and other parts (if not rendering transparent boxes... it should work)

Hmmm.... you can do ovrlapping in your current solution - if you do not have any complex pattern on your boxes.
3. Tom Atom got a reaction from threeninenineone in Phaser.Cache.getImage: Key not found in Cache.
Hi, call to load does not load asset - it puts it into list that will be loaded later. And this later happen automatically when preload function is finished (in preload you list all assets you want to load) or when you call load.start().

I highly recommend to preserve Boot state separated from Preload state. If your Boot state has only little code, then be happy   - best functions are those, that do their work and are short and easy to read.
4. Tom Atom got a reaction from Umz in [Phaser] Little Plane
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:

5. Tom Atom got a reaction from Umz in [Phaser] Little Plane
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

6. Tom Atom got a reaction from splashshadow in [Phaser] Little Plane
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:

7. Tom Atom got a reaction from splashshadow in [Phaser] Little Plane
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.
8. Tom Atom got a reaction from TrinityCore in Physics P2 BUG!
It is sometimes hard to get on well with Phaser+P2 ... What P2 does is it calculates center of mass and places anchor into it - both your obejcts have x = 500 and both are centered around this point.
In past I had to come up with some solution that allows me to place objects where I want it with anchor which I need. I described it in detail here - it was answer to scaling P2 objects, but solution is complex enough to handle "everything" - scaling, anchoring, positioning:

9. Tom Atom got a reaction from AhmedElyamani in Problem with bitmapfonts on iOS
Any chance this is your issue? https://github.com/photonstorm/phaser-ce/issues/58 (do you use canvas rendering on iOS and Phaser version less than 2.7.6?)

10. Tom Atom got a reaction from old_gamer_adam in [Phaser] Brick Stacker
Hi, just another game made for Gamee was released - Brick Stacker. Your aim is to build as high pile of bricks as possible.

You can play it here: https://www.gameeapp.com/game/zxyM4Kb (it is better to run it on some device with portrait screen)
11. Tom Atom got a reaction from old_gamer_adam in [Phaser] Brick Stacker
@NumbOfAthma - problem of physics engines is in how they work. If you have two bricks - one on top of other, then gravity sinks upper brick into bottom one. Physics engin then solves this penetration and repels birck from each other to restore position befeore they started to penetrate. But it can happen, that another new penetrations may appear (with floor, other bricks on side, ...) For this physics engines usually have several iterations for solving positions per frame.
Problem is, that with pile of bricks you have really lot of interactions betwwen them. With 5-6 bricks, that should stay still, usuall number of iterations per frame is not enough. Bricks start to strangely slide on top of each other and so on. When bricks are falling and should bounce from each other, then everything is OK, but not when it should be static and stable... so I had to come with another solution...
Fortunatelly, I drink a lot of tea! It has no impact on my skills, but I have lot of empty boxes, that look like brick Simply, when will such brick fall off your table? When more than half of it is over edge. If brick above is too much left over edge or too much right (see first row on picture) it will fall. Then I used boxes do simulate more complex situations and I found, that for game it would be enough to take brick N and: take all bricks above current brick and sum their parts to the left and to the right from edge of brick N. See second row. On series of pictures on right you can see increasing tower one by on. In step 1 and 2 brick is still OK, because more of the mass is still above bottom brick. When 3rd brick is dropped, mass on right is higher then on left and all three bricks will fall. I do this check for every brick in pile - always suming all bricks above it as described, because point of break can be at different places.

This is fake physics, but it looks good. When I find point of instability, I rotate upper part of tower around it by 5-10 degrees and then I switch bricks that should fall into P2 objects to just let them fall nicely. Because it is already rotated and gravity continues fall immediatelly, it does not suffer from looking like elastic soft bodies (which would if it was not rotated ... because of interactions - iterations problem above).
Next thing: only visible part of tower is calculated - it would be unfair to break it two or three screens below display when player can not see it. Tower below screen is just recorded - no actual bricks are there. When game ends and camera scrolls down, sprites for bricks are placed at correct positions according to recorded data.
12. Tom Atom got a reaction from NumbOfAthma in [Phaser] Brick Stacker
@NumbOfAthma - problem of physics engines is in how they work. If you have two bricks - one on top of other, then gravity sinks upper brick into bottom one. Physics engin then solves this penetration and repels birck from each other to restore position befeore they started to penetrate. But it can happen, that another new penetrations may appear (with floor, other bricks on side, ...) For this physics engines usually have several iterations for solving positions per frame.
Problem is, that with pile of bricks you have really lot of interactions betwwen them. With 5-6 bricks, that should stay still, usuall number of iterations per frame is not enough. Bricks start to strangely slide on top of each other and so on. When bricks are falling and should bounce from each other, then everything is OK, but not when it should be static and stable... so I had to come with another solution...
Fortunatelly, I drink a lot of tea! It has no impact on my skills, but I have lot of empty boxes, that look like brick Simply, when will such brick fall off your table? When more than half of it is over edge. If brick above is too much left over edge or too much right (see first row on picture) it will fall. Then I used boxes do simulate more complex situations and I found, that for game it would be enough to take brick N and: take all bricks above current brick and sum their parts to the left and to the right from edge of brick N. See second row. On series of pictures on right you can see increasing tower one by on. In step 1 and 2 brick is still OK, because more of the mass is still above bottom brick. When 3rd brick is dropped, mass on right is higher then on left and all three bricks will fall. I do this check for every brick in pile - always suming all bricks above it as described, because point of break can be at different places.

This is fake physics, but it looks good. When I find point of instability, I rotate upper part of tower around it by 5-10 degrees and then I switch bricks that should fall into P2 objects to just let them fall nicely. Because it is already rotated and gravity continues fall immediatelly, it does not suffer from looking like elastic soft bodies (which would if it was not rotated ... because of interactions - iterations problem above).
Next thing: only visible part of tower is calculated - it would be unfair to break it two or three screens below display when player can not see it. Tower below screen is just recorded - no actual bricks are there. When game ends and camera scrolls down, sprites for bricks are placed at correct positions according to recorded data.
13. Tom Atom got a reaction from Raptisha in Resolutions and scaling
Hi, "basic" resolution depends on whether your game should be PC only or PC/mobile. For PC I would use larg resolution without worries. For mobiles 1280x800 or 960x600 (80% of previous) are OK in my opinion.
Scaling is another problem. As there are different aspect ratios most of "simple" scaling methods is not enough. You have to use some clever logic when on some screens you usually see something more or less then on others. Some time ago I wrote tutorial on it here (posted on this forum many times): http://sbcgamesdev.blogspot.cz/2015/04/phaser-tutorial-manage-different-screen.html

14. Tom Atom got a reaction from Umz in [Phaser] Brick Stacker
Hi, just another game made for Gamee was released - Brick Stacker. Your aim is to build as high pile of bricks as possible.

You can play it here: https://www.gameeapp.com/game/zxyM4Kb (it is better to run it on some device with portrait screen)
15.
16. Tom Atom got a reaction from playtwice in Phaser/WebGL flickering on Chrome for Android v53
Hi, testers found some of our games blinking on some devices in Chrome and all of them are blinking in Android's native webview.
For now it seems, that setting "preservedrawingbuffer" parameter to true solves it. When you are creating game you can do this instead of commented line (code taken from TypeScript game class derived from Phaser.Game:
// init game // super(800, 600, Phaser.AUTO, "content", null /* , transparent, antialias, physicsConfig */); super({ width: 800, height: 600, renderer: Phaser.AUTO, parent: "content", transparent: false, antialias: true, physicsConfig: null, preserveDrawingBuffer: true }); @LaczkoUr @Bikas can you, please, confirm, whether it helped?

17. Tom Atom got a reaction from Henrique in Phaser Issues with Typescript - Group Body
Hi, body on group has no sense. Group is just collection of sprites, each of them can have body.
Calling enableBody on group does not set body for group, but says, that you want to automatically set body for all (new or added) sprites in group - from source:
/** * If true all Sprites created by, or added to this group, will have a physics body enabled on them. * * If there are children already in the Group at the time you set this property, they are not changed. * * The default body type is controlled with {@link #physicsBodyType}. * @property {boolean} enableBody */ this.enableBody = enableBody;  If you need more complex body, you have to solve it on physics engine level - like creating complex collider or connecting bodies with joints. These options are not available in simple Arcade physics. Arcade physics is good for platform games or games where you are happy with AABB collisions.

18. Tom Atom got a reaction from LaczkoUr in Phaser/WebGL flickering on Chrome for Android v53
Hi, testers found some of our games blinking on some devices in Chrome and all of them are blinking in Android's native webview.
For now it seems, that setting "preservedrawingbuffer" parameter to true solves it. When you are creating game you can do this instead of commented line (code taken from TypeScript game class derived from Phaser.Game:
// init game // super(800, 600, Phaser.AUTO, "content", null /* , transparent, antialias, physicsConfig */); super({ width: 800, height: 600, renderer: Phaser.AUTO, parent: "content", transparent: false, antialias: true, physicsConfig: null, preserveDrawingBuffer: true }); @LaczkoUr @Bikas can you, please, confirm, whether it helped?

19. Tom Atom got a reaction from samid737 in Phaser wait for certain time using coroutines
As already said, there are no coroutines in Phaser, but... you do not have to code it yourself. You can use looped / repeated / one time events to easily simulate it (http://phaser.io/examples/v2/category/time). You can chain these events to simulate more complex timers like this:
this.game.time.events.add(5000, function () { console.log("Hello after 5 seconds"); this.game.time.events.add(1000, function () { console.log("Next hello after 1 second"); }, this); }, this);
20.
Hi all,
I am here to present Relic : Tale of the Undead Princess, a retro 2D action-adventure game. On the menu : Greenlight, trailers, playable demo and upcoming release !

OVERVIEW The princess is dead... But she is back ! The last hope against evil forces. Help her explore the realm and succeed where all heroes have failed.
Relic : Tale of the Undead Princess is a retro 2D action-adventure game, with a fine blend of exploration, puzzles, secrets and challenges !

GREENLIGHT Support the Princess on Steam > Relic on Greenlight <
I am not asking for "likes" it, but if you enjoy the concept and gameplay, a little help is always welcome. Thanks
More resources on the Steam Greenlight page : trailer, screenshots, features and playable demos.

DEVELOPMENT I work alone and I handle the programming, production, game design, level design, QA and misc art assets ; for everything else (main tilesheets, sprites, music) I license asset packs from artists and asset stores. Full detailed credits in the game.
- Estimated play time : 8~12h, depending on player experience and game completion
- Game size : ~200 playable screens
- Team : myself !
- Development time : ~1 year, from scratch
- Platforms : Windows 7/8/10, Linux (tested on Ubuntu 16.04 LTS)
- Release date : TBC ~ Spring 2017

TOOLS - Tech : The game is developed in TypeScript, using VSCode and SmartGit. It is using the Phaser engine, in its latest pre-CE version, 2.6.2. On top of which I add my own gameplay framework, a json data-driven Entity-Component-System architecture.
- Art & design : I'm using Pyxel for misc pixel art and Tiled for the level design.
- Production : handled with Trello and Toggl, plus a collection of ad-hoc prod assets.
- Shipping : The application is packaged with NW.js to deploy as a desktop executable.

Thanks for reading - I hope you will enjoy Relic : Tale of the Undead Princess !
21. Tom Atom got a reaction from Francisco in Update not being called automatically
Hi, this is Phaser source (file Group.js) for Group update():
/** * The core update - as called by World. * @method Phaser.Group#update * @protected */ Phaser.Group.prototype.update = function () { var i = this.children.length; while (i--) { this.children.update(); } }; So, child's update() method should be called ... unless you have overridden Groups's update() method in your derived class (StudyArea). If your StudyArea has its own update method, then it is skipping default implementation. You can then either copy this simple loop and call children by yourself or call super implementation in the end of your StudyArea update().

22. Tom Atom got a reaction from Umz in [Phaser] JumpTuber
JumpTuber is another simple game made for Gamee platform. On mobile device click on left half of the screen for jump and on right one for move direction change. On desktop use Z and X keys.
JumpTuber is game to promote local youtuber Jirka Kral. During game other youtubers are either helping or trying to hurt him.

You can play it here: https://www.gameeapp.com/game/YFFGD9Q

23. Tom Atom got a reaction from damager in "Shaking" a sprite
Hi, you can create your own tweening function. For shaking you can use "wiggle" function:
function wiggle(aProgress: number, aPeriod1: number, aPeriod2: number): number { var current1: number = aProgress * Math.PI * 2 * aPeriod1; var current2: number = aProgress * (Math.PI * 2 * aPeriod2 + Math.PI / 2); return Math.sin(current1) * Math.cos(current2); } and call it from your game like this:
tweenX.to({ x: this.position.x + aRadius}, aTime, function (k) { return Easing.wiggle(k, aXPeriod1, aXPeriod2); }, true, 0, -1); ... change arguments aXPeriod1 and aXPeriod2 to make different shakes. aRadius gives number of pixels from current x position.
To shake in both X and Y directions add another tween for Y with different periods.
If set for x and y with different periods it in fact does nice sin/cos spline movement in range of aRadius (can be different for x and y tween). If period is high and time short, then it makes fast shake. Nice thing is, that this shake looks more natural than just random offsetting. If time is long then you can have for example randomly moving dust particles. See http://sbc.littlecolor.com/woodventure/ - branches are using it, sunrays are using it and dust particles are too using it... even hedgehog's muzzle is using it :-)
24. Tom Atom got a reaction from Majirefy in VS Code setup with Phaser and TypeScript
Hmmm... I do not have experience with VS Code. It is lightweight, so I think it will be closer to command line compiling, which is easy for TypeScript. Probably using tsconfig.json somewhere in project.
there are some informations on how compiling works and how to avoid "///" references. Your problem looks like some missing path to defs. First try to copy them directly into source folder to see, if it compiles.
25.
Hi, this miniexample based on your code works. For collisions I am not using collides(), but I am adding listener to onBegbinContact signal.
collides works for me only for non-sensor collisions and only if I first enable impact events (call to this.game.physics.p2.setImpactEvents(true);)
Also, be careful when setting rectangle sensor - p2.Box is in p2 units! So, look into my example (size 12 x 12) and look what is on screen. By defaul 20 pixels is 1 unit. To avoid recalculations, use Phaser's add... methods like addCircle, addRectangle, ... it will change pixels o physical units for you.
function create() { this.game.physics.startSystem(Phaser.Physics.P2JS); this.player = this.game.add.sprite( 350, 90, 'pic' ); this.player.width = this.player.height = 50; this.player.tint = 0xFF0000; this.computer = this.game.add.sprite( 90, 90, 'pic' ); this.computer.width = this.computer.height = 50; this.player.tint = 0x00FF00; this.game.physics.p2.enable( this.player, true ); this.game.physics.p2.enable( this.computer, true ); this.computer.body.static = true; var rectangleSensor = new p2.Box( { width: 12, height: 12 } ); rectangleSensor.sensor = true; this.computer.body.addShape( rectangleSensor, 0, 0 ); this.playerCollisionGroup = this.game.physics.p2.createCollisionGroup( this.player ); this.computersCollisionGroup = this.game.physics.p2.createCollisionGroup( this.computer ); this.computer.body.collides( this.playerCollisionGroup ); this.player.body.collides( this.computersCollisionGroup ); this.player.body.onBeginContact.add(function(body, bodyB, shapeA, shapeB, equation) {console.log("collision!");}, this); this.player.body.moveLeft(100); }
×