Established on April 17, 2010 Vice Studios is a small indie game company that designs games for the PC and mobile devices.

Latest Media

We're sorry, but no images, videos or audio files have been added to this gallery.

If you would like to share media with the community, sign up and you can.

Blog RSS Feed Report abuse Latest Blog: Creating a GUI for multiple platforms : Unity3D

2 comments by vicestudios on Nov 30th, 2012

Introduction
Let’s face it, creating a User Interface for your game is no easy task. While working on our title Coco Blast, I came across a lot of challenges behind creating a UI that would work universally between multiple displays. In this post, I hope to describe tips and techniques behind creating dynamic User Interfaces for games.

Getting Started
When considering a UI, it is theorized that you should only have immediate vital information presented to the player. Try to reduce the need to populate the screen with random statistics and information that is seldom used.

Build your interface accordingly
The Core UI, as I like to call it, should have as few elements as possible. Great things to include would be Health, Mana, a Timer (if your game is time based), Booster Counts, etc…

The reason why these objects should be available is because they are core elements to gameplay. They directly relate immediate information that is helpful to the player.

The Secondary UI, can be considered any form of interface that contains information that doesn’t need to be presented to the player at all times. These elements could be: statistics, leaderboards, upgrade menus, etc…

Keep your UI as clutterless as possible.

Things you must know:
Draw Calls
Draw Calls consist of the objects that get drawn by the camera or screen. When a graphical object gets instantiated, the CPU must run calculations along with the GPU. All this processing increases your draw call count. For better performance, keep draw calls to a minimum.

You can read more about Draw Calls here.

Know your platform
While trying to design a user interface for your game, you need to know what platform you are developing for. For example, if you are creating a Web only game that will be shown on Kongregate, Addictive Games or Armor Games, the display size will never change. This simplifies your UI design process immensely because now there are no dynamics to your design. Everything is in a static position on the screen.

Now let’s say you are designing a game for Web and iOS. All of a sudden, we can’t use static positioning anymore. Now we need to support display sizes ranging from iPod Touch to iPad. As well, you now have retina displays which support an even greater pixel ratio. At this point, not only are we concerned about positioning, but also the pixel density (PPI or DPI) of the graphics we are using.

Theory of coding UI placement
When starting out, try to get skeletal designs of your UI. Complete with size, placement and potential animation movements.

Skeleton

The Breakdown
Believe it or not, there are several ways to achieve dynamic User Interfaces. The back-end design may change depending on your style of game. Here I will be showing you a technique that works for me.

Generally it is a good idea to break the UI into thirds, both vertically and horizontally. The idea behind this is as the screen scales, you have a grid of reference points.

Top-Left, Center-Left, Bottom-Left
Top-Center, Center-Center, Bottom-Center
Top-Right, Center-Right, Bottom-Right

To access these reference points, you need to be aware of the UI Coordinate System.

0,0 xy is Top-Left of the screen.
1,1 xy is Bottom-Right of the screen.

If you want to place your objects at the coordinates on the screen, all you need is the screens Width and Height.

Top-Left

csharp code:
Vector2 topLeft = new Vector2(0,0);

Center-Left

csharp code:
Vector2 centerLeft = new Vector2(0, Screen.height/2); 

Bottom-Left

csharp code:
Vector2 bottomLeft = new Vector2(0, Screen.height);

For the rest, you get the idea…

Using Unity’s GUI

With this in mind, here is a small code sample – C#

csharp code:
void OnGUI()
{

    float buttonWidth = 50;
    float buttonHeight = 50;
    float borderPadding = 10;

    Vector2 positionOfBoostButton = new Vector2(Screen.width - buttonWidth - borderPadding, Screen.height - buttonHeight - borderPadding);  

    if (GUI.Button(new Rect(positionOfBoostButton.x, positionOfBoostButton.y, buttonWidth, buttonHeight), "Boost"))
    {
        // Do Boost
    }
}


We want to snap our Boost Button to the bottom right of the screen. So if we know the width and height of our screen, we can calculate the position of the UI element regardless of the screen size. For effect, I added a border padding.

Don’t forget that every GUI element creates 1 draw call, unless it is a GUILayout element which draws 2 calls.

Platform specific GUI
Now that we know how to place objects on the screen, we need to know how to manipulate code for different platforms.

Platform Dependent Compilation
Depending on your development, you may wish to simultaneously build your game for multiple platforms. If this is the case then ‘Platform Dependent Compilation‘ is for you.

The idea is simple. By using a bit of code, Unity can determine what code to use for what platform. This is effective for integrating multiple code platforms into one game project.

Let’s say you want to have a button for the iOS Platform that is aligned at the Top-Left of the screen. However, for your web build you want that same graphic repositioned and scaled for whatever reason.

The code is simple…

csharp code:
#if UNITY_IPHONE  

// Change the global position of the object here  

// Change the scale here  

#endif  


#if UNITY_WEBPLAYER  

// Change the global position of the object to something else  

// Change the scale to something else  

#endif 


Now, with this code you can build for multiple platforms without adding additional scripts or creating multiple code projects.

Third Party Tools
Unity’s Asset Store has a number of third party tools that can be useful for GUI management. Take for example TK2D. This system was not only built for UI elements but also in game 2D sprites. The idea here being we are using geometry quads to place sprites in 3D space.

This method presents its own challenges but depending on the game; this may be the way to go.

One of the biggest advantages of creating a UI out of sprites on 2D planes is Atlasing. Atlasing is a method that combines multiple sprites into one texture. Thus creating a single draw call from any one texture in that Atlas. For games that use a lot of UI elements, this obviously has its advantages.

One of the biggest disadvantages to this system is you have to create your own interaction callback scripts for Buttons and other touchable/clickable objects. For in-experienced programmers, this can be a lot of extra code management.

Wrap Up
Here I’ve presented you with a high level overview of getting dynamic GUIs created for multiple platforms. Hopefully this helps you get started on a GUI system for your own games.

If you have any questions or comments, please leave them below.

Groups
2012 App of the Year Awards

2012 App of the Year Awards

Official event with 32 members, open to all members

Welcome one and all the to 1st annual App of the Year awards, celebrating all that is great about our beloved mobile gaming community, the developers...

Indie Devs

Indie Devs

Hobbies & Interests group with 1,083 members, open to all members

A group dedicated to indie and standalone game development.

ModDB

ModDB

Official group with 3,756 members, open to all members

If it's information about ModDB and ramblings about mods in general that you are after - then you have come to the right place. Welcome to the official...

SlideDB

SlideDB

Official group with 174 members, open to all members

Mobile and tablet games have opened up a new world of gaming anywhere and everywhere you want. You can slide, tap, shake and play all manner of games...

Unity devs

Unity devs

Hobbies & Interests group with 1,147 members, open to all members

For all Unity developers and developers-to-be, both beginners and professionals!

Vice Studios

Vice Studios

Developer Must apply to join

Vice Studios is an Indie Game Company based in the good old US of A. We strive to make fun addictive games for all ages. It's not all about the money...

Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Level
Avatar
Avatar
Offline Since
Dec 20, 2012
Country
United States United States
Gender
Anonymous
Member Watch
Track this member
Accolades
2012 App of the Year Awards ModDB SlideDB
Statistics
Activity Points
330
Rank
7,154 of 463,258
Watchers
0 members
Time Online
1 second
Comments
7
Site Visits
241
Profile Visitors
1,767 (4 today)
Contact
Homepage
Vice-studios.com
Private Message
Send Now
Email
Members Only
Twitter

Latest tweets from @vicegames

Please help us make the top 10! Vote for us in the "Arcade" genre - Happy Holidays to all! @cocoblastgame #doyoucoco T.co

Dec 20 2012, 4:18pm

New Suit Teaser: T.co via @youtube

Dec 18 2012, 10:44am

Coco Blast is now available on @Kongregate! Please RT #cocoblast #casualgames #freetoplay T.co

Dec 13 2012, 10:27am

Hey guys my game is on apples app store now!!! download me and take me with you, and check out my company @vicegames #readytohavefun

Dec 12 2012, 9:01pm

@cocoblastgame Way to go Coco!! Thanks to all of our supporters for helping spread the word and rock the vote! Only 8 days left to vote!!

Dec 12 2012, 1:30pm

Coco Blast is now available on the @AppStore !! Check it out on your iPhone, iPad, or iPod Touch! #victory #cocoblast T.co

Dec 12 2012, 11:32am

No one is friends with vicestudios awww. You should invite your mates to the site, or make new ones.