raft challenge graphical revolution

Graphical Revolution in Raft Challenge

Posted on Posted in Game Development

Intro

This article is about graphical evolution of Raft Challenge from the prototype to the final product. It’s AIM-ed for the people who are thinking about making own game with graphics similar to Raft but don’t know exactly how to start.

The very begining of Raft Challenge

Raft Challenge was born on a first hackaton organized by All In Mobile. The idea was to make a game where a player avoids obstacles. We wanted to keep this as simple as possible. After the weekend, we had a prototype that looked like this:

 

HackatonRaft

 

Raft Challenge won the hackaton, and the company announced that it’ll make its resources to improve this game.

Let’s make it 2,5D!

At the start of the project, Raft had the simplest possible graphics. A view was directly over a flat ground texture, with colored circles that indicated the player and the enemies. It was beautiful and as simple as the code underneath. Then HE came and messed everything. HE said „Let’s make it 2,5D!”. The challenge was accepted and the animation above was the result.

After the hackaton HE had shown up once again. This time it was something more than one sentence. It was an evil smile and this video:

 

PerspectiveConcept

 

Perspective explained

Ok, let’s drop the act :-). I’ve wanted to give him the feeling that he’s in charge. But I’m the boss here! The perspective is easy to implement in code, regardless of what 2D engine we use. First, we have to determine where we want to put the vanishing point. The example below shows this point in the center of the canvas.

 

VanishingPoint

 

Raft Challenge has this point in the upper half of the screen, because the sky and everything overhead isn’t as important as obstacles on the river.

How are the sprites themselves made? While it may be obvious for someone with artistic background, it isn’t necessary clear for a technical person. There are two rules:

 

alignment

 

Moving parts must be drawn along the helper lines as shown above. All those lines intersect in the vanishing point. Note that the coast part isn’t reaching the vanishing point but stops somewhere in the middle, leaving transparent area behind.

 

seamless

 

That empty area between the graphic and the vanishing point has an important purpose. It’ll hold elements that are further away. Those parts are made by applying a twice smaller scale for each step. The resulting image should be seamless if the texture is well-made.

Assembling the scene

Raft Overview FlyBy

 

After we’ve prepared all of our assets, we need to put them all into the scene. Let’s see how it looks in Raft Challenge.

 

RaftLayers flatten

 

Starting from the bottom:

  • Background layers (Background, Grass, Fog bottom, Sun, Mountains, Horizon Line)

    • These layers are all static (they don’t move)

    • Background acts for both the sky and water

    • The background (since it’s a plain gradient) is stretched to fill the entire device’s screen. The aspect ratio is ignored.

    • We may merge layers (other than Background) for increased performance unless we want to change some properties. We may move the sun during the gameplay or replace mountains for something different.

  • Perspective layers (Trees with reflections, Coast, Obstacles)

    • For the clarity of the image above, layers with similar content were grouped. There were:

      • 2 layers of Obstacles

      • 8 layers of Coast

      • 18 layers of Trees with reflections

    • These layers are scaled up by 2 when a player is moving forward.

    • Order of these layers depends on:

      • distance (closer ones are on top)

      • priority (Obstacle > Coast > Trees)

  • Fog (Fog top)

    • This layer masks the smallest perspective layers that are appearing out of nowhereout of nowhere.

  • Character

    • If an Obstacle is in the closest possible position, it may have z-position higher than Character itself. In this case, the Obstacle covers the Character, which is desirable.

  • GUI

Remember. Good graphics should depend on illusions and tricks instead of hardware.

 

RaftScene

 

Summary

Summarizing, this article should give us an idea how to approach the problem of making assets to a 2,5D game and organizing them into a scene.

 

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *