GD21leo
Game Design Document for:
Shotcaller
Video Trivia
The Vancouver Canucks edition.
The ultimate Canucks video trivia game!
All work Copyright ©2008 Vancouver Film School
Written by GD21Leo
Version # 2.2 Final
Monday, July 31, 2017
Page | 1
Design History: .............................................................................................................................................. 4
Version 1.0: ............................................................................................................................................... 4
Version 1.1 ................................................................................................................................................ 4
Version 1.2 ................................................................................................................................................ 4
Version 1.3 ................................................................................................................................................ 5
Version1.4 ................................................................................................................................................. 5
Version 1.5 ................................................................................................................................................ 5
Version 1.6 ................................................................................................................................................ 5
Version 1.7 ................................................................................................................................................ 5
Version 1.8 ................................................................................................................................................ 6
Version 1.9 ................................................................................................................................................ 6
Version 2 ................................................................................................................................................... 6
Version 2.1 ................................................................................................................................................ 6
Version 2.2 Final........................................................................................................................................ 7
Game Overview:............................................................................................................................................ 8
High Concept: ............................................................................................................................................ 8
Philosophy:................................................................................................................................................ 8
Bringing Emotion to sports trivia: ......................................................................................................... 8
Unique game formula: .......................................................................................................................... 8
Genre leader: ........................................................................................................................................ 8
Scalability: ............................................................................................................................................. 8
Portability:............................................................................................................................................. 8
Modular:................................................................................................................................................ 8
Cloud power: ......................................................................................................................................... 8
Common Questions: ................................................................................................................................. 9
What is the game? ................................................................................................................................ 9
Why create this game? ......................................................................................................................... 9
Where does the game take place? ....................................................................................................... 9
What do I control? ................................................................................................................................ 9
How many characters do I control? ...................................................................................................... 9
What are the goals and objectives of the game? ................................................................................. 9
Page | 2
What is the main focus? ..................................................................................................................... 10
What’s different? ................................................................................................................................ 10
Feature Set .................................................................................................................................................. 11
Feature highlights: .................................................................................................................................. 11
Feature 1. ............................................................................................................................................ 11
Feature 2. ............................................................................................................................................ 11
Feature 3. ............................................................................................................................................ 11
Feature 4. ............................................................................................................................................ 11
Feature details: ....................................................................................................................................... 12
Feature 1. ............................................................................................................................................ 12
Screen Flow Diagram .............................................................................................................................. 13
Feature 2. ............................................................................................................................................ 23
Feature 3. ............................................................................................................................................ 25
Feature 4. ............................................................................................................................................ 25
Gameplay: ................................................................................................................................................... 26
Single player game: ................................................................................................................................. 26
Multiplayer game: ................................................................................................................................... 28
Game Interface – Menus ........................................................................................................................ 30
Title screen: ............................................................................................................................................. 30
Main menu: ............................................................................................................................................. 31
Sign in: ..................................................................................................................................................... 32
1 player: .................................................................................................................................................. 33
Tournament: ........................................................................................................................................... 34
Sound .......................................................................................................................................................... 35
Overview: ................................................................................................................................................ 35
Sound design: .......................................................................................................................................... 35
Extra Miscellaneous Stuff: .......................................................................................................................... 35
Page | 3
Design History:
Version 1.0:
-
Initial idea for a hockey game that will play on mobile.
Desire to use tilt-shift photography art style and theme
Design goals of game that is mobile and multiplayer.
Experimenting on Unity 3d engine.
Research on sports games on mobile yields high potential with trivia genre.
Research into sports trivia market shows low competition with rich media.
Decision to create design prototype of workable rich media trivia formula
Research into mobile networking reveals high programming expertise requirements beyond
team capabilities
Version 1.1
-
Research into mobile networking reveals Leaderboard gaming to be viable
Progress on importing rich media to Unity 3d
Discovered tilt-shift photography and various depth of field plug ins for Unity 3d
480p video can run on movie texture in Unity 3d
Multiple textures running separate video files in Unity 3d achieved
Research into 3d modeling characters and props into Unity 3d reveals high 3d art programming
expertise requirements beyond team capabilities
First trivia format using a story line structure of plays leading to exciting highlight
Tentative name of formula: play by play trivia.
Decision to make a game specific to Vancouver Canucks fan base
Version 1.2
-
First trivia format using a story line structure of plays leading to exciting highlight : isolated to
only goals being scored
Experimentation with video capture of highlights from YouTube yields good results
Experimentation with video editing using Adobe Premiere yields good results
Experimentation with photographic editing and video post process on Adobe Photoshop yields
good results
Decision to drop 3d to focus on developing rich media delivery with video trivia
Decision to drop Unity 3d to adopt Flash engine to optimize for video delivery
Focus on designing efficient pipeline
Page | 4
Version 1.3
-
Trivia formula of 3 act structure with 3 video parts and 2 question parts yields positive feedback
First set of 6 video highlights to be used with new 3 act structure formula captured
Review of 3 act structure compatibility to scalable, portable and modular design structure
Decision to support tournament gameplay with Facebook leaderboard
Decision to support casual trivia gameplay for 1player with Facebook leaderboard
Experimenting on additive scoring system
Formula found to work well with other sports such as soccer
Version1.4
-
Question part 1 to involve answering questions by identifying player pictures visually positive
Shooting Target trivia for question part 2 to place where goals were scored visually positive
Acquired set of Vancouver Canucks player action pictures for use as buttons
Acquired various Vancouver Canucks theme art.
Progress using Flash engine to make trivia formula to work on timeline positive
Version 1.5
-
Using Adobe Photoshop to make post process video for specific art theme positive
First complete Trivia with 3 video clips and 2 question part formula achieved
Video clip naming convention and clip format yields positive results
Video clips now referenced as ”_in”; “_shot” and “_out” clips
Additive scoring system found to have score clumping issues with large tournaments
Version 1.6
-
Adobe Photoshop video post processing dropped in favor of clean HD video
Question 1 buttons changed from player action shots to player faces
Added numbers reference to Shooting Target Question 2
Experimenting with Scoring system with random multipliers
Version 1.7
-
Added “puck highlighter” to help players see puck in highlights
Use of Adobe Photoshop frame by frame post process to highlight puck
Dropped numbers reference to Shooting Target Question 2
Switch to color coding reference to Shooting Target Question 2
Page | 5
Version 1.8
-
Use of Flash tweening to produce “puck highlighter” found to be superior
First looping of 3 trivia made in Flash successful
Experimenting with video compression in adobe premiere to optimize file memory
Significant loss of video quality found in compressed video
Audio is out of sync with video when embedded into flash
First flash port to run on multiple browsers successful
Port run on Chrome browser successful
Port run on Firefox browser successful
Port run on Explorer browser successful
Version 1.9
-
First port of 3 trivia loop from Flash to android tablet successful
First port from Flash to android phone successful- pending hardware testing
First port from Flash to iphone4 ios successful- pending hardware testing
First port from Flash to ipad ios successful- pending hardware testing
Version 2
-
Name changed to “Call that Shot!”
Switch from using Flash timeline to Flash Develop
Using Action Script 3 code based function to achieve greater flexibility to meet design targets of
scalability, portability and modular components
First port of trivia video assets to run formula on YouTube with annotations successful.
First YouTube demo made
Version 2.1
-
Experimentation using Flash Stage Video to run video with GPU successful
Stage video will allow for much faster handling of rich media and free CPU of smaller devices
Compression of video files remain an issue to loss of video quality
Uncompressed 656x480 video yields very positive results on YouTube
Use of video transitions between questions to make smoother visual experience
Page | 6
Version 2.2 Final
-
Name revised to “ShotCaller”
Immediate answer feedback screens to enhance user experience
Skill based scoring system with wagering option on 2nd question part finalised
Scalable, portable and modular design targets met with Action Script 3 using Flash Develop
Second YouTube demo made
Video Assets banked on YouTube to allow cloud based media retrieval
Compression of video no longer an issue with cloud based media retrieval using reference tags
YouTube demo runs on blackberry playbook online
Design Goals met. – pending final audio and visual polish to public launch.
Page | 7
Game Overview:
High Concept:
Tagline: the ultimate video sports trivia; The ultimate Canucks video trivia game
This game will be the new genre defining video sports trivia game starting with NHL hockey and the
Vancouver Canucks market.
Philosophy:
Bringing Emotion to sports trivia:
By using rich media (high definition video, stereo sound) sports trivia fans will get to relive the moments
that inspired them!
Unique game formula:
Our game will be using a unique game formula designed for easy adoption and low learning curve.
Genre leader:
This game will set the standard for the video sports trivia games genre.
Scalability:
This game is designed to play just as smoothly with 100,000 players or 1. Social and casual ready.
Portability:
This game will be truly cross platform and will run leaderboard tournaments with all online players
regardless of operating system.
Modular:
This game is designed to be “plug and play” for easy mod’ing(customization) and content expansion by
making all assets and functions into organized modular components.
Cloud power:
All media content will be banked in the cloud making the application super light on memory for all
devices.
Page | 8
Common Questions:
What is the game?
This game is the modernization of sports trivia using the best of today’s technology to offer true cross
platform operability with social networking support and cloud based internet functionality; yet simple
enough for a child to play. It is also the first rich media (mmotg) Massively Multiplayer Online Trivia
Game
Why create this game?
To meet a demand for an updated sports trivia game that is both sophisticated in leveraging modern
technology while staying simple and easy to play. Everyone knows what trivia is, it is simple and straight
forward, but perhaps it is because of this deceptive simplicity that it is overlooked as a genre and left to
be for so many gaming generations while we see other genres like FPS(first person shooters), RTS(real
time strategy), Sports and Racing games progressively improve . Yet if you think about the current
market with high demand for social and casual gaming on non-traditional platforms of mobile and
browser based gaming: trivia and specifically sports trivia is ripe for an upgrade and grand renaissance.
Where does the game take place?
In a virtual game show environment
What do I control?
Players control what answers to input in various simple menus and decisions to wager on their answers.
How many characters do I control?
One. Players control how they interact with variety of simple menus.
What are the goals and objectives of the game?
To answer trivia questions correctly and achieve the highest score possible.
Page | 9
What is the main focus?
Players show off your why they are the ultimate fan! They get to show the world through skill and
knowledge or instinct and guts by achieving the most incredible scores and posting it for all to see.
What’s different?
All current sports trivia games employ the dominant format of text questions without rich media
support. Our game is the only sports trivia game that uses a unique formula and real highlights from the
past and present to create an emotionally engaging trivia experience through the specific use of rich
media to augment the intellectually engaging trivia experience of the traditional format. We are also the
only rich media sports trivia game that can be played with over a hundred thousand players at the same
time in online tournament play.
Page | 10
Feature Set
Feature highlights:
Feature 1.
Unique Sports Trivia formula using Real highlights and real historic highlight plays.
Feature 2.
Play anywhere and post your high scores or join a tournament against up to 100,000
other fans
Feature 3.
Endless content from the cloud
Feature 4.
Play with friends and family – easy to play for anyone 10 and up
Page | 11
Feature details:
Feature 1.
Unique Sports Trivia formula using Real highlights and real historic highlight plays.
The key factor that sets this sports trivia game apart from all currently available sport trivia
games is the use of rich media content support to increase player immersion and engagement.
All trivia content is from real recordings of actual events in its highest available quality. For
current sports highlights most video content will be at minimum 480p with stereo sound.
Implementation:
Record and capture highlight video and audio sources from the highest quality possible.
Most common capture software will convert files to .avi format or mpeg4
Take these videos to be edited using video editing tool (adobe premiere)
The highlight video will be cut into 3 sections with specific dramatic purpose that follows the
formula of a small story arc: 3 act structure.
Using a consistent naming convention makes organizing the videos much easier.
These videos will be labeled with “_in”; “_shot” and “_out” after a title that can be easily
referenced to the play.
Example:
(“(playername)_vs_(opposingteam)and(dateofgame)_(clip label)”)
“burrows_vs_hawksfeb21_in” and
“burrows_vs_hawksfeb21_shot” and
“burrows_vs_hawksfeb21_out” would follow.
YouTube example of early prototype:
http://www.youtube.com/watch?v=jNfaGlsjojI
Page | 12
Screen Flow Diagram
The 3 clips will be chosen with the following formula in mind with the addition of other
components that will be presented but described in greater detail later:
An “intro” clip is placed right before the “_in” clip later on that introduces the teams or scene.
Example:
(intro) Vancouver Canucks versus Chicago Blackhawks
Page | 13
Example:
(_in.clip)
(start)we begin the clip as the play develops: a scramble for the
puck in the neutral zone, Alexander Burrows is the principle star of this play and is
skating into the offensive zone and is about to steal the puck from the opposition (stop)
The “_in” clip starts at the beginning of a scoring play and ends right before the principle star of
the play is about to enter a scoring position.
At the end of the “_in” clip is where we make space to insert the first question that would have
some relation to the star of this trivia play or sets up the historical significance of the play. The
question should be no more than 2 lines with or 20 words long. There should be 4 choice
answers and only one answer may be correct.
Page | 14
Example:
(question1)
Who scored the game winner to beat the Chicago Blackhawks
in the 2010-2011 playoffs?
AnswerOptions: Bieksa;Edler;Kesler;Burrows
Correct Answer is:Burrows
Page | 15
After the player answers the question a feedback will return whether they answered correctly or
not.
Page | 16
After the first question follows the “_shot” clip. It starts with the principal star of the play entering a
scoring position and ends at the top of the scoring players windup, the critical moment of when a player
is about to enter the executing action to score. This is the moment of decision that every sports player
that has scored a goal can relate to.
Immediately at the end of the “_shot” clip we insert a zoom in transition clip to lead to question 2.
The zoom in transition serves to give the player the feeling of zooming into the star player’s perspective
of first person view of shooting on the net to score the goal.
After the zoom in transition is where we make space for the net and shooting target question setup
known as question 2. This question space simply consists of a picture of a hockey net with a goalie in the
middle in butterfly stance (legs spread wide, glove hand up, stick down and blocker raised) with 5
shooting targets or shooting zones: Top Left, Top Right, Bottom Left, Bottom Right and 5 hole(between
the legs).
Example:
(_shot.clip)
(start) Alexander Burrows steals the puck from the opposition in
the offensive zone skates into the middle of the ice rushing towards the opposition goal,
he raises his stick up and winds up for a shot (stop)
Page | 17
Example:
(zoom in transition) a short movie clip of zooming in from a 3rd person
perspective to a first person perspective of the principle star of the play looking at the
opposition net.
Page | 18
Example:
(question2)
Call that shot! Where did alexander burrows shoot to score the goal?
Answer Options: Top Left; Top Right; Bottom Left; Bottom Right; 5 hole.
Correct Answer is: Top Left.
Page | 19
After the player answers the question a feedback will return whether they answered correctly or not.
Page | 20
After the second question follows the “_out” clip. The “_out” clip is where we see the result of
the players shot following through his wind up and scoring the goal. With certain highlights a
“puck highlighter” may be necessary to help the player see how and where the puck entered the
net to result in a goal.
To make the “puck highlighter” we used Flash 5.5 and used a masking option with a slightly
enlarged puck graphic with a red glow to contrast well against the ice and motion tweened on
top of where the puck in the movie was frame by frame.
YouTube example:
http://www.youtube.com/watch?annotation_id=annotation_282586&v=mdkFR_Y6tog&src_vid
=LQXl6dvobr0&feature=iv
Page | 21
Example:
(_out.clip)
(start)Alexander Burrows from the top of his wind up follows through
swiftly to shoot the puck high into the top left corner of the net above the goalie’s
blocker or stick side shoulder resulting in a goal that is clearly highlighted by the “puck
highlighter”. The crowd goes wild and his teammates rush to hug and celebrate with
him; his bench is going crazy too with the coaches hugging and cheering also. The whole
arena is going nuts and everyone is jumping around with joy!(stop)
For all current movie clips aim to maintain a minimum of 480p resolution.
(All our video was running at 656x480)
Page | 22
Feature 2.
Play anywhere and post your high scores or join a tournament against up to 100,000
other fans
The second factor is leveraging available social media networks so players can play anywhere
and be able to automatically upload personal high scores and progress in the game.
Leaderboards and high scores will be posted on “Facebook” and/ or tweeted using “Twitter”
Players have the option to “sign in” at the title screen so they may join the community of fans
playing the game on popular social networks such as “Facebook” and be able to post their
scores and join leaderboards for tournaments.
Specific technical design features that are hidden from the players are the importance of
scalable, portable and modular design that allows for true cross platform play. The design of the
formula from feature 1 is made to be easily translated to different devices by using Flash
Develop and Action Script 3 to keep all assets as modular components with common file types
such as:
.jpeg and .png for art
.avi .mov and .flv for video
.wav for sound
.xml for data
Keeping to a simple formula with simple components make this game very scalable being the
same process to run for 1 player or 100,000 players and the same process for 10 questions or
1000 questions on the software side. Hardware wise is equally as simple as all parts can be
quantified to evaluate necessary resources to run the desired program.
The same design principles that lend to efficient scalability also lend to equally strong
portability. With the use of lowest common denominator of high quality file formats makes the
game run on ios, android, browser or whatever current operating system a very easy transition.
The formula also has excellent portability to other sports highlights that involve shooting on a
goal such as soccer or any sport where highlights involve a placement of a ball or a play object.
Translation to future HTML5 game format will be fairly seamless.
Page | 23
Implementation:
open a Facebook account and choose to participate in the development side
Make a Facebook application page to accept leaderboards score input
Use common file types for all assets (xml)
Use flash 5.5, flash develop, actionscrip3
make all functions of gameplay as code components
Trivia made as modules with 2 question nodes
Set tournament mode to publish:
“game number”; ”start time”; “end time” and ”score” to server.
Along with “Player ID” this makes up the Leaderboard data.
It is the combination of game number; start and end time
that qualifies a player to be part of a list.
Score determines the place on list.
Player Id is for identity.
Page | 24
Feature 3.
Endless content from the cloud
The third factor is leveraging of available online file banks to hold media content files that
players use reference tags on their device application to retrieve allowing for rich media
entertainment without significant memory storage on the user end. This also allows for easy
growth of the content library and very light update packages for users as they only need to add
new reference tags. Current videos are stored on “youtube.com” and reference tags will using
the unique video “url” as identity links.
The importance of a modular design really shines with this feature as content can be easily
plugged in with our “plug and play” design. Future content can be added server side without any
hassle to the players.
Implementation:
make all media content using common file types (.avi .mov .flv)
upload all movie files to a stable and secure data bank (youtube)
code functions to call media content by reference tags “url”
Feature 4.
Play with friends and family – easy to play for anyone 10 and up
This game was designed to be user friendly and family oriented. The user interface is extremely
simple and easy to use for intuitive gameplay that even seniors and children (or really
intoxicated adults) can enjoy and share in the fun.
Implementation:
designed for kids. Make sure to let children playtest it.
Page | 25
Gameplay:
Single player game:
Overview:
Player starts app by initiating app icon
Player is presented with title screen
Player may choose to sign in to Facebook account
Player chooses single player game
Player has choice of 11; 22; 33; 44; or 55 random questions game
Game starts.
Intro
-
teams introduced
Movie clip “_in”
-
a teaser of video is revealed that may spark player memory
Question1
-
a question is asked that relates to the historical significance of the play or the principal star of
the play.
Question1answer
-
answer feedback to question1
Page | 26
Movie clip “_shot”
-
video is released that continues from movie clip ”_in” and extends to show the development of
play ending with the principle star play in the motion of scoring.
Zoom in transition
-
Sets up question 2 with short animation
Player enters wager on question 2
Question2
-
A question is asked that challenges the player to “call the shot!” by correctly placing where the
puck went in the net to result in a goal.
Movie clip “_out”
-
Video clip of goal being scored with following celebration is played.
Game transitions to next question until set amount of questions is complete and score is tallied.
Player has choice of posting score to Facebook and/or Twitter.
Game ends.
Page | 27
Multiplayer game:
Overview:
Player starts app by initiating app icon
Player is presented with title screen
Player may choose to sign in to Facebook account
Player chooses multi player game
Player enters unique tournament game number
Game starts.
Intro
-
teams introduced
Movie clip “_in”
-
a teaser of video is revealed that may spark player memory
Question1
-a question is asked that relates to the historical significance of the play or the principal star of the play.
Question1answer
-answer feedback to question1
Movie clip “_shot”
-
video is released that continues from movie clip ”_in” and extends to show the development of
play ending with the principle star play in the motion of scoring.
Page | 28
Zoom in transition
-
Sets up question 2 with short animation
Player enters wager on question 2
Question2
-
A question is asked that challenges the player to “call the shot!” by correctly placing where the
puck went in the net to result in a goal.
Movie clip “_out”
-
Video clip of goal being scored with following celebration is played.
Game transitions to next question until set amount of questions is completed and score is tallied.
Player will see his place in tournament and will be posted to top 100 list on Facebook
Player has choice of posting score to Facebook and/or Twitter
Game ends.
Page | 29
Game Interface – Menus
All game menus are designed to be simple and intuitive and work on mobile touchscreens
All screens work with either touch, pen or mouse interface options
All menu screens have a “back to main menu option” .
Title screen:
touch the screen to start.
Page | 30
Main menu:
-
Sign in.
1 player
Tournament
Page | 31
Sign in:
-
Facebook account.
Twitter account
Page | 32
1 player:
Trivia quiz format:
-
11 quiz game
22 quiz game
33 quiz game
44 quiz game
55 quiz game
Page | 33
Tournament:
-
Enter Game Number
Page | 34
Sound
Overview:
To enhance the user experience and emotional engagement we try very hard to stay true to the
highlight videos original sound. This poses a particular challenge to make clips that work visually and
also have sound that is not cut off and partial since many highlights often have announcers that talk
during the play.
It is very advantageous to take the time to find the balance during editing as sound is very emotional
and memory intensive, many people remember historical plays simply by the play calling of the event.
Music is only used sparsely in the opening and ending of gameplay or very light background ambient
clips that resemble the experience of being at a live hockey game.
Sound design:
Most of the sound used in the game is very similar to classic TV game show sounds with the aim of
conditioning the player to expect and desire positive sounds along with play and experience enhancing
ambient support to create an arena like atmosphere.
Extra Miscellaneous Stuff:
This game was designed for Sports Fans!
True sports fans cannot get enough of their favorite team; often watching the most current game
highlights over and over until new highlights are available. They are always starving for new content.
This game directly targets that demand by taking regular highlight watching to a new level by merging it
with the other favorite past time of sports fans: sports trivia!
This is an excellent game for the casual gamer that is bored standing in line or waiting for the bus or
riding the bus. They can pick it up play a few questions and put it away at their convenience.
This game was made to inspire by borrowing from the spark of excitement that highlights give and
making it portable. This is the game that parents can sit and play with kids during trips; a way to connect
and have things in common. It is perfect for all the times when friends are together and looking for
some light entertainment.
Page | 35
It would also be interesting to have add-ons like a board game associated with the game that can be
played on table top between friends and family where the score equates to movement of pieces or
other derivative mechanics. This will certainly be a great centerpiece to drinking games for adults.
This game is an excellent gateway game towards social gaming that could use the currency from scores
accumulated to build towards other game worlds, like a Vancouver Canucks based Fan”ville” that is
supportive of the community of players to grow as a culture.
As for the multiplayer tournaments we would certainly love to see how big a single trivia event using
this game could be. A single 11 to 22 trivia game match could be set up to coincide with the
intermissions during hockey games which could involve the entire stadium and fan base watching on TV
and following online. The number of players could easily exceed 100,000.
We also look forward to seeing a soccer version of this game during the Brazil World Cup in 2014; with
the fanaticism of soccer a single trivia match could realistically involve over a million players.
This is a game that benefits all involved; a catalyst by design. Players are entertained, sports clubs get
more attention; media supporters get increased traffic and potential sponsors get more exposure.
We are very satisfied with the game that we have produced as our first official creation not because it is
a gem by any stretch but it certainly has the potential with enough patience and polishing this little lump
of coal just might shine someday.
Page | 36