Creating UI for Birdboys (Part 1)

So my friend wanted to create a FPS (First person shooter) to practice networking. I thought this would be a good time to practice rigging and modeling. We sat down a few days ago, went over the design, and I started working on the bird model and rigging for a cowboy themed game. I don’t have a lot of experience in that so my modeling and rigging was pretty slow..

I redid the bird multiple times… But this was the original bird.

Here is a later model that I was testing it out – I figured I’d redo the model again later, so testing it out would be fine. After spending time learning how to setup IK’s in Blender, I came to realize they don’t work in Unity like I hoped to my disappoint.. There are ways to make them work but they aren’t as easy…

My original goal was to make these awesome sculpted birds all fully rigged and maybe animated. That didn’t really turn out like I hoped, I’m pretty bad at sculpting for one thing and got lost often. My programmer didn’t know how to handle bones and wasn’t exactly happy I requested procedural animation and send them an article on how to implement it. But they said they would look into it.

Anyways!

Even though modeling & rigging takes me forever from my lack of experience, UI is a different story.

Main Screen

I asked about some requirements, took down some rough notes, stared at what the programmer came up with and panicked for a minute…

I thought I could not improve this at first glance!

But then I came to my senses and I looked at western UI from other games, I didn’t actually see much I liked but it gave me some ideas on maybe where I could improve. I wanted something cartoony, but with a strong western feel.

So I started a quick mock-up… I actually tried some wireframe tools but found them so slow and painful to use, I just put them away. I like the idea of wireframe tools but if it only takes me an hour or two create some starting assets, it’s just faster for me to mock-up and create at the same time. I thought I’d just skip ahead and in an few short hours I created a starting point for what I wanted the mock-up to look like. I know I’m terrible for not doing concept art/wireframes but sometimes it’s better to make something then be stuck moving boxes around.

My thoughts on this was I wanted the center background to be the easiest to see, as the background changed a lot I didn’t want to cover it up. I can always condense the server stuff even further if I need to make it easier to notice the background. I choose a dropdown to handle server stuff because I figured that was faster to search then with other methods, but they could also directly type their IP as well. I’m sure someone out there is dying from OCD because none of the stuff below is properly lined up.

I didn’t really put much effort in this yet.

No, I didn’t have all the fonts picked out yet, I didn’t know what to do about colors yet either, I just wanted to get some ideas out there for now. I passed it over to the programmer for review, he thought it was a good start and I agreed with him. This is basically a bunch of boxes with a texture laid on the back, so it’s basically zero effort. The title I pushed through a logo template set I have, I’ll have to fix it later but it got the idea across. I decided to stick with the open source Rye font the programmer choose and added Lato which I thought was cute. (Obviously not as cute as bookman sans but that isn’t open source)

We talked about converting the Controls section over to a wanted poster for some visual interest, I thought that seemed like a good idea, but I would need another font for that. So me and the programmer looked for some open source fonts and I wanted something similar to Mircosoft’s Playbill. We eventually settled on Smokum, and I did some quick work on the wanted poster.

I wasn’t sure how to go about the wanted poster idea but I wanted something simple. You can see the Playbill font above.

Well, from here I broke down some art assets I figured I would need at some point… Because I thought I’d do the easy stuff first. I made some wood and called it good enough and thought about what to do next.

But I was stuck now.. I needed a better way to handle input.

I decided to redo the menu again & just condense the info.

The programmer was pretty upset with this redesign and it’s understandable. He wanted me to condense the Client options, add another option and fix the flow. After some back and forth we eventually came to use this.

I put a few bullet holes in the sign, it’s still kinda on the empty side though.

And that was the final mock-up. I added a few more buttons for later on in case we needed them. An Info button that would talk about server info (or anything else, sometimes I just make “back-up” buttons we can repurpose as needed) and an options button that would allow you to change volume, mouse sensitivity etc. I also added some bullet holes, some part way through and some actual holes. I also changed the text because I didn’t quite get the programmer jabber and tried to make the options make “more sense” since the programmer complained my labels didn’t make a lot of sense, I said his initial specs would not make sense to the average player so there I wrote it easier for the layman to get started.

Now I know dropdowns can drive people crazy, and perhaps there may have been a way to combine the input text field and dropdown field as they were combined -Some might call this a “searchfield” dropdown. I wasn’t sure if Unity allowed such an option (might be something we could code in though) and I also was not sure if it would be clear to the user what info they needed. The Select Host IP info would be coming from a text file of the users creation.

Yeah, these are zero effort bullet holes. Pretty much just layer effects
Hey, creating a wood texture is easy, here is a video on handpainting textures if you want more info.
For those wondering what the ? button did.

Above is a quick mock-up with a little more info on how to handle hosting, it will need some more work…

First pass at a quick options screen
second pass at a quick options screen

Anyway I’ll continue to update this post as I keep working on this. I’d like to show the in-game version later on, along with the rest of the menu’s….

To be continued…

Score Screen

Originally with the score screen I wanted to use some icons to show teams so I created some icons and debated how they would look. Now, I feel score screen is not the right term, perhaps I should say current score screen vs result score screen. Because they are two different screens with two different priorities. I did briefly get them mixed up, with a results screen flashy icons make sense, with a current score screen they do not.

A current score screen should be small and out of the way as much as possible during gameplay, a results score should take up more space as it’s no longer during gameplay and allows the player more time to go through stats and think about the game.

Debating style choice
Starting to overthink it now… Switched gears…
This concept was pretty bad…

In the end though, I didn’t like the icon idea and thought about doing something completely different that I think fit the game style better. The icons were too realistic for my cartoony UI from earlier and I saw it as a style clash.

I decided to try and combine other FPS score screens with 1800’s ledgers or bills of sale

Using this method I would be able to condense the info better, and keep it fitting the style better, or at least that was my goal. Here was a quick draft I made an hour or two to send over to the programmer to ask his opinion on this direction. Man did they use a lot of different fonts on old paperwork. I know the general idea is to stick with one to three fonts, but that felt too simple compared to my reference art.

The different fonts for different players idea was veto’d quickly as it should be

I whipped up an example trying to combine the best of both worlds. Yes, the graph would need another row, I’d need to make further adjustments on fonts, positioning and more but it gave me a direction to go in. The programmer liked it for the most part and we went over ways to improve it, mostly visually which I was not worried too much about. My main concern was can I convey the info well, and did it need to take so much space…?

I would continue to chip away at the design. I really liked how wide it was visually… But I wondered if it was just too big.
Why waste useful space if I didn’t need too.

So after condensing everything once more I sent it off to the programmer for review. I wasn’t sure how I felt about transparency, on one hand it makes it easier to see players behind the screen, on the other, it doesn’t look as nice with those blue lines..

I was starting to hate the design (It was becoming too busy visually, didn’t feel playful either..) so I figured now was time for feedback.

This will be continued in a follow up post now. Stay tuned.

Software for Special Effects (FX)

Hey I wanted a write a quick post on some really awesome tools out there for special effects (FX). If you find yourself in a hurry to get some effects out here is some software that will help. You can use these effects for movies, games, whatever. I’ll probably add more to this list at a later date.

Particle Illusion (Free – Mac/Windows)

Swapping out images in particle illusion
Here I’m swapping out images
Example of particle illusion
The software is really user friendly (You don’t have to start/stop the animation but for recording I did)

Free, beautiful, 2,000 effects you can play with for free. The downsides to this software is it only renders to video (.mov & mp4) so for other projects you may need to convert for example to spritesheets for games or low end machines/devices. Converting from video to gif is really easy too so that’s another thing you may need to try later on.

It can export to 8k though so if you need something high end, this baby can make you some really nice effects fast.

I found this nice video that introduced me to this software and I think he did a good job covering it in 15 mins.

Smear FX ($15 windows)

smear fx example

Works particularly well with sprites, you can quickly add a smear animation to anything. Because this software was (I very much assume) created in Gamemaker it has it’s limitations but I still think it’s a fun tool on it’s own.
This guy makes a ton of fun animation software and I recommend his other projects.

smear fx interface

Juice FX ($20 Windows)

Great for particular animations common in games (Flash, Scale, Skew, Shake, Wobble, Jump, Wave etc), you just load an the image or images and with a few sliders can quickly export a finished animation.

juice fx bear animations
Juice fx destroyed box example

Lots of fun effects and it exports as a spritesheet for easy use. Man WordPress struggles with gifs.. Check the Juice FX page for more.


I thought I’d throw in a particle effect to spritesheet tool because Unity is great for creating particle effects. If you ever want to use them outside of Unity or have a particle effect within another particle effect then spritesheets is a easy way to do that.

Shuriken to spritesheet example image

Now of course you can use other software like Blender, After Effects, or more complicated tools but if you want something fast for FX these tools will really help.

Designing Good UI/UX is Hard

For those looking for a brief UI overview for small projects, a UI Stylesheet works alright. It’s not as fancy as a full on style guide but for smaller projects it may be what you need as you work out different UI ideas. If you are working on anything longer then 2 weeks, I recommend building a style guide or else you will very likely suffer.

  1. Having a style guide gives you a clear vision of why you made these decisions, this reduces debate.
  2. It’s nice to have a document to refer back to 6 months later when you aren’t sure what size this box was or what color you used on an icon..
  3. You have guidelines ready for if you add new teammates!
  4. I personally think the history of the design is an important aspect to add to the guide unless you can expect the specs and requirements to never change on the project.
  5. Creating a guide alongside with UX reasoning also helps you understand why your UI is laid in the way it is.

While working on Roguecraft Squadron (An RTS computer game) I went through many many many many different versions of UI. It was hard for me to see the big picture or what direction we should go in because the gameplay was not fleshed out all the way. Another issue was the speed of development. Originally this game was built in 3 days so the UI was choppy and very light. I didn’t know back then about better ways to think about development.

I did not know how to design for long term projects and that made designing UI very challenging.

Original 3 day game prototype. All art above is my mine. Photo from Feb 2017

I was thinking after the 3 day game jam, since we were so successful, we should continue development on the game. We continued to do so and did user testing at a local game meetup’s among other places. We would have people play and we would try to figure out ways to improve the game and make it more fun. While our user testing with formal experience was limited, we made the best of it. We would basically sit a user down and watch them play and ask them questions were they struggled.

This was April 2017. We tried to add in a tutorial, it would be a few more years before we figured out how to do it right.

I was still learning how to create UI during this process, and things such as 9 slicing. Since this was built in the LÖVE Framework it was much more restricted then something like as the Unity Game Engine that has a interface I can work with. While I could build designs, the feasibility of designs was limited because of time constricts and limits within the framework.

Me fiddling about with 12 slices here…

Now as I worked on changing UI throughout the process I realized had we just decided on a style and covered constraints early on it would have saved a lot of frustration in the process. Towards the end we ended up stripping out any fancy effects I had in mind and keeping it very basic so we could finish the project.

The UI in the end – Feb 2019. Very stripped down and purely function over style.
This was further worked on, as you can see the ship now had a selector, and the layout was overhauled
Now you might ask yourself what is a stylesheet?

A stylesheet is a way to glance over all your visual elements so you can see if they work together. I can’t remember the original creator of the this PS stylesheet template but I liked the idea. It was a way to quickly compare elements and see if they worked together. A quick mock-up so to speak. The idea is to test colors, patterns, fonts and other styles together to see if they work together. You can then create different styles and compare them.

Here is an example I made of a stylesheet for Stellaris. I was not part of the team this is just an example.
Here is an example I created during the pre-production of a game I was working on later on.
Here I was trying to make sense of what the game had become!

Well near the end as we decided to overhaul the UI to a simple version then I went about trying to make sense of the UI. At that point colors were random and did not work well together and things were becoming hard to understand, the other problem was we introduced new artists that didn’t understand our UI guidelines (Maybe because we didn’t have any then??) so the art we received was completely in the wrong style. If you work on a project for a few years without proper planning – original designs and plans get muddled. Sometimes the worse thing you can do is continue to try and improve something in your current direction.

What I would recommend if I were to fix this – Ask 3 important questions

  1. First separate out the elements, compare them to one another. Do the UI elements feel like they fit together? Do they all share similar styles, sizes and color schemes? What doesn’t fit? What does fit? Does spacing and size feel right? I feel that spacing and sizing of our UI could have used work. As the art we received from two new artists did not fit but I couldn’t argue that out of the project as it was already commissioned for and we didn’t want people to feel bad.
  2. Second, can you tell what the theme is from the color scheme? Why are the colors chosen? What is the meaning behind the colors? I think overall our UI colors worked but could have been more focused.
  3. Third – do the elements themselves feel like they belong with the rest of the content? (The game in this case). In the last version of our UI I would say no. The rest of the game is detailed, but the UI is strangely not. It doesn’t feel connected to the world in my opinion.

Using this process I believe we could have worked out a UI that felt better connected to the game.

There were numerous time constricts with the design and what the programmers could do so sometimes you just have to let it go and just find doable fixes the programmer will okay for your deadline.

If you want to see behind the scenes on some of the ideas for the UI why not look at the notes on GitHub?

Here you can see the crazy design process on RCS. Design is messy, frustrating, and getting a win like getting the programmer to add a UI back button can really feel like a victory (I mean I really fought for a back button on all the main screens, it was like not until we were going to release 2 years later we added one).

Here you can see my journey of learning how to write better tickets, create better designs, and figure out better project management. Lots & lots of mistakes but I slowly learned how to improve. Not everything is here but here are a few examples of stuff I’ve worked on.

I never claimed to be a good designer and I sure learned a lot over a few years working with designing screens. What I learned most of all is…

Use a style guide next time!
A part of me would like to write a guide on a style guide for RCS sometime when I have more free time. Considering this has been a pet project for so many years, it’s nice to work on in my free time but I always have so many other projects going on, we’ll see when it happens.
Smiling Cat Media