Week 9: Designing the Crosshair Designs

-

After sketching concepts for each weapon's unique crosshair design and animation style, I began to make each design in Adobe Illustrator. I organised the elements of each crosshair design into individual layers ready to be imported into After Effects. 



Once I finished the crosshair designs in Illustrator, I imported the files into After Effects to create motion designs of each weapon idle, firing, reloading, hitting an enemy and killing an enemy. To achieve a line drawing animation to indicate a weapon emptying or reloading, I first converted my Illustrator layers into shape layers in After Effects and then used 'Trim Paths' to add or subtract to the length of the lines. 




To create the rapid firing effect for the assault rifle crosshair, I changed the position of the lines in even values on the artboard and timed evenly across the timeline. I also used motion blur and 'Easy Ease Out' to create more natural-looking movement. 




While creating my motion designs, I also came up with the idea to spin the crosshair of the revolver during its reloading animation to imitate how the chamber of a revolver is spun in real life once reloaded. I achieved this by using motion blur and by rotating the crosshair design 180 degrees throughout the duration of a sound effect. 




Later in the week once I had completed my crosshair designs, I started to create my HUD design. I began by creating rough concepts in Adobe Illustrator to try out various designs and to get the scale and composition of my HUD right. I also created an assault rifle icon design to be used in the HUD. I used a reference photo of an L85A1 rifle used in the military in the 1980s, which the game is set in. 



 

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