Acceptable frame rate with Tile Map??

cocos2d for iPhone » Programming » cocos2d support (graphics engine)

Acceptable frame rate with Tile Map??

(26 posts) (8 voices)

Started 1 year ago by hm50
Latest reply from araker

Tags:

hm50
Member

Hello all, I have an app with a TMX tile map added. The map has about 5 layers. The map is 10 tiles high, by 1000 wide. My frame rate drops to about 40-45 after loading the map. Also, I occasionally receive a level 1 memory warning only when loading the map on a 3g iphone and experience an occasional hiccup in background music playback. I only have one CCAnimation running (only 3 images). I have my update method running at 10/60fps and have very minimal updating occurring in it, collision detection mainly.

My questions: What should I look at to resolve my issues? Is 40-45fps acceptable? Is the map size to wide? Should I use some sort of pre-loading?

Also, what is the proper method of completely releasing the map when I load another?

Posted 1 year ago #
araker
Moderator

A couple of questions first..
how many spritesheets of what size do you use for your map?
Also did you check if there are memory leaks in your app?

Regarding your frame rate, with 5 layers you're sending 5 * 10 * 1000 * 6 (points per quad) = 300 000 vertices every frame to the gpu. That's a lot of vertex data. So to minimize that, you can split your layers into smaller pieces and only display those pieces that are visible, where the others have their visibility property turned off. If you search this forum, above method is discussed numerous times.

40 - 45 frames/second is still very acceptable though, guessing you're making some sort of platform game.

Out of interest, consists your map mostly of static tiles?

Posted 1 year ago #
hm50
Member

I have one tilesheet. It is 1024X1024, but I use less than half of the canvas at this time, I just haven't scaled it back yet. Does that play a big issue?

It is a side scroller, yes. My map is mostly static, I do some "animation" by switching a few tiles here and there, but I was getting the memory warning prior to implementing those anyway.

As far as memory leaks, I haven't found any as of yet, but I am using just the standard way of adding the tilemap to my layer.

One thing I just noticed was that if I scroll to the end of my map (where it is not finished yet and has just black emptiness) my frame rate jumps right back to 60fps.

I am really only concerned with the initial warning. That (through logging) seems to be when the map loads.

Is the tilesheet completely loaded initially? I assumed only the needed tiles were loaded.

Again, for your interest question, I am mostly adding my animated objects to the tile map layer and not using the tilemap itself, although I do some with tiles, waving flags, blowing trees, etc.

Thanks!

Posted 1 year ago #
araker
Moderator

Your 1024 * 1024 tilesheet (assuming it is a 32-bit png) uses approximately 4 Mb ram. If you can resize it back to 512 x 512 (size 1 Mb) or 1024 x 512 (size 2Mb), you'll save some ram. The whole tilesheet is always loaded yes.

It is to be expected that when nothing has to be drawn, the frame rate increases. Although the increase is more than I would expect.

How are your layers organized, are there many tiles from different layers that overlap? In that case you could be fill rate limited. To end this speculation, can you run your app with the opengl es instrument and look at the tiler and renderer utilization percentages, when the map is in screen and when not. If those columns are not present, click on the info symbol to add those columns.

Posted 1 year ago #
JunoMan
Member

Split your tilemap into lots of smaller sections as your performance is being killed by the amount of vertices being processed as mentioned by araker. Cocos2d just throws them all at the renderer and lets it deal with culling.

This is also the reason why you can't load large maps. There are too many vertices/sprites to render and you get nothing.

I split my 256x128 tilemap into 32x32 sections and only enable the 4 visible sections at one time. My tiles are 16x16 pixels so a section is a little bigger than the screen. My game runs at 60fps now all the time.

You should be able to get away with just splitting your tilemap into horizontal sections.

The other advantage of doing this is you can make your tilemap 'wrap' around by displaying the first section at the end (before wrapping back to the start)

It's a bit fiddly to setup as you have to deal with the different coordinate systems for tilemaps vs layers and take that into account when you position the sections. (although you won't have to deal with this if you just split horizontally)

I subclassed the tilemap and tilemaplayer classes and added my own to hold the list of sections in a layer, changing the tile handling functions to deal with the sections.

While I'm at it.. You can run CCAnimations on a tile as it's just a sprite. I have little animated fires and stuff. I just create an animation using the tiles and run the animation with a repeat.

Also, since I was loading the layers myself, I changed it so each layer's z value was incremented by 2, then I could slide my sprites in between the layers without having to deal with z buffering.

Posted 1 year ago #
araker
Moderator

Another way to split your map is to subclass the tilemap and split the existing layers into CCLayers. Each layer gets a tag which can be used as a array index, which is I guess about the same as the sections mentioned by junoMan. That way you can leave CCLayer as it is.

Posted 1 year ago #
JunoMan
Member

araker: correct, each section is a CCTMXLayer. I assign each of the section layers with the same z value so the sorting works properly.

Instead of using a tag which requires a search every time you use it, I made a CCArray to hold pointers to all the section layers in the existing layer. (This is held in another CCTMXGroupLayer class I created)

TileAt is overridden to add functionality to determine which section holds the tile, and then the CCSprite or guid is retrieved from the right CCTMXLayer section. (same for the other functions)

Posted 1 year ago #
hm50
Member

@araker Wow! 4mb..that's a HUGE hit. I am so glad I checked into this early! Currently only one level in the game. As far as layering, I do have several that unnecessarily overlap, such as, I fill my background layer fully and then draw other layers on top. I was going to ask that question as well earlier. I am sure there are some triple or maybe quadruple stacked layers. Bad idea, I see now.
As far as the map, I made it 1000 wide because I was unsure how long I needed it to be at the time. I am only probably going to use half of that for each map (10X500ish probably less) is that more acceptable/manageable I would really like to avoid the multiple maps for one level thing as I am in-visioning that to be a positioning nightmare! But, should I need to, could I just load the next map based on when the player "crossed" a particular line of tiles?

Would multiple, smaller tilesheets give me any relief? I am guessing it wouldn't help much, and may actually worsen the problem.

@JunoMan I like the CCAnimation idea. I currently just swap certain tiles in my update method using setTileGidAt. Would you mind showing an example of your method? Is it just CCSequenceActions?

I am also wondering how I could better deal with collision tiles. For instance I am using 32X32 tiles, this size fits my needs perfectly except for collisions. Say I have a very small collidable object, only using 8X8 of the 32X32 tile. Currently my player reacts to the collision object "before" he actually collides with the small object. I was hoping I could just resize my collision layer to an 8X8 tileset, but this does not seem possible. Any ideas? I really hate to resize the whole tilemap as I have spent many hours on the current one.

Also, what is the best practice for "totally" releasing a tilemap. When I goto a new level/map, is just [self removeChild myMap] and then release, all I need to be concerned with?

Is there some property or value I could check to see that my map is fully loaded into memory? For a loading indicator..

Thanks to both of you for your assistance!!!

Posted 1 year ago #
araker
Moderator
One more performance tip, disable blending for those layers that are not transparent. That will increase performance when you're redrawing parts of the screen.

Somewhere in your init code
```
//Suppose all your layers are opaque,
for( CCSpriteSheet* child in [map children] ) {		

  [child setBlendFunc:(ccBlendFunc){GL_ONE,GL_ZERO}];
}
```
One more thing about memory warnings, a memory warning is just a indication that the system is low on resources and asks your application if it is possible to free something. This doesn't mean per se that your application is using too much resources. Low resources can also be caused by other applications, like having a lot of open tabs in safari. The memory limit on 3G devices and lower is around 24 Mb, check with the allocations tool to see how much memory you really use.

You could give that tile in your tileset some custom properties (like offset, size and width) and in your collision detection function check if the tile you're colliding with has that gid and then do something with those properties.

Releasing, [self removeChild:myMap cleanup:YES]; would be enough I guess.
If you initialized your map with tiledMapWithTMXFile then it's auto-released, so don't release it yourself.

Loading Indicator, use the search function ;)
Posted 1 year ago #

steg90
Member

Here is how I animate some of my tiles if this helps with the animation stuff?:

// any animations to add...
		CCTMXObjectGroup *objects = [collisionMap objectGroupNamed:@"anims"];
		for( NSDictionary *dict in objects.objects)
		{

			int x = [[dict objectForKey:@"x"] intValue] + 2;
			int y = [[dict objectForKey:@"y"] intValue] + 2;
			NSString *type = [dict objectForKey:@"type"];

			NSString *sp = [NSString stringWithFormat:@"%@.png",type];

			CCSprite *pTemp = [CCSprite spriteWithFile:sp];
			int width = [pTemp boundingBox].size.width;

			CCSpriteSheet *snowmanSheet = [CCSpriteSheet spriteSheetWithFile:sp];

			[self addChild:snowmanSheet];

			CCSprite *smSprite = [CCSprite spriteWithTexture:snowmanSheet.texture rect:CGRectMake(0, 0, 32, 32)];

			CGPoint pos = ccp(x,y);
			[smSprite setPosition:pos];
			[snowmanSheet addChild:smSprite z:100];

			// create the animation
			CCAnimation *snowAnimation = [CCAnimation animationWithName:@"dance" delay:0.2];

			int frameCount = 0;
			for (int x = 0; x < (width/32); x++) {
				CCSpriteFrame *frame = [CCSpriteFrame frameWithTexture:snowmanSheet.texture rect:CGRectMake(x*32,0*32,32,32) offset:ccp(0,0)];
				[snowAnimation addFrame:frame];			

			}

			id rot = [CCRotateBy actionWithDuration:2 angle:360];
			id action2 = [CCScaleBy actionWithDuration:1.0 scaleX:1.5 scaleY:1.5];

			id action1 = [CCRepeatForever actionWithAction:
			[CCSequence actions: rot, [rot reverse], nil ]];  //]]action2, [action2 reverse], nil]];
			[smSprite runAction:[CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:snowAnimation restoreOriginalFrame:NO]]];
		}

Posted 1 year ago #

JunoMan
Member

hm50: sure...

This is my code. I've not converted it to use std tilemaps but you'll get the idea

One caveat is that because each tile uses the same CCAnimation, it runs exactly the same animation visually which can look a bit odd.

Hope that helps. If you get stuck, I could hack up something that doesn't use my class's.

BTW.. don't put tile = [group tileAt:ccp(x,y)]; in the loop.. It's very expensive because of the getchildbytag call.

// Macro to create a CGRect for a tile thats on a tilemap spritesheet that holds 20x16 tiles of 16x16 pixel size
CG_INLINE CGRect MakeTileRect(int idx)
{
	int x = (idx%20) * 16;
	int y = (idx/20) * 16;

	return (CGRectMake(x,y,16,16));
}
#define LAYER_FOREGROUND @"Foreground"

// put this code after you have loaded your tilemap

// Each animated tile has 8 sequential tiles which are sequenced

CCAnimation *flame_animation = [CCAnimation animationWithName:@"flame" delay:0.05];
for (int i=0;i<8;i++)
{
	MyTileLayerGroup *group = [tilemap layerGroupNamed:LAYER_FOREGROUND];
	MyTilelayer *layer = [group getLayer:0];

	[flame_animation addFrameWithTexture:layer.texture rect:MakeTileRect( 3*20 + i)];
}

{
// MyTileLayerGroup is the same as a CCTMXLayer
	MyTileLayerGroup *group = [tilemap layerGroupNamed:LAYER_FOREGROUND];
	CGSize s = [group mapSize];
	for( int y=0; y<s.width;y++)
	{
		for( int x=0; x< s.height; x++ )
		{
			unsigned int gid = [group tileGIDAt:ccp(x,y)];
			CCSprite *tile;
			switch (gid-1)
			{
				case 3*20 :
					tile = [group tileAt:ccp(x,y)];
					[tile runAction:[CCRepeatForever actionWithAction:[CCAnimate actionWithAnimation:flame_animation]]];
					break;
			}
		}
	}
}

Posted 1 year ago #

hm50
Member

Thank You all!

@araker That is how I am removing my map, that's good news. Also I will add the optimization you suggested.

@steg90 and @JunoMan Thank you for your animation tips!!

Again Thanks To All!!

Harv

Posted 1 year ago #
edge17
Member

When doing large tilemaps such as this, are you programmatically creating it or are you using a program like Tiled to create a TMX file? Seems kinda impractical when you need to deal with a lot of layers

Posted 1 year ago #
frilla
Member

I have some performance problems with a tilemap that's 64x64 tile of 32x32pixel so I would like to try this technique of splitting up the layers of a tilemap into sublayers and only show the "visible" sublayers. I've read a few threads on this, including this one, but I'm not clear on the details of how to do it yet.

Another way to split your map is to subclass the tilemap and split the existing layers into CCLayers. Each layer gets a tag which can be used as a array index, which is I guess about the same as the sections mentioned by junoMan. That way you can leave CCLayer as it is.

By this, you mean that you have a new MyTileMapClass (subclass of tilemap) that instead of holding CCTMXLayers, now holds many CCLayers, each representing a sub-section of the layer? Then you play on the CCLayer's visibility depending on if it's in the screen or not? What do you mean by "That way you can leave CCLayer as it is."?

I subclassed the tilemap and tilemaplayer classes and added my own to hold the list of sections in a layer, changing the tile handling functions to deal with the sections.

By this, you mean you have MyTileMapClass (subclass of CCTMXTileMap) which contains many MyTIleMapLayer (subclass of CCTMXLayer)?

Maybe there's many ways of doing this, but I would like some pointers at at least one good way. :) I've read some of the CCTMXTileMap and CCTMXLayer code but I'm still a bit confused so that's why I'm posting this. For my game, I wouldn't need to move any sections (i.e unlimited level), I just want to optimize a big tilemap.

Posted 1 year ago #
araker
Moderator

Are you having any performance problems with your tilemap? Maps bigger than 100 x 100 need to be split up, it isn't really necessary for smaller maps. When you split up a smaller map the performance gain will also be much smaller.

Posted 1 year ago #
frilla
Member

We're haven't gone through the optimization phase yet, still in debug mode and maps are not fully decorated yet. We started to see some FPS slowdowns with a 48x48 map (tiles of 32pixels, it does have a few visual layers in Tiled) and if we have restrictions, then we'd hope for maybe 64x64 at a good framerate. If we do manage to get a good algorithm that permits bigger maps, then we'll do bigger maps.

Through some better use of spritesheets for gameplay elements and NPCs, I manage to make to game run back up to 50-60FPS. In Time Profiler, CCTMXLayer draw accounts for 64% of processing time which seems like a lot just for the background. In OpenGL ES Driver, Device 50%, Render 30%, Tiler 22%. This is my first time programming iOS games so I'm not sure if those are acceptable numbers or not. However, I do know that we'd like to make bigger maps.

Stepping into the code, for our 48x48maps, 2304 quads are thrown at openGL (CCTextureAtlas drawNumberOfQuads) when only about 150 are visible which seems like a waste.

I though about using 1 big background image but the maximum would be equivalent to a tilemap of 32x32 (max res of 1024x1024 since we want the HD maps to fit in 2048x2048) and it would take up more memory.

Posted 1 year ago #
araker
Moderator

You've done your homework I see.

The splitting is typically used when the GPU is the bottleneck, yours still has plenty of room so I don't think you'll get much benefit out of it. The 64% you're seeing is probably due to the debug build. I would try a release build and turn 'generate debug symbols' on, so you can still use time profiler to see what's most intense on the CPU. I expect that the tilemap part will be much smaller.

Sending 2304 to the GPU each frame seems like a waste, but it's still peanuts for the GPU to render them all. Sending the data can't be a bottleneck as well, since it is only 28 bytes/vertex * 4 vertices per quad * 2304 = 258.048 bytes that need to be copied.

Regarding your questions in the first post..

First I would recommend to step through the whole process of loading a map. That'll make more sense then reading the code. A lot is happening and you need some basic understanding of it to know where need to make your changes.

The implementation I was talking about is (in my opinion) the most easy way to split a map. It uses a subclassed CCTMXTiledMap which holds references to many layers. When initializing the map the tileGID array is parsed/split to give each layer it's correct set of tileGIDs. Then there is some logic needed that maps calls to setTileGidAt, tileGidAt to the appropriate layer. When those methods are implemented on the map, you don't need to subclass CCLayer.

Posted 1 year ago #
frilla
Member

Thanks for the feedback, much appreciated.

In release, CCTMXLayer draw is now down to around 42% and FPS is maxed at 60. Based on this, we'll try to make a map with the biggest size that we want with all the graphics in it and see if performance is still good before going forward with implementing splitting the tilemap up in code.

Posted 1 year ago #
Webtopia
Member

Hi everyone,

I've got a problem with my FPS too.

I have a simple sprite and a scrolling tilemap. The tilemap has tiles sized 32x32 and the map area is 33 x 7 tiles (with many clear spaces). It's similar to the Ray Wenderlich example. It runs smoothly at 60 FPS on my iPhone 4. But testing it on the iPhone 3G it runs at 40 FPS.

I have v4.2 of the iOS for my iPhone 4. But only v3.1.3 for the iPhone 3G (I've kept the old version for testing purposes).

I tried commenting out a lot of the code so that all it does is load the TileMap, there's no sprite, no background image, I don't fire off the timer. But it's still only 40 FPS.

I then tried the TileMapTest program that ships with Cocos2d on my iPhone 3G. The first test "TMX Iso Zorder" runs at 30-35 FPS. But the Editable TileMapAtlas which is a tga tilemap runs at 55-60 FPS.

My questions are;

Are tga tilemaps faster than tmx and if so why are we moving to tmx?

Am I doing something wrong to cause it to run at 40 FPS or is it expected for this device?

Is 40 FPS OK?

Any help on this would be greatly appreciated.

Posted 11 months ago #
araker
Moderator

You probably have another problem, see this topic.

Posted 11 months ago #
Webtopia
Member

You are a champion. Fixed in 2 seconds brilliant.

So it's the old #define GAME_AUTOROTATION kGameAutorotationCCDirector trick!

I can see that when you use kGameAutorotationCCDirector it flips instantly rather than the smooth transition of the kGameAutorotationUIViewController but it fixes the FPS by that much it's definitely worth it.

I'm using v1.0 of cocos2d with the latest template. So this is still an issue.

I think it's worth fixing the template since people with only newer devices for testing won't be aware of the problem.

What the best way to let poor @riq know so he can add it on his ever increasing to do list? I don't have time now but I'm happy to code up an #IF to deal with it.

Posted 11 months ago #
araker
Moderator

You can post a issue in the issue tracker, the link is in the FAQ.

Posted 11 months ago #
Webtopia
Member

Looks like someone's already posted one.

Issue 1062

Posted 11 months ago #
wilczarz
Member

Hi guys, my FPS is also poor. My map is 30x30, with tile size 64x32. I have only one tileset (512x512), two layers, one is fully opaque (ground). Here's what I get on Iphone3:

- 20 FPS by default
- 26 FPS with kGameAutorotationCCDirector
- 30 FPS with RGBA4444 pixel format, but the quality is unacceptable
- 42-45 FPS with [groundLayer setBlendFunc:(ccBlendFunc){GL_ONE,GL_ZERO}] (but then ground displays as black)

I'd like to get least 45 FPS.. any ideas?

Posted 11 months ago #
wilczarz
Member

@araker, you wrote that disabling alpha blending for background layer will increase performance. But is it even possible with isometric tilemaps? Since all tiles are rhombs (not squares), all tilesets must have some transparent areas :(

Also, kGameAutorotationCCDirector causes some artifacts during tilemap scrolling, so it's not working for me either. Artifacts occur only when home button is on the left, strange.

So, is it possible that with two transparent layers all I can get from iphone 3G is 20 FPS?

Posted 10 months ago #
araker
Moderator

The artifacts you're seeing is a known problem, search for artifacts, black lines, the gap, subpixel rendering, to get a lot of topics regarding this.

About disabling the blending, just try it out. It's only one line of code to change.

Posted 10 months ago #

RSS feed for this topic

Reply

You must log in to post.