Dev Blog

Shellrazer Dev-Blog 18: Nick-Tech 2! The Shocking Sequel!


Welcome back followers of the fearsome!

This week we get another tech post from our very own Nick! He’ll be covering how he’s managed to get our game running super smooth and displaying tons of stuff! Take it away Nick.



Hey Everybody,

This week I’ll talk about an optimization that increased the framerate significantly on older iPad and iPod touch models.

One of the main performance bottlenecks of the iPad 1 is alpha blended triangles (or pixels, really). This is mentioned in the apple documentation, and they recommend drawing opaque triangles as much as possible. We tested this, and the difference between rendering opaque and alpha blended pixels is HUGE. The PowerVR chip handles opaque triangles very nicely, effectively eliminating any overdraw. Alpha blended triangles, not so much.

In our game we draw a ton of sprites, which use large textures with alpha. On the iPad 1 we had a bit of a performance problem when we drew a lot of them, so something had to be done. The solution is simple: draw less alpha blended pixels! The way I implemented this in the engine is to attach a ‘texture polygon’ to each texture. (Texture Polygon is actually a wrong name for it, it’s more of a texture mesh). Whenever we want to draw the texture on screen, instead of drawing a quad, we draw the mesh instead.

Here’s a screenshot of our game with our alpha blended debugging shader enabled. This screenshot is the ‘before Texture Polygons’ picture. The red parts are pixels that were drawn using alphablending.

The texture polygon has opaque and transparent triangles. This allows us to batch up all opaque triangles, and all alpha triangles. We draw the opaque ones in one big batch first, and then the alpha blended ones. The cool thing is that the alpha blended triangles have a zbuffer that allows quick pixel rejection.

Here is the same location, this time with texture polygons. As you can see there’s a lot more green areas, which is good! There’s still that big red block at the bottom, but we want that part to be transparent, so there really isn’t any other way to do this but alpha blending.

To edit the texture polygons, I created a little tool that allows us to place points and add opaque and alpha blended triangles. The goal is to create a large a surface as possible using opaque triangles (so for areas where the alpha value of the texture is 1), and put skirts of alpha blended triangles around the edges to keep the nice alpha blended edges.

All in all, this technique is VERY effective. We’ve more than doubled our framerate in general, and on some screens we’ve seen a speed increase of over 400%!

Alright, that’s all for this week. The game is really coming together now! It won’t be long before you can play it for yourself!


Posted by: Under: Shellrazer,ShellRazer Dev-blog,Slick Entertainment,Tech


Comment by: Tatham Johnson

June 20th, 2012 at 1:45 pm

Wow! I didn’t even know this quirk of rendering existed. Useful knowledge to share, and a great solution to the problem at hand. Thanks, and I look forward to ShellRazing soon :)

Comment by: Ruben Garat

June 20th, 2012 at 1:46 pm

Hi, love your blog, I read a coment in a blog about Aquaria that made me think that they did something like this for their ipad port, but I could never find any detailed explanation.
It rocks to see this explained like this :-)

How do you feel about the manual labor involved in creating the meshes? Did you ever try to automate that somehow?

Comment by: Nick

June 20th, 2012 at 3:06 pm

The manual labor can indeed be a bit much. Infact, I’m making texpoly’s right now! :)

I’ve been experimenting with automating it using a mesh simplification method, but because things have been so busy finalizing Shellrazer, I haven’t gotten very far with it.

I know that a fellow indie developer has a auto-generated thing working that works quite well. It basically quad-trees the texture, and generates a texture poly for that. Maybe I should look into that too. :)

Comment by: Scott

June 20th, 2012 at 3:24 pm

Yikes, you’d think there’d be some sort of alpha-kill!

Comment by: Ruben Garat

June 20th, 2012 at 3:57 pm

How are you guys handling animations? do you have a different mesh per frame of animation or just have one bigger mesh that contains all the frames?

Comment by: Nick

June 20th, 2012 at 8:42 pm

We do all our animation by moving static textures around on a skeleton. If we want to do flip-frame animation, we simply switch the texture (which by the way isn’t an actual texture switch, see the previous blog-post about Texture Atlases :) )

Comment by: Nick

June 20th, 2012 at 8:42 pm

There is an alpha kill (alpha test), but AFAIK it’s still a lot slower than just not drawing the pixel in the first place.

Comment by: Graham Jans

June 25th, 2012 at 2:42 pm

Yeah, my first thought was to do a two-pass shader, using alpha-test and pass; this is what I did on Zombie Minesweeper and it saved us a lot of frames; basically the first pass only draws 100% opaque and z-tested pixels with a non-alpha’d write, and also writes the z-buffer. The second pass draws 1% to 99% opaque pixels, using alpha blending and z-testing. There are a few small artifacts but all in all in worked well and saved frames.

However your method seems like it would be much more efficient, as each “pass” is actually constrained to its own polygon!

On another note: it seems like a library/algorithm snippet for doing texture-to-polygon simplification would be handy to have around… It seems to keep coming up. :P

Comment by: Jason

June 26th, 2012 at 12:48 am

Can you put these into a spritesheet so you could render all of the texture polygons in one draw call, or do these have to be separate images and calls?

Are you planning to release this tool to public?

Comment by: Nick

June 26th, 2012 at 10:59 am

The textures are all put into texture atlases, so I just gather all the texture polygons, and draw them in one big draw-call (as long as they are all in the same texture atlas of course)

Follow us!

titlebutton_twitter titlebutton_facebook titlebutton_youtube titlebutton_twitch

Join our mailing list!

/ /

Dev Blog

February 10 2016

Welcome back followers of the fearsome! This week we have a quick look at some of the cool locales in our spooky zone 3! The Draugr infested graveyards and mausoleums! Above you can see which area we are talking about. Zone 3 has been a lot of fun creating and it has some of the […]