HTML5 ゲームフレームワーク createJS コンポーネント - EaselJS の詳細説明-H5 チュートリアル-php.cn

CreateJS ライブラリは、HTML5 ゲーム開発エンジンであり、HTML5 プロジェクトの開発の難しさとコストを軽減し、使い慣れたものを使用できるようにすることを目的としています。より現代的なオンラインインタラクティブエクスペリエンスを作成する方法。

CreateJS をマスターすると、HTML5 ゲーム開発をより簡単に完了できます。

CreateJS は、EaselJS、TweenJS、SoundJS、PreLoadJS の 4 つのツールを提供します:

EaselJS:简化处理HTML5画布
TweenJS:用来帮助调整HTML5和Javascript属性
SoundJS:用来简化处理HTML5 audio
PreLoadJS:帮助管理和协调加载中的一些资源

ログイン後にコピー

公式 Web サイトのダウンロードページで JS ファイルをダウンロードするか、公式 CDN の直接リンクを使用できます

EaselJS ライブラリは、保持されたグラフィックモードを提供しますキャンバス用。完全な階層表示リスト、コア対話モデル、およびキャンバス上での 2D グラフィックスの実装を容易にするヘルパークラスが含まれています。

スタート

まず、キャンバス (Canvas) 要素をラップする Stage オブジェクトを作成し、サブクラスとして DisplayObject オブジェクトのインスタンスを追加する必要があります。 EaselJS は以下をサポートします:

* ビットマップを使用して画像を作成

* シェイプとグラフィックスを使用してベクターグラフィックを作成

* SpriteSheet と Sprite を使用して動的ビットマップを作成

* Text を使用して単純なテキストを作成

* Container を使用して他の表示を保存するオブジェクトのコンテナー

すべての表示オブジェクトはサブクラスとしてステージに追加することも、キャンバスに直接描画することもできます。

ユーザーインタラクション

マウスまたはタッチを操作する場合、DOM 要素を除くすべての表示オブジェクトはイベントを送出できます。 EaselJS は、ホバー、プレス、リリースのイベントと、使いやすいドラッグアンドドロップモジュールをサポートしています。詳細については、「マウスイベント」をクリックしてください。

例

1. Bitmapを使用して画像を作成します

まず、EaselJSファイルを参照する必要があります:

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

ログイン後にコピー

次に、HTMLを追加する必要があります。ドキュメントの作成の Canvas 要素:

<canvas id="imageView" width="560" height="410">您的浏览器版本过低，请更换更高版本的浏览器</canvas>

ログイン後にコピー

次に、JavaScript コードで画像を作成できます:

// 通过画布ID 创建一个 Stage 实例
var stage = new createjs.Stage("imageView");
// 创建一个 Bitmap 实例
var theBitmap = new createjs.Bitmap("imgs/testImg.jpg");
// 设置画布大小等于图片实际大小
stage.canvas.width = theBitmap.image.naturalWidth;
stage.canvas.height = theBitmap.image.naturalHeight;
// 把Bitmap 实例添加到 stage 的显示列表中
stage.addChild(theBitmap);
// 更新 stage 渲染画面
stage.update();

ログイン後にコピー

このようにして、画像は正常に作成されます。ソースコードeaseljs-image.html を参照してください。

2. Shape と Graphics を使用してベクターグラフィックスを作成します

上記と同様に、EaselJS への参照を追加し、HTML ドキュメントに Canvas 要素を作成する必要があります。次に、カスタマイズされた js ファイルコードがあります:

//Create a stage by getting a reference to the canvas
var 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 frame
stage.update();

ログイン後にコピー

このようにして、中心 (50.50)、半径 40 ピクセルの暗い空色の円を作成します (ソースコードについては、easeljs-shape-circle.html を参照してください)。 :

レンダリング前のキャンバスは次のとおりです (幅と高さは 100 ピクセル):

簡単なインタラクティブイベントを追加することもできます:

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.");
}

ログイン後にコピー

サークルイベントをクリックすると、コンソールが表示されます:

The mouse is pressed.
The mouse is clicked.

ログイン後にコピー

また、グラフィックの動きやその他のアニメーション効果は、ティックイベントを通じて実行できます (ソースコード、easeljs-shape-circle-move.jsを参照):

// Update stage will render next frame
createjs.Ticker.addEventListener("tick",handleTick);
//添加一个Ticker类帮助避免多次调用update方法
function handleTick() {    
var maxX =  stage.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();
}

ログイン後にコピー

効果:

3. SpriteSheetとSpriteを使用します動的ビットマップを作成します

同様に、最初にEaselJSを参照し、次にキャンバスHTML要素を作成します:

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

ログイン後にコピー

使用する画像:

次へ、JS ファイル内でリソースが参照およびロードされます:

var stage = new createjs.Stage("view");
container = new createjs.Container();var data = {    
// 源图像的数组。图像可以是一个html image实例，或URI图片。前者是建议控制堆载预压
    images:["imgs/easeljs-preloadjs-animation/moveGuy.png"],    
    // 定义单个帧。有两个支持格式的帧数据：当所有的帧大小是一样的（在一个网格）， 使用对象的width, height, regX, regY 统计特性。
    // width & height 所需和指定的帧的尺寸
    // regX & regY 指示帧的注册点或“原点”
    // spacing 表示帧之间的间隔
    // margin 指定图像边缘的边缘
    // count 允许您指定在spritesheet帧的总数；如果省略，这将根据源图像的尺寸和结构计算。帧将被分配的指标，根据他们的位置在源图像（左至右，顶部至底部）。
    frames:{width:80,height:80, count:16, regX: 0, regY:0, spacing:0, margin:0},    
    // 一个定义序列的帧的对象，以发挥命名动画。每个属性对应一个同名动画。
    // 每个动画必须指定播放的帧，还可以包括相关的播放速度（如2 将播放速度的两倍，0.5半）和下一个动画序列的名称。    
    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); //设置帧createjs.Ticker.addEventListener("tick",stage);
stage.update();

ログイン後にコピー

このようにして、単純なウォーキングの効果が現れます (ソースコード、easeljs-sprite-01.htmlを参照):

ボタンを通じてアニメーションの変形を制御したい場合 gotoAndPlay(action) メソッドを使用して、対応するアニメーション効果を呼び出すだけです。

HTML ドキュメントのコードを次のように変更します:

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

ログイン後にコピー

次に、JS コードを次のように変更します:

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(&#39;goStraight&#39;).onclick =  function goStraight() {
    instance.gotoAndPlay("run1");
}
document.getElementById(&#39;goLeft&#39;).onclick =  function goLeft() {
    instance.gotoAndPlay("run2");
}
document.getElementById(&#39;goRight&#39;).onclick =  function goRight() {
    instance.gotoAndPlay("run3");
}
document.getElementById(&#39;goBack&#39;).onclick =  function goBack() {
    instance.gotoAndPlay("run4");
}

ログイン後にコピー

效果就出来了（源码见 easeljs-sprite-02.html）：

4.使用 Text 创建简单的文本

这个就比较简单了，直接看代码：

<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>

ログイン後にコピー

这里有设置背景色为粉红：

#View { background-color: #fddfdf;}

ログイン後にコピー

显示效果为：

5.使用 Container 创建保存其他显示对象的容器

其实这个在前面已经用过了。不过还是单独写个例子，这个比较简单：

<!DOCTYPE html>

<html lang="en"><head>
    <meta charset="UTF-8">
    <title>使用 Container 创建保存其他显示对象的容器</title>
    <script src="js/base/easeljs-0.8.2.min.js">
    </script>
    </head>
    <body>
    <canvas id="view" width="300" height="300">
    </canvas>
    <script>
    var stage = new createjs.Stage("view");
    container = new createjs.Container();    //先来绘制个正方形
    var square = new createjs.Shape();
    square.graphics.beginFill("#ff0000").drawRect(0,0,300,300);
    container.addChild(square);    //先来绘制个正方形
    var square2 = new createjs.Shape();
    square2.graphics.beginFill("orange").drawRect(50,50,200,200);
    container.addChild(square2);    //然后我们来绘制个圆形
    var circle = new createjs.Shape();
    circle.graphics.beginFill("blue").drawCircle(150,150,100);
    container.addChild(circle);    //最后我们再绘制个圆形
    var circle2 = new createjs.Shape();
    circle2.graphics.beginFill("white").drawCircle(150,150,50);
    container.addChild(circle2);

    stage.addChild(container);
    stage.update();</script></body></html>

ログイン後にコピー

效果如下：