Quantcast
Channel: Pixi.js Latest Topics
Viewing all articles
Browse latest Browse all 3978

How to perform Static Drawing, Optimization Not Needed

$
0
0

I'm trying to task that's easy to handle in Canvas, but which I can't seem to make sense of in PIXI. I thought I was getting close with this ( https://github.com/pixijs/pixi.js/issues/4894 ) and ( https://github.com/pixijs/pixi.js/issues/3251 ), but some of that is now deprecated; also, I'm not convinced this is quite what I'm looking for (or at least maybe not yet the way to do it) and I'd like to see a code example for what I'm trying to do.

What I'm trying to do, and why:

I have an editor, which is on a grid of tiles. The data for that level is stored in a JSON object, which may look something like this:

{
  "room1": {
    10: {
      5: {
        "id": "Enemy/BossGuy"
      },
      6: {
        "id": "Ground/GrassH2"
      }
    }
  }
}

Now, obviously I *could* design an additional data structure on the side and an entire system that tracks every sprite, and another system that renders them, and another system that culls it based on your position, etc, etc...

I most certainly don't want to do that. The data is already there, it just needs to render it. Additionally, the editor doesn't need blazing fast speed, I just want something that won't absolutely kill the memory.

So what I want should look something like this:

// We are INSIDE of the Y-Loop at this point...
for( let x = tileXStart; x <= tileXEnd; x++ ) {
  
  const split = roomData[y][x].id; // assumes we know there's an id here
  
  const sheet = split[0]; // example: "Enemy"
  const spriteName = split[1]; // example: "BossGuy"
  
  // Uses the existing atlas textures and sprite references to render here:
  PIXI.draw( sheet, spriteName, x * 48, y * 48 );
}

What's the correct way in PIXI to do this?

 


Viewing all articles
Browse latest Browse all 3978

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>