The best way to improve in a skill is to practice it. To learn a language, you read and speak it, to improve at a sport, you spend time playing that sport and doing exercises. UI programming is no different.

This page has a list of UI elements, sorted by their complexity. The idea is that you try to implement them and gradually learn by doing.

How to Use This Page

First, download the Unreal Project from GitHub. It contains some code for easily testing out your widgets, and some placeholders to get you started. Look at the Readme file for more details on the Unreal implementation.

Share your solutions on GitHub, and tag them with the keyword unreal-ui-challenges

That way others can learn from your example!

Challenges

Score

Difficulty easy

Showing the player score can be as simple as a text box with some numbers in it. It's a great place to start your UI journey!

Implementation?Suggestions on how to solve this UI challenge.

  • Display numbers using one or more Text Block widgets
  • Display, or by setting an Image widget

Sub-goals?If you want to, try implementing these features too.

  • Make sure that numbers are fixed-width
  • Pad score so it always shows
  • Animate numbers changing as score increases. Tween the number from the old value to the new value.
  • Show score gains as a separate number below the main score.
  • Use a single image for numbers 0-9 and use material settings to change which number is shown on an array of UImage widgets.

Widgets?You will probably want to use these widgets in your solution.

Data?Feel free to use this example data when implementing your solution.





More screenshot examples on Game UI Database

Healthbar

Difficulty easy

Health bars are a great something

Implementation?Suggestions on how to solve this UI challenge.

Sub-goals?If you want to, try implementing these features too.

Widgets?You will probably want to use these widgets in your solution.

Data?Feel free to use this example data when implementing your solution.





More screenshot examples on Game UI Database

Posted: