• Register

The enigmatic journey of Sky, an explorative artificial intelligent made by Professor Toro Hudo who lives in Goa, the world below. Sky was created to help Professor Toro Hudo in constructing kinetic system for his foster daughter, Ocean Hudo, a forsaken limbless child who fell from the clouds when she was an infant. Observe the mystical Goa, experience its astonishing adventure with formidable jigsaw, swiveling plot, and bizarre habitat.

Post news Report RSS ParaParaParallax!

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 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 Lets discuss our approach for parallax background

Posted by on

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


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


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 sampleImplementation 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 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

Post a comment

Your comment will be anonymous unless you join the community. Or sign in with your social account: