Basic Tiled Game - Performance Enhancement

[spider]

Hi guys,

 

I'm trying to create a basic tile scroller. At the moment, I'm creating all the tiles as sprites and then laying them out in a grid. Seems a little silly to have these "smart" sprites making up a tiled background map. Is there not some kind of "dumb" sprite that renders ultra-quickly that I should be using instead to render a tile?

 

I'm also creating my worlds in a 2 dimensional static array of numbers as the map. Is this the smart way to do it?

 

Thanks,

 

Spider

[xerver]

 

 

At the moment, I'm creating all the tiles as sprites and then laying them out in a grid. Seems a little silly to have these "smart" sprites making up a tiled background map. Is there not some kind of "dumb" sprite that renders ultra-quickly that I should be using instead to render a tile?

 

If your background tilemap is static you have a couple options:

 

1) You can use a render texture and render the background map to that and display it all as one sprite (or multiple sprites if you have a large map and need to break it into chunks). If you do that I would then hide (visible = false) the container of the tile sprites so they are no longer rendered and only your background sprite and render texture consume any processing time.

 

2) You can draw each of the tiles to a canvas, and use that canvas as the texture for a single sprite (or multiple chunked ones). This way you don't even need to create sprite objects, only manage a canvas or so.

 

 

 

I'm also creating my worlds in a 2 dimensional static array of numbers as the map. Is this the smart way to do it?

 

The "smart" way to store your tilemap data is whatever way works best for you. Single dimensional arrays are what many tile editors do, but 2 dimensional is easier to write by hand; just depends on whatever you want.

[spider]

Hey there, 

 

Thanks for your reply.

 

2) You can draw each of the tiles to a canvas, and use that canvas as the texture for a single sprite (or multiple chunked ones). This way you don't even need to create sprite objects, only manage a canvas or so.

 

1. Seeing that I'm a newbie to this, option 2 seems simpler. Can you please point me to a link? 

2. Does GB offer paid support? Can you please PM me more information ([email protected])

[xerver]

Actually since you already do a tilemap with sprites, option 1 is easier:

// your tilemap containervar mapContainer = new PIXI.DisplayObjectContainer();// ... add all the sprites to the container// render the tilemap to a render texturevar texture = new PIXI.RenderTexture():texture.render(mapContainer);// create a single background sprite with the texturevar background = new PIXI.Sprite(texture);// add the background to the stage// (notice I didn't add the mapContainer to the scene graph)stage.addChild(background);

As far as option two, you can see how I do this in my game engine via my _preRender routines: https://github.com/grapefruitjs/grapefruit/blob/master/src/tilemap/Tilelayer.js#L216. Since I support large maps it is split into chunks each of which are rendered to a separate canvas and used as a texture for that chunk of the map.

 

I'll get back to you about paid support.