Jump to content

Can Phaser do games like this?


Recommended Posts

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!



Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...