Week 11: Adding Pop-Up UI Elements

-

Creating the 'Interact' and 'Take' Pop-Ups + the Door Locked Notification

First, I created the designs in Adobe Illustrator before exporting them as PNGs to Photoshop and Procreate to add a paper texture effect. 




Initially, I wanted to create a worn effect to the designs, with tears and rips; however, I decided against this as the added detail did not work well at a small scale. 




Once I had finished the 'interact' and 'take' designs, I brought them into UE5 and added them to my existing HUD widget, aligning them centrally below the crosshair. I then replaced the existing design within my 'need key' widget with my new design. 





Creating 'Key Found' and 'All Loot Found' Notifications

I first drew the decorative frame on my iPad using Procreate and then imported the design to Adobe Illustrator to vectorize it, scale it, and add text. 




Using Photoshop, I then imported my designs and applied a gold foil texture to the decorative frame and added a paper texture, with a subtle vintage pattern to the background. 




In UE5, I made the 'Key Found' notification appear when the Boolean variable 'HasKey?' is set to true, and the 'All Loot Found' notification appear when the Integer value 'ItemsCollected' is equal to 20. I also created animations for each widget to play on 'Event Construct' to get a popping effect. After the 'All Loot Found' notification appears, the mission objective changes from 'Loot the Saloon' to 'Leave the Saloon'. 






Creating Loot Item Notifications 

I used a YouTube tutorial by MelvinTang Games to help me make my notification system. 

I first created an item notification widget, including a size box with an image for my item icon and text for the name of the item collected. 




In the widget graph, I then created a function called 'Initialize Widget' and added a Text input called 'Item Name' and a Texture 2D input called 'Item Icon'. Within 'Initialize Widget', I then created the script below. I created a simple animation for the notification to appear, in which the text and icon go from an opacity of 0 to 1 within 0.25 seconds. 




I created the script below in the event graph of the widget, and in my existing HUD widget, added my item notification widget within a vertical box. 





I made the vertical box a variable, and in the event graph of my HUD widget, I created the script below using a 'Clear Children' node. 




Next, I created a function called 'AddItemNotif', and created the script below within the function graph. 




To make the notification system work, I used the 'Add Item Notif' function within each of my loot item blueprints to specify what name and item icon needs to appear when the item is collected by the player. 


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