search

pixijs / tilemap

Rectangular tilemap implementation for PixiJS
https://pixijs.io/tilemap/docs/
MIT License
290 stars 55 forks source link

Isometric view #82

Open spassvogel opened 4 years ago

spassvogel commented 4 years ago

I'm trying to figure out if this plugin would be good to use for isometric projects. I'm guessing that in principle it's possible to use, we just have to calculate the position of each tile properly.

But then how to deal with z-axis occlusion?

ivanpopelyshev commented 4 years ago

I'm guessing that in principle it's possible to use, we just have to calculate the position of each tile properly.

pixi-tilemap is low-level lib, not something that dictates you coords. It only implements "fill tilemap, clear before refill" idea. No buffer reuploaded needed between refills.

You have to do it anyway because pixi is not a engine/framework. You have to decide which isometric coord you want. I recomment to look through those topics: https://www.html5gamedevs.com/search/?q=isometry&quick=1&type=forums_topic&nodes=15

As for Z-index, I wanted to make a plugin for it, automatic isometric Z-sorting with cutting sprites when needed, but not many people expressed interest in it. Please make your case more clear, post demos, show the progress - maybe i'll help with it.

basic thing is just sort by center-y of tile.

I personally recommend to store tiles in 2D array in cells that have (i+j)%2==0 and ignore others. then coord sytstem wil look like x = i * tileWidth/2, y = j*tileHeight/2. You want to test a point whether it belong to tile - you have to make a formula for diamonds, as an exercise :)

spassvogel commented 4 years ago

Yeah the coordinate thing is not the tricky part I think. The z-index is much more complicated. I'm guessing you would sort this out in the shader, right? But then you have a player sprite, enemies, etc walking around the map they would have to be affected by the z-index too.

I havent started experimenting with isometric yet, mainly because I'm not sure if it's smart to use pixi-tilemap here or maybe use regular oldschool pixi sprites as it seems to offer more flexibility.

ivanpopelyshev commented 4 years ago

z-index on shader in 2d is a problemon its own.

No, i solve it with correct sorting of elements.

ivanpopelyshev commented 4 years ago

Yes, you can start with old-school sprites then switch to pixi-tilemap when you figure out all coords stuff :)