Tiled Backgrounds?
Monkey Forums/Monkey Beginners/Tiled Backgrounds?
| ||
| Just curious, does anyone have a good method for a multi-layered tiles background? It seems that modern software/hardware methods are not geared towards tile maps and displaying a couple of thousand 16x16 sprites it a little crazy. I'm currently just looping through the visible portion of my map and throwing sprites onto the screen and using Scale(scaleX,scaleY) to upscale the 20x15 tile screen to fit my resolution. This is OK when using a single layer, but my current game requires at least 4, possibly 8 layers for the background only, then theres character and enemy sprites on top of that. I'm not doing anything special with the background, so the tiles don't need to get updated much at all. Does anyone have an example of a good method to display a tiled background at a decent frame rate? What can I do to speed up the process? for example, can I render the whole level to a giant image and just scroll the single image (per layer) around at a decent speed? |
| ||
| Diddy is free and supports .tmx maps made with Tiled Map Editor, multiple layers and object layers are supported though I can't confirm how many before performance is affected, as well as isometric maps etc https://code.google.com/p/diddy/wiki/TileEngine The huge single image might work depending on the target image sizes, but it's not the best idea. You could design your levels on one massive canvas you find it easier than designing tiles, then chop it into tiles and update/display as per a normal tilemap. |
| ||
| I would suggest you use an atlas if you aren't already. Essentially you pack all your images (or your tileset at least) into one big image, then copy sections of it rather than the whole thing. The benefit is that the graphics engine will bundle all (or most) of your drawing commands into one until you change to another texture. http://en.wikipedia.org/wiki/Texture_atlas Some forum posts: http://www.monkey-x.com/Community/posts.php?topic=8414 http://www.monkey-x.com/Community/posts.php?topic=5279 http://www.monkey-x.com/Community/posts.php?topic=6057 Diddy example: http://code.google.com/p/diddy/source/browse/examples/SpriteAtlas/spriteAtlas.monkey |
| ||
| So is there any difference between Loadimage with frames and Loadimage as a whole image and using grabimage to get the frames? My current tile sheep is one large image, and i'm loading the tiles like so -
tiles = LoadImage("tileset.png",16,16,256,0)
with x1,x2,y1,y2 being one tile either side of the screen For y = y1 To y2 For x = x1 To x2 t = LevelMap[x+400*y]-1 s = BackgroundMap[x+400*y]-1 Local tx = (x*TileSize) - LevX Local ty = (y*TileSize) - LevY ' No parallaxing (yet) so the background can go directly behind the foreground If s >= 0 Then DrawImage(tiles,x,y,0,TileSize,TileSize, s) If t >= 0 Then DrawImage(tiles,x,y,0,TileSize,TileSize, t) Next Next I'm getting around 55fps. Anything I can do better? |
| ||
| I think the FPS you're getting is more likely to be caused by the computer screen refresh rate than anything else. Is it very different if you do not draw any image on screen? Have you tried with SetUpdateRate(0). Grabbing a subimage from another image and drawing it is the same as drawing a portion of an image. No different performance involved. Now, if you're using HTML5, be sure to draw all images with color 255,255,255 or it'll slow down your rendering tremendously as HTML5 does not have proper support for "tinting" images. |
| ||
| on some projects i used to draw 4 layers out of 16x16 tiled images without any performance problems, even when i zoomed out so that 1 tile is then like 4x4 or something (at least on glfw this still was smooth) Draw layer after layer, and use only 1 image per layer, so that you only do draw calls with the same image in a row, instead of draw all layers of a tile in 1 run. seems like changing the texture is a bottleneck, and like ziggy said try to avoid colored images on html5, or if you want to use colored images on html5 check out the mungo-fork forums here and how to get the mungo html5target, wich is alot faster at all and dont got any problems with setcolor =) |
| ||
| ziggy wrote: Now, if you're using HTML5, be sure to draw all images with color 255,255,255 or it'll slow down your rendering tremendously as HTML5 does not have proper support for "tinting" images. ziggy Could you post example for this? |
| ||
| if yóu never use "SetColor" in your Project then you dont Need to worry about this, if yo do so, then make sure to make SetColor(255,255,255,255) just before you doin your render calls |
   |