Phaser Isometric plugin

[lewster32]

Can you show me an example? Also, if the player is never likely to go behind any of the floor tiles, you can put them in separate groups and not have to worry about depth sorting - that'll be much faster.

[Jikmo]

Thank you for the suggestion to put the floor tiles in a separate group.  I'll try that in a bit.  For the moment, I'm using topologicalSort, which renders the floor correctly below the player.  However, now the player and the floor are positioned incorrectly in the xy plane, almost as if the anchor isn't set correctly.

 

Here is my demo: https://demo-project-c9-ldurback.c9.io/manOnBlocksTest/index.html  I don't think you have to log into c9 to view it.  The cursors move the character.

 

Edit:  If I try it with a cube instead of a man, the cube is positioned correctly.  https://demo-project-c9-ldurback.c9.io/cubeOnBlocksTest/index.html  However, now I have the problem that even though I've set the pink blocks so that body.moves = false, they still move a bit when you push on them.

 

Also, is there any way to check an isoSprite's body shape?  I had to guess at the xyz dimensions of the cube.  You'll notice that I'm not able to get the pink cubes to line up correctly with the grey cubes.  And check out what happens when the character moves to the bottom corner.  It doesn't look right at all.

[lewster32]

One of the things that looks like it may be confusing matters is that you've set the anchor of all of your IsoSprites to (0.5, 0.2) which is unnecessary - only the game.iso.anchor is usually set to this (which controls whereabout the 0, 0, 0 location lies on the screen). For your case it will be easier to work out where things should be positioned by setting the anchor of all IsoSprites to (0.5, 1) so the bottom is uniform, then you'll be able to position things correctly.

 

For the pink blocks moving, setting body.immovable = true should fix that.

 

Finally, debugging the body will show you as it is (like you're doing) however judging where things are in relation to one another can be difficult in axonometric projections, but hopefully the change to anchors should solve most of your problems with positioning.

[Jikmo]

Ah thank you.  I had been putting random values in there to figure out what "anchor" does, and I forgot that I'd changed it from your example.   I get it now though - it sets the location of the sprite's origin on the image.

Setting body.immovable = true worked like a charm.

[lewster32]

Yeah - in addition anchor adjusts the position of the body too, which is a hold-over of Phaser.Physics.Arcade to keep the functionality of both predictable. I thought about changing the name of the anchor property on the Projector (game.iso) as it could get confusing, and I may still do that as clearly it is causing a bit of confusion!

[Jikmo]

Hi again, lewster.  Thanks for all the help.

 

Rendering a few hundred floor tiles for a map is really slow.   However, I'm never moving them, resorting them, or using them for collision detection.  Is there any way to turn a group of sprites into a single sprite so that the individual parts don't have to be redrawn?

[lewster32]

Are you depth sorting them? If not, they shouldn't be performing any worse than the equivalent amount of standard sprites. If they're floor tiles then generally speaking you'd not need to sort them constantly. You can set cacheAsBitmap = true on the group to flatten it down to a single texture, though the results are mixed at the moment, and you'll be trading off CPU usage for memory.

[Jikmo]

Thanks for the help again.

 

Right, I just needed a way to speed up the drawing of 100s of sprites, nothing to do with your isometric plugin.  Sorry, I realized that after I posted it.

 

How do you know the Phaser and Pixi APIs so well?  cacheAsBitmap doesn't even seem to be listed!

[lewster32]

I spend a lot of time on the Phaser and pixi forums, making games in Phaser and perusing the code on Github; cacheAsBitmap is a property that has its roots in Flash (which I used to develop for) and I saw that pixi added it a while back in one of the commits. Unfortunately the pixi docs are out of date on the website so browsing the source on Github is the best way to see what's available on the current API.

[ivanix]

@lewster32,

 

I just came across this thread.  WOW! Super work!  As a layman coder I started with a simple iso game using tilemaps, knowing performance would suck for anything more complicated, but after seeing your demos, all I can say is wow!  

I just briefly looked at the html source, wondering:  Your iso plugin supports 2.11, any backport for 2.0.7?   also is this canvas and/or webgl compatible?

 

Keep up the fantastic work!

[lewster32]

It should work fine with any recent version of Phaser (2.0 onwards) and yes, it works exactly the same on webGL and canvas.

[clark]

First post on this great work lewster

For the TypeScript dudes, 

The plugin system is awkward as I just found out after weeks of being stuck!  I am sure this library has the following property added to game, but I cannot remember, and even if I am wrong, the principle still applies:
 

this.game.iso

This is the point of failure. I am sure people would agree that phaser-plugin-isosprite.d.ts would be an external file to the standard phaser.d.ts file.  But the problem is that, that accompanying file CANNOT openly add to a class. 
 

phaser.d.ts

export class Game{}

phaser-plugin-iso.d.ts

export class Game{  //error, Duplicate Game    iso: any;  }

https://typescript.codeplex.com/workitem/917

 

 

It just cannot be done it seems. I wrote an issue on Github about it to refresh MS memory. 

So where does that leave us? I am open to any advice. So far as I understand, if it is not going into phaser.d.ts, then, there is no real way to do it which sucks big time. 

[lewster32]

I guess my adding of the iso property to game is a bit of a breach of the whole idea of keeping plug-ins cleanly separated. Are similar problems raised when I change other classes such as overriding Phaser.Utils.Debug#body to allow debugging of IsoSprite bodies? If so I may really need to rethink the way the plug-in integrates with Phaser.

[clark]

Sorry for the delay! 

 

I do not think it has anything to do with your code Lewster. It works and it works well and that is job done I say!  What you have done is clearly valid JS, and for me, the fact that TypeScript cannot appear to handle it is a failure on Microsofts Part at this time.

Keep up the good work!

[edgarjcfn]

Hey guys! First of all, great work on the isometric plugin, @lewster. It's really great!

I'm currently prototyping a game that uses it and because I'm using Typescript, I did some adjustments to the plugin to include Typescript support and I sent you a pull request.

You can see the pull request here:

https://github.com/lewster32/phaser-plugin-isometric/pull/12

And a working prototype using the fork here:

http://edgarjcfn.github.io/pylearn

I would love some feedback!

[lewster32]

Great stuff! I've merged in those changes - elegant and backwards compatible, very nice!

[edgarjcfn]

Thanks! Was my first Pull Request ever!

I'll be using this plugin heavily on my new pet project. Looking forward to collaborating even more

[jazun33]

I noticed something strange as I was playing with the camera follow example. When the player is moving diagonally there appears to be some kind of vibrating or shaking as the blue cube moves. It looks like it only happens as the camera is following it along the y axis (the canvas' y axis, not the game's y axis). If you straighten the movement out so the blue cube moves directly up and down or left and right, there is no shaking at all. Has anyone else noticed this?

[lewster32]

There's a little bit of jitter in all directions depending on your framerate and whether it's using canvas or webGL - it's almost certainly a combination of rounding and when during the main loop the camera is updated. I'm sure it's fixable, but in the mean time you may get better results from using a smoothed camera routine like this: http://jsfiddle.net/lewster32/5a866/

[jazun33]

I get a 404 when I click your link, Lew. But what you're saying makes sense.

[lewster32]

Edited, sorry, it'd put a space in the link! Basically, the routine in that fiddle was what I used in my SpeccyJam entry: http://rotates.org/moonunitz/

[ringsheep]

Hi! I've just started learning Phaser and I want to create an isometric quest with complex level geometry and big number of objects. How can i manage all this objects' position? For example, if want to change the position of an armchair somewhere on level - then i have to get through all the spagetti code and find it's coordinates, then calculate coordinates needed for the new position - that's really tough! And if I have hundreds of unique objects on my level, it becomes impossible to work with this. Are there any ready-made suggestions or systems which can control the object's position and allow to change it easily? Otherwise, what can i do myself to solve this problem?

[lewster32]

Really all I can say is structure your code in such a way that you don't have to trawl through spaghetti in the first place! Typically, working to a grid makes things a lot easier, so you could create a world that's made up of distinct 16x16x16 cubes and make sure everything fits nicely to that grid, so objects are always at least that size, or multiples of that size (i.e. 16x16x32, or 32x32x32 or whatever) which takes much of the guesswork and insanity out of positioning items in your world.

[Ningenbitto]

Thank you very much for the info! someone here has already tried?

[lewster32]

Not that I'm aware but the example on the plug-in homepage kinda demonstrates the principle: http://rotates.org/phaser/iso/