Made With Marmalade: Bringing 2D elements to 3D games

Made With Marmalade: Bringing 2D elements to 3D games
Marmalade

Presented by Marmalade

May 5th 2016 at 11:07AM

Marmalade’s Steffie Garcia, Daniel Hall and Matthew Teague explain why building in 3D shouldn’t mean devs forget about creating 2D content, and offer their tips for making the most of your assets

What 2D content in 3D development get overlooked most often?
Steffie Garcia, UI Artist, Marmalade Game Studio: Concerning the UI, I’d say it’s the optimisation and general housekeeping of your project files. It tends to get left until the end of development, when there are a lot of assets in the game and they become hard to keep track of. 

Why are these important?
Garcia: Optimising your UI assets makes a huge difference to how well a game runs. If you have a badly optimised game, for example with lots of very large textures, it can cause the game to run slowly or crash.

Optimising can take place in many different ways, such as making your texture a power of two, or using a nine-sliced texture stretched in place of a large single texture. 

Matthew Teague, Designer, Marmalade: Designing and implementing a fluid and visually appealing UI is extremely important for making a game stand out from the crowd. 

A quality UI helps convey the sense of polish within a game. The more triple-A your game’s UI can look, the better chance it has of being featured on the app store. 

How does Marmalade Platform help developers create 2D content for 3D mobile games?
Daniel Hall, Technical Marketing Manager, Marmalade: As part of Marmalade 2D Kit, we provide an editor that allows content creators to iterate fast and often. The editor exports an open and easily parsed file format.

We also provide a lightweight runtime playback component that easily integrates into any existing engine that ensures high performance playback and easy integration. 

What skills/experience do devs need to produce good 2D assets?
Garcia: Apart from the obvious artistry skills, such as an understanding of lighting, colour and form, there is the ability to consider the size that you will see the assets.

For example, if you are creating icons for a mobile game, you mustn’t make them too detailed, as they will look busy and hard to read when seen on a small screen.

It is good to also use vectors where you can when creating the assets, as they won’t lose quality if you need to scale them up at a later date. 

How do you avoid over-designing 2D assets that distract or get in the way of the 3D gameplay?
Garcia: Before any assets are created, you should generally have a wireframe version of the UI for your game. To avoid creating distracting UI that doesn’t mesh with the game, I would use a screenshot of the existing game or some concept art. Then I would design on top of the screenshot, taking note of the shading, colours and gameplay area, as well as making use of the wireframe to make sure the size and positions are correct.

It’s also important to consider the different aspect ratios your UI will be viewed at. A 16:9 device has considerably more height than an iPad and you must design and implement a screen that works with both. The solution doesn’t always have to be ‘one size fits all’, with elements sitting inside an iPad-safe area on a 16:9 screen. 

Teague: Wireframing user interfaces and how each screen flows together is important as it can help a
developer recognise pitfalls in their UI design. 

Which of your customers’ mobile titles is a good example of how this has been done well?
Hall: SimCity BuildIt developer Track Twenty has done a fantastic job of combining a polished, exciting 2D UI with 3D visuals in its game.

The as-yet-unreleased latest title from our own Game Studio has used 2D Kit exclusively for 2D UI.