2D side-scroller with fake depth

[BlueLineGames]

I'm working on a 2D game with Phaser that uses a TileMap with a Tileset image for each of the block types.

 

The game renders like this at the moment:
http://screencast.com/t/pwZNnIeWjsAs

But I'd like to be able to give some fake depth to the blocks so that it has the appearance of depth like "BattleBlock Theatre" or "Blocks That Matter":

http://bluelinegamestudios.com/docs/images/b/b7/Battleblock_View_Style.jpg

If there is a way to have a tile's RENDERED image be larger than the size of the tile (eg: a 96 pixel rendering of a tile that only has collision on 64x64pixels of itself... where I could cram these tiles next to each other every 64px) then I could do this rendering automatically with z-indexes*, but I don't see a way to pull that off in TileMaps.

 

Is there any way to achieve this with Phaser TileMaps?

Thanks!

* by having the z-index increase as we go from left to right and bottom to top

[jmp909]

that's a good question.

 

is there an editor that supports creating TileMaps this way?

 

the link below suggests creating your TileMap with the smaller version of the tiles (ie flat squares front on), and then using a TileSet with the larger version of the tiles to actually be used to display that map

http://www.badlogicgames.com/forum/viewtopic.php?t=11809&p=53028

[Jaspery]

Clever play with tiles layering could produce the illusion of depth, but a map editor to work visually is highly recommended

 

so create an extra layer of tiles without collision, and apply between the collisionTiles and background

 

[BlueLineGames]

I'm not using a map-editor. The maps are generated programatically (eventually Procedural Generation), then persisted. The closest thing to edition is that the user can easily mess with the map.

I managed to get the effect I was looking for:

https://twitter.com/GetElsewhere/status/657654960130293760/photo/1

 

I achieved this by using 5 TileMapLayers:

1. Background
2. Top-right squares (these are only 16x16 of the 64x64 pixels per tile)
3. Top bars (these occupy the bottom 16 pixels of each 64 pixel tile in their set... they render as that top part of the cube).
4. Right bars (these are the left 16 pixels of each 64 pixel tile in their set... they render as the right side of the cube).
5. The front-face of the blocks.

The front-faces are where collision is done.

 

The top-right, top, and, right layers were all shifted using CameraOffset so that they render above and/or to the right. When I change any tile on the map, I update the other 3 layers also, for the same coordinates.

 

Big thanks to rich, drhayes, and jmp909 who all helped me work through a few "gotchas" to get it working.

 

PS: you can follow along the game's dev-progress here, if you'd like: http://twitter.com/getelsewhere

[jmp909]

glad it's going well

 

can you show what your tileset for this is please? and i don't quit understand what the top-right squares are here. can you show them isolated (or highlight one in green etc)?

 

thanks

J

[Skeptron]

Be careful, 5 layers is quite consuming.

 

And also, it would greatly improve the 2.5D aspect if the player was not walking on the front tiles directly but a few pixels above. Because for now he looks like he is always on the edge, ready to fall.

 

But nice job! GG!

[jmp909]

i think you are going to have problems when the player jumps up.. will he be underneath or in front of the tiles (z-wise) ?

 

unless he can't jump

 

 

[BlueLineGames]

Yeah, the dude on front-edge of the block can be tweaked probably pretty easily. Either by adding 8px of transparency to the bottom of his image or just tweaking hit-boxes, etc.

He does jump, but he just bops his head on the block above him for now (which looks normal because he's on the very-front). I'm not going to worry about shadows and extra depth issues just yet... I figure I can tweak those at the end.

 

Here are the tilesets I use for now (not including bg layer):

Front: 

 

Top-right:

Top:

Right: 

 

That works out really well so far, but would be annoying for an artist to work with. My guess is that I'll eventually edit those to all come from the same image (so the artist would draw a cube the normal way) and then use tileMargin/tileSpacing to chop up the image as I need.  ...but that's for a later date also.

 

Btw: the front-faces of the tiles are from kenney.nl public domain images... the other pieces I just made in paint by chopping stuff up.

 

 

I get very little time to work on this project since it's a side-project sort of (we normally make digital versions of board games for Steam: http://store.steampowered.com/search/?developer=BlueLine%20Games ) so I literally spend about one hour on most weekdays (average about 4 hrs a week). I'm trying to get a really basic minimum-viable-game in a few more months (looks like June at this pace :-/) and then I'm going to go back and make it look better, and expand the heck out of the content if the game seems to show any promise in Alpha testing.


Thanks for all the help, everyone!