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
