Suggestion, how do this game?

[xyruleib]

I'm developing a game with the Phaser will be for mobile and tablets.

In the black border area have a TileMap and a sprite. The sprite is the character that moves within the TileMap by tween move. He's walk tile by tile.

The TileMap size varies according to the level, with the maximum 10x16.

In red border area has buttons which control the character to walk.

The problem is that when I walk with the character down, it leaves the TileMap and go to buttons.

What do you suggest me for a game like this?

 

[Skeptron]

Do you use the collideWorldBounds property? It should prevent anything from getting out of the map.

 

Doc : https://phaser.io/docs/2.3.0/Phaser.Physics.Arcade.Body.html#collideWorldBounds

[loafer]

When developing for a platform that has potentially limited ressources (like mobile devices), I would suggest to think about implementing the buttons as DOM elements and limiting the phaser canves to the tilemap+sprite area. You would thereby save a considerable amount of ressources and collide world bounds would work as expected.

 

If you don't like this approach, you can define a rectangle with the size of the tilemap+sprite area and check if the sprite overlaps with the rectangle in your update function. If it doesn't, then it moved out of the visible area. For collision you can use the same approach but define the sides a phaser lines and collide with those.

[xyruleib]

Do you use the collideWorldBounds property? It should prevent anything from getting out of the map.

 

Doc : https://phaser.io/docs/2.3.0/Phaser.Physics.Arcade.Body.html#collideWorldBounds

I think this way is not interesting for the character walk down and exit the screen it should appear above.

 

 

When developing for a platform that has potentially limited ressources (like mobile devices), I would suggest to think about implementing the buttons as DOM elements and limiting the phaser canves to the tilemap+sprite area. You would thereby save a considerable amount of ressources and collide world bounds would work as expected.

 

If you don't like this approach, you can define a rectangle with the size of the tilemap+sprite area and check if the sprite overlaps with the rectangle in your update function. If it doesn't, then it moved out of the visible area. For collision you can use the same approach but define the sides a phaser lines and collide with those.

 

I thought about using DOM. But was unable to scale to the TileMap suit the screen size.

I created a DIV and put the game inside (new Phaser.Game). But he leaves out of the div instead of adjusting the size of it.

[loafer]

You have to tell the scaling manager to adjust the game size.

 

When creating the game variable give it the width and height of the div (you might use jquerys .width() function). Then in you create function use this:

            game.scale.scaleMode = Phaser.ScaleManager.RESIZE;            game.scale.pageAlignHorizontally = true;            game.scale.pageAlignVertically = true;            game.scale.setScreenSize(true);            game.scale.refresh();

Phaser will then fit the canvas into the parent element by increasing or decreasing the actual canvas resolution.