Jump to content
  • entries
    13
  • comments
    2
  • views
    1353

Dev Blog #03 – Polishing the UI

RoKabium Games

1000 views

RoKabium-Games-Something-Ate-My-Alien-De
UI is an important part of game design and is not always easy to get right.

When we started our game “Something Ate My Alien” we just dumped text on the screen to get the info on there without any real care of ‘design’ or aesthetics. Which was fine to start with as we just needed ‘functionality’.

We got to the point where the game was coming along nicely, but it was time to give some TLC to the UI.

We started with Kat doing some UI design in Photoshop to get things looking coherent and get the design right. Then she split up the bits into sprites and I would code it in Unity.
RoKabium-Games-Something-Ate-My-Alien-De
This worked well and saved us time I think because it was easier to get the design right in PS first, rather than spending time in Unity moving things around etc.

We made sure everything was easy to find without having to ‘drill down’ through too many windows, while also not allowing the screen to get too cluttered with lots of info.

We found a font that worked well with our design and we used the Unity Asset ‘TextMeshPro’ to do all text with as this was a great asset that helped us scale and customize the text easily.

Although currently we have only done everything in English, we have also kept in mind that we will want to localize it into other languages further along.
RoKabium-Games-Something-Ate-My-Alien-De
We’ve had problems along the way with Unity, as a couple of the upgrades caused bugs and issues that took some time to find which was quite annoying. Currently we have them all worked around, apart from one that I need to locate. Between version 2017.2 and 2017.3 one of our screens has dropped FPS from 1300 to 300, which is a significant performance drop, which I think is something to do with ScrollRects having a problem. At the moment though 300 FPS doesn’t cause us a direct problem, but it is something I need to look into.

SAMA contains 4 different worlds that you go through, and they are very different color schemes. So we also had to get the design of the UI to match them all. So we came up with the idea of using background images for the UI of the actual game worlds themselves. Kat hand painted them to match the worlds and then we select them depending of which world we are currently in. For smaller windows that pop up, we pick a random part of the background image, and use that for the window background. It seems to work well and make our UI now has a consistent feel about it, no matter where you are.
RoKabium-Games-Something-Ate-My-Alien-De
Another important part of UI, is the size of it, particularly the text size. In the beginning we had used a very small size, since we were using large screens (30′ Dell monitors and 2560×1600 res) and we didn’t notice too much. But it was hard to read on a smaller and more standard 1920×1080 screen. So we increased the font size quite bit, and that made it much more readable and easier to see. We have got a scaling system in place also that I’m hoping we can expose in the settings menu, so the users will be able to change the size depending on their preferences.

While making it look good, we also had to consider functionality, and keyboard navigation is an important part of that. Everything can be controlled with the keyboard or mouse. Some people like clicking, some like keys… or both, and it’s important that a UI has both.

We tried to follow what I would call the ‘windows standard’ of things, and make it work the way windows does, as most people are familiar with that. So tabbing between fields (including reverse tabbing), cursor movement between items in scroll areas, button positions and defaults, standards like Escape key closing any window etc etc.

It’s important to make the text on a button very explanatory. So if you have a window pop up for ‘saving’ the game, don’t just put ‘ok’ and ‘no’ on the buttons. Its much better to put ‘Save’ ‘Cancel’ instead as that is more clear what the buttons do.
RoKabium-Games-Something-Ate-My-Alien-De
As part of the UI we also updated the HUD to match the same design. All the important information you need while down in the worlds is displayed. Again, we will have settings that allow the scale of the HUD to be changed so that the user can tweak it. Also so they can remove it fully (or fade it) for screen shots or if you don’t want it visible during game play.

All in all, its taken alot longer than I had imagined to complete it all, but finally I think we can say that its mostly done now and is in a good shape. Hopefully we have created a great UI and one that our players will enjoy using.

Any comments and feedback is welcome.

 

View the full article

 



1 Comment


Recommended Comments

Text localization can be a pain, good thing you're thinking about it in advance!

Share this comment


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
  • Advertisement
  • Blog Entries

  • Similar Content

    • By Masterbuiler64
      Good Morning, Afternoon, or Evening,
      My name is Dalton Potter and I am a budding game developer looking to learn skills and develop a beautiful project me and my friend came up with a year ago or so and have refined ever since. The idea is a basically a mix of Final Fantasy and Zelda in terms of exploration and battle, but will throw in its own unique features to switch things up a bit. What we have in place so far is the main story and many connecting character back stories, a map of the over world (still not 100% confirmed however), how some of the main characters look (also not 100% confirmed), a few battle and puzzle mechanic ideas, general story progression, locations, a few beta music tracks, and lore. What we lack however is any solid assets or work done on it as neither of us have any expertise in game development, but have both unanimously agreed that this idea is too good to forget and pass up.
      We are currently looking for people to help us work on the project as time goes on and maybe, just maybe, it may grow into a full blown team of people working on a game and eventually sell it on Steam or other client services. Any replies to this topic will be read as soon as possible depending on my schedule. I have also attached a couple photos and sound files of some design concepts we have. I also have a Pastebin made of the entire story and main character back stories, as well as history into how the idea came to be, though I'll let the Pastebin be requested as needed in the future.
      Hopefully this project turns from being just an idea into something amazingly beautiful and playable......it just needs to be created that's all.....
      Thank you in advance,
      Dalton Potter
      P.S. The sound file, "Power and Prestige" is a song that sounds as though it could be used as a trailer theme, and "Curiosity" sounds as though it could be used on a farm at sunrise.
      Source of music was from YouTube, but the groups official site is as follows: http://floatingcloud.net/
       
      EDIT: I am adding in a link to the pastebin so those that view this can get look at the story for the game. Link: https://pastebin.com/U7dKp8PS

      Floating Cloud - Power and Prestige.mp3

      Floating Cloud - Curiosity.mp3

    • By BlackSpoon
      Hi guys, let me introduce my new project - Just Smash It! It's all about destruction! Break your way smashing objects with aimed shots!
      * Realistic physics of destruction
      * Smooth game flow
      * Pleasant graphic and sound design
      * Infinite mode after passing the basic set of levels
      * Small size, great time-killer!
      Play Market: https://play.google.com/store/apps/details?id=com.blackspoongames.smashworld
      Feedback are welcome!
    • By Seer
      I have programmed an implementation of the Separating Axis Theorem to handle collisions between 2D convex polygons. It is written in Processing and can be viewed on Github here. There are a couple of issues with it that I would like some help in resolving.
      In the construction of Polygon objects, you specify the width and height of the polygon and the initial rotation offset by which the vertices will be placed around the polygon. If the rotation offset is 0, the first vertex is placed directly to the right of the object. If higher or lower, the first vertex is placed clockwise or counter-clockwise, respectively, around the circumference of the object by the rotation amount. The rest of the vertices follow by a consistent offset of TWO_PI / number of vertices. While this places the vertices at the correct angle around the polygon, the problem is that if the rotation is anything other than 0, the width and height of the polygon are no longer the values specified. They are reduced because the vertices are placed around the polygon using the sin and cos functions, which often return values other than 1 or -1. Of course, when the half width and half height are multiplied by a sin or cos value other than 1 or -1, they are reduced. This is my issue. How can I place an arbitrary number of vertices at an arbitrary rotation around the polygon, while maintaining both the intended shape specified by the number of vertices (triangle, hexagon, octagon), and the intended width and height of the polygon as specified by the parameter values in the constructor?
      The Polygon code:
      class Polygon { PVector position; PShape shape; int w, h, halfW, halfH; color c; ArrayList<PVector> vertexOffsets; Polygon(PVector position, int numVertices, int w, int h, float rotation) { this.position = position; this.w = w; this.h = h; this.halfW = w / 2; this.halfH = h / 2; this.c = color(255); vertexOffsets = new ArrayList<PVector>(); if(numVertices < 3) numVertices = 3; shape = createShape(); shape.beginShape(); shape.fill(255); shape.stroke(255); for(int i = 0; i < numVertices; ++i) { PVector vertex = new PVector(position.x + cos(rotation) * halfW, position.y + sin(rotation) * halfH); shape.vertex(vertex.x, vertex.y); rotation += TWO_PI / numVertices; PVector vertexOffset = vertex.sub(position); vertexOffsets.add(vertexOffset); } shape.endShape(CLOSE); } void move(float x, float y) { position.set(x, y); for(int i = 0; i < shape.getVertexCount(); ++i) { PVector vertexOffset = vertexOffsets.get(i); shape.setVertex(i, position.x + vertexOffset.x, position.y + vertexOffset.y); } } void rotate(float angle) { for(int i = 0; i < shape.getVertexCount(); ++i) { PVector vertexOffset = vertexOffsets.get(i); vertexOffset.rotate(angle); shape.setVertex(i, position.x + vertexOffset.x, position.y + vertexOffset.y); } } void setColour(color c) { this.c = c; } void render() { shape.setFill(c); shape(shape); } }  
      My other issue is that when two polygons with three vertices each collide, they are not always moved out of collision smoothly by the Minimum Translation Vector returned by the SAT algorithm. The polygon moved out of collision by the MTV does not rest against the other polygon as it should, it instead jumps back a small distance. I find this very strange as I have been unable to replicate this behaviour when resolving collisions between polygons of other vertex quantities and I cannot find the flaw in the implementation, though it must be there. What could be causing this incorrect collision resolution, which from my testing appears to only occur between polygons of three vertices?
      Any help you can provide on these issues would be greatly appreciated. Thank you.
    • By Rio Lloyd
      Hey all!
      we are a team of 3 looking for more members, 
      we are making an isometrical Survival RPG.
      we are looking For Members who can make low poly 3D artists who can do character models, environments, tools and more.
       
      if interested and want to know more email me at rioishere14@gmail.com
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

We are the game development community.

Whether you are an indie, hobbyist, AAA developer, or just trying to learn, GameDev.net is the place for you to learn, share, and connect with the games industry. Learn more About Us or sign up!

Sign me up!