Crafting Tutorial Popups Visual Assets Design - UQdeco2800/2022-studio-2 GitHub Wiki

Final Design

First Material Prompt	Second Material Prompt	Craft Prompt	Arrow

Research Process

Popups

Foregoing a traditional 'video-gamey' design for the tutorial popups, different designs were considered to better match the theme of the game, primarily a scroll like text box or a stone tablet. Research inspirations are below:

Design Inspiration	Reference Link
	https://www.shutterstock.com/image-vector/pixel-paper-scroll-icon-sticker-design-1920840071
	https://www.istockphoto.com/vector/stone-tablet-panel-textured-cartoon-frame-with-cracked-elements-isolated-on-white-gm1306955172-397383199

Given that the crafting menu is already a scroll, to contrast with that design the stone table was selected. Further research was then conducted to understand the textures of a stone table in a pixel art form:

Design Inspiration	Reference Link
	Shorter link because the original is way too long-
	-and it messes with my table's formatting -_-
	gosh i hate markdown's formatting, drives me insane

Arrows

Firstly, research was conducted to conceptualise how arrows can be represented in pixel art form:

Design Inspiration	Reference Link
	https://www.pinterest.com.au/pin/776730266972248893/
	https://www.123rf.com/photo_60527669_set-of-vector-retro-cursor-signs-made-in-pixel-art-style-simplistic-arrows-pointing-at-different-dir.html

Further research was conducted to assist with ideating different textures and themes for the arrows:

Design Inspiration	Reference Link
	https://www.vectorstock.com/royalty-free-vector/stone-arrows-signs-for-ui-game-vector-16136359
	https://www.vectorstock.com/royalty-free-vector/cartoon-arrows-set-vector-15881553

Design Iterations

Popups

Using the inspirations above, a prototype design was made in Pixil:

Basic Layout	Cracks	Damage	Texture

Preliminary user testing (informal peer review) as well as further personal reflection led to a revision of the shading within the popup - given that text will be white, the direct background should be a bit darker to better contrast and improve readability. These changes can be seen below:

Version 1	Version 2

Arrows

Placeholder	Inspired Design	Form Change	Colour Change
This was a placeholder arrow so the programming could begin with these generic assets, also assisted with conceptualisation of the feature.	This is a scaled-down version of one of the above design inspirations, resized to conform to the design requirements.	The 'neck' of the arrow was cut down, to make it's form clearer since the original resizing affected/ommitted some of the final details of the design.	The colour palette of the popups were applied onto the arrow, thus improving the synergy between the popup and its accompanying arrow.

Final Iteration

Popups

Once the overall layout and composition of the popups were finalised, instead of using Pixil's native text fonts, the drawings were exported to images and text was placed in using another software. This was to ensure that the font and typography remains consistent with the rest the of game as per the Design Rulebook:

First Material Prompt	Second Material Prompt	Craft Prompt

Arrows No changes were made.

Concept Art/Layout

Before committing to implementing the final script for the popups, a mockup of the tutorial interaction flow was created for peer review (for conceptual purposes, circles were used although it was intended for arrows to be used in the final design):

Future Directions

Future design plans include cleaning the the design and potentially including more plumber-esque aspects, similar to the weapon crafted popup.