pixijs-userland/tilemap

[QUESTION] Why should I use this plugin ?

Closed this issue ยท 8 comments

Hi, what is the exact use case of this plugin ?
I'm refactoring my TileMap because it takes too much time to render on lowend mobile device.

I'm now studying a solution which will create 20/25 chunks of tiles (each chunk has a different tiles compositon for some diversity) and cache them as bitmap texture to reduce the amount of updateTransforms.

But I'm studying all solutions and I've found this plugin which looks well maintained.

I'm making a isometric 2D game (no Z axis), few tiles, just path, grass, water.

Thnaks for the help

I'm wondering this too, basically, I'm wondering things from an algorithmic and performance perspective, why is it better than just manually drawing tiles, or just caching all of them?

My own solution: I only use 3 animation frames, then when a player moves to a new map, I pre-draw the entire map 3 times with a RenderTexture - so everything is pre-cached, maximum performance

My idea is to separate Tilemap to two parts - High-level and Low-level.
High-level can be

  1. basic window around a camera like in https://github.com/ivanpopelyshev/pixi-starfighter/tree/master/lesson1_5-tilemap and like in RpgMaker MV
  2. chunk map
    2a. chunk map with RenderTextures ( https://github.com/ivanpopelyshev/bombermine-shuffle , canvas demo)
  3. Anything you imagine, oh great algorithmist!

Usually double-FOR to refill when camera goes outside drawn window is enough.

Low-level

  1. Container + Sprite
  2. Graphics.beginTextureFill
  3. this plugin.
  4. your custom mesh.

The idea is that two levels are separate and you can swap algos in the same level without affecting another. You should do it based on the performance of your app, profile it, look at the bottlenecks and then think what is better to use. You do not have to imagine the optimal way for your app in beginning, and maybe even easy things can be enough for you.

This plugin is LOW-LEVEL:

  1. construct array of vertices based on player input. Do not use any extra objects per tile, just a stupid array.
  2. clamp texture coords in fragment shader because usually people do not know that you have to put extra transparent pixels between tiles in spritesheet.
  3. Use several layers in case if user wants many baseTextures (>constant, usually 16) in the same tilemap.
  4. a few features for RpgMaker MV, animated waterfalls and water.

It does not care about your grid: whether its ortho or iso, neither it cares about order of tiles.

I do not claim that this plugin is optimal for your game, however it is better by memory and performance than Graphics.beginTextureFill and Sprite.

In pixi-v5 you can easily write your own mesh constructor using https://pixijs.io/examples/#/mesh-and-shaders/triangle-color.js .

As for "why is it better than RenderTexture", well - for static tiles and if you have enough memory and if you wrote very good memory manager for chunks - its not better, because for both RenderTexture chunks and regular redraw of static vertex buffer the bottleneck will be pixel fillrate.

However, if you add animated tiles - you can write a better plugin based on my code that will be much faster than any cache.

My goal was not to write super-optimal code for everyone, its to provide a balanced low-level solution that can be easily used. When I will have enough time - I will make better plugins based on this one, that cover extreme performance cases I know of.

However my field of work is very big - I own like 10 plugins for PixiJS that people use. My current goal is to make the best vector graphics available in PixiJS - and maybe to port whole Flash API to it. Maybe I'll have better tilemap next year.

Unrelated to the discussion, I think you should definitely start a Patreon, and maybe an accompanying Discord, I really appreciate all the work you put in to Pixi - Forgive me if you are not interested in it at all, but I'm sure many people would like to support your work and maybe additionally commission features - We'd also more easily give feedback

Thank you for kind words!

Dont worry about patreon, we started https://opencollective.com/pixijs and several companies are agreed to sponsor us. 6 months ago. We still are waiting when they pledge :) For now almost all money you see on opencollective are from my clients.

I thought about ways to get some personal budget - I can see it only by selling cheap tools or making my own game like I had before. Maybe start big kickstart on great 2d game constructor or animator. In general I'm not attracted to money.

The problem is that my work and my mind is chaotic - I cant guarantee that I implement something tomorrow or the day after. There are a few projects that I failed to help but took money for them :(

As for discord - there's growing community at https://discord.gg/7Cdv9W , general WebGL&ThreeJS server that was born from russian telegram chats. I help people with other renderers too, but I'm not focused on them as I focused on PixiJS.

@Fr33maan

Thnaks for the help

I like the concept of your game. I want to make something like that, but I'm too depressed to start. The probability that such project will get big audience is very low, but people should not stop trying it :)

I made MMO game with big maps before - back in 2013 i had thousands players online, ~1k-2k on the same map , here: http://gameofbombs.com/

If you want to talk about networking in web games, you can ask find me in discord server i mentioned, my alias is Hackerham.

Honestly you shouldn't put that much pressure on yourself, we asses ourselves really harshly, even if you just add 1-2 changes every month, post 1-2 times, it would be enough - anything else would be a bonus, and from all your help to everyone, I know you'd help more

I forgot what, but I was going to support Pixi on Patreon, then something triggered me, I only supported $1 symbolically, to increase the supporter number - I don't want to support a vague organisation, I want to support you as I know you through your work - and we can reach you, you're always there to help etc.

pixi-layers for example, made pixi 100 times better - I want to support the plugins more than I support the actual project

Another idea, that is a recurring theme, you know about the technology, the bottlenecks, performance issues better than anyone I've seen, you could offer a 1-2 hour "Review" for $50-100 - where you review the Pixi usage of a game, make suggestions for improvements, point out potential bottlenecks etc. - and maybe another "Integration" help, where you more directly help a developer integrate something new to their game

As an example, I'm currently experimenting with lighting, and maybe a fog of war, but it's going slowly, I didn't yet try pixi-lights, unsure whether it will do what I want it to do, how it will merge with my specific usage of pixi, how it could potentially penetrate a very simple fog of war I tested and so on - If such an "Integration" service was possible, I'd get all the answers in an hour :)

My suggestion for a structure: <$10: Symbolical $10+: Supporter - can purchase Review/Integration help $25+ - Answer simple questions by email - $100+ - Answer more technical questions by email - to be honest, with my current budget, I'd probably go for either $10 or $25, but definitely would want to get direct integration help whenever I can

pixi-layers for example, made pixi 100 times better - I want to support the plugins more than I support the actual project

Plugins are glimpse to the future of PixiJS. Even pixi-layers is very specific, not many people use it, only those who have experience with layering and implemented things manually.

1$ for collective is enough for now, we need a the crowd. For later - we have a idea of bounty system - I think I can ask guys to add plugin support to it, I will refer to your post :)

I can write many more plugins, I have many ideas but it will be effective only if we lift up the PixiJS community. For example there're many great ideas in AwayJS but people don't know about it, because their community is smaller than ours.

I didn't yet try pixi-lights, unsure whether it will do what I want it to do, how it will merge with my specific usage of pixi, how it could potentially penetrate a very simple fog of war I tested and so on - If such an "Integration" service was possible, I'd get all the answers in an hour :)

Good idea. Unfortunately I cant help with any lights or layers this month, I'm very busy with vector and want to focus on it.

My suggestion for a structure:

OK, sending it to @GoodBoyDigital right now.