Jump to content

Basic Tiled Game - Performance Enhancement


spider
 Share

Recommended Posts

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

Link to comment
Share on other sites

 

 

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.

Link to comment
Share on other sites

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])

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...