Fox vs Fox - A Journey from the Ultraspace

m o r f y e n r u A Jo e c a p s a r t l U the

PRESENTED BY MARGARET WONG

Fox vs Fox A Journey from the Ultraspace

Margaret Suet-Yin Wong Master of Animation, Games & Interactivity (MAGI) School of Design, RMIT University Melbourne, Australia ŠMargaret Suet-Yin Wong All the images not created by Margaret Wong are included as research and educational reference materials only.

Content Getting the journey planned

8

- The Project Planning

Desgin the spaceship

14

- The Concept Development

Gathering components for the spaceship

19

- The Pre-production List

Build the spaceship

37

- The Workflows

Declare the war

41

- The Marketing 5

One day, a fox met an alien fox, it was so excited because they look so similar. He Don’t hide in the bush I can see you

We look alike!

No, we’re different.

We’re the best fox species in the universe You’ll be replaced by us

thought they could be friends, but the alien fox didn’t think so. !!!?

The alien fox said “We are the best species of fox in the universe. You, the inferior species will be replaced by us. We’ll take over this planet” The fox, who was so proud to be a fox, deeply

NOWAY! We’re the BEST! Let’s check it out!

I’ll show you!

believed that they are indeed the best. “No way, we’re the best! Let’s check it out! I’ll show you!.”

The war between the earth fox and the alien fox was going to begin!

Getting the Journey planned - The Project Planning -

The team

Current Team

Ideal Team

The scope

Size:

Size:

Considering the size and background of the

Composition:

Composition:

team members, the project should not be too

•

Game designer x 1

•

Game designer x 1

big or complicated. It should be of a suitable

•

Sound designer x1

•

Game Artist x 1

scale that the game designer would be able

•

Sound designer x1

to handle both the programming & graphical

•

Quality Assurance x 1

elements and the sound designer won’t find

•

Marketing Representative x 1

it too overwhelming that he could manage

Background of members: Game designer •

Scientific background

•

Little experience on game development

Sound designer - Benjamin Willis

8

•

9 years experience with sound

•

Working on a lot of projects

to handle all the projects within the 12-week period.

Basic info Genre

Core Mechanic

2D Platformer, Action

The two players try to collect the items to gain scores within a period of time. Who gains more score wins the game.

Player

SWOT Helpful

Mode Real time, Versus

•

Aged 13 - 50

•

Who likes multiplayer games

•

Who likes platformer games

•

Who likes mini-games on websites/

Strength Internal Origin

Target Audiences

Harmful

Weakness

•

The scope of the game is small

•

May be low quality

•

Can execute the “prototype &

•

Limited performance because of

playtest” loop quickly

the lack of programming & game developing experience

Pillar Engaging multiplayer experience with novel mechanics.

External Origin

Steam/ console

Opportunity •

The controls are easy for the

Threats •

players to pick-up •

The players can play with their friends as a social activity

There are already a lot of 2D platformer games

•

Players may not find the game mechanics novel & interesting to play

9

Project delivery An indie mini-game For higher exposure, the work will be published to various platforms after finished. There are mainly three platforms to publish the game: websites, Steam or Epic and console. There are quite a few websites for game developers to publish and even sell their games. Publishing the game for free on these websites could let more people try our game and get feedback from the players. On the other hand, Steam and Epic are platforms that allow game developers to sell PC games for Windows OS or macOS. Finally, depending on the popularity of the game or whether publishers think there is a potential in the game, publishers (e.g. Sony) may consider publishing a console version of the game.

Platforms

Websites

10

Steam/ Epic

Console

•

itch.io

•

WindowsOS

•

PlayStation

•

simmer.io

•

MacOS

•

Xbox

•

Chrome Experiments

•

Nintendo Switch

Timeline 1

2

3

4

5

6

7

8

9

10

11

12

Plan A is an optimistic plan that research, moodboarding and thumbnailing were planned to be done by week 4 and a prototype with good potential could be developed in two rounds of prototyping.

Then, the production could start earlier in week 6. Three turns of ‘production & playtesting loop’ were scheduled with a long

Plan A

final adjustment period.

While Plan B is a prudential plan which allows more time on research, moodboarding and thumbnailing. Also, one more round of prototyping was included. Following with some organisation of data and feedback from the playtests, the production would

Plan B

start a week later than Plan A. Same as Plan A, three turns of production loops were

Research & Development

Prototyping & Playtesting Loop

Environment, Platform & Props Design

UI UX Design

Moodboarding & Collection of Graphical References, Thumbnailing

Character Profile & Design

Production & Playtesting Loop

Sound Design

Juiciness Design

scheduled but the final amendment phase would be shorter.

11

Folder hierarchy The folders were basically named with the

category number. The version number is

“category number_category� system. There

added to the file name as a suffix. When

are 11 categories numbered from 00 to 10. The

there is a huge change, like a completely new

category number should be a prefix in the file

level design, the new file should be named

name of all the sub-folders or files inside the

as a new version. If the changes are minor,

category folder. For the sub-category within the

like some bug fixing, the new file should be

same category folder, they are distinguished

named with a decimal number higher than

by the number in the decimal place after the

the old one.

Project folder

00_Overall design document

01_Prototype

01_Prototype_v01.1

02_Storyboard

03_Moodboard, thumbnails & color palette

02_Stoyboard_v01

00.1_DesignDoc_v01.1

05_Environment

06_Sprite

07_UI design

04.1_Character profile

05.1_Earth

06.1_Character

07.1_UI design_v01

06.2_Platform

07.2_UI design_v02

09_Level design

10_Marketing

08.1_BGM

09.1_Normal mode

10.1_Poster & banner

05.2_Spaceship

02_Storyboard_v02

08.2_SFX

09.2_Hard mode

10.2_Trailer

04.1_Character profile_v01

03.2_Character

00.1_DesignDoc_v02.1

05.3_Alien planet

01_Prototype_v02

04.2_Character design 03.3_Platform & props

06.3_Props 08.2.1_Jump

08.2.2_Shoot

04.2_Character design_v01

03.4_General

12

08_Sound

03.1_Environment

01_Prototype_v01.2

00.2_Project Log

04_Character

Design the spaceship - The Concept Development -

Prototyping Research & development In the development of a game, a prototype with potential is the most important. Therefore, the first step in preproduction is iterating on prototypes and pick the most attractive one.

The initial inspiration for the first two prototypes are Super Mario Bros.U Deluxe, Super Mario Maker (SMM) and Ultimate Chicken Horse (UCH). In SMM & UCH, players are allowed to construct their own levels. This idea is incorporated into idea 1 where player 2 could add different traps/ monsters into the level. Unfortunately, these two ideas were eliminated after the prototypes were playtested as the feedback was negative that players didn’t find them engaging.

Spelunky, PushGo and Steg and Rex are the inspiration for the second round of prototyping. They are some multiplayer platformer games with simple level layout which allow the players to interact with each other. In this round of playtesting, the players find the fourth mechanic, where the two players compete with each other to get a higher score, the most engaging.

14

Storyboard

This storyboard illustrates the flow of the game. The players will learn about the background story in the beginning of the game. Next, they will go through the tutorials to get a concept of how the game works. After that, they will play the actual game and compete with each other to get a higher score within the time limit.

15

Visual inspiration

Some of the visual inspiration for the fox characters

16

Visual inspiration

Some of the visual inspiration for the ores

Some of the visual inspiration for the environment & platforms

17

Gathering components for the spaceship - The Preproduction List -

colour palette Colour Palette

Main Colours

#A2F693

#85F3FC

#FFA25A

#FF8700

#00FAE3

Five sets of colour palettes were selected with the keyword “playful” and tested. Then, some potential players’ opinions were considered and a majority of them think that the fourth palette from the left looks suitable for the game but they think the alien fox in cyan colour is more coherent with the ‘ultraspace’ feeling.

19

Concept art for Fox vs Fox

20

Asset list Character Name

Earth fox

Alien fox

Props & platforms

Importance

Essential

Essential

State

100%

100%

Requirement • • • •

• • • •

Idle sprite Walking sprite Jumping sprite Hurt sprite

Idle sprite Walking sprite Jumping sprite Hurt sprite

Importance

State

Forest

Essential

100%

Spaceship

Medium

0%

Medium

0%

State

80%

Ore/ Gem design Cherry design Animation sprite

Essential

80%

• •

Power-up design Animation sprite

Essential

80%

• •

Bullet design Animation sprite

• • •

Earth platform set Spaceship platform set Alien planet platform set

• • •

Earth platform set Spaceship platform set Alien planet platform set

• • •

Earth platform set Spaceship platform set Alien planet platform set

Power-up

Bullet

Essential

33%

Requirement • •

Daytime Nighttime

•

Interior of spaceship

Rotating platform

• •

Daytime Nighttime

Requirement • • •

Essential

Flashing platform Alien planet

Importance

Scoring items

Normal platform

Environment Name

Name

Essential

Essential

33%

33%

21

Character design The Earth Fox Personality It has high curiosity and loves exploring in the forest. Thus, it’s familiar with the forest environment. On the other hand, It has the dignity of being a fox. It strongly believes in its physical abilities to move quickly around the forest. No one in the forest, even in the world can do this better than them.

Furthermore, it’s smart and cunning to play tricks on his opponents in a competition.

Physical ability Having a body with high dexterity, he can jump through different platforms swiftly to collect different scoring items. It also has extremely good reflexes to dodge the attack or jump away from tipping platforms.

22

Character design The Alien Fox Personality It’s trained to be strong and conquer other planets since it was young. His lineage has already taken over more than 50,000 planets. He has a great sense of pride to be a member of his lineage and is confident to defeat all the other fox species in the universe.

Physical ability Very similar to the earth foxes, he has a body with high dexterity which can do nimble moves. It also has extremely good reflexes to dodge the attack or jump away from tipping platforms. Though it is not like the earth fox, who has already lived in the forest environment for a long time. With the genes from thousand billion years of evolution, the alien fox has extraordinary sensations that let him get familiar with the environment quickly.

23

24

Environment design

As the alien fox met the earth fox in the forest, the environment should be full of woods. A few thumbnails were experimented and I like the presentation with woods of different shades to show various distances Thumbnails of the environment design

of the trees.

A daytime forest and a nighttime forest were drawn. Since the alien fox is in the colour of cyan which has a similar tone with the daytime background and thus the nighttime environment is used in the later stage.

Since the playtesters reflected that it’s boring to stay in the same environment for the whole playtime, the game environment will change over time and some other environment will be needed.

The daytime forest

25

Props design Ore and cherry were selected as the scoring

Scoring items

items for the alien fox and earth fox respectively because the ore give a feeling of ‘power stones’ for alien creatures to collect (like the infinity stones in Avengers) and cherry is a fruit that wild foxes commonly consume. Yellow star is eye-catching and give a sense of ‘good stuff’, so it was used as a power-up item.

Ores

Cherries

Power-up

26

Bullets

Platform design As the environment is in a forest, some platforms with grass, wood, rocks and leaves were tested in thumbnails.

The normal platform is the most solid and reliable and thus it looks like a little ‘grassy land’ and is thick. For the flashing platform, it is unstable which appears and disappears from time to time. Hence, it is formed from logs and thin. For the rotating platform, it tips when people stand on the ends of it. An axis is located in the middle of the platform as the centre of rotation.

Testing the platforms in the environment

Testing the platforms with the character

27

Asset list Sound design

UI UX design Name

Importance

State

Wireframe

Essential

100%

• •

User-flow design UI layout draft

Start button

Essential

100%

•

Button design

Setting button

Medium

100%

•

Button design

Info button Battle button

Setting panel

Restart button Back to menu button

28

Good to have Good to have

Medium

Essential

Medium

100% 100%

100%

0%

0%

Requirement

•

Button design

•

Panel design

•

Slider design

•

Exit button design

•

Name

Importance

State

Requirement

Jump

Essential

100%

• •

Jumping sound for P1 Jumping sound for P2

Land

Medium

100%

• •

Landing sound for P1 Landing sound for P2

Hurt

Medium

100%

•

Sound design

Cherry

Medium

100%

•

Sound design

Ore/ Gem

Medium

100%

•

Sound design

Power-up

Medium

100%

•

Sound design

Shooting

Medium

100%

•

Sound design

Victory music

Good to have

100%

•

Music design

Background music

Essential

100%

•

Music design

Tutorial level music

Good to have

100%

•

Music design

Button design

•

•

*All the sound design in this project was done by sound designer, Benjamin Willis.

Button design

Button design

Wireframe & ui ux design

Wireframe is a little bit like the storyboard of the game, but wireframe focuses more on the UI layout (e.g. the buttons on each page and how the HUD components are going to be displayed)

29

30

Sound design Items *All the sound design in this project was done by sound designer, Benjamin Willis.

Soundscape Listen to ‘ore’ sound

Character Soundscape Listen to ‘P1 jump’ sound

Soundscape

Soundscape Listen to ‘cherry’ sound

Soundscape Listen to ‘power-up’ sound

Listen to ‘P2 jump’ sound

Soundscape Soundscape

Listen to ‘shoot’ sound

Listen to ‘land’ sound

Background music Soundscape Listen to ‘hurt’ sound

Soundscape Listen to ‘background music’

31

Mechanics design The basic mechanic of a platformer is, of course, jumping. The game designers’ job is to add other mechanics on top of the basic mechanic to make it more engaging. As we all know, ‘challenge’ is a major element for players to determine whether they enjoy the game or not. In the mechanics design, part of the challenges would be from the level design and part of them from the other players.

Flashing platform The flashing platforms are some unstable platforms where they appear and disappear overtime, making the players unable to stay on them for a long time.

They are usually put somewhere as an essential step for the players to reach the higher platforms so that players cannot go up easily whenever they want.

Rotating platform The rotating platforms tip when players stand at the end of them which may cause the players to slip and fall off from the platform. While making good use of them can reach a higher position quickly, like a shortcut. They are usually put between two layers of platforms which may help the players to reach platforms on top or hinder them from doing so.

32

Mechanics design Besides ‘challenges’, ‘social interaction’ also contributes to the amusement of players.

Therefore, it is important to design mechanics that encourage social interaction in the gameplay.

‘Stun N steal’ and ‘shooting’ are mechanics that allow players to attack and gain score from each other in short and long distance respectively.

Stun N steal This is a mechanic to allow players to attack each other when they come close together. When a player jumps and steps onto the other player, the player being stepped will be stunned and three scores will be stolen from the stunned player to the player who attacked.

Shooting This is a mechanic that lets players shoot at each other even if they are far apart.

Three bullets will be collected from each star. The bullets will travel horizontally for an infinite distance unless hitting an obstacle. Players can shoot the others as long as they are on the same horizontal level.

33

Level design

Normal mode The platform layout changes every 50s in the game and there are three levels in the normal mode. The levels in normal mode are combinations of two or more types of platforms to create some occasions of conflicts between the players.

34

Level design

Hard mode There are also three levels in the hard mode. In hard mode, each level emphasises on one type of the platforms to amplify the challenges brought to the players by that type of platform.

35

Build the spaceship - The Workflows -

Workflows Code for the character

Character movement

movement The very first step is to code for the character movement. In this step, getting the character Set up animation

move is not enough, the most important part is to get the ‘feel’ correct. For example, in this project, the two characters are foxes and they should move swiftly and smoothly. To achieve

Set up level layout

this, gravity, moving speed and jumping forces are the parameters to experiment with.

Set up the platforms

Animation Code for the levels & attack mechanics

After preparing the character sprites, we need to link the state of the character with the corresponding animation. In Unity, ‘animator’

Set up tutorial level

should be added to the character game object. Then, create different animations and variables for the

Wrap up with other scenes

character.

37

Workflows Code for the character movement

Level layout To set up the level layout, a tile palette to paint on the tilemap is required. Create a new tile palette

Set up animation

with the platform design in the previous session.

As the level layout changes every 50 seconds, organising the game objects in a hierarchy helps

Set up level layout

in managing the presence and absence of the platforms.

Set up the platforms

Set up the platforms Code for the levels & attack mechanics

For the rotating platforms, hinge joints should be added to the game object. To prevent the platforms from over-sensitive and flipping over, ‘angular

Set up tutorial level

drag’ and ‘limit’ should be applied. For the flashing platforms, C# scripts should be utilised to make them appear and disappear over time.

Wrap up with other scenes

38

Workflows Code for the character movement

Code for the levels & attack mechanics After setting up the platforms, the sequence of activation and deactivation of the levels should be controlled by a script. Also, the ‘stun N steal’ as well as ‘shooting’ mechanics

Set up animation

Set up level layout

should be programmed.

Set up tutorial level With all the mechanics established, we can

Set up the platforms

work on the tutorial level to teach the players about them one by one. A script similar to the changing level layout script should be written

Code for the levels &

to control the progression of the tutorial level.

attack mechanics

Wrap up with other scenes Set up tutorial level Work on the cover page, background story, victory page, volume adjustments and credit page to make the game looks complete.

Wrap up with other scenes

39

Declare the war - The Marketing -

Marketing We planned to reach our target audience through: •

Print advertising (e.g. posters, brochures, flyers, stickers, postcards, badges, etc.)

•

Online advertising (e.g. Youtube ad, Facebook page & ad, Instagram page, Twitter page, social media posts with #FoxvsFox)

•

A dedicated website for Fox vs Fox, with video trailers

•

Put demo of the game on Steam, Epic, itch.io and PAX etc.

Print media could be distributed at gaming events, e.g. PAX, ACMI games talk, Freeplay etc. with permission from the organising parties.

Through the various marketing channels, the target audience will be prompted to have a try on the demo of the game.

In the future, I would also like to apply for grants and funding opportunities to adapt and further develop Fox vs Fox with more characters, skins, attack mechanics etc.

41

Distribution channels

End product

Print advertising

Online advertising

Poster

Youtube ad

Broshures

Facebook page & ad

Website

Game demo

Link to game platforms (e.g. Stream, Epic)

Steam

Epic

Trailer video Flyers

itch.io

Instagram page Mailing list

Stickers

Badges

Postcards

42

Twitter page

Social media posts with #FoxvsFox

PAX

Are you ready?

Try the vertical slice here: https://iamcatbone.itch.io/fox-vs-fox-vertical-slice (Password: imready)

Watch the trailer Here

Credits

Sound designer

Playtesters

Benjamin Willis

MAGI Studio 3 cohorts Unity Club fellows

Supervisors

Other MAGI cohorts

Chris Barker

My friends

Jeremy Parker

Martin Wong

Tutor

Art & Design consultant

Jadd Zayed

Chloe Liu

Pablo Munoz Gomez

Cindy Wang Clarice Tan