前回の第1回は、CreateJSのTweenJSライブラリでオブジェクトの座標をトゥイーンさせた。このトゥイーンにランダムな繰返しの動きを加えていく。
たが、その前にやらなければならないことがある。第1回が公開された2月14日(日本時間)に、CreateJSの新バージョンがリリースされた。その対応を先に済ませておきたい。
CreateJS新バージョンに対応した修正を加える
第1回には、コード2としてつぎのようなJavaScriptコードを書いた。このスクリプトに、CreateJS新バージョンに対応するための修正を加える。
まず、script要素に読込むCrateJSのJavaScriptファイルのバージョンが変わる。「CreateJS CDN Libraries」を見ると、EaselJSが0.6.0、PreloadJSは0.3.0、TweenJSは0.4.0と、いずれも0.1上がっている。
第1回コード2のJavaScriptをそのままにして実行すると、動かない。PreloadJSライブラリの名前はそのまま変わらないものの、クラス名はPreloadJSからLoadQueueに変更されたからだ。このクラス名を変えれば、取りあえずはトゥイーンアニメーションが見られるようにはなる。
しかし、新CreateJSでは、イベントを扱う仕組みが新しくなった。前回はイベントにはハンドラを定めて扱うと解説した(「画像ファイルを読込んでCanvasに描く」参照)。このイベントハンドラも、当面は残されている。だから、上記の修正だけでも、アニメーションは動いた。
けれども、これからは「イベントリスナー」でイベントを扱うことが推奨されている。イベントリスナーの仕組みでは、addEventListener()メソッドでイベントに関数を登録する。この関数を「リスナー」と呼ぶ。なお、メソッドの第1引数には、イベント名を文字列で渡す。
すると、PreloadJSによる画像ファイルの読込みは、クラス名をLoadQueueに置き換えるだけでなく、読込み終えたときのイベント("fileload")に関数(draw())をaddEventListener()メソッドで加えることになる。
前掲第1回コード2では、もうひとつイベントの扱いがある。Tickerクラスだ。Ticker.addListener()メソッドの替わりに、やはりTicker.addEventListener()メソッドで"tick"イベントにリスナー関数を加える。つまり、イベントはすべてaddEventListener()メソッドによりリスナーで扱うように統一されたのだ。
上記のようにステートメントを書き替えれば、新CreateJSでトゥイーンアニメーションが正しく動く。ただ、ここでTickerのリスナー関数(tick())が行っているのは、Stage.update()メソッドの呼出しだけだ。このような場合にかぎっては、もっと簡単な書き方がある。
addEventListener()メソッドの第2引数には、オブジェクトを渡すこともできる[1]。そして、Ticker.addEventListener()メソッドの第2引数にStageオブジェクトを渡せば、リスナー関数(tick())を定めなくても、Stage.update()メソッドが自動的に呼び出せる。これらの修正を加えたのが、つぎのコード1だ。改訂したjsdo.itのコードも添えた。
トゥイーンを繰返す
では、トゥイーンアニメーションに動きを加えよう。トゥイーンを繰り返してみたい。Tween.get()メソッドの第2引数にオブジェクトを渡し、そのloopプロパティにtrueを定めると、トゥイーンが繰り返される。だが、このアニメーションには不満を感じるだろう。
前掲コード1は、トゥイーンにかける時間と移動先の垂直座標をランダムに定めた。確かに、ランダムな時間と位置にアニメーションする。けれど、Tween.get()メソッドに第2引数を渡して繰返されるのはその同じトゥイーンだ。つまり、ランダムな設定は初めに行われたら、その値のままトゥイーンが繰り返される。
繰返すたびにランダム値を変えるには、その設定の関数(setRandomTween())を改めて呼出さなければならない。Tween.call()メソッドは、関数の呼出しをトゥイーンに加える。
Tween.call()メソッドの第1引数に呼出す関数を定め、第2引数には関数に渡す引数を配列で渡す。配列に納めるのは、複数の引数が渡せるようにするためだ。つぎのようにTween.call()メソッドをドット(.)でトゥイーンに加えれば、ランダムに設定する関数(setRandomTween())が呼び出される。
もっとも、これでも望むアニメーションにはならないだろう。Tweenクラスのトゥイーンを定めるメソッドがドット(.)でつなげられたとき、後のメソッドのトゥイーンは前のトゥイーンが終わったところから続く。Tween.call()を呼び出す前のTween.to()メソッドで、トゥイーンするオブジェクトは右端にきている。そこから、Tween.call()メソッドでランダムな垂直位置を定めてトゥイーンすれば、右端で上下するだけのアニメーションになってしまう(図1)。
そこで、トゥイーンは左右の端を行き来するアニメーションにしよう。
左右を行き来するランダムなトゥイーンアニメーション
トゥイーンの行き先は、関数でランダムに定めよう。関数(getNextPosition())には、トゥイーンを左右どちらの端から始めるのか引数(side)で渡す。すると、反対の端のランダムな座標をPointオブジェクトで返す。この関数はランダムなトゥイーンを定める関数(setRandomTween())から呼び出すことになる。
行き先座標を返す関数(getNextPosition())における垂直座標(nextY)の定め方は、前掲コード1と同じだ。引数(side)にはトゥイーンを始める端が文字列("left"または"right")で渡される。その値が左なら右端(right)、そうでなければ左端(left)を水平座標(nextX)とする。そして、つぎのトゥイーンを始める端は、変数(currentSide)にとっておく。
なお、左端座標を新たに変数(left)として宣言した。また、ランダムなトゥイーンを定める関数(setRandomTween())には、第2引数にトゥイーンを始める端(side)が加わっている。
そこで、Tween.call()メソッドにも、呼び出す関数(setRandomTween())の新たな引数(currentSide)を加えなければならない。そして、画像ファイルを読込み終えたリスナー関数(draw())からは、ランダムなトゥイーン設定の関数(setRandomTween())を左端("left")から始めることにして呼び出す。
これでオブジェクトは、左右にトゥイーンで行き来を繰り返す(コード2)。そして、垂直位置とトゥイーンの時間は、毎回ランダムに変わる。
なお、変数(left)に定める左端座標は、画像ファイルを読込み終えたリスナー関数(draw())で、オブジェクトがCanvasの外に切れないように幅の半分(halfWidth)内側に定めている(図2)。ご参考までに、jsdo.itにも次のようにコードを掲げた。
次回は、いよいよお題を仕上げる。トゥイーンする端をCanvasの四辺に拡げ、イージングもランダムに切り替えよう。このお題についても、新CreateJS版を掲げておく。