html5 games with createjs - david k - · pdf filehtml5 games with createjs twitter:...
TRANSCRIPT
![Page 1: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/1.jpg)
HTML5 Gameswith CreateJSTWITTER: @DAVID_KELLEHERDAVIDK.NET/GAME
![Page 2: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/2.jpg)
CreateJS FeaturesHTML5 Canvas 2D Context Framework
Pros Bitmaps Vectors Animation Sprite Sheets Containers Flash Style Moveiclips Inputs/Events Text Sounds Preloader
Cons No Level Editor
No Physics
No Particles
No Virtual Camera
Beta WebGL 2D Support
No 3D Support
No UI Controls
No Networking
![Page 3: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/3.jpg)
CreateJS Uses
Pros Leverage Adobe Flash
skills and current support for Adobe Animate
Create simple Flash-style games, banner ads, data viz, generative art
Rapidly prototype 2D games
Integrate with Angular, React, D3
Cons Not a high performance
2D library
Not a true game development framework
Not production ready –current version 0.8.2
![Page 4: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/4.jpg)
CreateJS Performance
Pros Canvas hardware
acceleration
Caching of drawn objects - transform regions with complex vector graphics or many display objects
Cons No redraw regions –
calculation time too expensive in JavaScript for arbitrary content
Slow, very basic hit test
![Page 5: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/5.jpg)
Architecture
CreateJS – extends the HTML5 <canvas> EaselJS TweenJS SoundJS PreloadJS
![Page 6: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/6.jpg)
Game Theory
![Page 7: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/7.jpg)
Update Game State
UI: Game Output
Player: Game Input
Outcome: Win, Loss
Game Loop
![Page 8: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/8.jpg)
Strategy
Dexterity
Luck
Game Mechanics
![Page 9: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/9.jpg)
Game Input and Events
User Input• Mouse Move• Click, Mouseup, Mousedown• Drag and Drop, Swipe• Key Input
Game Event• Ticker• Collision (Hit Test)• Custom
![Page 10: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/10.jpg)
Update Game State
Game Objects•Add/Remove Objects•Change Object Properties•Tween Animations•Update Score•Test Win/Loss Condition
![Page 11: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/11.jpg)
Dodgeball Inputs & Events
Player’s avatar tracks horizontal movement of mouse
Balls can be clicked allowing players to catch them
Game events: Detect collisions each frame between player and balls
![Page 12: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/12.jpg)
Update Game State Add balls and remove when off court
Move balls (motion tween)
Change ball state when it is clicked, caught, or hits player
Add point when ball is caught
Change player state and end game when player hit by ball
![Page 13: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/13.jpg)
Coding Strategy
Avoid creating a massively complex controller with all procedural coding in the game loop.
![Page 14: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/14.jpg)
Object Oriented
Blinky speeds up as you eat dots
Pinky tends to move counterclockwise
Inky makes unpredictable turns
Clyde doesn’t always chase pac man
![Page 15: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/15.jpg)
Dave’s Dodgeball Game
![Page 16: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/16.jpg)
Canvas Element
![Page 17: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/17.jpg)
Canvas Element// HTML5 CANVAS ELEMENTvar canvas = document.createElement("canvas");canvas.width = 600;canvas.height = 400;
// --- Add canvas element to DOMdocument.body.appendChild(canvas);
![Page 18: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/18.jpg)
CreateJS Stage
![Page 19: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/19.jpg)
CreateJS Stage// CreateJS STAGE // Uses 2D Canvas Contextvar stage = new createjs.Stage(canvas);stage.mouseMoveOutside = true;
![Page 20: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/20.jpg)
CreateJS Ticker
![Page 21: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/21.jpg)
EaselJS – Ticker Class
Has a static interface Properties
framerate: frames per secondinterval: milliseconds between ticksmaxDelta: max time between tickspaused: pause the ticker
Methodsreset(): stop tickerinit(): restart tickergetMeasuredFPS(): returns actual ticks per second getTicks(): total number of ticks broadcastgetMeasuredTickTime(): avg tick execution time in msgetTime(): milliseconds since ticker started
![Page 22: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/22.jpg)
CreateJS Ticker// CreateJS TICKER // Attaches Game Loop to Stagecreatejs.Ticker.on("tick", stage);createjs.Ticker.framerate = 60;
![Page 23: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/23.jpg)
Gym Background Object
![Page 24: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/24.jpg)
EaselJS – Bitmap Class
Pass a URI to an image file, or a reference to an HTML Image, HTML Video, or HTML Canvas element to the constructor.
Don’t cache a single bitmap, unless you want to use a blur, alpha, or color filter, then you have to.
Properties:image: swap a new image into the objectmask: shape image defining a clipping pathmouseEnabled: enable/disable mouse event
Transform: x, y, scaleX, ScaleY, rotate, regX, regY
![Page 25: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/25.jpg)
Gym Object// GYM BACKGROUND OBJECTvar gym = new createjs.Bitmap("image/gym.jpg");
// --- Add gym to stagestage.addChild(gym);
![Page 26: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/26.jpg)
Score Object
![Page 27: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/27.jpg)
EaselJS – Text Class
Pass the text, optional CSS font, and optional CSS color to the constructor.
Properties:text: change the textcolor: change the colorfont: change the fontoutline: add stroke to the textshadow: add drop shadow to the text
![Page 28: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/28.jpg)
Score Object// SCORE OBJECTvar score = new createjs.Text(0, 'bold 50px sans-serif', '#FFF');score.x = 20;score.y = 20;
// --- custom propertiesscore.value = 0;
// --- Add player to stagestage.addChild(score);
![Page 29: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/29.jpg)
Player Object
![Page 30: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/30.jpg)
Player Graphics// PLAYER GRAPHICSvar playerAlive = new Image();playerAlive.src = "image/player.png";
var playerHit = new Image();playerHit.src = "image/player-dead.png";
![Page 31: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/31.jpg)
Player Object// PLAYER OBJECTvar player = new createjs.Bitmap();player.image = playerAlive;player.x = 232;player.y = 275;
![Page 32: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/32.jpg)
CreateJS Listeners
addEventListenerpass event string and handler functionaddEventListener(“click”, handleClick);
removeEventListenerpass exact function used when addedremoveEventListener(“click”, handleClick);
![Page 33: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/33.jpg)
CreateJS Listeners
onshortcut method for addEventListeneralso specify execution scope, only run once, etc…var listener = myBtn.on("click", handleClick, null, false);
offpass returned wrapper functionmyBtn.on("click", listener);
![Page 34: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/34.jpg)
Mouse Handler: Player// --- custom method for moving player when mouse movedplayer.move = function (mouseEvent) {
player.x = mouseEvent.stageX - 68;}
// --- handle mouse movementsplayer.moveListener = stage.on("stagemousemove", player.move);
![Page 35: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/35.jpg)
Player: Add to Stage// --- Add player to stage
stage.addChild(player);
![Page 36: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/36.jpg)
Ball Class
![Page 37: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/37.jpg)
Ball Graphics// BALL GRAPHICSvar ballTossed = new Image();ballTossed.src = "image/ball.png";
var ballCatchable = new Image();ballCatchable.src = "image/ball-catch.png";
var ballCaught = new Image();ballCaught.src = "image/star.gif";
![Page 38: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/38.jpg)
Multiple Game Objects
Option #1 – CreateJS clone method
Option #2 – JavaScript class
![Page 39: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/39.jpg)
Ball “Class”// BALL CLASSvar Ball = function() {
var ball = new createjs.Bitmap();ball.image = ballTossed;ball.x = Math.floor((Math.random() * 600) + 1);ball.scaleX = 0.25;ball.scaleY = 0.25;ball.regX = 50;ball.regY = 50;...
![Page 40: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/40.jpg)
Ball: Custom Properties// BALL CLASSvar Ball = function() {
...// --- custom propertiesball.state = "Tossed";ball.moveToX = Math.floor((Math.random() * 600) + 1);ball.moveTime = Math.floor((Math.random() * 2200) + 3200);...
![Page 41: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/41.jpg)
TweenJS
Implements motion tweens
Can be chained to create animation sequences
Can be stacked, but should target different properties with each tween
Dispatches a change event when a property is changed
Supports many ease typeshttp://www.createjs.com/demos/tweenjs/tween_sparktable
![Page 42: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/42.jpg)
TweenJS example
createjs.Tween.get(target).wait(500).to({alpha:0, visible:false}, 1000).call(handleComplete);
function handleComplete() {//Tween complete
}
![Page 43: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/43.jpg)
Ball: Animation// BALL CLASSvar Ball = function() {
...// --- move the ball using TweenJScreatejs.Tween.get(ball)
.to( { scaleX: 0.75,scaleY: 0.75,x: ball.moveToX,y: 500,rotation: 1440 },
ball.moveTime,createjs.Ease.getPowOut(3)
);
...
![Page 44: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/44.jpg)
Click Handler: Ball// BALL CLASSvar Ball = function() {
...// --- custom method for handling mouse clicks on ballball.touched = function () {
ball.state="Catchable";ball.image = ballCatchable
}
// --- handle mouse clicksball.clickListener = ball.on("mousedown", ball.touched);...
![Page 45: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/45.jpg)
Click Handler: Ball// BALL CLASSvar Ball = function() {
...// --- Provide access to the ball object
return ball;} }
![Page 46: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/46.jpg)
Ball Object Factory
![Page 47: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/47.jpg)
Ball Objects// BALL OBJECTS
// --- Call addBall method EVERY FRAME
var addBall = createjs.Ticker.on("tick", function addBall () {randomNumber = Math.floor((Math.random() * 60) + 1);if (randomNumber === 1) {
stage.addChild(new Ball());}
});
![Page 48: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/48.jpg)
Collisions
![Page 49: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/49.jpg)
Custom Event
Event ClassCreate an event string object
EventDispatcher ClassDispatch event to listeners
![Page 50: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/50.jpg)
Custom Event example
var event = new createjs.Event("progress");this.dispatchEvent(event);
![Page 51: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/51.jpg)
Collision: Player Catch Ball// BALL CLASSvar Ball = function() {
...// --- custom method called when player catches ballball.playerCatchesBall = function () {
// Change the ball to the caught stateball.state = "Caught";// Change the ball image to the spinning starball.image = ballCaught;// Make the star spin away by moving the registration pointball.regX = 130;ball.regY = 130;// Dispatch event to score a pointvar caughtballEvent = new createjs.Event("caughtball");stage.dispatchEvent(caughtballEvent);
}
![Page 52: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/52.jpg)
Collision: Ball Hits Player// BALL CLASSvar Ball = function() {
...// --- custom method called when ball hits playerball.ballHitsPlayer = function() {
// Displatch event to remove ball click handlers, stop playervar hitbyballEvent = new createjs.Event("hitbyball");stage.dispatchEvent(hitbyballEvent);
}
// --- handle ball hitting player, remove handler for clicking ballstage.on("hitbyball", function () {
ball.off("mousedown", ball.clickListener);});...
![Page 53: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/53.jpg)
Collision: Hit Test// BALL CLASSvar Ball = function() {
...// --- custom method for performing hit testsball.hitTest = function () {
if (this.y > 500) {// The ball passed by the player and is off the stagestage.removeChild(this);
} else {// Hit Test...
}}...
![Page 54: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/54.jpg)
CreateJS Hit Tests
hitTest() methodtest if object intersects a pointmust convert point to local coordinatesnot very useful, not great performance
Shape to Shape collisions not supportedcan code your own with bounding boxesgetBounds() method returns rectangle
Pythagorean Theoremsimple hit test approximationgets distance between two points
![Page 55: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/55.jpg)
Collision: Hit Test (cont.)...// Hit Testvar xDist = this.x - player.x - 70;var yDist = this.y - player.y - 30;var distance = Math.sqrt(xDist * xDist + yDist * yDist);// Using pythagorusif (distance < 50) {
if (ball.state === "Catchable") {ball.playerCatchesBall();
} else if (ball.state === "Tossed") {ball.ballHitsPlayer();
}}...
![Page 56: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/56.jpg)
Add Hit Test to Game Loop// BALL CLASSvar Ball = function() {
...// Call hitTest method EVERY FRAME
ball.on("tick", ball.hitTest);...
![Page 57: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/57.jpg)
Collision Handler: Score// SCORE OBJECT
...// --- custom method for scoring a point when ball caught
score.catch = function (mouseEvent) {score.value++;score.text = score.value;
}
// --- handle catching the ball
score.catchListener = stage.on("caughtball", score.catch);
![Page 58: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/58.jpg)
Collision Handler: Player// PLAYER OBJECT
...// --- custom method for ending game when player hit by ball
player.hit = function () {player.image = playerHit;stage.off("stagemousemove", player.moveListener);
}
// --- handle getting hit by a ball
player.hitListener = stage.on("hitbyball", player.hit);
![Page 59: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/59.jpg)
Collision Handler: Balls// BALL OBJECT FACTORY...// --- handle getting hit by a ball, stop the bombardmentstage.on("hitbyball", function () {
createjs.Ticker.off("tick", addBall);});
![Page 60: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/60.jpg)
Additional Links CreateJShttp://www.createjs.com/
Pong Tutorialhttp://code.tutsplus.com/tutorials/learn-createjs-by-building-an-html5-pong-game--active-11845
Atari Arcadehttps://www.atari.com/arcade/developershttp://www.htmlgoodies.com/html5/client/building-atari-with-createjs.html
Atari Arcade SDK (extends CreateJS)https://github.com/AtariAdmin/AtariArcadeSDK
![Page 61: HTML5 Games with CreateJS - David K - · PDF fileHTML5 Games with CreateJS TWITTER: @DAVID_KELLEHER DAVIDK.NET/GAME](https://reader030.vdocuments.site/reader030/viewer/2022012900/5a903bb67f8b9a4a268e1af1/html5/thumbnails/61.jpg)
HTML5 Gameswith CreateJSTWITTER: @DAVID_KELLEHERDAVIDK.NET/GAME