JESSE FREEMAN
MY NAME IS
I’M A TECHNICAL ARCHITECT
& TECHNOLOGY EVANGELIST
AT ROUNDARCH ISOBAR
2
Slide 3
Slide 3 text
WINSTON CHURCHILL
Success consists of going
from failure to failure without
loss of enthusiasm.
3
Slide 4
Slide 4 text
PART 1
I SUCK AT
DESIGNING
GAMES
4
Slide 5
Slide 5 text
WHAT IS
GAME DESIGN
5
Slide 6
Slide 6 text
GAME DESIGN
does not refer to the visual
style of the game but the
actual game play mechanics
themselves.
6
Slide 7
Slide 7 text
DOCUMENTING YOUR IDEA
is key to capturing your idea
before actually coding.
7
Slide 8
Slide 8 text
GAME DESIGN
DOCUMENT
8
Slide 9
Slide 9 text
is a multi-page document that contains
the general concept of a game, it’s
core mechanics. At the very least it
should give the reader a clear idea of
how the game will look, work and feel.
GAME DESIGN DOCUMENT (GDD)
9
Slide 10
Slide 10 text
GAME DESIGN DOCUMENT
HOW TO MAKE
A GDD
10
Slide 11
Slide 11 text
a term borrowed from the film industry
and represents a “what if” scenario.
When drafting a GDD I use a high
concept to outline what the game is, it’s
scenario and list any games that may
already exist to draw inspiration from.
USE A HIGH CONCEPT
11
Slide 12
Slide 12 text
games are very visual by nature; most
people get bored out of their minds
reading a 15-page or more design
document with no indication of the
artistic style you are envisioning for the
game.
USE SKETCHES AND CONCEPT ART
12
Slide 13
Slide 13 text
13
Slide 14
Slide 14 text
cover how things work and how they
will interact with each other. Go into as
much detail as possible around actions
such as how combat works, leveling
up, stats, rewards, etc.
CLEARLY OUTLINE THE GAME’S MECHANICS
14
Slide 15
Slide 15 text
include things like what properties a
game actor may have such as life,
weapon values and more. This will be
incredibly helpful when you go into
development as a point of reference.
DETAIL GAME OBJECTS
15
Slide 16
Slide 16 text
16
Slide 17
Slide 17 text
it’s always better to start big and scale
down as needed. The last thing you
want to do is limit your imagination or
creativity.
DON’T HOLD BACK
17
Slide 18
Slide 18 text
MOST IMPORTANT THING
SHARE THE GDD
WITH OTHERS
18
Slide 19
Slide 19 text
COMING UP WITH
GAME IDEAS
19
Slide 20
Slide 20 text
some game devs create elaborate
sketches to work out their ideas while
others simply use sticky notes. There is
no right or wrong way to go about this
as long as you find a good system for
jotting down your ideas.
KEEP A GAME JOURNAL
20
Slide 21
Slide 21 text
doing a small code example or trying
to solve a development problem can
really get your brain going and help
you be way more creative when you sit
down to finally code your own game.
DAILY CODE WARMUP
21
Slide 22
Slide 22 text
this goes hand in hand with the daily
code warmup. I like to pick game
systems or interesting mechanics then
try to reproduce them or make them
better.
EXPERIMENT
22
Slide 23
Slide 23 text
look back through the history of video
games, you will see a natural evolution
of one game picking up or modifying
another game’s mechanics.
RECREATE A CLASSIC GAME
23
by Raph Koster. This is a great book
that attempts to answer the question
of “What is fun?” and more importantly
“What is a game?” It’s an easy read
with absolutely no code and all theory.
A THEORY OF FUN FOR GAME DESIGN
38
Slide 39
Slide 39 text
by Scott Rogers. If you are interested
in understanding the technical side of
game design as in how to build a
game design document, pitching
games and more practice than theory
then this is the book to read.
LEVEL UP!: THE GUIDE TO GREAT VIDEO GAME DESIGN
39
Slide 40
Slide 40 text
by Katie Salen and Eric Zimmerman.
The book is very high level and tries to
approach the questions of game
design from a very academic point of
view.
RULES OF PLAY: GAME DESIGN FUNDAMENTALS
40
Slide 41
Slide 41 text
PART 2
IMPACT JS
41
Slide 42
Slide 42 text
WHY USE
IMPACT JS
42
Slide 43
Slide 43 text
is a JavaScript game framework.
Impact takes advantage of the modern
browser’s Canvas Element in order to
create high performance 2d game on
the web and even mobile.
IMPACT JS
43
Slide 44
Slide 44 text
ONLY BARRIER OF ENTRY
the licensing fee for the software since
it is not open source. After purchasing
a license you do get the full source
code, Weltmeister and free updates.
44
Slide 45
Slide 45 text
• Site – http://ImpactJS.com
• Forum – http://ImpactJS.com/forums
• Demos – http://ImpactJS.com/forums/games
• Purchase – http://ImpactJS.com/buy-impact
IMPORT LINKS
45
Slide 46
Slide 46 text
• IDEs – Impact JS has no IDE dependencies; you can
create your games with any simple text editor. I use
WebStorm by JetBrains which has code hinting,
project management, refactoring and debugging.
• Apache – for locally hosting and testing your game.
• PHP – for saving levels created with Weltmeister
(Level Editor).
• Browsers – Impact JS works very well on WebKit
browsers, especially Chrome but any modern
browser with support for Canvas should work as well.
GETTING STARTED
46
Slide 47
Slide 47 text
SETTING UP
WEBSTORM
http://www.jetbrains.com/webstorm
47
Slide 48
Slide 48 text
SETTING UP
APACHE & PHP
48
Slide 49
Slide 49 text
you should use an all in one solution
such as MAMP. You can also use the
built in version of PHP that comes with
OS X. Simply search for “Enabling PHP
in Mac OS X” in order to find
instructions on how to do it.
MAC
MAMP http://www.mamp.info/en/index.html
49
Slide 50
Slide 50 text
like the Mac there are some excellent
one-click solutions for setting up
Apache, PHP and MySQL. I have used
XAMP in the past have had excellent
success with it.
WINDOWS
XAMP - http://www.apachefriends.org/en/xampp.html
50
Slide 51
Slide 51 text
SETTING UP
IMPACT JS
51
Slide 52
Slide 52 text
SIMPLY COPY THE
IMPACTJS FOLDER OVER
52
Slide 53
Slide 53 text
• Index.html - this is the main html file that runs your
game
• lib - this is the core code for Impact JS and where you
will store your own game specific code. This also
contains the source code for Weltmeister.
• media - this is the assets directory and where all
game art will go.
• tools - this directory contains php scripts to compress
and obscure your game. This is part of he license and
is important so you don’t accidentally distribute the
source code.
• weltmeister.html - this is the level editor html file.
INSIDE THE IMPACT FOLDER
53
Slide 54
Slide 54 text
IMPACT JS
MODULES
54
Slide 55
Slide 55 text
Since JavaScript itself does not have a
include() function that can load other
JavaScript source files into an object,
Impact has its own system.
MODULES
55
Slide 56
Slide 56 text
ig.module(
'game.my-file'
)
.requires(
'impact.game',
'impact.image',
'game.other-file'
)
.defines(function(){
// code for this module
});
56
Slide 57
Slide 57 text
ig.module(
'game.my-file'
)
.requires(
'impact.game',
'impact.image',
'game.other-file'
)
.defines(function(){
// code for this module
});
57
Slide 58
Slide 58 text
ig.module(
'game.my-file'
)
.requires(
'impact.game',
'impact.image',
'game.other-file'
)
.defines(function(){
// code for this module
});
58
Slide 59
Slide 59 text
ig.module(
'game.my-file'
)
.requires(
'impact.game',
'impact.image',
'game.other-file'
)
.defines(function(){
// code for this module
});
59
Slide 60
Slide 60 text
IMPACT JS
CLASSES
60
Slide 61
Slide 61 text
is based on John Resig's Simple Java
Script Inheritance code (http://
ejohn.org/blog/simple-javascript-
inheritance), but extends it with deep
copying of properties and static
instantiation.
IMPACT'S CLASS-OBJECT
61
Slide 62
Slide 62 text
// Create a new class "Person"
var Person = ig.Class.extend({
name: '',
init: function( name ) {
this.name = name;
}
});
// Instantiate an object of the first
class
var e = new Person('Generic Person');
e.name; // => Generic Person
62
Slide 63
Slide 63 text
// Create a new class "Person"
var Person = ig.Class.extend({
name: '',
init: function( name ) {
this.name = name;
}
});
// Instantiate an object of the first
class
var e = new Person('Generic Person');
e.name; // => Generic Person
63
Slide 64
Slide 64 text
// Create a new class "Person"
var Person = ig.Class.extend({
name: '',
init: function( name ) {
this.name = name;
}
});
// Instantiate an object of the first
class
var e = new Person('Generic Person');
e.name; // => Generic Person
64
Slide 65
Slide 65 text
// Create a new class "Person"
var Person = ig.Class.extend({
name: '',
init: function( name ) {
this.name = name;
}
});
// Instantiate an object of the first
class
var e = new Person('Generic Person');
e.name; // => Generic Person
65
Slide 66
Slide 66 text
// Create a new class "Person"
var Person = ig.Class.extend({
name: '',
init: function( name ) {
this.name = name;
}
});
// Instantiate an object of the first
class
var e = new Person('Generic Person');
e.name; // => Generic Person
66
Slide 67
Slide 67 text
Impact JS
EXTENDING
CLASSES
67
Slide 68
Slide 68 text
// Create another class by extending the
"Person" class
var Ninja = Person.extend({
init: function( name ) {
this.parent( 'Ninja: ' + name );
}
});
// Instantiate an object of the second
class
var p = new Ninja('John Resig');
p.name; // => Ninja: John Resig
68
Slide 69
Slide 69 text
// Create another class by extending the
"Person" class
var Ninja = Person.extend({
init: function( name ) {
this.parent( 'Ninja: ' + name );
}
});
// Instantiate an object of the second
class
var p = new Ninja('John Resig');
p.name; // => Ninja: John Resig
69
Slide 70
Slide 70 text
// Create another class by extending the
"Person" class
var Ninja = Person.extend({
init: function( name ) {
this.parent( 'Ninja: ' + name );
}
});
// Instantiate an object of the second
class
var p = new Ninja('John Resig');
p.name; // => Ninja: John Resig
70
Slide 71
Slide 71 text
// Create another class by extending the
"Person" class
var Ninja = Person.extend({
init: function( name ) {
this.parent( 'Ninja: ' + name );
}
});
// Instantiate an object of the second
class
var p = new Ninja('John Resig');
p.name; // => Ninja: John Resig
71
Slide 72
Slide 72 text
PART 3
AUTOMATE
EVERYTHING
72
Slide 73
Slide 73 text
IMPACT JS
THE ASSET
PIPELINE
73
Slide 74
Slide 74 text
refers the to visual workflow you create
for your project. This could be as
simple as copying files over by hand
into your game’s media folder or
writing more complex automation
scripts to generate the art for you.
ASSET PIPELINE
74
Slide 75
Slide 75 text
is a single bitmap image that is drawn
to the display; in this case our Canvas
Element. To help organize them better,
sprites are grouped together into a
single image called a sprite sheet.
A SPRITE
75
SCRIPTING IN
PHOTOSHOP
http://www.adobe.com/devnet/photoshop/scripting.html
78
Slide 79
Slide 79 text
BUILD EACH SPRITE IN
IT’S OWN LAYER
79
Slide 80
Slide 80 text
RUN THE
SPRITE SHEET SCRIPT
https://gist.github.com/870172
80
Slide 81
Slide 81 text
SAVE FOR WEB &
DEVICES
81
Slide 82
Slide 82 text
IMPACT JS
DEPLOYMENT
82
Slide 83
Slide 83 text
• Desktop Browsers: Chrome, Safari, Firefox and
Internet Explorer 9+
• Mobile Browsers: iOS and Chrome for Android
• Web Markets: Chrome Web Store and Mozilla’s soon-
to-be-released Web Store
• iOS Native: Impact allows you to compile your game
natively for iOS
• WebView Wrappers: AIR, PhoneGap and OS X using
a native app with WebView
• Windows 8: Windows 8 allows you to create native
Metro apps with HTML5/JS
SUPPORTED PLATFORMS
83
Slide 84
Slide 84 text
http://bit.ly/IIc2aa
AUTOMATE BUILDS
WITH ANT
84
Slide 85
Slide 85 text
this is a standard task that removes
any files created from the previous
build. You always want to run this type
of task to make sure you don’t corrupt
your deploy folder (where our final
output will be copied to).
CLEANUP
85
Slide 86
Slide 86 text
when we are moving around a lot of
files, we will create tmp folders to keep
our script’s files separated from the
main codebase and the final deploy
directory. It helps to remove these
temporary files once you are done with
them.
POST BUILD CLEANUP
86
Slide 87
Slide 87 text
is run from the command line and is
written in PHP. Luckily, Ant can
execute PHP scripts as long as you
have PHP installed in your system and
are able to run them via the command
line as well.
BAKE SCRIPT
87
Slide 88
Slide 88 text
this is the base build script. It makes
sure that the code is cleaned up and
ready to be deployed to a Web server.
WEB BUILD
88
Slide 89
Slide 89 text
iOS has its own Xcode project, we
simply copy over the core game code
into that directory. The rest of the
Xcode project will handle initializing the
game on iOS and is not worth us trying
to generate any of the iOS-specific
wrapper files.
IOS BUILD
89
Slide 90
Slide 90 text
this is going to be similar to our iOS
build. We only need the core game
classes, and we’ll rely on the default
Visual Studio project to handle setting
up and initializing our game for us.
WINDOWS 8 BUILD
90
Slide 91
Slide 91 text
two builds for our Web stores, one for
Chrome and the other for Firefox. We’ll
use our default Web build but handle
creating the manifest.json file in Ant
(another cool feature of Ant that allows
you to write out text to a file).
WEB STORE BUILD
91
Slide 92
Slide 92 text
PART 4
GAMES
92
Slide 93
Slide 93 text
48 HOUR GAME (LUDUM DARE 22)
ALONE
93
Slide 94
Slide 94 text
Alone was created during my first
Ludum Dare competition. The game is
built around an Edgar Alan Poe poem
and is devoid of any visuals except for
the words themselves allowing the
player to image the game's visuals in
their own head.
http://gamecook.com/games/ld22-alone/
94
Slide 95
Slide 95 text
DEMO
95
Slide 96
Slide 96 text
96
Slide 97
Slide 97 text
97
Slide 98
Slide 98 text
98
Slide 99
Slide 99 text
99
Slide 100
Slide 100 text
100
Slide 101
Slide 101 text
101
Slide 102
Slide 102 text
2 WEEK GAME
JETROID
102
Slide 103
Slide 103 text
In Jetroid you land on a planet to explore
for lifeforms and artifacts while trying to
make it back to your ship before you run
out of air. As you explore the caves
underground, you find will find power
ups (air, life & energy), new alien lifeforms
and artifacts.
http://gamecook.com/games/jetroid/
103
Slide 104
Slide 104 text
DEMO
104
Slide 105
Slide 105 text
105
Slide 106
Slide 106 text
106
Slide 107
Slide 107 text
107
Slide 108
Slide 108 text
108
Slide 109
Slide 109 text
109
Slide 110
Slide 110 text
INTRO TO IMPACT BOOK EXAMPLE
Resident Raver
110
Slide 111
Slide 111 text
Resident Raver is a mix of Super Crate
Box meets Elevator Action. The goal of
the game is to survive wave after wave
of raver zombies that have taken over
the dorms at FSU.
http://gamecook.com/games/resident-raver/
111
Slide 112
Slide 112 text
DEMO
112
Slide 113
Slide 113 text
113
Slide 114
Slide 114 text
114
Slide 115
Slide 115 text
115
Slide 116
Slide 116 text
116
Slide 117
Slide 117 text
117
Slide 118
Slide 118 text
118
Slide 119
Slide 119 text
GAME PROTOTYPE
TILE CRUSADER
119
Slide 120
Slide 120 text
is a crowd-sourced, coffee break
roguelike game that gives anyone the
ability to pick up and play a random
crusade in just a couple of minutes.
What makes Tile Crusader unique is that
the players can also create their own
custom levels to share with others.
COMING SOON!
120
Slide 121
Slide 121 text
121
Slide 122
Slide 122 text
122
Slide 123
Slide 123 text
123
Slide 124
Slide 124 text
124
Slide 125
Slide 125 text
125
Slide 126
Slide 126 text
126
Slide 127
Slide 127 text
127
Slide 128
Slide 128 text
PART 5
WHAT HAVE I
LEARNED?
128
Slide 129
Slide 129 text
JAVASCRIPT CAN BE FUN
WHEN YOU ARE MAKING
GAMES
129
Slide 130
Slide 130 text
HTML5 GAMES
ARE THE FUTURE
130
Slide 131
Slide 131 text
THIS IS JUST THE BEGINNING,
IT’S ONLY GOING TO GET BETTER
131
Slide 132
Slide 132 text
BE A LEADER,
NOT A FOLLOWER
132
Slide 133
Slide 133 text
GET THE BOOK
http://oreil.ly/zzcjI2
DISCOUNT:
AUTHD
133
Slide 134
Slide 134 text
THANKS FOR WATCHING
My Portfolio
http://jessefreeman.com
My Games
http://gamecook.com
Twitter
http://twitter.com/jessefreeman
GitHub
http://github.com/jessefreeman
134