92
gamedesigninitiative at cornell university the gamedesigninitiative at cornell university the ActionScript 3 and Game Design Lecture 2:

ActionScript 3 and Game Design

Embed Size (px)

Citation preview

Page 1: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

ActionScript 3

and Game Design

Lecture 2:

Page 2: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Promise

Get you up to speed on Flash

Tell you about an interesting experiment

Teach basics of game design

Introduction2

Page 3: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Outline

Updates

Flash / ActionScript 3

What is a game?

How do we brainstorm?

What makes a game fun?

Upcoming assignments

Introduction3

Page 4: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Outline

Updates

Flash / ActionScript 3

What is a game?

How do we brainstorm?

What makes a game fun?

Upcoming assignments

Introduction4

Page 5: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Update

Groups are still being formed, will be done by tomorrow afternoon

I’m aware of room size problems

Assignment 1 was due yesterday

Send ASAP

Assignment 2 is due Tuesday at 11:59pm

Separate tasks for programmers and designers

Project Pitches on Thursday

Each group will present their idea

I will talk about this later today

Introduction5

Page 6: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Welcome newcomers!

Please do Assignment 1 ASAP

Introduction6

Page 7: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Outline

Updates

Flash / ActionScript 3

What is a game?

How do we brainstorm?

What makes a game fun?

Upcoming assignments

Introduction7

Page 8: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Before starting…

Download the debug player of Flash

Allows the IDE to link to the Flash player

Set breakpoints

Monitor variable values

View console output

If this is not on the Phillips 318 machines, let me know

Getting this to work in Chrome requires an extra step

Avoid mxml

Flash Builder 4: Create new “ActionScript Project”

Flash Develop: Create new “AS3 Project”

Introduction8

Page 9: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Classes

public class MyClass

{

}

Only one class per file!

Class name must match file name

Introduction9

Page 10: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Inheritance

public class MyClass extends OtherClass

{

}

Introduction10

Page 11: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Sprites

import flash.display.Sprite;

public class MyClass extends Sprite

{

}

Introduction11

Page 12: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Constructors

import flash.display.Sprite;

public class MyClass extends Sprite

{

public function MyClass()

{

}

}

Introduction12

Page 13: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Packages

package mygame

{

import flash.display.Sprite;

public class MyClass extends Sprite

{

public function MyClass()

{

}

}

}

Introduction13

Page 14: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Hello World! (finally)

package mygame{

import flash.display.Sprite;

public class MyClass extends Sprite{

public function MyClass(){

trace(“hello world!”);}

}}

Introduction14

Page 15: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Variables

var a:int = 0;

Introduction15

Page 16: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Functions

var a:int = 0;

function addOne(input:int):int {

return input + 1;

}

Introduction16

Page 17: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Member Variables

package mygame{

import flash.display.Sprite;

public class MyClass extends Sprite{

private var a:int;

public function MyClass(){}

}}

Introduction17

Page 18: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Class Functions

package mygame{

import flash.display.Sprite;

public class MyClass extends Sprite{

public function MyClass(){

trace(addOne(2));}

public function addOne(input:int):int {return input + 1;

}}

}

Introduction18

Page 19: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

The Stage

Introduction19

MyClass

MyChildClass

Page 20: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Adding Children

package mygame{

import flash.display.Sprite;

public class MyClass extends Sprite{

public function MyClass(){

var myChildClass:Sprite = new Sprite();addChild(myChildClass);

}}

}

Introduction20

Page 21: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Moving Sprites

package mygame{

import flash.display.Sprite;

public class MyClass extends Sprite{

// inherits x, y

public function MyClass(){}

public function move(){

x = 100;}

}}

Introduction21

Page 22: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Event Listeners

package mygame{

import flash.display.Sprite;

public class MyClass extends Sprite{

public function MyClass(){

addEventListener(MouseEvent.MOUSE_CLICK, click)

}

public function click(event:MouseEvent):void{

// do something}

}}

Introduction22

Page 23: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Removing Event Listeners

package mygame{

import flash.display.Sprite;

public class MyClass extends Sprite{

public function MyClass(){

addEventListener(MouseEvent.MOUSE_CLICK, click)

}

public function click(event:MouseEvent):void{

removeEventListener(MouseEvent.MOUSE_CLICK, click)

}}

}

Introduction23

Page 24: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Embedding Assets

package mygame{

import flash.display.Sprite;

[Embed(source='image.png')] private var background:Class;

public class MyClass extends Sprite{

public function MyClass(){

var image:Bitmap = new background();addChild(image);

}}

}

Introduction24

Page 25: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Summary

Flash is pretty easy

However, some peculiarities

Introduction25

Page 26: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

So you want to make a game…

What is a game?

Introduction26

Page 27: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Outline

Updates

Flash / ActionScript 3

What is a game?

How do we brainstorm?

What makes a game fun?

Upcoming assignments

Introduction27

Page 28: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

the

Nature of Games28

What is a Game?

Hopscotch Rules

Each player has a unique marker

Toss marker from starting line

Marker hits squares in sequence

Progress to next square each turn

Hop through squares and back

Skip over square with marker

Hop on one foot

Except for side-by-side squares

If fail, repeat at next turn

Page 29: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

the

Nature of Games29

What is a Game?

Rules

Players take turns

Spin the number wheel

Move that many spaces

When land on space…

Ladders take you up

Chutes take you down

First one to 100 wins!

Page 30: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

What is a Game?

Nature of Games30

Page 31: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Group Activity

What is a game?

What features must games have?

What features can they not have?

Introduction31

Page 32: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Some perspectives

Introduction32

Page 33: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

a closed, formal system

that engages players in

structured conflict and

resolves its uncertainty

in an unequal outcome

(Game Design Workshop)

Introduction33

Tracy Fullerton

Page 34: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

a series of interesting

decisions

(GDC 2012)

Introduction34

Sid Meier

Page 35: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

a form of interactive entertainment where

players must overcome challenges, by taking

actions that are governed by rules, in order to meet

a victory condition

(Fundamentals of Game Design)

Introduction35

Ernest Adams

Page 36: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

a system in which

players engage in

artificial conflict,

defined by rules, that

results in a quantifiable

outcome

(Rules of Play)

Introduction36

Karen Salen and Eric Zimmerman

Page 37: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Common Threads

Players

Challenges

Rules

Goals

Introduction37

Page 38: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

How to design a game

1. Think really hard

2. Make the game

Introduction38

Page 39: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

How to think really hard

Brainstorm!

There IS a technique to this

Introduction39

Page 40: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Outline

Updates

Flash / ActionScript 3

What is a game?

How do we brainstorm?

What makes a game fun?

Upcoming assignments

Introduction40

Page 41: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Brainstorming Technique

Focus

Limit the amount of time (30 minutes max)

Appoint a scribe who will write down ideas

Positive phase Only write down new ideas! Don’t criticize any suggestion.

Negative phase Discuss each idea and reject as a group

Repeat if necessary But take a break!

If done correctly, you will be exhausted.

Introduction41

Page 42: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Science of Brainstorming

Introduction42

AIDS Campaign Experiment, Dow et al.

Page 43: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Scenario 1

Introduction43

Design Design

Page 44: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Meeting Room

Scenario 1: Share One

Introduction44

Design DesignFinal

Design

Final

Design

Page 45: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Scenario 2

Introduction45

Design 1

Design 2

Design 3

Design 1

Design 2

Design 3

Best

Design

Best

Design

Page 46: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Meeting Room

Scenario 2: Share Best

Introduction46

Best

Design

Best

Design

Final

Design

Final

Design

Page 47: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Scenario 3

Introduction47

Design 1

Design 2

Design 3

Design 1

Design 2

Design 3

Page 48: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Scenario 3

Introduction48

Design 1

Design 2

Design 3

Design 1

Design 2

Design 3

Page 49: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Meeting Room

Scenario 3: Share Multiple

Introduction49

Design 1

Design 2

Design 3

Design 1

Design 2

Design 3

Final

Design

Final

Design

Page 50: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Producing fewer designs

Can spend more time per design

After the first design, subsequent

designs may not be that different

Producing more designs

Can search the space of

possibilities

First idea is not always the best

Introduction50

What are the tradeoffs?

Page 51: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Sharing fewer designs

Meeting time is more focused

Easier to reach consensus

Sharing more designs

Exposed to more possibilities

Can play off each other’s ideas

Introduction51

What are the tradeoffs?

Page 52: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Share One Share Multiple

Introduction52

Which did the best?

Share Best

Page 53: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Which did the best?

Introduction53

0

200

400

600

800

1000

1200

Share One Share Best Share

Multiple

Clicks per million impressions

Page 54: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

What does this mean for you?

Take the time to think

Don’t just accept the first idea

Come up with multiple ideas and bring them to the

group

Your ideas are valuable even if they aren’t used

Introduction54

Page 55: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Go play games!

Can’t design games without understanding them

Introduction55

What does this mean for you?

Page 56: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Outline

Updates

Flash / ActionScript 3

What is a game?

How do we brainstorm?

What makes a game fun?

Upcoming assignments

Introduction56

Page 57: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Group Activity

What makes a game fun?

Why do you play your favorite games?

Introduction57

Page 58: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

What makes a game fun?

No one really knows

“Folk Psychology” of Game Design

Introduction58

Page 59: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Mihaly Csikszentmihalyi

Introduction59

Page 60: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Flow

Skill

Chal

lenge Anxiety

Boredom

Page 61: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Flow

Skill

Chal

lenge Anxiety

Boredom

Page 62: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Flow

Skill

Chal

lenge Anxiety

Boredom

Page 63: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Flow

Skill

Chal

lenge Anxiety

Boredom

Page 64: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Flow

Time

Chal

lenge Anxiety

Boredom

Boss Fight

Page 65: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Lev Vygotsky

Introduction65

Page 66: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Zone of Proximal Development

can do now

can do with guidance

can’t do yet

Page 67: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Casual vs. Core

Core gamers play lots of games

Almost always to finish games they play

Want hard games; will tolerate frustration

Casual gamers play for enjoyment

Will stop when the game stops being fun

Challenges must be reasonable

Harder to distinguish than you think

Something designers are paying less attention to

Nature of Games67

Page 68: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Play length

You are competing with

Other games

Cat videos

Chores

Work

Game must be fun within 30 seconds

Casual games can still have sophisticated gameplay

Example: Plants vs. Zombies

Introduction68

Page 69: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Reminder: Aspects of a Game

Players: How do humans affect the game?

Goals: What is the player trying to do?

Rules: How can the player achieve the goal?

Challenges: What obstacles block the goal?

Design Elements69

Page 70: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Formal Design Elements

Players: Player Mode Sketches

Goals: Objectives

Rules: Actions and Interactions

Challenges: Obstacles and Opponents

Design Elements70

Page 71: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Player Mode Sketches

Game may have several player modes

Ways in which player interacts with a game

Example: Inventory screen vs. combat screen

You should storyboard all of your modes

Sketches of each of the major player modes

May have action (like movie storyboard)

Illustrate how player interacts with game

Design Elements71

Page 72: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Lifted: Player Mode Sketch

Design Elements72

Indicating

Action

Page 73: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Lifted: Completed Game

Design Elements73

Page 74: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Diagramming Action

Design Elements74

Page 75: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Objectives

Anything a player might strive for

May be a primary game objective

Progressing the story

“Completing” the game

May be an auxiliary game objective

Side missions/quests

Unusual achievements

Sometimes player-directed

Reward structure in sandbox games

Design Elements75

Page 76: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Be careful with this

Introduction76

Page 77: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Braid’s Slow-moving Cloud

Introduction77

Page 78: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Actions

Verbs that describe what the player can do

Walk

Run

Jump

Shoot

Does not need to be attached to an avatar

Build

Swap

Rotate

Design Elements78

Page 79: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Designing Actions

Starts with brainstorming the verbs

Define the types of verbs

Define the scope of the verbs

Design Goals

Enough verbs to avoid being too simple

But not so much to be confusing (verb bloat)

Do the verbs directly achieve the goal?

Each verb maps to a single input

Design Elements79

Page 80: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

the

How do verbs, goals relate?

Imagine there no challenges

What verbs must you have?

Example: Platformers

Goal: reach exit location

Only need movement verbs

Killing enemies is optional

Other actions are secondary

Design Goal: Primary only

Secondary verbs lead to bloat

Add features with interactions

Primary Actions

Design Elements80

Page 81: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

the

Not a direct action of player

Outcome of the game state

Can happen without controller

Example: collisions

Accidental or player forced

May be bad (take damage)

May be good (gain power-up)

Other Examples:

Spatial proximity

Line-of-sight

Resource acquisition

Interactions

Design Elements81

Page 82: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Game Mechanics

Game mechanic

Relationship between verbs and interactions

Often call this relationship the “rules”

Gameplay is manifestation of these rules

Design Elements82

Page 83: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Obstacles

Prevent progress towards goal

Have to be “overcome”

Opponents

Players or bots with their own goals

May or may not need to be overcome

Dilemmas

Can only perform one of several actions

“Correct” choice not immediately clear

Challenges

Design Elements83

Page 84: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

What are the challenges?

Introduction84

Page 85: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

What are the challenges?

Introduction85

Page 86: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

A note on story

Nature of Games86

Page 87: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

The Dangers of Pure Story

What is the player doing?

Nature of Games87

Page 88: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Story can be great…

But you should prioritize game mechanics

Introduction88

Page 89: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Summary

Decide what the player is getting better at

Decide what the player needs to do

Introduction89

Page 90: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Coming soon:

Pong / Asset Creation due Tuesday!

Project Pitches next Thursday in class

Paper Prototypes the following Tuesday

I will talk more about this next Tuesday

Introduction90

Page 91: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Project Pitches

Next Thursday in class

Information posted as Assignment 3

5 minute pitch:

The main idea

Why will this be fun

The core mechanics

5 minute Q&A from audience

Some groups will go the following Tuesday

Introduction91

Page 92: ActionScript 3 and Game Design

gamedesigninitiativeat cornell university

thegamedesigninitiative

at cornell university

the

Outline

Updates

Flash / ActionScript 3

What is a game?

How do we brainstorm?

What makes a game fun?

Upcoming assignments

Introduction92