Hello Vikings!
The UI in the Viking City Builder game is starting to take shape! We’re slowly polishing the selection of element styles, typography, or colors and today we’d like to present one of its parts, which is the Main Menu.
As most of you probably know, the Main Menu is the UI element that you’ll see on your screen, even before you start playing the game.
When creating the various UI elements, we’re accompanied by the idea of functionality, with an effective, thematic design at the same time.
OK, let us introduce you to the technical side. When creating a 3D game, some elements like User Interface are in 2D, but the Main Menu is a 2D Art in a 3D space.
Initially, in the process of creating the Main Menu, concept art is created, which is divided into layers such as the sky, clouds, earth, or characters.
The character’s layer must be additionally divided into small parts and scattered over the texture.
On separated parts of the texture, the mesh is cut and the UV of the island is placed and then the mesh is folded so that it looks like the previously created key.
Summarizing the first stage of technical preparation, in the beginning, you should break Art to re-glue it.
In the next stage, a rig for characters and movable elements is created, to which the mesh is skinned (assigned).
Then the animation is created and the source file is exported and then imported into the engine.
In the engine, a scene without lighting is prepared, with an orthographic camera and a previously prepared widget with UI added.
The mesh previously imported to the engine is added to the scene and the appropriate materials are attached to it.
The materials are unlit and all rather standard except the cloud material which has a sliding tile on one of the axis to keep the clouds moving in the loop.
Watch on YouTube
Keep in mind that the Main Menu is currently a work in progress and we’re exploring its possibilities and its best looks. Today you’ll only see an iteration here and many things may still change, so we look forward to your feedback on our Discord and social media!
Thanks for watching and stay tuned for more!