HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う

第14回 オブジェクトの使い回しとアニメーション素材の変更

この記事を読むのに必要な時間:およそ 8 分

前回の第13回「モーションブラーと弾むアニメーション」で,ひとまずお題の表現はできた第13回コード2)。マウスポインタの動きに合わせて,つぎつぎにつくられるスプライトアニメーションのオブジェクトが落ちて弾み,それらの残像にモーションブラーがかかる図1)。今回はこのアニメーションにふたつ手を加えたい。表題のとおり,ひとつはオブジェクトを使い回すようにすること。そしてもうひとつは,スプライトシートアニメーションの素材を差し替えてみる。

図1 落ちて弾むアニメーションとモーションブラーのかかった残像

図1 落ちて弾むアニメーションとモーションブラーのかかった残像

ガベージコレクションを減らす

第13回コード2「ステージ下端まで落ちたオブジェクトを弾ませる」では,Stage.stagemousemoveイベントのリスナー関数(addInstance())で,マウスを動かすたびにSpriteインスタンスがSprite.clone()メソッドによりひたすらつくられる。そのために,メモリが費やされたり,処理が重くなったりしないだろうか。

stage.addEventListener("stagemousemove", addInstance);

function addInstance(eventObject) {
  createInstance(stage.mouseX, stage.mouseY, 15);

}

function createInstance(x, y, halfSpeed) {

  var instance = animation.clone();

}

もちろん,インスタンスをつくりっ放しではない。アニメーションさせるTicker.tickイベントのリスナー関数(animate())では,ステージから見えなくなったオブジェクトは,Container.removeChildAt()メソッドでStageオブジェクトの表示リストから除いている。ただ,ことさらメモリから消すという操作はしていない。

createjs.Ticker.addEventListener("tick", animate);

function animate(eventObject) {
  var count = stage.getNumChildren() - 1;

  for (var i = count; i > -1; i--) {
    var child = stage.getChildAt(i);

    if (newAlpha <= 0 || newX > stageWidth || newX < 0) {
      stage.removeChildAt(i);
    }

  }

}

実は,JavaScriptは,要らなくなったオブジェクトを自動的にメモリから消し去ってくれる。この仕組みを「ガベージコレクション」という※1)。自動的にゴミを探して吸い取ってくれるロボット掃除機のようだ。もっとも,楽なのはスクリプティングする人間の側だけで,掃除機(「ガベージコレクタ」と呼ばれる)にとっては手間のかかる仕事になる。

プログラマはメモリの扱いはとくに気にすることなく,JavaScriptのコードを書けばよい。けれど,JavaScriptはその処理の合間をぬって,メモリの片づけをしなければならない。なお,オブジェクトが要らなくなったということは,その参照が残っているかどうかで確かめている。

人気料理店のランチタイムを思い浮かべてもらうとよい。注文をとって料理を運ぶのが店員の仕事だ。しかし,食べ終えた客の皿を片づけなければつぎの客が入れられない。つまり,無駄なメモリが費やされる。片づけに追われると,料理を運ぶのが遅れがちになる。処理の負荷が上がってしまうのだ。

熱狂的なファンをもつある人気ラーメン店では,食べ終わった客が丼を片づけてテーブルを拭くという。それなら,店員の手間が省ける。このアイデアをいただこう。ただし,協力してもらうのはつぎの客だ。要らなくなったオブジェクトは,消さずにとっておく。オブジェクトが必要になったら,とっておいたオブジェクトがあればそれを使ってもらい,新たにはつくらない。

図2 ある人気店のラーメン

図2 ある人気店のラーメン

Shijuukurou氏撮影(CC BY-SA 3.0)

こうすれば,ガベージコレクタの手は煩わせずに済む。それだけではない。一般に,オブジェクトを新たにつくるより,すでにあるオブジェクトの設定をし直す方が負荷は低い。第13回コード2をそのように書直してみよう。

※1)
ガベージコレクションについて詳しくは,Wikipediaガベージコレクションを参照してほしい。

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入