Week 12 + 13: Creating Mission Passed/Failed UI

-
I started week 12 by collecting visual inspiration for my designs, defining my design characteristics of my UI, and creating rough sketches. 




Creating the Exit Menu

I created my menu design using Adobe Illustrator and then exported it into Photoshop to add a ripple and a median effect to create the effect that the design had been printed on paper.  




I then exported the menu background and the buttons separately as PNGs and imported them into UE5 and created the script below. If the player chose to leave the saloon with less than 10 items collected, they would fail the mission, and if they had more than 10, they would pass the mission and be awarded 1, 2, or 3 stars depending on how many items they found. 







Creating a Custom Mouse Cursor 

I created my mouse cursor in Procreate and imported my design into UE5. I then further edited the design using Procreate and Photoshop to add more contrast to make the cursor stand out more. I then created a widget containing my design and defined it as my mouse cursor in the project settings. 






Creating Mission Passed/Failed Widgets

Originally, I created black and white designs in Adobe Illustrator; however, when I came up with the idea to use vintage star stamps to rate how well the player did in the mission, I decided to use a brown vintage paper style similar to my leave menu design. 





I created the star stamp design in Adobe Illustrator, inspired by the designs of Western sheriff badges. 




To make the star look like a stamp, in Adobe Illustrator, I added an inner glow effect, a Mezzotint effect, and a stamp effect, followed by expanding the design and using image trace. 




I then opened the stamp design in Photoshop and added a ripple and median effect to the design to make the lines less straight and look as if they are printed with a rubber stamp. I then added a red ink texture to the designs and exported the three stars as PNGs. 





I created animations for the player getting 1 star, 2 stars, and 3 stars. I added a rubber stamp sound effect for each star and made the star wonky above the printed star outline to make it appear the star was stamped onto the paper. 





I created the script below to determine whether the '1 star', '2 star', or '3 star' animation would play, depending on how many loot items the player collected. The script also uses a 'Set Text' and 'To Text (Integer)' node to display the number of items collected by the player. 




I also added my mission passed and mission failed designs within UE5 and added a fade-in animation within the widgets. 



Location: Preston, UK

Comments

Post a Comment

Popular posts from this blog

Sem 3 Submission

-
Image
Semester 3 Learning Agreement: : Western Project (UI Design) Research + Development Blog Posts: Week 1: Planning the Looting System Week 2: Design Characteristics of the Western Genre Week 3 + 4: Collecting Inspiration Week 5 + 6: Initial Concepts Week 7: Creating the Western Prototype in UE5 (Part 1) Week 8: Creating the Western Prototype in UE5 (Part 2) Week 9: Creating the Western Prototype in UE5 (Part 3) Week 10: Creating Loot Icons Week 11: Adding Pop-Up UI Elements Week 12 + 13: Creating Mission Passed/Failed UI Week 14: Improving the Lighting + Final Touches Knight Light (UX Design) Research + Development 
Read more

Semester 2 Submission

-
Image
At the start of semester 2, I had no prior experience with Unreal Engine 5. To broaden my skillset, I set a goal to learn the fundamentals of the engine and create functional UI elements within the engine, each with a unique design style. I initially planned to create a health bar, speedometer, and item collection counter; however, as I became more confident using Unreal Engine 5, I shifted my focus towards creating more complex UI prototypes tailored to three distinct game concepts, each with unique genres, themes, and gameplay. To achieve this, I dedicated most of semester 2 to learning about Blueprint scripting within Unreal Engine 5 in preparation for creating my 3 UI prototypes in semester 3.  Learning UE5: Throughout semester 2, I used tutorials and courses to learn the fundamentals of Unreal Engine, and then applied this knowledge by creating a variety of systems within Unreal Engine, such as health bars, door animations, item pickups, and more. Creating a book of common nod...
Read more

Week 7: Creating the Western Prototype in UE5 (Part 1)

-
Image
Creating a New Level I created a new level and called it 'my_saloon', and then I imported the following assets that I will use to build the environment: Saloon Interior ,  Old West VOL.1 - Interior Furniture ,  Old West - VOL 2 - Tradesmen Tools and Props ,  Old West VOL.3 - Travel Supplies and Goods ,  Old West - VOL 4 - Goods and Supplies ,  Old West - VOL 5 - Town Props and  Old West VOL. 6 - Town and Industrial . I then used the modular wall meshes from  Saloon Interior  to start building the layout of the saloon.  Creating the HUD I created a simple crosshair widget by adding a small white box and aligning it to the centre of the canvas panel. In the character blueprint, I used a 'Create Widget' and 'Add to Viewport' node to make the crosshair visible at the start of play. I promoted the return value to a variable so I can reference the HUD widget later. Creating a Working Door To enable the player to pass through an open door, I had to...
Read more