An introduction to the create js suite


Published on

Bobby Lavoie (@rlavoie4) takes us through the fantastic createJS suite during DevJam XIII

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

An introduction to the create js suite

  1. 1. Richmond DevJam XIIIAn Introduction to the createJS suite presentation by: Robert Lavoie | @rlavoie4 | big ups to @ackerland @yourbigriver @ricdevjam for hooking us up.
  2. 2. The <canvas> Element:● "a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly"● A <canvas> element has no content, its just a rectangle in your page where you can use JavaScript to draw and create awesomeness.● Every <canvas> has a drawing context● The drawing context is where all the drawing methods and properties are defined
  3. 3. <canvas> markup<canvas id="mycanvas" width="300" height="300"></canvas>//stores a reference to your canvas dom elementvar myCanvas = document.getElementById("myCanvas");//once you have found the <canvas> method you then want to store is getContext() method//you must pass the string "2d" to the getContext() methodvar myContext = myCanvas.getContext("2d");//from here you can start drawingmyContext.fillRect(50, 25, 150, 100);myContext.moveTo(x,y);myContext.lineTo(x, y);API REFERENCE:
  4. 4. EaselJS● The heart of the CreativeJS Suite● Provides an API that is familiar to Flash Developers● All the visual elements of a game are rendered to an EaselJS stage● The central heartbeat, or "tick" of your application is automatically handled by the EasalJS ticker, which renders any changes to properties of text, bitmaps, shapes and animations to the canvas● Offers simple display objects like bitmaps, shapes and text● Consists of a full hierarchical display list● Core interaction model● Well supported and hardware accelerated● Makes working with canvas much easier and faster
  5. 5. EaselJS {code}var myCanvas = document.getElementById("myCanvas");//creates a new stage object and passes it a reference to your stagevar stage = new createJS.Stage( myCanvas);//creates a text object and add a few propertiesvar myText = new createjs.Text("-- fps","bold 18px Arial","#29ed1f");myText.x = 100;myText.y = 100;myText.rotation = 100;//adds the text field to your easalJS stage then renders the viewstage.addChild(myText);stage.update();API REFERENCE:
  6. 6. TweenJS● Simple library for tweening and animating HTML5 and JavaScript properties● Works really well with EasalJS, but not dependent on or specific to it.● Can sequence multiple tweens● Supports css properties● Supports chaining● Can inject function calls at any point in the tween chain
  7. 7. TweenJS {code}//creates a new shape applys a fill and draws a circlevar circle = new createjs.Shape();"#FF0000").drawCircle(0,0,50);//creates a sequenced animation with the circle abovecreatejs.Tween.get(circle, {loop:true}, true) .to({x:500,y:200,alpha:0.1},1000,createjs.Ease.get(1)) .to({y:400}) .call(myfunction) .wait(800) // wait for 0.8s .to({y:0,alpha:1},300) .call(complete)API REFERENCE:
  8. 8. SoundJS● Consistant cross-browser support● Makes adding sounds to your games very easy● HTML5 fallback support is covered out of the box● Transparently manages the preloading of audio as a plugin to PreloadJS● Determines which audio type to load depending on the browser● The only limitation is on ios. It is possible to play a single sound, on click but we are unable to play multiple on-demand sounds like everywhere else
  9. 9. SoundJS {code}//creates a new sound object and passes is a reference to you musicvar mySound ="myBeats");//resumes the soundmySound.resume();//pauses the soundmySound.pause();//set the volumemySound.setVolume();API REFERENCE:
  10. 10. PreloadJS● Preloads all of your data, assets, images, sounds etc● Provides a consistent way to preload content● Supports multiple queues● Queue Pause and Resume● Provides progress information and on complete events● All assets are accesable using the IDs that are provided with the manifest
  11. 11. PreloadJS {code}//create an asset manifest -- include all your assets herevar manifest = [ {id:myImage, src"img/myImage.jpg"}, {id:mySound, src"sounds/mySound.mp3"}];//Create a new preloadJS object bind and on complete event and load the manifestvar preload = new createjs.PreloadJS();preload.onComplete = handleLoadComplete;preload.loadManifest(manifest);//this function will fire when all of you assets have loadedfunction handleLoadComplete() {}API REFERENCE:
  12. 12. Thank You presentation by:Robert Lavoie | @rlavoie4 | big ups to @ackerland @yourbigriver @ricdevjam for hooking us up.