Html5 game framework createJS component-EaselJS, html5createjs

Html5 game framework createJS component-EaselJS, html5createjs

The CreateJS library is an HTML5 game development engine. It is an open-source toolkit for building HTML5 games with rich interactive experience. It aims to reduce the difficulty and cost of HTML5 project development, it allows developers to create a more modern network interaction experience in a familiar way.

Having mastered CreateJS, you can easily complete HTML5 game development.

CreateJS provides four tools: EaselJS, TweenJS, SoundJS, and PreLoadJS:

EaselJS: simplified processing of HTML5 canvas TweenJS: Used to help adjust HTML5 and Javascript attributes SoundJS: Used to simplify processing of HTML5 audioPreLoadJS: help to manage and coordinate some resources in loading

You can download the JS file on the download page of the official website, or use the official CDN link.

 

The EaselJS Library provides a reserved graphics mode for the canvas, including a complete hierarchical display list, a core interaction model, and an Assistant class that makes 2D graphics easier to implement on the canvas.

 

Start

At first, we need to create a Stage object to wrap a Canvas element and add a DisplayObject instance as a subclass. EaselJS support:

* Use Bitmap to create an image

* Use Shape and Graphics to create a vector image

* Use SpriteSheet and Sprite to create dynamic bitmaps

* Use Text to create simple Text

* Use Container to create a Container that saves other display objects

All Display objects can be added to the stage as subclasses or drawn directly on the canvas.

 

User Interaction

When you use the mouse or touch to interact with each other, all display objects except DOM elements can schedule events. EaselJS supports hovering, pressing, releasing events, and an easy-to-use drag-and-drop module. Click MouseEvent to obtain more information.

 

Instance

1. Use Bitmap to create an image

First, we need to reference the EaselJS file:

<script src="js/easeljs-0.8.2.min.js"></script>

Next, we need to create a canvas element in the HTML document:

<Canvas id = "imageView" width = "560" height = "410"> your browser version is too low. Change the browser version later. </canvas>

Then, I can create an image in Javascript code:

// Create a Stage instance var stage = new createjs by using the canvas ID. stage ("imageView"); // create a Bitmap instance var theBitmap = new createjs. bitmap ("imgs/testImg.jpg"); // set the size of the canvas to be equal to the actual size of the image stage. canvas. width = theBitmap. image. naturalWidth; stage. canvas. height = theBitmap. image. naturalHeight; // Add a Bitmap instance to the stage display list. addChild (theBitmap); // updates the stage rendering screen stage. update ();

In this way, the image is successfully created, the source code see easeljs-image.html.

 

2. Create a vector Image Using Shape and Graphics

Like above, we need to add references to EaselJS and create a canvas element in the HTML document. Then there is our custom js file code:

//Create a stage by getting a reference to the canvasvar stage = new createjs.Stage("circleView");//Create a Shape DisplayObject.var circle = new createjs.Shape();circle.graphics.beginFill("DeepSkyBlue").drawCircle(0,0,40);//Set position of Shape instance.circle.x = circle.y = 50;//Add Shape instance to stage display list.stage.addChild(circle);//Update stage will render next framestage.update();

In this way, we create a deep sky blue circle, the circle center is (50.50), the radius is 40 pixels circle (source code see easeljs-shape-circle.html ):

The canvas before rendering is as follows (the width and height are 100 pixels ):

 

We can also add simple Interaction Events:

stage.addEventListener("click",handleClick);function handleClick() {    // Click happened;    console.log("The mouse is clicked.");}stage.addEventListener("mousedown",handlePress);function handlePress() {    // A mouse press happened.    // Listen for mouse move while the mouse is down:    console.log("The mouse is pressed.");    stage.addEventListener("mousemove",handleMove);}function handleMove() {    // Check out the DragAndDrop example in GitHub for more    console.log("The mouse is moved.");}

When we click the circle event, the console will display:

The mouse is pressed.The mouse is clicked.

 

We can also use the tick event graphics movement and other animation effects (see the source code easeljs-shape-circle-move.js ):

// Update stage will render next framecreatejs. ticker. addEventListener ("tick", handleTick); // Add a Ticker class to help avoid calling the update method function handleTick () {var maxX = stage multiple times. canvas. width-50; var maxY = stage. canvas. height-50; // Will cause the circle to wrap back if (circle. x <maxX & circle. y = 50) {// Circle will move 10 units to the right. circle. x + = 10;} else if (circle. x = maxX & circle. y <maxY) {circle. y + = 10;} else if (circle. x> 50 & circle. y = maxY) {circle. x-= 10;} else if (circle. x <= 50) {circle. y-= 10;} stage. update ();}

Effect:

 

3. Use SpriteSheet and Sprite to create dynamic bitmap

Similarly, first reference EaselJS and then create the canvas HTML element:

<canvas id="view" width="80" height="80"></canvas>

Image to be used:

Next, reference and load Resources in the JS file:

Var stage = new createjs. Stage ("view"); container = new createjs. Container (); var data = {// an array of source images. An image can be an html image instance or a URI image. The former is suggested to control the heap preloading images: ["imgs/easeljs-preloadjs-animation/moveGuy.png"], // define a single frame. There are two supported formats of frame data: When all frames are of the same size (in a grid), the object's width, height, regX, and regY statistical features are used. // Width & height and size of the specified frame // regX & regY indicates the frame registration point or "Origin" // spacing indicates the interval between frames // margin specifies the image edge edge // count allows you to specify the total number of spritesheet frames; if omitted, this is calculated based on the size and structure of the source image. Frames will be allocated indicators based on their positions in the source image (left to right, top to bottom ). Frames: {width: 80, height: 80, count: 16, regX: 0, regY: 0, spacing: 0, margin: 0 }, // an object that defines a sequence of frames to play a named animation. Each attribute corresponds to an animation of the same name. // Each animation must specify the frame to be played. It can also include the relevant playback speed (for example, 2 doubles the playback speed by 0.5) and the name of the next animation sequence. Animations: {run: [0, 3]} var spriteSheet = new createjs. spriteSheet (data) var instance = new createjs. sprite (spriteSheet, "run") container. addChild (instance); stage. addChild (container); createjs. ticker. setFPS (5); // sets the frame createjs. ticker. addEventListener ("tick", stage); stage. update ();

In this way, the effect of Simple walking will come out (see the source code easeljs-sprite-01.html ):

 

You can use the gotoAndPlay (action) method to call the corresponding animation effect if you want to use the button to control the animation transformation.

The code for modifying the HTML document is as follows:

<canvas id="view" width="80" height="80"></canvas><div class="buttons">    <input id="goStraight" value="Go Straight" type="button" />    <input id="goLeft" value="Go Left"  type="button"/>    <input id="goRight" value="Go Right"  type="button"/>    <input id="goBack" value="Go Back"  type="button"/></div>

Then modify the JS Code as follows:

var stage = new createjs.Stage("view");container = new createjs.Container();var data = {    images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],    frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},    animations:{        stand:0,        run1:[0,3],        run2:[4,7],        run3:[8,11],        run4:[12,15]    }}var spriteSheet = new createjs.SpriteSheet(data)var instance = new createjs.Sprite(spriteSheet,"run1")container.addChild(instance);stage.addChild(container);createjs.Ticker.setFPS(5);createjs.Ticker.addEventListener("tick",stage);stage.update();document.getElementById('goStraight').onclick =  function goStraight() {    instance.gotoAndPlay("run1");}document.getElementById('goLeft').onclick =  function goLeft() {    instance.gotoAndPlay("run2");}document.getElementById('goRight').onclick =  function goRight() {    instance.gotoAndPlay("run3");}document.getElementById('goBack').onclick =  function goBack() {    instance.gotoAndPlay("run4");}

The effect is out (see the source code easeljs-sprite-02.html ):

 

4. Use Text to create simple Text

This is relatively simple. You can view the Code directly:

<canvas id="View" width="300" height="80"></canvas><script>    var stage = new createjs.Stage("View");    var theText = new createjs.Text("Hello,EaselJS!","normal 32px microsoft yahei","#222222");    stage.addChild(theText);    stage.update();</script>

Here we set the background color to Pink:

#View { background-color: #fddfdf;}

Display Effect:

 

5. Use Container to create a Container that saves other display objects

In fact, this has been used before. However, write an example separately. This is relatively simple:

<! DOCTYPE html> 
The effect is as follows:

 
Source Code address: Demo4CreateJS