Graphic Designs

Completion Date:

Chuck Yeetus

2D vector assets created for a prototype multiplayer game. Including fonts, icons, animations, website banners, and a branded document

Software

Affinity Designer, Affinity Publisher, Unity

This university project focused on developing an online multiplayer game prototype that was visually pleasing so it could serve as a showcase piece upon completing the university degree. While a team effort, each member was delegated to a specific area of expertise, such as coding, concept art, environment design, and sound design, leaving the role of the 2D artist. A significant amount of artwork was required for the game's user interface, which demanded consistency and easily comprehensible designs. Due to the game's online capabilities, the artwork needed to be shared with testers at an early stage of development, necessitating a refined and well-thought-out design. The Chuck Yeetus project spanned two university projects, with the second version building upon and expanding the concepts established in the initial iteration.

Creating an exceptional user experience in game development is vital to capturing and retaining players' attention. This is particularly true when designing user interfaces (UI) for multiplayer games intended to be tested by a diverse group of individuals. UI design is most important as it directly influences how players interact with the game and significantly impacts their overall satisfaction and engagement. Jakob Nielsen's renowned set of principles, known as the 10 Usability Heuristics for User Interface Design, serve as guidelines that help ensure the usability and effectiveness of user interfaces across various fields, including the gaming industry. By adhering to these heuristics, UI designers can create intuitive, user-friendly interfaces that enhance the overall gameplay experience. In this project, a well-crafted UI will facilitate the effectiveness of player feedback and contribute to the refinement and improvement of the game before its completion.

Website titles and banners for Chuck Yeetus
Branded Journal Document for Chuck Yeetus

Within this project, the primary objective for the 2D artwork was to achieve a polished and cohesive style, incorporating animated designs for buttons. In addition to the game, various designs were required for the accompanying website page and a comprehensive journal documenting the game's development. The website entailed creating captivating styled images for titles and banners, seamlessly integrating the game's background menus and the custom font. Similarly, the branded journal document called for titles in the game's font, with backgrounds and frame borders matching those present in the game. Furthermore, a crucial goal was to ensure that each designed artwork adhered to the game's chosen colour palette, as it would subsequently be employed by the environment designers for texturing numerous 3D models.

The design phase of this project mainly contained the collaborative efforts of other team members, who conceptualised the art style and crafted hand-drawn concept artwork for the game's menu and design elements. As the environment designer, James Williams developed the initial hand-drawn concept art, the foundation for the game's original main menu and font design. From this concept, a unique font was designed using Affinity Designer, tracing the concept lettering and extending it to the entire alphabet with consistent slant and roundness. This original font featured multiple letter alternatives for more variety and would be the basis for the refined font in the game's redesigned version.

... Original red font for Chuck Yeetus based on James' concept
... Concept artwork for Chuck Yeetus by James Williams

In the earlier iteration of Chuck Yeetus, a rudimentary UI was made, utilising stylised images of wooden planks in combination with the custom font. However, for the new iteration, a complete reimagination and illustration of the UI were undertaken to elevate the game's visual style. The objective was to infuse vibrant colours and apply advanced colour theory techniques to achieve a strikingly realistic yet whimsically cartoon-stylised effect. Guiding this new artistic direction was Aaron Gilbert, who spearheaded the development of the initial colour palette and mood board. These elements were the guide for both the game's 3D and 2D components. While the colour palette was expanded to encompass the needs of the entire UI artwork, the iconic reds and wood colours from Aaron's style guide remained. On top of Aaron's mood board, inspiration from the mobile games Bad Piggies and Angry Birds, which showcased a bright and captivating cartoon illustration style, further solidified the visual direction Chuck Yeetus aimed to embody.

... Mood board with bright colours for the new art direction by Aaron Gilbert
... Bad Piggies mobile game that also inspired the UI design

While the kick button was initially envisioned as a still farm boot, it inspired the idea of animating a kick motion. This set it apart from the other static UI elements, and this concept was extended to all buttons to ensure instantly recognisability compared to other static elements. In addition to the game artwork, the final design required implementing code within the Unity engine to allow the UI elements to function. Custom code was needed as Unity does not natively support elements like animated buttons or custom sprites as traditional fonts. This involved writing code to enable animations upon button hover and dynamically displaying different player icon borders based on their level. Due to the small team size, the UI code was part of the 2D artist's role. As a perk of the role, a specially designed cheese-themed border was added for the player's appearance, setting them apart from the standard wood, bronze, silver, and gold tiers.

The development process for the UI designs began with creating the boot kick icon and its animation. The distinctive roundness of the boot's toe and the shading of the white highlight reflection established the design style that would follow in all subsequent illustrations. To create a sense of dynamic motion in the boot's animation, white lines were added beneath the boot, reminiscent of the wind trails commonly associated with objects in motion. While the wind trails were exclusive to the kick animation, the consistent number of frames was applied to all other animations, ensuring the same motion was applied across the designs. Building upon this design rule set, the next step involved crafting the wooden crate player icon borders, using a simple highlight colour to create a realistic wood grain effect across each plank. Within this cohesive style, a set of eight nail designs was introduced to add variety and enhance the visual appeal of each crate border, subtly altering the wood grain pattern.

... Boot animation frames and player icon borders laid out in a sprite sheet
... Font in Unity converted using a custom script

The design principles of Chuck Yeetus were most prominent in the custom font. Each character design adhered to the rule set, featuring a white shine spot, a base fill colour, a darker stroke colour, and a highlight colour for shadowed areas and lower-left shines. This deliberate use of highlights and shines ensured that the letters exhibited a rounded appearance, emphasising the main focus of the redesign. Notable improvements from the original font included increasing the thickness and straightening of each letter, resulting in enhanced legibility. Furthermore, the font was expanded to include numbers and symbols to accommodate the requirement of displaying players' online usernames, allowing seamless integration with a wider range of character inputs. In addition to the base font, a secondary variant was created, featuring nails incorporated into each character. This variant was tailored to be paired with the wooden signs within the game, simulating a nailed-on effect. However, integrating the custom font into Unity presented a challenge, as the engine did not support it easily. Each character had to be manually inputted with precise sizing and spacing. Leveraging the capabilities of TextMeshPro in Unity, the font was added as a sprite atlas, with each character technically treated as a sprite, a technique commonly employed for adding custom emoji icons. This necessitated converting each character in a section of text within the engine into the <sprite="assetName" name="spriteName"> format.

Yeetus Surprise Icons
User Card Boarders
Button Frames
Menu Backgrounds
Loading Menu Icons
Menu Icons
Red Font
Red Nailed Font
Yellow Font
Yellow Nailed Font
Kick Button
Animated Button
Sparkle Effect

The development journal document was designed using Affinity Publisher due to its capabilities for creating large illustrated documents. Capabilities such as master pages, character styles, and picture frames. To integrate the document design with the rustic farm aesthetics of the game, a wooden border inspired by the UI background borders was incorporated. To ensure a visually striking and readable design, the document's background adopted the logo's distinctive brown colour, while the text was crisp white. The titles within the document featured the custom yellow font, as red would have blended with the background. Like the banners created for the game's webpage, careful attention was paid to individual character placement in the custom font, ensuring adherence to specific spacing rules. While the document's font differed from the game's scrawled font, it still maintained a cartoon-like design with improved readability. SF Cartoonist Hand was the chosen font that achieved this neater, hand-drawn aesthetic. Throughout the document, images were outlined with simple coloured strokes, utilising the game's colour palette to maintain visual cohesion without overwhelming the document with excessive designs. Multiple character styles were created to facilitate efficient changes across the document, allowing for swift adjustments to italicised titles, academic references, and other text formats.

This project successfully implemented the chosen colour palette and design rule set, resulting in a cohesive and appealing toon-illustrated look for Chuck Yeetus. The animations for the boot and buttons gave the design life, a vital element in interactive game design. The wood grain patterns across the planks, background, and borders achieved a balance of variety and consistency while only utilising a limited number of colours. The modular nature of the UI designs allowed for seamless integration within Unity, enabling easy layout adjustments for different menus.

While the project's designs were successful, certain areas could have been further improved, particularly in the custom font. The time-intensive process of designing each character, 20 minutes a character, or 18 hours for the font, and 44 hours in total for the entire UI, left little room for extensive edits. Given more time, enhancements to the font could have been implemented. For instance, earlier letters like B could have been thicker to align better with the overall aesthetic. Similarly, the Y character could have been refined to achieve a rounder and less blocky appearance than the rest of the alphabet. Other design considerations include fine-tuning the roundness of the onion shading and adjusting the stroke thickness of the mushroom stalk. Additionally, the cow head icons could have benefited from more natural-looking ears. However, the absence of a 3D model reference for the goat icon may have contributed to its spacing issues in the website banners.

This project has contributed to a greater understanding of toon shading, encompassing shadows, highlights, and animations, which can be readily applied to future projects. Furthermore, the development of a script for converting text to custom sprites in Unity offers a valuable tool for future Unity projects. Aspirations for future designs include further improving shading techniques by creating smoother and rounder lines and varying stroke sizes to introduce more visual depth and dimensionality. Additionally, exploring methods to automate the spacing of the custom font in Affinity Publisher would streamline the process of title placement. Overall, this project has served as a valuable learning experience, consolidating knowledge and skills that can be leveraged to create compelling and engaging designs in future projects.

Have a project in mind?

Click below to tell me all about your graphic design idea. I can help fulfil your vision.