Internship Adventure – Graphical Making of – Part 2

Posted by (twitter: @bousquetm)
September 18th, 2015 10:59 am

This post is the second part of a three part article. If you missed the first part here it is : Internship Adventure – Graphical Making of – Part 1.

Our game is Internship adventure and we advise you to try it before reading this post.
Photoshop & Flash source files will be given in the third part of this article.

My English is quite poor and a French version is able here.


The sky wasn’t the longest part of work, it was even fast to build, only asking a little for work for the developer and I.


The artistic direction wanted to be like “done manually”.
Sky was first a simple gradient, but we added a kind of bump effect on it, but this effect was not directly in the gradient sky texture. We added an other map with a “multiply ×2” blend mode that was giving us more flexibility to add other effects in the sky.

Intership_SkySimple gradients and textured sky

“Multiply ×2” is a not enough well known blend mode able to light and dark pixels.
For instance, it is used to simulate lights of lightmaps.

Blend_LightmapLightmap with “multiply ×2” blend mode

In our case, we used it to add details on our original map.

Blend_DetailDetail texture with “multiply ×2” blend mode

This effect look like “Overlay” blend mode, but Photoshop don’t have a “Multiply ×2” blend mode. It’s not practical to simulate it in Photoshop because we have to use additional effect layer.
Happily, in most of game engines, it’s easy because it’s a standard blend mode since the 90s’.

Photoshop_File Example of “multiply ×2” in Photoshop


The sky gradient texture is very lite and allow us to build our day/night system.
Pixels of the original texture (4×64 px) can be smoothed thanks to filtering like bilinear, so our little gradient become a perfect full gradient.

FileringTwo ways to zoom on a texture

To make our day/night cycle, it’s easy, we only have to display the gradient on a two screen height plane and to translate it vertically.

Internship_DayNightA simple gradient allow a smooth transition between day and night


Stars were a little more difficult.
In fact, the most difficult task was to convince the developer because he had  bigger fish to fry. I would like to thanks him because he took the time to realize what I had in my head.

It look like what we did on the gradient, but it was not a translation but a rotation and a progressive alpha blending.

StarsStars rotation in the sky

To optimize memory, we used a looping 1024×1024texture and we made it tile in the plane.

This layer use an other blendmode which is very popular in video-games and FX : “additive”.

Blend_addExample of an additive blend mode without any alpha

Order of layers

The sky has 4 layers with associated blend modes.
We already saw 3 of them, the last is here to emphasize high atmosphere colors thanks to a “multiply ×2” blend mode.

Internship_SkyLayersLayers of our sky


Day/night system don’t affect only the sky. Backgrounds layers are affected too.

Both of the intermediate layers are multiplied with a white color on day and a blue color at night, allowing a better integration of environments.

Internship_DayNightEnvironmentForest environment at night and day


Foregrounds had to look like shadow silhouette but we was afraid that it would not always be visible because of darks backgrounds.
We added a white outline to differentiate active layer and decorative layers.

We first had to use a complex system that allowed to merge shapes without intersection with the white outline but we didn’t had the time to integrate it.

Internship_BorderClassical outlines VS Blended outlines


I admit that I’m not proud of our foregrounds but it’s logical, we did it in the rush of the end of the game.

Internship_GameLayerForest foreground

We finally choose to make a two layer foreground and I’d like to thanks Roxane which helped me for the forest.

End of part 2

This is the end for part 2.

In part 3, we’ll talk about our collaboration with Roxane and my work on a monster animation.
Thanks for your attention.


2 Responses to “Internship Adventure – Graphical Making of – Part 2”

  1. Geckoo1337 says:

    Objectivement, je n’ai pas tout compris, car je suis graphiquement médiocre – les usages basiques de Photoshop me suffisent afin de créer mes projets. Néanmoins, ce fut très intéressant et instructif. Merci à toi ++

  2. togie says:

    Thanks! i love articles on different approaches to 2D Graphic design for games. you did an awesome job!

Leave a Reply

You must be logged in to post a comment.

[cache: storing page]