Posts regarding any UI’s or user interface design work that I’ve worked on.
In this dev blog I show how I created the user interface for my game, implemented temporary audio and also made a few gameplay improvements.
I wanted the UI to match the neon glow visuals that the game took and seamlessly integrate into gameplay, allowing continuous play without hassle.
A key ascetic component revolved around the glow effect that’s rendered in engine, which made it challenging to foresee the end result of the UI art…
Exporting UI assets from screen mock-ups can be messy, so a while ago, I devised a process to simplify it. It helps limit human error in the exporting process and speed things up by automating a lot of it. I’ve used it to track and update assets easily, ensuring nothing is missed and also for simplifying future exports for any necessary changes.
In this tutorial I go over how to create a stepper and its functionality in Unreal using UMG. It’s quite an extensive step-by-step that also introduces ideas on how to combine different UMG widgets to create more complex ones. Note that this tutorial focuses on building a functional prototype of a stepper in Unreal and does not cover creating the art for it.
It has been a while since I’ve updated my website, so I am quite exited to finally unveil my new logo and website. I’ve been itching to have my own logo for a while and designing for yourself is a challenging task. This has been something I’ve been slowly building upon overtime and have finally settled with a meaningful design that I’m proud of. With the new logo comes a site that pays homage to some features of my old one, such as the colours, but also brings in some much needed modern features, like supporting different media screens. I…
I’m very excited to announce that Rise: Battle Lines is set to release on October 19 on Steam! Rise: Battle Lines has come a long way since the last time I posted about it here with improved gameplay, environment, UI and more great music and SFX. Please check out the Steam game page and the game trailer! Our game may be in early access but it’s ready to go and play and is in a proper late beta state. During early access, we are aiming to add extra features to what we already have and polish/improve things to give an…
The Secret Games Company welcomed me into their team to help them create the UI for Rise: Battle Lines, a Unity 3D game that utilizes NGUI. I needed to create designs that worked with some of NGUI’s features, such as scalable panels using NGUI’s sliced sprite feature. They already had a basic UI in the works and needed me to complete it visually. After our programmer finished implementing the UI screens and functions, they tasked me to work on the UI in Unity, doing things like adding new features, fixing bugs or tweaking the design. It has been a great…
This is an inventory UI concept that I based on one of my own games I work part time on. My goal for it visually was to make it have a backpack look to convey the feeling that you are searching for items in your own backpack. The visual theme also sparked ideas for the belt tabs and the zipper scrollbar. I also decided to make everything that is clickable have traces of gold and teal in their color scheme. This would help give guides for navigation, which combats the issue of a lot of detail potentially being distracting. I…
I created a steam punk style map screen concept that would work for PC controls. My goal was to make a design that works with 1280×720 to 1920×1080 size screens and use repeating techniques to keep the image size down. My solution was making the smaller screen show all the necessary content and the larger version adds extra details and spaces things out a bit more. I also wanted to give the UI a hand painted feel, so I often repainted over the main shapes and shadow effects to blend everything. The player would encounter this screen while on their…
I designed a UI that would work for a zombie strategy game on social media like Facebook. The game mechanics would be similar to Rebuild 2 and have new features like multiplayer and capturing other player’s buildings by controlling small teams of units. I separated the UI in two main windows, the left shows up whenever you click on a building or enemies and the bottom shows up when you click on a team. This allowed a large amount of specific orders that the player could do. For example when you click on an occupied building, it gives you options…
This is a mock UI for a fantasy RPG style game on the iPhone 5. My goal for this exercise was to give a convenient way for the player to buy large quantities of supplies with various item choices using the touch controls. The solution I came up with was to touch on the left red squares to make a slider pop out and then drag it left and right to increase the quantity. The player can also easily scroll through the item list by dragging up and down, and the slider on the right shows the list position. After…
I created a science fiction user interface for an ARPG style game. My focus for this one was applying the detailing and shading that I experimented with while recreating the Starcraft 2 and League of Legends UI.
I’ve done an experiment to analyze AAA UIs and how they were made by recreating them from scratch in Photoshop. Most of the techniques used were shapes and layer effects, then a bit of painting and texturing over top. I don’t know for sure if the original user interfaces were built the same way, but this was quite a rewarding exercise anyways as it has pushed me to think of UI a bit differently and the challenge really unlocked some new abilities for me.