Tips on isometric games with PixiJS

[pxzin]

Hi people, 

I'm about to start a personal project and I'm thinking to go with pixijs. Is about a city builder isometric-game. I would like to know if anyone have any tips, suggestions or can point me directions of the problems I may find ahead.

Several years ago, I did a lil project with PixiJS for my graduation and I remember have a good time with it. But couple years before I had a real pain trying to come up with a isometric game in Construct 2, so I'm quite afraid of follow up with this genre.  

Any advice will help, since I'm starting blank.
Thank you all.

[ivan.popelyshev]

Hello!

There's one small isometry demo:

https://pixijs.io/examples/#/plugin-projection/iso-basic.js

However that's not how I usually do isometry. Usually I just use Y scaled by 0.5. You even don't need those "x+z" "x-z" coordinates, if you want to make tiles - take whole two-dimensional array and remove "odd" cells. Like, use only "black" cells of chess board. Then the only problem is to detect which tile is under mouse, but then it will be the only place where you have a isometry math. Everything else is just "x=x'; y = y' / 2"

I have many things to tell about isometry: how to sort elements, how to make walls on tiles and intersect/sort them too, but I want to sleep. Try to do something, then I'll give you more info.

and Welcome to the forums!

Edited January 19, 2020 by ivan.popelyshev

[pxzin]

5 minutes ago, ivan.popelyshev said:

I have many things to tell about isometry: how to sort elements, how to make walls on tiles and intersect/sort them too, but I want to sleep. Try to do something, then I'll give you more info.

I'll sure like to talk about that in the future!! 

Ok, so I'll start to try it and came back when I get something to show. 

Thank you very much.

[d13]

This was developed with Pixi v4, but should still work with 5:

https://github.com/kittykatattack/tileUtilities

[dpaola2]

Hello fellow indie devs,

I am knee-deep in a new game and would love any and all resources you have on doing isometric rendering with pixi. There is precious little content out there on the web on this topic!

I am currently doing it as in that example - which confuses me, since most pre-created game sprites and artwork is already rendered isometrically! (Is this even the right way to say it?)

My understanding is that the example game is just a 2d game with the camera perspective changed - scaling the Y so that it renders from a different angle. How would I use something like these assets in such a layout? https://jpcu.itch.io/isometric-kitchen-sprites

My prototype uses the example as a template, but I render the character sprites with the equal and opposite scaling to make it look like they are not rendered isometrically (since...they're not). Attached is a screenshot of what I am talking about. Hopefully I am being clear. It really seems to me like there is probably a better way, I just cannot for the life of me find anything on the web on this topic.

Thank you in advance for any help you're able to provide.

Edited August 5, 2020 by dpaola2
more detail

[ivan.popelyshev]

well, there's diagonal "texture.rotate" options but its experimental, no one use it  https://pixijs.io/examples/#/textures/texture-rotate.js

Honestly, in your case its better to make everything manually. Isometry to world is just "y_screen = y_world * 2" , simple equation, just move sprites accordingly and it'll be fine.

[dpaola2]

For anyone else looking on the topic, I found this resource to be really useful: http://clintbellanger.net/articles/isometric_math/

I had to be careful and not use the dimensions of the sprite file itself but the actual dimensions of the tile I wanted to use within that file (which in my case was slightly smaller).

Thanks for your response, I might have more questions in the near-term future