Help to optimize very graphics heavy game.

Before you read this I need to point out that I've read and fully understood Scirra's tutorial on optimizing for the game engine.

Hi. I've been working on an adventure/rythm game for roughly a month now. I've designed the game with node-webkit in mind, due to my ambitions with the in-game graphics. I feel like I'm only getting started on the art side, but I'm already experiencing slow downs on fairly decent computers. It's obvious that I can do a lot more to optimize the game, but I need your help to figure out if the problem lies with the art assets, the use of filters or the game code?

I would appreaciate it if someone could comment on the code, how I've implemented the assets, and generally how they liked playing the game.

The project is in its very early stages, so constructive criticism is appreaciated.

Here's the exe file: mediafire.com/download/4k3oylo9otft04o/Klang(2).zip

Here's the Capx:

mediafire.com/download/35cu4304mkwf163/Klang+Optimization.zip

The heavy hitters on the art-side:

The main character ("Player" object) sticks out since he has over 140 different animations, with an avarage of 8 frames each. Every frame has a size of 128x128.

There's also the sprite based tile sheet lying in the "environment art" subfolder of the object type folder. Every tile has 9 frames at 256x256 size. I've refrained from using tiled backgrounds since I couldn't animate them.

The assets that really kills it though is the Ascending blocks in the same folder. These are 9 frames each, with the baffling size of 256x1472 pixels. I know this is too much, and therefore have only used them at the first prototype stages I made called "Tutorial level 4" and "Test level 2". This is also where the slowdown was the most profound.

Then there's the filters, which I'm unsure wether how much they really affect the performance. I use 3 filters on every stage, all of them are layout specific (Hue, Inverse and Grayscale). Can anyone comment on how much these filters halters the performance?

Here's how the game works:

Each level uses 2 event sheets. "Core mechanics indepentent" covers all of the game's core gameplay. The level specific sheets are "Tutorial level 1,2,3,4". However since I don't think the problem lies here, I won't go into too much detail.

Again I would really appreciate it if someone could help me out here.

Thanks

Tom

I'm downloading now, but it takes ages, for your capx is 115MB in size. I will try to take a look.

Sounds like your graphics are too big or you're using too many tiles. Layout\layer effects are substantially better performance-wise than applying them to individual objects. How big are the levels? If your tiles don't NEED to be tiles I recommend pasting all of them to a grid of 1024x1024 or 2048x2048 canvases, then loading those images into blank sprite objects in the same fashion, then destroying both canvases and tiles.

My memory usage keeps going up the longer I play.. Have you made sure to destroy sprites that are not needed (like the explosion after animation has ended)?

Tokinsom

The levels vary in size.

The first, second and third stage is 12500, 4096.

The fourth (The one with actual rythm and music) is 24576, 4096

I can probably reduce the height without too much effort on the 3 first, but the fourth used pretty much all of the space. How much does map size crunch the performance?

Could you go a bit deeper on the whole "loading images into blanks and destroying them?" Can I have an animated environment using this technique?

LittleStain:

Yes I make sure that the explosions always gets destroyed. There's one place at the end of the fourth level where they don't disappear though. But that's just a quick bugfix away.

Wow. Minitroid's entire world map was 20000x20000 :P

The size of the layout shouldn't affect anything, just what you put in it.

I'm not sure if it'll work for your game but since mine use hundreds and hundreds of tiles I just stretch a canvas across the layout, then paste all the tiles into the canvas, then load the image from the canvas into a sprite object (because webgl and canvas don't go well together) and then delete the canvas and tiles - effectively turning hundreds of performance-killing tiles into 1 image.

You don't want that 1 image to be too big though, so for the really big levels you might want to make a grid of canvases & sprite objects instead of just that one.

Sounds crazy but I get a smooth 60fps with a bunch of particle FX and everything this way, whereas I used to get ~30 with just the tiles.

Clever. Will definately check it out when the levels are pretty much done. It probably should work, but would need a lot of extra work considering I've also animated the tiles.

youtube.com/watch here's a video of a much older build. I've improved a fair amount on the art since then. I might be able to turn all the tiles into 9 images if I animate everything into the same sprite?

After looking at the video I'm not sure that'd be the best approach ^^; Your game isn't really tile-based, so. Seems to me you just have too many large sprite objects with the solid attribute and the BGs are probably massive as well. The shaders on top of all that definitely don't help. Maybe you can deactivate the solid attribute for platforms/walls that aren't on-screen? (that'd break most games but it looks like it might work here)Another thing to consider is breaking up the levels into multiple acts.

Alright I've been doing some experiments on a slower computer. It's clear that the filters had some effect on the performance, with removing them I got roughly a 15% performance boost. However completely removing the art barely made any difference.

Here's the big issue I found. With all art gone, no shaders, with a canvas of only 1280x720 consisting of only two boxes (one platform and one solid), and no events running, the game only ran at 40 FPS. Mimicking the same setup in an empty project gave me flawless 60. These missing 20 frames is a big mystery too me. What settings can I have turned on/off in my main project to crunch the performance this much? It ran in preview mode on google chrome if that's any relevant.

Few things that I noticed:

• You could use TiledBackground objects on many occasions, they give far better performance than using multiple identical sprites next to each other.

• You have lots of overlap on your objects: DarknessUpperMid, DarknessUpperLeft etc. Why not just have a single 'Darkness' object and copy, size and rotate it to fit everywhere?

vee41 It's true that I don't use tiled backgrounds much, but the reasoning behind using sprites is that tiles can't be animated. If you try pressing the arrow keys you'll see that almost the entire environment reacts to it. I also didn't experience a huge performance boost even when completely erasing all art in the layout. The main performance issue lies somewhere else after all.

When you say all art do you mean all the walls and platforms too? What I was getting at earlier is too many objects with the solid attribute can easily lower the framerate.

Also are you running any heavy loops or anything?

Must say this is very impressive, well done.

first thing I noticed is you are using sprites as the background, but as you say you need them animating, but you do not need them all to have collisions enabled, only the blocks directly above and below the player need this,even the ones that need it, you could delete a point in the collision polygon to make it triangle,as you only need one straight edge,same with your animations and turrets, that are triangle anyway, add all that up and that's a lot of unnecessary collision checks by the CPU saved...

Tokinsom: Yes I mean all art. I erased absolutely all art, all shaders and every layout except the test stage (In the entire project). Still couldn't get it past 40 fps. The test level consisted of only one solid box and one platform box with a "scroll to" on.

This ran on a laptop that on high performance runs the game at 60 FPS. This result is what I get when I run at low performance. I do however still get 60 FPS on low performance in a fresh project.

pixel perfick: Thank you, and oh snap... Didn't know about that option. Will definately check that one out. The polygon trick seems clever too.

Still weird though that I had performance issues without any objects or art assets whatsoever.

Edit: Alright I didn't mention that this test stage originally was a duplicate of one of the bigger stages, and that I removed all of the content. When I tried to make a brand new layout within the same project I managed to get 60 FPS.

I still have no clue what abominations is lurking inside the previous test stage though. I tried increasing the size to see if I could find any leftover objects, but I didn't find anything. I have a feeling whatever's slowing down this layout is the key to optimize the performance.

I still haven't been able to improve the framrate, even with all the tweaks proposed by you guys.

Is it possible that duplicating layouts leave traces from the previous levels of some sort even if I erase all of the content from it? It's the only common factor I've been able to find between the levels with unnatural slow downs.

Tokinsom: Can you please specify what you mean with heavy loops? I don't think I use heavy loops, but I do have a fair amount of "every tick" dependent events.