Create game worlds from concept art
Discover how to transform initial concept art into a stunning final videogame scene
Go behind the scenes of the visually stunning video game Unbound: Worlds Apart in this guide to creating video gameworthy scenes
An indie studio based in Romania, Alien Pixel takes pride in delivering games with unique artistic flair, and upcoming title Unbound:
Worlds Apart is no different. Portalling onto PC and Nintendo Switch on 28 July 2021, Unbound:
Worlds Apart allows players to explore fantastical, hand-drawn Metroidvanian worlds.
Unbound: Worlds Apart is an atmospheric puzzle-platformer where the main character, Soli, travels between different realities and worlds in order to learn more about the catastrophe that has ravaged his world.
By conjuring interdimensional portals, players acquire unique abilities such as inverse gravity, time manipulation and super strength that can be used to solve puzzles, outsmart creatures and unravel mysteries. Artwork is the backbone of this player experience in Unbound: Worlds Apart, transporting gamers from the banal to the beautiful.
The game’s aesthetic approach can be summarised as a dark fairytale presented in a cartoonish style. Curiosity and exploration has a big impact on the overall atmosphere of
Unbound: Worlds Apart. Inside certain portals, the physical properties of the character or world elements can change.
In this tutorial, Alien Pixel’s Olga Ciob will show you the workflow for getting from a concept image to the final scene in a video game, using Unbound:
Worlds Apart as an example of how such techniques can bring fantasy worlds to life.
01 CREATE THE ASSETS
The first step is to separate your concept art into assets according to image depth, dividing the art between four clear layers: Background, Midground, Walk Path and Foreground.
For example, Unbound: Worlds Apart is a platformer game and so is designed with certain mechanics in mind. Rune-engraved platforms make up the foreground for ease of character movement. This is set against a background of ominous forests, craggy mountains and other scenery designed to fit in the universe of magic and mystery.
Remember to remove or convert all the blending modes to Normal, since Unreal Engine does not support blending modes such as Multiply, Overlay, Screen etc.
02 MAKE SPRITE SHEETS
There are multiple ways to create sprite sheets, which will allow you to produce the animation using only a single file.
Certainly, you can use the single PNG per asset if you prefer. However, for better performance – as we have used in Unbound: World’s Apart – we recommend using sprite sheets that contain textures for multiple sprites.
Personally, we use sheets that typically contain 2,048 x 2,048px PNG 24 files with transparent backgrounds.
Of course, the single PNG per asset can be used, but we’ve found that using sprite sheets with multiple textures has improved the overall execution.
03 IMPORT THE TEXTURES
Next, create a new folder for the sprites and another one for textures. This will help to maintain a clean and clear workflow.
A system to keep track of assets is vital for any artist, but especially those that work on
video games. Scenes need to be clearly organised for sudden developmental changes, which can come hard and fast, as well as eventual localisation (adjusting game content for release in multiple countries).
Drag and drop the PNG files into the Content Browser window of the engine (Textures folder), and select the settings for image rendering options. It’s time to open the texture editor, where you’ll be able to set the image filtering and levels of detail according to programmer specifications. Don’t forget to save and close!
04 EXTRACT SPRITES
In order to extract the sprites, first go to the Content Browser and right-click the new imported feature. Then, select the Sprite Actions function and click on the Extract Sprites option. Once you’ve done this, the sprite editor will open.
There will be a drop-down menu from which you should select Auto. Here, in the bottom-right corner, select Extract to successfully extract your sprite. It is worth bearing in mind that sprites will be generated in the same content window as the texture is.
05 IMPORT SPRITES INTO THE SCENE
The next step is to import the sprite into the scenes. First, start by dragging your desired content from the Content Browser and dropping it into the scene. Be sure to adjust the position so that it aligns the way you want it to. Then, set the Y axis, which is the position according to the camera.
06 COLLISION BOX
Next, you will need to edit the collision box of the sprite. Start by double-clicking on the sprite and once again opening up the sprite editor. Then, go to the top-right corner of your screen and click Edit Collision. In order to adjust them as desired, click on the collision box points.
Some helpful things to note are that by using Shift+click you can add more collision points. If you’d like to remove collision points, use Alt+click instead.
07 PREVIEW THE COLLISION
Having created your collision box, you then need to ensure that it runs the way you want it to, so you’ll need to give it a preview. Hit play and preview the adjusted collision.
08 ARRANGE THE SPRITES IN THE SCENE
When arranging the sprites on the Y axis, according to the sections they are in, you need to ensure that they are set to the following specifications:
The Background, made up of ominous forests in Unbound: Worlds Apart. The Y axis should be set from -7,000 to -10,000.
The Midground, which in our example comprises more detailed foliage. The Y axis should be set from -6,000 to -2,500.
The Walk Path, where our character Soli treks along on his quest and floating platforms, the Y axis should be set from -35 to -1.
Finally, the Foreground Y axis of Unbound: Worlds Apart should be set from 1 to 1,000 or more.
09 CREATE FOG
Adding fog is a component used extensively in games, and especially in the atmospheric environments of Unbound: Worlds Apart. Fog often gives video games a more tense, almost eerie look and feel, particularly apt for the dark fairytale style we’ve settled on for this title.
The fog is a PNG with a translucent gradient converted into a simple sprite. This will then create a better depth of field effect and give the image a better sense of aerial perspective.
It will also help to separate the environment assets from the actual gameplay assets, making the level clear for the player.
Of course it is important to have a beautiful environment, but it is also crucial to have very clear delimitation between the general environment and the assets the player can interact with.
Now, the scene is complete with all the elements, atmosphere and playability of a true gaming experience. •