flag game engine

zac zidikgame developer

www.zaczidik.com

www.zaczidik.com

www.flagamengine.com

FLAG

HTML5 Game Creation Tools

WINDPOLE


learning objectiveinformation or skill that a player is more

familiar with after playing the game

DESIGN, GRAPHICS, CONTROLS

achieve the learning objective without

the player noticing


game objective

provide an environment for experimentation,

abstract thought and failure


game objective

continually assess the player without

them realizing


game objective


metricstangible and quantifiable methods of

monitoring a player’s progress


motivator metricsmetrics that a player sees as the

ultimate goal


method metricsmetrics that a player must directly influence

or be influenced by in order to succeed


get the player to switch focus

from the motivator metrics to

the method metrics

learning objective catalyst:

DESIGN


eventswhatever a player does and whatever

happens to them


effectschanges in metrics as a result of

an event


happenstancesomething that happens to a player

triggering metric effects without option

event type:


multiple-choicea player must choose one option that will

trigger metric effects

event type:


multiple selectiona player can choose more than one option

to trigger metric effects in combination

event type:


slidera player selects a value within a range to

determine the extent of the metric effects

event type:


continual assessmentevents exist to alter metrics and

to track player progress

=


historythe road traveled might be as important as

the final destination


balancinginsure that no single event

provides a disproportionate

amount of advantage or

disadvantage

3. create events with effects

• happenstance

• multiple-choice

• multiple selection

• slider


1. define the learning objective(s)

2. create metrics

• motivator

• method

4. history

5. balance

WIND


graphicsestablish a level of

attainable quality


simple workscontent should be memorable and graphics

should be purposeful


player focus should be on

strategy not on quality of

the visuals


GRAPHICS


2D canvashtml5 tag that provides an area for

rendering graphics


blittingcopy pixels from an image

to the canvas


tile-basedorthogonal, isometric or hexagonal


big with smallcreate big maps with small amounts of

bitmap data

tile-based advantage:


location awarenessgrids provide a world to mouse relationship,

efficient collision detection and simplify a.i.

tile-based advantage:


tile spritestiles with multiple states and or

frames of animation


tiled objectsgroup of tiles held in a frame


spritesdisplay objects that may contain animation,

decals and behaviors


actorscollection of bodies, joints and sprites

available to physics simulations


Box 2Dopen source 2 dimensional physics engine


sounds.ogg and .mp3, desktop good,

mobile getting better?


scenes

• tile map

• tile sprites

• tiled objects

• sprites

• actors

• layers

• box2d

• sounds

POLE

display

• resolution

• scale

• interpolation

• buffering

fps

• request animation frame

• set overall fps interval

• set sprite fps


html setupgame, canvas, gui, glass


guioverlay for canvas, used for interactive html

elements and content


glassoverlay for canvas, used for non-interactive

html elements and content

cursor

• tile outline

• custom image


FLAG

grid

• display

• color

• width

• alpha

dynamically add and remove

• tiled objects

• sprites

• actors

• decals

built in and custom

behaviors


pathfindinga method of traversing maps with efficiency

along walkable tiles


pointer

• screen location

• map location

• tile location

FLAG

mouse handlers

touch handlers

resize listener

orientation change listener

load progress

camera follow

zoom

scene layers

• tile reduction

• prerender

• tile gutter

• offset and offset scroll


tweeningshort for in-betweening, generates

intermediate steps of change


physical ability should not

limit a player’s strategy or

outcomes


CONTROLS


webgljavascript api for rendering gpu accelerated

3d and 2d graphics


videoembed plug-in free videos and movies


web audio apistandardized method to manipulate and

play audio assets


web socketstandardized and simplified method of

bi-directional web communication


web workersa simplified means to run scripts in

background threads


open sourcehttps://github.com/flagamengine/FLAG


FLAG

[email protected]

WINDPOLE

[email protected]

play.gaming.psu.edu


questions?


flag game engine

Technology