"Annie's Kitchen" Video Game Annie Liang | n11028041

Design Trends

What design trends and emerging concepts in motion design inspire you?

• The de-make trend: making modern video games/movies/media into an art style that is reminiscent of 8-bit/16-bit.
• Pixel art: a projected design trend of 2024. Pixel art is nostalgic, stylistically distinguishable and follows the trend of non-realistic visuals. A physical medium similar to this is bead art.
• Isometric and flat landscapes: Isometric design and flat (forward facing) landscapes are seen through many different art styles but prominently in the pixel-art art style.

Video Game Trends

Cozy Games

During the pandemic, a trend of cozy, casual games was on the rise. Unlike the tradition action-adventure games of the past, these comfort games allow users to in a sense, 'switch their brains off.' These (seemingly) low-stress games garnered popularity for their aesthetically pleasing visuals and creative freedom. They usually consist of tasks that build routines or allow users to experiment creatively without high risk of game overs. This genre relies less on the appeal of 'hardcore' gamers, fast frame rates, top-of-the-line graphics and quick thinking. Instead, the general audience is casual gamers who seek a lack of heavy-lore driven story and casual playtimes.

Examples:

• Animal Crossing
• Stardew Valley
• Farming and life simulations
• Puzzle games
• The Sims franchise

Pixel / Retro Art Styles

The pixel art style is associated with the video game medium. Media usually uses this art style to distinguish a connection to video games seen in many TV shows, music videos and promotional materials. Whether that be with monster sprites, fighting game backgrounds or collectable items, art style is very nostalgic.

Though games have expanded into much higher graphics and frame rates, there is a cult audience and high demand for this vintage style. As aforementioned, More games nowadays have this traditional art style to convey visually appealing simplicity and nostalgic comfort. The art style is also very versatile, being used in a range of different and contrasting genres. This can be seen in genres such as fighting, adventure, RPG, cooking, building, life simulation and the list goes on and on.

Examples:

• Arcade games
• Cuphead
• Undertale
• Terraria
• Pokemon franchise

Mood Board

The mood board displays a mixture of images from gameplay, promotional materials and art pieces. The commonalities of these images shows vibrant pastel colours, explicit UI visuals (such as menus with labels, icon symbolism) and distinct pixel typography that is blocky.

Concept #1

The first concept for the video was to do a 'get ready with me' game. The idea was the combine aspects of makeover, dress up and life-simulation games. It would utilise the isometric landscape, as well as use different properties in After Effects to achieve a cohesive story. Ultimately, this idea was scrapped for another idea as it would not showcase my learnt After Effects to its fullest, skimping on certain techniques and did not have the 'flow'/simulation of someone playing with a video game.

Concept #2

The second concept revolves around a cooking, kitchen game where the goal is to make a piece of toast. The game relies on the 'user' to click, drag and select items to 'interact' with the objects on screen.

This concept was chosen as it relied less on traditional animation, maximising After Effects, animating the elements effectively and its utilities. It still told a understandable story (everyone knows how to make toast) whilst making it difficult enough to be made into a first game level challenge.

Concept #2 - EXPANDED

Adapting concept #2 to include more animations and cohesion, a START screen and loading was added.

All drawn assets were created on Pixel Studio, all animations are done within Adobe After Effects.

Separating and importing the different layers into After Effects, I begun by animating the cursor to click on the music icon to 'turn the music on.' The music file is then placed at the point where the mouse 'clicks' in the timeline.

The RotoBezier pen tool with easy ease was used to create more realistic curves to the cursor's movement instead of linear lines and movement.

Animating clouds by changing their horizontal (x) position in a seperate pre-composition to be moving left to right.

Masking the window in the primary composition so the clouds do not appear outside the window.

Frying pan is also animated to be cooking something. It moves 'back and forth' while also doing a loop.

When the cursor is on top of any of the buttons, they scale up. Cursor 'clicks' on start button.

Start screen is pre-composed to allow a fullscreen slide transition to the loading screen.

Loading text is aligned to the bottom right corner of the composition. Letter by letter it is animated to type out as if it pending.

DRAFT 1

Level and goal text appears on screen and position transitions to bottom left corner. The 'game' loads in by changing the black solid's transparency to 0.

A expression was added to the scale of the exclamation point: loopsOut("pingpong"). This loops the exclamation mark to pulse bigger and smaller continuously.

Mouse 'clicks' on the task button. A checklist pre-composition layer (with text and shapes added) is made that details the tasks needing to be done to achieve a level completion.

The mouse 'clicks' on the fridge to open the fridge menu. The same command of loopOut("pingpong") is added to the selector tool to identify its position.

The cursor 'clicks' on the necessary items and a tick pops up to signify they have been selected. The selector cursor follows the cursor in a linear ease instead of an easy ease, to simulate a mechanical movement of the game.

An ingredients toolbar was added. This would make for more cohesive gameplay and transitions between dragging items and the different browsers. The selected items pop up in the toolbar and can be dragged out.

When a task is completed, the task icon at the top right gets updated to follow the continuity of the story and show progress within the composition.

The toaster browser was drawn in a different perspective. It follows the same visual continuity of the fridge menu, being a browser the user can interact with.

A null object was added so that the cursor can 'drag' the items into the browser. The cursor and the related item are both parented by it, so that both layers can move simultaneously.

In a seperate pre-composition for the toaster, different layers for the different animated objects is organised. The bread is animated to be 'dropped' into the toaster, making a slight bounce animation. The toaster trigger is animated to match the duration of the toast being toasted.

The hue/saturation effect was placed and animated to emulate the toast getting darker. It is key framed to get darker during this toasting period. The toast also pops once it is finished. This affect is added to the bread layer in the original composition for continuity.

A timer with a clock wipe effect is used. Once the toast is finished, a looping tick notifies that the activity is complete.

To animate the menu bar to 'update' when an item it taken out. The butter replaces the top spot by animating up (y position).

The signifier of the bread leaving the browser and becoming an item is its scale, shrinking significantly in size.

DRAFT 2

When the butter is dragged onto the knife, a new layer is added. The parent of this layer is the original knife layer, so the key-framed properties follow as such.

When the knife is picked up by the cursor, a drop shadow appears to simulate depth and to visually indicate to the user that the knife has been equipped. The knife also rotates, simulating gravity.

Animating the cursor and knife on a new null layer, going back and forth applying the butter to the bread.

The butter is a separately drawn layer. As the knife goes back and forth, the butter layer's mask is animated to reveal more. The opacity for the butter on the knife also indicates that it is being applied.

To show a change of completion, a new element on screen appears. The arrow pulses in scale with the looping command.

When 'clicked' on, a level complete screen fades, overlayed on top to signify the end of the video.

To present the game as more realistic and a mock up of potential gameplay, a production present screen was added at the beginning.

Sound effects for the mouse clicking, toaster and timers were all added.

Design Principles

Art Style and Letterform Characteristics:

Though the video is heavily graphic reliant, the use of typography was still significant in producing the proper aesthetics and mood of the video. It relayed instructions and was used in titles.

Bitmap typefaces matched the 8-bit, pixel appearance of the art style. The pixel, geometric typefaces chosen had heavier weights to reflect the cute, calm visuals. The bitmap typefaces are already quite legible and follow a technological appearance due to its common association within the retro video game scene. A black stroke was added to the majority of the text to match the visuals of the graphics used as they also have a black stroke.

Distortion (lack of blur):

The lack of blur during actions simulates very static movement that pixel animation and computers harbour. This mechanical appearance takes away from the natural realism of the style, creating a lack of depth and more 'technological' appearance.

Elaboration and Formal Characteristics:

The use of elaboration is used to draw the viewer's attention to certain features and mechanics on screen. This with the addition of loop signifies urgency and immediate attention.

Layering and Depth:

Layering the different pop up browsers signified that it was a new stage that needed completing. This was also shown with the slight scale up when the browsers or menus first open. Layered on top of the background, it is positioned in the centre.

Layers within the composition had to be ordered in a specific manner to achieve the correct illusion. The cursor always remained as the top layer.

Though the style had a lack of depth in its animations, depth was still used effectively to convey a 'visual response' to a user's interaction. The knife in the butter spreading scene; a shadow was animated to appear when the user 'picked it up'. There was also a slight rotation, mimicking gravity of the knife being held.

Transitions:

The transitions used in the video are used to distinguish different states within the video game. Full screen transitions such as the slide to the loading screen and the fade in of the completion screen signify a different scene and the literal transition to the next level.

Easing:

The stark differentiation between linear and easy ease in this video is very distinct. Easing, with its more fluid and smooth movements, appears more realistic. Hence, it was used exclusively for cursor's position movements. It was also used for the toast to simulate a realistic bounce motion.

Linear keyframes were used for objects such as the selector in the fridge and the clock wipe animation.

Reflection

The final video and Figma prototype perfectly encapsulate the idea I had in mind. I had always wanted to create an idea like this, a mock-up of an interactive game, and this brief perfectly presented the opportunity. I am very proud and ecstatic with the result, highlighting my extensive knowledge and expertise as a motion graphic designer. The video game industry is a field of design I have a large fascination with. With this project, I was able to delve into that interest and use it to help further my drive for this desired field.

Though this process let me experiment with this idea, due to the huge undertaking of its production, there were a handful of obstacles that I will need to consider for the future of my design work.

The first issue I encountered was timing. During my previous project, I had a clear vision of the pacing and timing of the animations due to it being timed to the music of a lyric video. With this project, it required a lot more nuance to understand the pacing. The timing depended heavily on the ‘natural flow’ of a player which is determined by several factors. These factors included what the activity was requiring, the interaction necessary (clicking or dragging), the position within the composition. All of these determined the general pacing of the player interacting this game, and in turn, affected the pacing of the video.

Second would be the use of Figma. The simplicity of the program Figma was a huge asset in the creation of my interactive prototype. It allowed for features that were portrayed in the original video such as being able to drag and open menus. However, the program unfortunately has a paywall for more complex interactions. This limited the ability to fully recreate the original idea of the game. I was able to find work arounds for this. Due to the linear narrative structure of the video (and the process of making buttered toast), I was able to make a project file that ‘refreshed’ after a new task in the game was completed. This essentially meant I would update the main screen after a menu or task browser was closed.

Overall, I am very proud and happy of the final work and its accompanying prototype. The visually are high quality and cohesive to the art style, following the research conducted about what other similar games have done and the application of motion design theories all combine within the work I have presented. Additionally, I have garnered valuable knowledge about motion design from this process.