Can Phaser do games like this?

[beeglebug]

The game I would like to make has a similar graphics style to the old Zelda games, or more recently, things like Anodyne or Crypt Run (both pictured below).

 

I've spent a week or so now looking through the Phaser examples and source code, and following all the activity on the forum, and i'm still not entirely convinced that I can achieve what I want with Phaser.  Can anyone with more experience than me give me a bit of advice?

 

The main problems I can see all revolve around depth sorting, and the separation of the tile map from the rest of the world. 

 

A game like the ones pictured below will need the sprites to be depth sorted based on the their world position, to make sure things overlap properly as they move up and down the screen. I know that Phaser displays sprites in the order they are added to the stage, and i've seen other forum threads which imply there is no way to change the z-index, is this true?

 

The tile map issue is related. It looks like Phaser tilemaps are rendered separately onto an off screen canvas and then flipped to the main canvas as one large sprite. This makes me believe that sprites cant go behind tiles, so I can't have things like a background layer and foreground layer, with sprites in between, is this correct?

 

Thanks in advance for any guidance, I really like Phaser, and would love to be able to use it if possible!

 

[Mattias]

You can do that, here is an example on how to use groups as layers and set z-indexes:

http://gametest.mobi/phaser/examples/_site/view_full.html?d=groups&f=group+as+layer.js&t=group%20as%20layer

 

I'm new to phaser but it looks very promising so far, I can't see why it wouldn't be able to create something like this.

[rich]

Thanks for the vote of confidence Mattias, but beeglebug really needs depth sorting built into the Group class. It's more complex than you'd think because of the doubly-linked list that Pixi uses internally, but not impossible, and I'm working through some tests at the moment.

[beeglebug]

Thanks Rich, that's good to hear. How about the issue with TileMaps? Is there any way for Sprites and TileMaps to interact in the way I described (things going in front/behind)?

[rich]

If the map is split into layers, yes. Each layer is treated as a single Sprite, so can be literally "layered" where-ever you need it in the display list. There is no automatic sorting for sprites within a group of layers no, that's far too custom/game specific and will need handling manually.

[beeglebug]

Thanks Rich, that sounds like it will probably work for what i'm after. I'll have a more thorough test tonight and see if I can get a demo working. 

 

Do any of the existing examples cover layers and re-organising the display list?

[Ezelia]

I started using Pixi for an isometric gameEngine I'm writing, and the only simple solution I found for z-index issue was to empty the stage and reassign object in the right order for each frame.

this is how my code looked like (mainZMap is a custom objects maps where I sort my display objects).

for (var i = 0; i < _this.stage.children.length; i++) {    var sprite = _this.stage.children[i];    _this.stage.removeChild(sprite);}var mainContainer = new PIXI.DisplayObjectContainer();this.mainZMap.each(function (entity: any) {    _this.updateEntity(entity);    if (entity.sprite && entity.sprite.skin) mainContainer.addChild(entity.sprite.skin);});_this.stage.addChild(mainContainer);_this.renderer.render(_this.stage);

this performed pretty well in both desktop and mobile with about 20000 total tiles (but only ~300 are really displayed each frame with clipping ...etc)

but it consumed lot of memory, so I implemented my own renderer based on some Pixi optimisations

[rich]

Ok in the dev branch is a new version that includes a pretty sweet Group.sort function (and other nice stuff too). There is a new Example showing how to use in (in the Groups category). This build is also using the latest version of Pixi.

[beeglebug]

Rich you are amazing,this is why I love Phaser! I'll give it a try later today and report back.

[Mariusz]

The things I was doing yesterday to achieve the same effect.. Thanks Rich, you're doing an awesome job.