クイックスタート createjs サンプル チュートリアル

createjs フレームワークを使い始めたとき、インターネット上に関連するチュートリアルがまだほとんどないことがわかりました。そのため、今後の参考にしやすいように記事を書きました。

createjsの紹介

公式Webサイト: http://www.createjs.cc/

createjsには次の4つの部分が含まれています:

EaselJS: スプライト、アニメーション、ベクター、ビットマップの描画に使用されます。 HTML5 Canvas 上でインタラクティブなエクスペリエンスを作成します (マルチタッチを含む)

TweenJS: アニメーション効果に使用されます

SoundJS: オーディオ再生エンジン

PreloadJS: Web サイトリソースのプリロード

SoundJS、PreloadJS に似ています。自分で処理するのに便利なので、自分で記述することもできます。一般的に、これらはオプションであるかどうかに関係なく、補助関数と同等です。そのため、この記事ではEaselJSの使い方を中心に説明します。

1. EaselJS の一般 API

• (Bitmap) を使用して絵を描画します

• (Shape) を使用して長方形、円などのグラフィックを描画します。座標 X、Y の変更、影の増加、透明度のアルファ、スケールの縮小と拡大

• 2. EaselJS 描画の一般的なプロセス

• 一般的なプロセス:
表示オブジェクトを作成する → いくつかのパラメーターを設定する→ 描画するメソッドを呼び出す → ステージに追加する → update()

、コードは次のとおりです:

<script></script>  //引入相关的js文件
<canvas></canvas> canvas = document.querySelector('#canvas' stage =  rect = rect.graphics.beginFill("#f00").drawRect(0, 0, 100, 100stage.update();

グラフィックスは、いくつかのスタイル、線の幅、色などを設定でき、いくつかのメソッドを呼び出すこともできます。長方形のdrawRect、円のdrawCircleなどのグラフィックを描画します。詳細については、APIを自分で確認できます。

注: 必ずシェイプ オブジェクトをステージに追加してください。追加しないと画面に表示されません。

3. ティッカータイマー

createjs を作成するときに必ず遭遇するものの 1 つは、主にステージを定期的に更新するティッカーです。理想的なフレームレートは 60FPS です

。

4. 複数の表示オブジェクトの階層関係を制御します

ステージは、単純に子要素を表すchildren属性を持ちます。前のメソッドをオーバーライドして、表示リストの最後に addChild メソッドが追加されます。

子のカスケード効果を動的に変更することもできます。

createjs.Ticker.setFPS(60);

5. Container コンテナ

Text、Bitmap、Shape、Sprite およびその他の EaselJS 要素を含めることができ、これらは統合管理のために Container に含まれます。

たとえば、キャラクターは手、足、頭、胴体で構成されており、これらのパーツを同じコンテナに入れて均一に動かすことができます。使用方法も比較的簡単です:

stage.setChildIndex(red,1);

謬謬謬～この記事の焦点は画像を描いて加工することです

6. 絵を描く

var contain = new createjs.Container(); 
contain.addChild(bgImg);
contain.addChild(bitmap);  
stage.addChild(contain);

上記に従ってください EaselJS の通常の描画処理では、上記のコードが正常に表示されるはずです。ただし、場合によっては、この画像リソースが正常にロードされることを確認する必要があります。そうしないと、リソースのプリロードがある場合は、キャンバスに画像が表示されなくなります。そうでない場合は、画像をロードした後に描画する必要があります

var bg = new createjs.Bitmap("./background.png");
stage.addChild(bg);
stage.update();

Createjs には、画像を処理するためのいくつかのメソッドが用意されています:

6.1 マスクを追加します。画像にレイヤーを追加します

マスク属性を使用すると、画像と形状が交差する領域のみを表示できます

var img = new Image();
img.src = './img/linkgame_pass@2x.png';
img.onload = function () { var bg = new createjs.Bitmap("./background.png");
 stage.addChild(bg);
 stage.update();
}

一般的なアプリケーションシナリオ: 円形画像の表示など、画像のトリミングに使用されます

6.2 画像にフィルター効果を追加する

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;//遮罩图形shape = new createjs.Shape();
shape.graphics.beginFill("#000").drawCircle(0, 0, 100);
shape.x = 200;
shape.y = 100;
bg.mask = shape;     //给图片bg添加遮罩stage.addChild(shape);
stage.addChild(bg);
stage.update();

その理由は、フィルターを画像に追加した直後にステージが更新されるためです。 1 つのフレームの影響で、フィルタは 2 番目のフレームで失敗します。画像のcache()メソッドを使用した後、ステージがどのように更新されてもフィルターの効果を維持できます。キャッシュを追加すると、FPSの向上やキャッシュなどの多くの機能が得られます。

6.3 Rectangle を使用して画像をトリミングする

EaselJS の組み込み Rectangle オブジェクトを使用して、画像の特定の部分を表示する選択ボックスを作成します。

stage = new createjs.Stage("gameView");
bg = new createjs.Bitmap("./img/linkgame_pass@2x.png");
bg.x = 10;
bg.y = 10;var rect = new createjs.Rectangle(0, 0, 121, 171);
bg.sourceRect = rect;
stage.addChild(bg);
stage.update();

适用场景：拼图小游戏，剪裁图片……

 

7. createjs事件

easeljs事件默认是不支持touch设备的，需要以下代码才支持：

createjs.Touch.enable(stage);

对于Bitmap，Shape等对象，都可以直接使用addEventListener进行事件监听

bitmap = new createjs.Bitmap('');
bitmap.addEventListener（‘click’，handle）;

 

8. CreateJs的渲染模式

CreateJs提供了两种渲染模式，一种是用setTimeout，一种是用requestAnimationFrame，默认是setTimeout，默认的帧数是20，一般的话还没啥，但是如果动画多的话，设置成requestAnimationFrame模式的话，就会感觉到动画如丝般的流畅。

 

 

9.适配

在移动端开发中，不得不面对一个多屏幕，多尺寸的问题，所以适配问题显得特别重要。

<canvas></canvas>

注意，以上代码的width，height不同于css中的width，height。

比如，你在canvas内部绘制图片，用x，y轴进行定位，这里的x，y是相对于canvas这个整体。

我们再把canvas当成一整张图片使用css进行适配

canvas{
     width: 100%;
}

那么，就会有以下的效果，canvas会适配屏幕尺寸，里面的图片也会等比例变大变小。

     

 

 

以上がクイックスタート createjs サンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。