zac zidikgame developer
www.zaczidik.com
www.zaczidik.com
www.zaczidik.com
www.zaczidik.com
www.zaczidik.com
www.zaczidik.com
www.flagamengine.com
FLAG
HTML5 Game Creation Tools
WINDPOLE
www.flagamengine.com
www.flagamengine.com
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
www.flagamengine.com
game objective
provide an environment for experimentation,
abstract thought and failure
www.flagamengine.com
game objective
continually assess the player without
them realizing
www.flagamengine.com
game objective
www.flagamengine.com
metricstangible and quantifiable methods of
monitoring a player’s progress
www.flagamengine.com
motivator metricsmetrics that a player sees as the
ultimate goal
www.flagamengine.com
method metricsmetrics that a player must directly influence
or be influenced by in order to succeed
www.flagamengine.com
get the player to switch focus
from the motivator metrics to
the method metrics
learning objective catalyst:
DESIGN
www.flagamengine.com
eventswhatever a player does and whatever
happens to them
www.flagamengine.com
effectschanges in metrics as a result of
an event
www.flagamengine.com
happenstancesomething that happens to a player
triggering metric effects without option
event type:
www.flagamengine.com
multiple-choicea player must choose one option that will
trigger metric effects
event type:
www.flagamengine.com
multiple selectiona player can choose more than one option
to trigger metric effects in combination
event type:
www.flagamengine.com
slidera player selects a value within a range to
determine the extent of the metric effects
event type:
www.flagamengine.com
continual assessmentevents exist to alter metrics and
to track player progress
=
www.flagamengine.com
historythe road traveled might be as important as
the final destination
www.flagamengine.com
balancinginsure that no single event
provides a disproportionate
amount of advantage or
disadvantage
3. create events with effects
• happenstance
• multiple-choice
• multiple selection
• slider
www.flagamengine.com
1. define the learning objective(s)
2. create metrics
• motivator
• method
4. history
5. balance
WIND
www.flagamengine.com
graphicsestablish a level of
attainable quality
www.flagamengine.com
simple workscontent should be memorable and graphics
should be purposeful
www.flagamengine.com
player focus should be on
strategy not on quality of
the visuals
learning objective catalyst:
GRAPHICS
www.flagamengine.com
2D canvashtml5 tag that provides an area for
rendering graphics
www.flagamengine.com
blittingcopy pixels from an image
to the canvas
www.flagamengine.com
tile-basedorthogonal, isometric or hexagonal
www.flagamengine.com
big with smallcreate big maps with small amounts of
bitmap data
tile-based advantage:
www.flagamengine.com
location awarenessgrids provide a world to mouse relationship,
efficient collision detection and simplify a.i.
tile-based advantage:
www.flagamengine.com
tile spritestiles with multiple states and or
frames of animation
www.flagamengine.com
tiled objectsgroup of tiles held in a frame
www.flagamengine.com
spritesdisplay objects that may contain animation,
decals and behaviors
www.flagamengine.com
actorscollection of bodies, joints and sprites
available to physics simulations
www.flagamengine.com
Box 2Dopen source 2 dimensional physics engine
www.flagamengine.com
sounds.ogg and .mp3, desktop good,
mobile getting better?
www.flagamengine.com
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
www.flagamengine.com
html setupgame, canvas, gui, glass
www.flagamengine.com
guioverlay for canvas, used for interactive html
elements and content
www.flagamengine.com
glassoverlay for canvas, used for non-interactive
html elements and content
cursor
• tile outline
• custom image
www.flagamengine.com
FLAG
grid
• display
• color
• width
• alpha
dynamically add and remove
• tiled objects
• sprites
• actors
• decals
built in and custom
behaviors
www.flagamengine.com
pathfindinga method of traversing maps with efficiency
along walkable tiles
www.flagamengine.com
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
www.flagamengine.com
tweeningshort for in-betweening, generates
intermediate steps of change
www.flagamengine.com
physical ability should not
limit a player’s strategy or
outcomes
learning objective catalyst:
CONTROLS
www.flagamengine.com
webgljavascript api for rendering gpu accelerated
3d and 2d graphics
www.flagamengine.com
videoembed plug-in free videos and movies
www.flagamengine.com
web audio apistandardized method to manipulate and
play audio assets
www.flagamengine.com
web socketstandardized and simplified method of
bi-directional web communication
www.flagamengine.com
web workersa simplified means to run scripts in
background threads
www.flagamengine.com
open sourcehttps://github.com/flagamengine/FLAG
play.gaming.psu.edu
www.flagamengine.com
questions?
www.flagamengine.com