Skip to main content

Icons

When writing this post I often wrote "iCon" instead of "icon"... Damn you Apple.
Anyway I got a folder full of different icons for PewPew, and I thought it would be cool to look at the evolution.




The first icon shows the classic ship shooting at an enemy, but when resized to 47x47 pixels (the original iPhone's icon size) it didn't look great. I shipped the first version of PewPew with it back in 2009, but quickly iterated on it.


I simplified it and ended up with this.
[Update from 2016: I still like its purified appearance a lot!]
I was pretty happy with it and shipped quite a few versions of PewPew with it, but at some point I decided I need to make it more eye-catching: after all, I want people to download and play the game!

Up to now I was using Adobe Flash (!) to create the graphics. I decided to learn a bit about Photoshop and was able to add a glowing outline and some gradients.
It's interesting to note that the glowing outline is done the same way in Photoshop and in-game: blur the original image and compose the result with the original using additive blending. 


I later found a Photoshop iOS icon template with which I obtained this icon. However it attracted a lot of (deserved) criticism on the Android market, because the iOS glossy look negatively stood out on Android devices.









So I removed the gloss (but kept the roundness), played with the color balance, and obtained the current PP1 icon.


In parallel I was working on PP2 (and its icon). I considered putting 2 ships on the icon, but it would have suggested multiplayer and I did not want to mislead the customers.


It seems that I attempted to unify the icons of PP1 and PP2, and ended up with this. It was a failure and was never used.


After a while I realized that the PP2's icon actually looked very plain compared to other game's icons and realized the power of adding textures. This is the current (and likely final) PP2 icon.



During my last round of experimentations I tried different color scheme and liked this one very much. I ended up not using it, but it inspired me for the Android Market banner.










Edit (23/01/2012): a reddit post complaining about the lack of coherence with the icons on Android made me discover the Android Guidelines for the application's icons.

These are the two new (and hopefully final) icons.



Labels:

Comments

  1. AnonymousMarch 6, 2012 at 12:52 AM

    Is there a chance you will release Pew Pew 2 music online? The music in Pew Pew 2 was excellent and the tune is addicting. When I want to listen to Pew Pew 2 music, I just start the game and let it run for a long time. I tried looking for it online and I cannot find it. I hope you will release the music online!

    ReplyDelete
  2. Jean-François GeyelinMarch 6, 2012 at 1:52 AM

    Hi,
    you can download the music from here: http://onurmusic.com/pewpewost/

    ReplyDelete

Post a Comment

Popular posts from this blog

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 a Comment
Read more

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