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.

Sky

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.

Texture

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

Gradient

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

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

Lightning

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

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.

Tags:


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]