ホームページ  >  記事  >  ウェブフロントエンド  >  クイックスタート createjs サンプル チュートリアル

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

PHP中文网
PHP中文网オリジナル
2017-06-21 10:33:143763ブラウズ
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 src="easeljs-0.7.1.min.js?1.1.10"></script>  //引入相关的js文件
<canvas id="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 id="game" width="1000" height="700"></canvas>

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

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

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

canvas{
     width: 100%;
}

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

     

 

 

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

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。