Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

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.