PixieJS Isometric Height-Tilemap

[tomcolaa]

Hi,

I'm new to this forum so hi to everyone! :) Currently, I'm trying to build an isometric tilemap that also displays a certain height. Here is a demo: https://www.pixiplayground.com/#/edit/69C1wfNIowvu5wNNccv8w
I have the following problems and maybe somebody could guide me in the right direction.

1. Shadows: When I remove the lineStyle, different heights and the depth of the scene are not really recognizable. I think this could be solved with proper lighting and shadows. Any suggestions on how to implement this?

2. Sprites & Performance: I'm currently calculating all vertices manually and then I draw a PIXI.Graphics-Polygon according to the vertices. Is there a more efficient way to do this. I'm not very experienced with PIXI.Mesh, SimpleMesh or SimplePlane. I wanted to use the PIXI.SimplePlane first but the documentation seems to be wrong... In addition to the mesh generation do you have any tips on how to properly cover the mesh with sprites, soften the edges and smoothly transition between different sprites.

3. Player movements & buildings: In the future I'd like to be able to add players and buildings. This is not so important right now but as the objects will heavily interact with the map, I'm happy if you have some guidance on this topic as well.

Thank you very much!
All the best
Tom

[ivan.popelyshev]

Welcome to the forums!

For debugging its easier to use "nativeLine" setting in lineStyle.

Shadows - oh there are just so many ways to do them that I cant eloborate before you do some research how its done in other. PixiJS is just renderer. You have to look how people do it in any other 2d engines then decide which one will be easier to do in pixi first. Then try another maybe.

Layering might be involved so prepare to go through pixi-layers plugin examples: you can do it manually anyway but plugin will make it faster, however it wont help you if you dont understand how do you want shadows to be rendered in general.

>  but the documentation seems to be wrong

Clone the source code and open it in separate IDE, learn which key combination finds class in your IDE. Docs are limited.

As for which one is fastest - there's no fastest element, its all about balance. IF you go through webglfundamentals or webgl2fundamentals you will get enough info to estimate which elements in pixi do which operations in webgl. SpectorJS helps to look through webgl commands, and chrome devtools give you profiler for JS part to see bottlenecks.

There is isometry engine for pixi, i dont remember its name , but its paid

SUMMARY:

You are approaching territory where PixiJS on itself cant help you. Its just a renderer. It gives you a number of low-level elements, ability to store stuff in RenderTextures, easy API for shaders, and maybe easy layering with plugins. Study how other game do it . Look in games on py-game , maybe they have something like that. You might be lucky enough to meet person who can give you here in PixiJS forums but I would not count on that. I would help you with experiments but I need more info of which approach you want to take - because I really dont have time to spend for several 2-hours lections on each subject.

For now I can give you general info, like basic architecture for PixiJS app: https://codesandbox.io/s/app-architecture-3-j0di5 - make your own Application class and components for it, connect them through runners and "app" dependency.

Edited March 25, 2020 by ivan.popelyshev

[ivan.popelyshev]

@jonforum any ideas?

[tomcolaa]

Hi @ivan.popelyshev,

thank you very much for your answer and some very cool hints. Already implemented nativeLine for debugging - much better now! For others I kind of already wrote my own implementations. I wasn't aware about PIXI.Runners so I build my own Game Class which is observed by GameManagers which implement an Observer interface. I guess it works the same way, not sure if they are as efficient as Runners. I might change my implementation to Runners in the future. Definitly good to know that they exist!

Regarding the shadow: I might start by rendering triangles that face north-east or nort-west a little darker. That should already give a slight impression of depth but I will check other implementations as well.

Regarding the documentation I was going to use the example given in the docs

for (let i = 0; i < 20; i++) {
    points.push(new PIXI.Point(i * 50, 0));
};
let SimplePlane = new PIXI.SimplePlane(PIXI.Texture.from("snake.png"), points);

but the constructor of SimplePlane requires a texture and 2 numbers and not an array of PIXI.Points. Can you maybe provide a correct example for SimplePlane and how to use it. That would be awesome

Cheers,
Tom

[ivan.popelyshev]

Yes, its actually Rope example, not SimplePlane. 

Plane example for v5 should be obvious on your level of comprehension: pass number of vertical and horizontal lines and you' can change vertices. If you  dont like the fact that example in docs is wrong - make PR for https://github.com/pixijs/pixi.js/blob/dev/packages/mesh-extras/src/SimplePlane.ts#L7 . Just let me complain - a few people asked why is it like that but no one cared to actually help the team.

If yuo want more functionality - wait when I port my old pixi-heaven plane, it had more features bacl then and i actually have example of it: https://gameofbombs.github.io/examples- heaven/#/mesh/plane.js .  But , I have like 10 plugins and I'm slowly moving them to new version, usually those that people actually ask about and provide good feedback.

Edited March 25, 2020 by ivan.popelyshev

[tomcolaa]

Ah okay, then  I will try to work with SimplePlane and if I can come up with a short example I will make a PR.
Just wanted to check with somebody who is more experienced with PixieJS.

Thank you for the heaven mesh example. Looking forward when it becomes available in v5. I have not much experience in porting stuff but if I can assist you in any way, let me know

[tomcolaa]

@ivan.popelyshev I created a PR today to fix the docs.

For everbody who is interested I also created a simple tilemap example: https://www.pixiplayground.com/#/edit/0-90FDBNusGDisJw4vIc7

I also made progress with the shadows and textures on my tile-height-map. The code is pretty cluttered but for everybody who wants to have a look: https://www.pixiplayground.com/#/edit/69C1wfNIowvu5wNNccv8w

For me this topic is kind of solved. Couldn't find an option to mark it as solved. If there is, please tell me.