Away3D TypeScriptではじめる3次元表現

第19回 4つのビットマップをパーティクルにしてアニメーションさせる

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

前回の第18回2つのビットマップをパーティクルにしてアニメーションさせるでは,パーティクルにしてアニメーションさせるロゴを2つに増やした第18回サンプル1Away3D 15/03/13: Exploding two logos using particles」⁠

今回は,画像をさらに2つ加えて,4つのロゴのパーティクルでアニメーションをつくりたい図1)⁠アニメーションの動きもより細かく手直しする。そして,急遽補わなければならなくなったのは,2015年10月9日付でライブラリが改訂されたことだ。

図1 4つのロゴをパーティクルにしてアニメーションさせる

図1 4つのロゴをパーティクルにしてアニメーションさせる

2015年10月9日付ライブラリによる変更

例によって,2015年10月9日付ライブラリに改めると,これまでのコードが動かなくなる。今回のお題についていうと,クラスBitmapDataとMethodRendererPoolがあっさりとなくなった。とはいえ,幸いなことに修正すべき箇所は多くない。つぎのとおりだ。まず,DefaultRenderer()コンストラクタにMethodRendererPoolは渡さなくてよくなった。つぎに,Cast.bitmapData()がなくなり,とくに替わりのメソッドも使わない。LoaderEvent.assetsプロパティから取り出したオブジェクトがそのまま扱えるからだ。なお,得られるオブジェクトはBitmapDataに替わって,新たなBitmapImage2Dになる(変数名はbitmapDataのまま変えない)⁠

// var Cast = require("awayjs-display/lib/utils/Cast");

// var MethodRendererPool = require("awayjs-methodmaterials/lib/pool/MethodRendererPool");

function createView(width, height, backgroundColor) {
  // var defaultRenderer = new DefaultRenderer(MethodRendererPool);
  var defaultRenderer = new DefaultRenderer();
  var view = new View(defaultRenderer);

}

function onResourceComplete(eventObject) {
  // var asset = eventObject.assets[0];
  // var bitmapData = Cast.bitmapData(asset);
  var bitmapData = eventObject.assets[0];

}

ロゴの縁を抜く

前回の結びにほのめかしていたアニメーションの気になるところを先に直そう。それは,2つのロゴが真ん中に重なったとき,うっすらと見える周りの縁だ図2左)⁠コードにつぎのような手を加えて,Viewオブジェクトの背景色を白にするとはっきりわかる図2右)⁠

function initialize() {

  view = createView(window.innerWidth, window.innerHeight, 0xFFFFFF);   // 0x0);

}

図2 ロゴのパーティクルに四角い縁がある

図2 ロゴのパーティクルに四角い縁がある 図2 ロゴのパーティクルに四角い縁がある

元画像のPNGファイルは,縁がアルファで抜いてある図3)⁠ところが,それらのピクセルについてもパーティクルをつくり,カラーに黒が与えられてしまったのだ。そこで,パーティクルの情報をつくる関数(setParticlesData())に,以下のようにアルファが抜けていないか確かめるif条件を加えた(アルファ値は0とせず,少し余裕をもたせた)⁠アルファが抜けていたらパーティクルの情報を変数(colorValuesとcolorPoints)に加えないので,パーティクルがつくられないことになる。

図3 ロゴの画像ファイルは縁がアルファで抜かれている

図3 ロゴの画像ファイルは縁がアルファで抜かれている

function setParticlesData(bitmapData, size, colorValues, colorPoints) {

  var color = bitmapData.getPixel32(i, j);
  if (((color >> 24) & 0xff) > 0xb0) {

    colorValues.push(rgbColor);
    colorPoints.push(point);
  }

}

4つのビットマップからバーティクルをつくる

では,読み込むロゴの画像をあと2つ増やして,4つのビットマップからパーティクルをつくろう。加えるのはSafariとInternet Explorerのロゴで,awayjs-examplesの中のbin/assets/safari.pngbin/assets/ie.png図4)⁠他の画像ファイルと同じassetsフォルダに納めておく。

図4 SafariとInternet Explorerのロゴ画像

図4 SafariとInternet Explorerのロゴ画像 図4 SafariとInternet Explorerのロゴ画像

画像ファイルのURLは配列の変数(assetsURLs)に入れていたので,エレメントを新たに2つ加える。ファイルを読み込んだときのリスナー関数(onResourceComplete())にもURLの判定をswitch文に加え,取り出したBitmapImage2Dオブジェクト(bitmapData)は配列の変数(bitmapDatas)に納めた。

var assetsURLs = [
  "assets/chrome.png",
  "assets/firefox.png",
  "assets/safari.png",
  "assets/ie.png"
];

function onResourceComplete(eventObject) {
  var bitmapData = eventObject.assets[0];
  switch (eventObject.url) {
    case assetsURLs[0]:
      bitmapDatas[0] = bitmapData;
      break;
    case assetsURLs[1]:
      bitmapDatas[1] = bitmapData;
      break;
    case assetsURLs[2]:
      bitmapDatas[2] = bitmapData;
      break;
    case assetsURLs[3]:
      bitmapDatas[3] = bitmapData;
      break;
  }

}

そして,リスナー関数(onResourceComplete())は,すべてのBitmapImage2Dオブジェクトを取り出し終えたら,パーティクルのアニメーションをつくる処理(関数createParticles()とstartParticleAnimation()の呼出し)に移る。BitmapImage2Dオブジェクトが4つに増えたので,判定のための関数(allDataExists())を別に設けた。引数として渡した配列(array)にエレメントがすべて収められているかどうかを,for文により確かめてブール値で返す。そのために,BitmapImage2Dオブジェクトを納める配列(bitmapDatas)は,読み込むファイルの数Array.lengthプロパティ)だけ長さを与えて初期化した。

var bitmapDatas = new Array(assetsURLs.length);

function onResourceComplete(eventObject) {

  if (allDataExists(bitmapDatas)) {
    var colorGeometry = createParticles();
    startParticleAnimation(colorGeometry, assetsURLs.length);
  }
}
function allDataExists(array) {
  var count = array.length;
  for (var i = 0; i < count; i++) {
    if (!array[i]) {
      return false;
    }
  }
  return true;
}

あとは,パーティクルのアニメーションを初期化する関数(initColorParticle())で4つのロゴの行く先(endPoint)を,水平面(xz平面)の上で原点からそれぞれ一定値(size)移した。

function initColorParticle(properties) {

  var index = properties.index;
  var endPoint = new Vector3D();

  if (index < colorSeparations[0]) {
    endPoint.x = size;
  // } else {
  } else if (index < colorSeparations[1]) {
    endPoint.x = -size;
  } else if (index < colorSeparations[2]) {
    endPoint.z = size;
  } else {
    endPoint.z = -size;
  }

}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入