PewPew Live's look in a nutshell

Occasionally someone will asked how I obtained the PPL look.

In a nutshell:

• Draw everything with lines, including the text and the various icons.
  It's a lot of work, but besides looking unique it creates a consistent appearance which is a thing that a lot of indie games struggle with.
  The lines are screen-space projected lines with miter joins.
• Draw the lines with additive rendering. This means that if a red and green line overlap, the overlap will be yellow.
  There are a few things not drawn with additive rendering (like the background of buttons to improve readability), but they are exceptions.
• Add bloom.
  There's lots of different bloom implementations. Nowadays I use a bloom that is similarly to the one in blender's eevee.
  If you see banding, use dithering.
• Optional: Add even more post-processing like (very slight) chromatic aberration, lens dirt, scan lines, curved monitor, and vignette.

No post-processing, just lines

Bloom! Ignore the missing bloom at the top

All the post-processing turned on

One final thing that is pretty neat in PPL (which is not often seen in mobile games) is that you can configure every single effect, which allows you to see how the individual effects contribute to the final look:

Volumetric lines 2

I promised I was going to do a follow up on the Volumetric Lines episode, so here it is.

Like I said, it was very easy to change from regular lines, to using volumetric lines in PewPew. In fact, I already changed once the way lines are drawn: the early versions of PewPew used SDL without OpenGL, so the lines were drawn in software using the good old Bresenham. Switching to OpenGL forced me to reduce the coupling between the renderer, and the game engine. Here is all I had to do to make the switch to volumetric lines, besides the initialization:

#ifdef USE_VOLUMETRIC_LINES
for (int index=0; index < numberOfVertex; index+=6)
VolumeLineRenderer::getInstance().renderLine(
&vertexes[index],&vertexes[index+3]);
#else
glVertexPointer(3, VERTEX_TYPE, 0, vertexes);
glDrawArrays(GL_LINES, 0, numberOfVertex);
#endif

Here are some new screenshots comparing the regular render to Sebastien Hillaire's one with different line width.

Now this is running on a PC, not on an iPhone. I previously said that I could maybe port this glowing effect to a real iPhone/iPod Touch, but it requires programmable shaders, which are only available on the iPod Touch 3G and the iPhone 3GS. I only have an iPod Touch 2G, so I wouldn't be able to test it.

Anyway, if you do not like the glowing effect do not worry, because if I do manage to get this effect to work on a real device at a decent frame rate, I would put an option to keep the classic look :-)

Volumetric Lines

I first started programming PewPew on Linux, with portable librairies (OpenGL/SDL/libcurl). Of course, I had the iPhone/iPod touch in mind, so I designed the gameplay and the UI accordingly.

After a month or two (once I payed for the $99 for the SDK), I migrated to Xcode and the iPhone OS. I'll write a post about that later because it was not as simple as I imagined it would be.

A week ago, I migrated the code back to Linux, and this time it only took a couple of days :) The goal was to make PewPew prettier by giving the lines a glowing look (like geometry wars) by using the infinite power of my computer (compared to the iphone anyway).

Perfection.

Naturally, at first I failed :-)

My first idea was to draw the lines multiple times, with different width and different transparencies. Here's what it looked like:

Not perfection.

Okay so that was ugly, but it had to be done. The second idea was to use pixel shaders. A pixel shader is small routine executed on the graphic card, that is applied to every pixel drawn. In this case, the shader would blur the screen.

And then I remember that activating motion blur in Crysis made the game run at 10fps...

So I got a third idea, where every line drawn would actually be a streched texture. However, a problem would arises when you would look at the line along its axis: you would only see its profil. By searching a bit (actually, a lot) on the internet, I found out that this problem has been solved, and has a name: Volumetric Lines.

I won't go into the detail of the technique, there is some code here. However I will say that his implementation kicks ass, because he actually use the GPU to process the orientation of the texture (using a vertex shader). Here are some glorious screenshots:

This time, the screenshots are made under OS X, and with the iPhone's screen resolution.

Transparency is not yet working, but that should be easy to correct and I think that using mipmapping will reduce the aliasing (and thus make thinner lines possible). Also, the vertex shader has the additional effect of messing up the tab polygon. hehe.

Overall, I am pretty happy of the result. BTW, it might be possible to run this on the iPhone 3GS at a descent frame rate... To be followed?