2016.11.24

CreateJSを使って動きのあるWEBページを作りたい！　～Tickerで動かす～

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

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

Tickerで動かす

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

CreateJSのTickerで動かしてみる

CreateJSで図形等を動かすには「ticker」というものを使い動かしていきます。
「Ticker」の動きのイメージとしては、とある時間間隔で動くものです。
それで図形などを動かすイメージとしては以下のようになります。

図形を作成
ステージに図形を追加
「Ticker」をイベントを監視
3の「Ticker」発動時に動くメソッドを定義
メソッド内で図形の場所を再定義
メソッド内で描画

になります。
こうすることでメソッドが呼ばれる⇒位置変更⇒再描画が繰り返されるため動画のように見えます。
電子掲示板で文字が右から左に流れていくと思いますがそんなイメージです。
まずは「Ticker」の監視方法を確認して、それからから全体のコードと動きを確認します。

「Ticker」をイベントを監視

「Ticker」イベントの監視は下記の構文にて行います。

createjs.Ticker.addEventListener(“tick”, メソッド名);

これで一定間隔でメソッドを呼ぶことができます。

実際のコード

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

<!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;
     
      // createJSのステージを作成
      var stage = new createjs.Stage("canvas");
 
      // 顔を定義
      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);
 
      // ステージに追加
      stage.addChild(face);                                        // 顔をステージに追加
      stage.addChild(leftEye);                                     // 左目をステージに追加
      stage.addChild(rightEye);                                    // 右目をステージに追加
      stage.addChild(mouth);                                       // 口をステージに追加
 
      // tickerイベントを監視
      createjs.Ticker.addEventListener("tick", tickerMethod);
 
      function tickerMethod() {
        // 左目のx座標をプラスする（右に動いていく）
        leftEye.x = leftEye.x + 1;
         
        // 再描画
        stage.update();
 
      }
    };
  </script>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>

70行目から始まる「Ticker」のイベント時のメソッドの中で座標変更と描画を行っています。
ちなみに、同様にして大きさなども変えることが可能です。
実行結果を確認してみます。

実行結果

ブラウザでHTMLを見てみると前回と同様、顔ができています。

少し時間がたつと…

左目が徐々に右にずれていくのがわかります。

両目が揺れるようにようにカスタマイズ

左目が一方向に進むのではなく、左右に揺れるようにしてみます。
また、右目だけでなく左目も揺れるようにしていきます。

目を揺らす

揺らす方法を考えていきます。
揺らすためには、ある一定の区間で右左の行き来を繰り返す必要があります。
つまり、増減するための変数を用意してそれが変化することで表現していきます。
具体的にはその変数が、
ある一定の位置より大きい場合は「-1」、
ある一定の位置より小さく場合は「+1」
にします。
その変数を現在の位置にプラスして再描画をしていきます。

両目の動きをそろえる

左目の動きと右目の動きをそろえていきます。
「シェイプ.x」でとれる座標はローカル座標になるので、「左目.x」の値は0から始まります。
これを利用して「右目.x」の値を変化させます。
双方の目の基準が0から始まるので、「右目.x」=「左目.x」を行うことで両目の動きがそろいます。

実際のコード

上記の方法を用いて、両目が揺れるコードを実装した結果は以下のようになります。

100

<!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 movevSpeed = 1;
 
      // createJSのステージを作成
      var stage = new createjs.Stage("canvas");
 
      // 顔を定義
      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);
 
      // ステージに追加
      stage.addChild(face);                                        // 顔をステージに追加
      stage.addChild(leftEye);                                     // 左目をステージに追加
      stage.addChild(rightEye);                                    // 右目をステージに追加
      stage.addChild(mouth);                                       // 口をステージに追加
 
      // tickerイベントを監視
      createjs.Ticker.addEventListener("tick", tickerMethod);
 
      function tickerMethod() {
        // 左目のx座標をチェックする
        if(leftEye.x >= 5) {
           // 右に5以上進んでる場合は進む方向を左へ
           movevSpeed = -1;
 
        } else if(leftEye.x <= - 5) {
           // 左に5以上進んでる場合は進む方向を右へ
          movevSpeed = 1;
 
        }
  
        // 左目のx座標を動かす
        leftEye.x = leftEye.x + movevSpeed;
 
        // 右目のx座標を動かす
        rightEye.x = leftEye.x;
 
        // 再描画
        stage.update();
 
      }
    };
  </script>
</head>
<body>
  <canvas id="canvas" width="600" height="600"></canvas>
</body>
</html>