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.
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.
