2016.11.24

CreateJSを使って動きのあるWEBページを作りたい！　～Containerでまとめる～

最近のWEBページってたくさん動きますよね！
イケてるサイトとか見ると自分もそんなサイトを作ってみたい…
そんなことを思う今日この頃です(￣∇￣*)
そこで今回は、ローディング画面のようなちょっとした動きを手軽に作れるCreateJSを学んでいきます。

CreateJSを使って動きのあるWEBページを作りたい！　～図形の描画～
CreateJSを使って動きのあるWEBページを作りたい！　～クリック処理～
CreateJSを使って動きのあるWEBページを作りたい！　～Tickerで動かす～
CreateJSを使って動きのあるWEBページを作りたい！　～Containerでまとめる～

Containerでまとめる

今回は描画されている図形をまとめて動かしてみます。
前回同様に前々々回作成した顔のような図形を変化させていきます。
そのため、CreateJSの読み込みとキャンバスについては準備してあるのでそのまま利用してください。

Containerでまとめる

CreateJSで図形等をまとめるには「Container(コンテナ)」というものを使います。
コンテナの使い方のイメージとしては以下のようになります。

ステージを作成
コンテナを作成
ステージにコンテナを追加
シェイプAを定義
コンテナにシェイプAを追加
シェイプBを定義
コンテナにシェイプBを追加
描画
コンテナの操作
再描画

になります。
「9.コンテナの操作」でコンテナの位置を移動すると、コンテナに追加されている「シェイプA」と「シェイプB」も移動します。
まずはコンテナの使い方を確認して、それからから全体のコードと動きを確認します。

コンテナを作成

コンテナの作成は下記の構文にて行います。

new createjs.Container();

これでコンテナを作成することができます。

ステージにコンテナを追加

ステージにコンテナを追加するには下記の構文にて行います。
ステージに図形を追加するときと同じです。

ステージ.addChild(コンテナ);

これでステージにコンテナを追加することができます。

コンテナに図形を追加

コンテナに図形を追加するには下記の構文にて行います。

コンテナ.addChild(シェイプ);

これでコンテナにシェイプを追加することができます。

実際のコード

上記の構文を使用し、左の目を右にずらしていきます。
実際に出来上がったコードは以下のようになります。

100

101

102

103

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
  <script>
    window.onload = function () {
      var lineSize = 1;
     
      var faceSize = 50;
      var faceX = 100;
      var faceY = 100;
 
      var eyeSize = 6;
      var eyeY = faceY - (faceSize / 4);
      var leftEyeX = faceX + (faceSize / 4);
      var rightEyeX = faceX - (faceSize / 4);
     
      var mouthY = faceY + (faceSize / 4);
      var mouthX = faceX;
 
      var rectMouthSizeX = 30;
      var rectMouthSizeY = 10;
       
      var arcMouthSize = 5;
       
      var moveSpeed = 1;
 
      // createJSのステージを作成
      var stage = new createjs.Stage("canvas");
 
      // コンテナを作成
      var container = new createjs.Container();
 
      // ステージに追加
      stage.addChild(container);
 
      // 顔を定義
      var face = new createjs.Shape();                             // シェイプを新規作成
      face.graphics.beginStroke("Black");                          // 線の色
      face.graphics.setStrokeStyle(lineSize);                      // 線の太さ
      face.graphics.beginFill("Yellow");                           // 塗りつぶし色
      face.graphics.drawCircle(faceX, faceY, faceSize);            // 円をX位置, Y位置, 半径で作成
 
      // 左目を定義
      var leftEye = new createjs.Shape();                          // シェイプを新規作成
      leftEye.graphics.beginStroke("Black");                       // 線の色
      leftEye.graphics.setStrokeStyle(lineSize);                   // 線の太さ
      leftEye.graphics.beginFill("White");                         // 塗りつぶし色
      leftEye.graphics.drawCircle(leftEyeX, eyeY, eyeSize);        // 円をX位置, Y位置, 半径で作成
 
      // 右目を定義
      var rightEye = new createjs.Shape();                         // シェイプを新規作成
      rightEye.graphics.beginStroke("Black");                      // 線の色
      rightEye.graphics.setStrokeStyle(1);                         // 線の太さ
      rightEye.graphics.beginFill("White");                        // 塗りつぶし色
      rightEye.graphics.drawCircle(rightEyeX, eyeY, eyeSize);      // 円をX位置, Y位置, 半径で作成
 
      // 口を定義
      var mouth = new createjs.Shape();                            // シェイプを新規作成
      mouth.graphics.beginStroke("Black");                         // 線の色
      mouth.graphics.setStrokeStyle(1);                            // 線の太さ
      mouth.graphics.beginFill("Red");                             // 塗りつぶし色
      mouth.graphics.rect(mouthX - (rectMouthSizeX / 2),           // 四角をX位置, Y位置, 大きさで作成
                          mouthY,
                          rectMouthSizeX,
                          rectMouthSizeY);
 
      // コンテナに追加
      container.addChild(face);                                    // 顔をコンテナに追加
      container.addChild(leftEye);                                 // 左目をコンテナに追加
      container.addChild(rightEye);                                // 右目をコンテナに追加
      container.addChild(mouth);                                   // 口をコンテナに追加
 
      // tickerイベントを監視
      createjs.Ticker.addEventListener("tick", tickerMethod);
 
      function tickerMethod() {
        // 左目のx座標をチェックする
        if(container.x >= 5) {
           // 右に5以上進んでる場合は進む方向を左へ
           moveSpeed = -1;
 
        } else if(container.x <= - 5) {
           // 左に5以上進んでる場合は進む方向を右へ
          moveSpeed = 1;
 
        }
  
        // コンテナのx座標を動かす
        container.x = container.x + moveSpeed;
 
        // 再描画
        stage.update();
 
      }
    };
  </script>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>