DEVLOG#15 – ParaParaParallax!

Hello Ascenderians!

It’s me again, Jade, the lead artist from GameChanger Team. I’m so happy to see you reading our blog until now, mwah!

So far, Ascender the Game has expanded from prototype version, to Pre Alpha Version. It has been sooo many features added to our beloved game, like the Rune, skills, character, NPCs, animation, and the most important thing is:  Outdoor Background ;D

We all know that in side scrolling game, the most important thing besides the character it self is the background. Without a proper & well suited background, players won’t get the feel when playing, so we put most of our effort to create a beautifully hand drawn background.

At first, we just put our background here and there, then just edit the color a little bit and done. But, then we felt that it dosen’t feel “big” enough to represent our wonderful Goa civilization, so Amber, me, and the other artist decided to make the background with Parallax Scrolling technique

So what is parallax scrolling? here’s the sample image for parallax scrolling from wikipedia

A side view of the layers used for parallax scrolling in The Whispered World

A side view of the layers used for parallax scrolling in The Whispered World

 

It’s a technique in computer graphics where the background images moved by the camera slower than the foreground images, so it creates an illusion of depth in a 2D universe and enhance the immersion for the player. We use this technique to express the beautiful civilization of Goa, under the surface of the world of Ascender. Now I’ll tell you how we make it.

The first step is, we make the focus ground. Amber took charge for all the sketch after disscussing some matters with Amethyst and Calchedony. Then when the sketch done, Peridot divided the layer based from what the buildings and materials.

 

prof house 4
Raw version

 

prof house 4 grayscale
grayscale version

Second, me and Moldavite start to colorize the file from Peridot, one by one, step by step until all done in perfection.  We calculate the materials and texture carefully fofr the sake of semi-realism feel.

 

prof house4 demo
Finished Focusground. I’m satisfied with the crystal’s color ❤ Moldavite did a very good job!

Third, we polished the color, mood, etc with Amber, then Amber make another sketch for the first, second and third layer of the parallax scrolling. We made the picture while thinking about the concept art of Dolopo, it look fascinating because of the detail of the residence so Amber decided to draw the residence silhouette, colored with brownish orange watercolor for the 3rd layer, reddish orange and brownish yellow for the second and first layer. By the waayyy we colorize this parallax background layer with water color!  woooooott

when I look at the water colored background for the first time, i thought it won’t work well with the focus ground. The  technique is far different digital and manual, so obvious, right?) the contrast is too off, the texture and feel is different, and so on. But then Fire edit the images with all his might, night and day, and the result were suuper gorgeous when combined with the focus ground.

dolopo sample
Implementation of the watercolored parallax background, beautiful isn’t it?

Then we move to the foreground. We made this foreground to deepen the immersive feelings trough the gameplay, add dimensions and enhance the realistic feelings. All the foreground made carefully to not block the players eyes to seeing Sky walking around back and forth exploring the area.

After done with the foreground, then Calchedony set the camera movement for each layers, set the lighting, and so on.

And here’s the result!

ezgif.com-video-to-gif
Ascender the Game with parallax scrolling technique background

You’ll experience the beautifully done parallax technique for the rest of the game on Pre Alpha Version,  so don’t forget to download the game, leave a comment and follow us here and on Facebook for more info about Ascender the Game! ;D

Untill we meet again!

 

Jade

Advertisements

One thought on “DEVLOG#15 – ParaParaParallax!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s