Tamer Sioufi
The City Below contributions
UI & Extras
As one of the seniors of the group, I would get asked help from juniors to help teach them something or to help correct their work where needed. Occasionally I would also help the seniors when I had more experience with them in a particular area.
​
Below are some extra contributions I made to help members of the team as well as improve the final product.
Front End UI
On some of my other projects I have practised creating my own front end UI from scratch. Creating bespoke User Interface materials which change and alter based on customised parameters.
​
For this project we had a UI Designer, after showing her some of my other work on UI, we felt it best for me to design the materials for her to work with, while she deals with the backend UI.
​
So I started by creating a master material for the UI. My goals were to make it highly customisable for our UI designer to work with, as well as being performant.
​
I started with the basic SDF. Which is a Signed Distance Field. It describes the distance from a point to it's shape boundaries. The SDF helps to create a basic shape within the UI container. I then added different components to this SDF, such as border and glow effects among others.
​
Below are two code snippets of the border function and the border's colour function, with customisable parameters.
Above is a video preview of how the material works in editor. You can see all of the custom parameters I created for our UI designer to make use of. I also show how changing the parameters affects the look of the material.
Examples of what can be made with this material.
The Reticle
Since the primary weapon in The City Below is the player pistol. We needed a reticle for the aim. I decided to create one from scratch, this would have hitmarkers built in and again be very customisable.
​
I started by creating a base circular shape, I then created a series of masks which can be tweaked and alter the base circle shape.
​
Below is a snippet of the code which shows how the masks alter the basic shape.
Below are some examples of what can be achieved with this material.
Examples of what can be made with this material.
The masks and the parameters are very customisable allowing for unique and varied animations in gameplay. You can also see the aim in animation below, which shows the flexibility of the material.
The HUD
After completing both the reticle and button master materials I shifted focus on creating the HUD material. This would need to show the player's health as well as shields and equipped weapons.
​
I took a similar approach to working on the HUD material as I did the reticle. I started with the basic shape I wanted which was a circular shape, then applied some masks to only show the segment of the circle.
​
Adding fades and gradients as well as an ambient emissive glow also helped to bring the shields to life.
​
Below is a snippet of code from the HUD material.
Examples of what can be made with this material.
The animation above shows how the health bar is minimalistic and takes up less space when the player's shields are on, but once the player has lost their shields the health bar you see above increased and takes up more space. Note that the shield in the animation above is at 100% since I'm just showing off the functionality.
​
Below you will see the shields going down.
I also used the HUD material to create the health bar for the enemy bosses as seen above. As well as the animation for eliminating the enemies
Lastly I created the main menu as seen below.
