Skip to main content

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:

Labels:

Comments

Post a Comment

Popular posts from this blog

A general state rollback technique for C++

I wanted to write this post for a while. It describes a C++ technique to implement rollback in the context of multiplayer games that I feel is quite interesting and useful. The tl;dr is: don't bother serializing individual objects, just rollback all the memory. Rollback-based multiplayer I've been working on a multiplayer version of PewPew, and for reasons that are outside of the scope of this post, I chose to implement multiplayer with deterministic lockstep and rollback. The basic idea behind rollback-based multiplayer is that the inputs of players are replicated to all the players. Whenever a player receives the inputs of another player, the state of the game is rolled back to the point where the input happened and fast-forwarded back to the present so that the state shown to a player takes into account the inputs of the other players. Because history is being re-computed, some events get undone. For example, it's possible a player saw themselves taking a bonus, but aft...
2 comments
Read more

Ridiculously cheap depth of field effect for lines

I'm working on PewPew's sequel, for which I've revamped the graphics. Instead of drawing lines directly using OpenGL, each individual line segment is made up of two triangles whose vertexes are computed with shaders. Getting lines in 3D space to be properly displayed on a 2D screen is not trivial. In PewPew's sequel I use the screen-space projected lines, a technique very well described in the  Drawing Lines is Hard  post. The upside of drawing the lines yourself is that you are fully in control, which allows you to implement nice things such as joints, perspective, and even simulate depth of field. https://en.wikipedia.org/wiki/Depth_of_field Usually depth of field (DoF) in video games is implemented using a post-processing step that blurs the pixels with an intensity that is a function of the depth of the pixels. When we are rendering lines, we can approximate DoF directly when rendering the lines by having the vertex shader increase the width of lines and r...
1 comment
Read more