ActionScript 3.0で始めるオブジェクト指向スクリプティング

第38回 z座標値に応じて重ね順を変える

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

4つの面を上下左右に回す

それでは,面はあとふたつ増やして四方を囲む4面とし,垂直の回転も加えて上下左右に回してみよう。実は,もう新たに学ぶべきことは何もない。ただ,処理を追加するだけだ。まず,面のSpriteインスタンスをふたつ増やし,それらを容れ物の親Spriteインスタンスに加える。

var frontSprite:Sprite = xCreateFace(Image0, 0, 0, -nUnit);
var backSprite:Sprite = xCreateFace(Image1, 0, 0, nUnit, 180);
var leftSprite:Sprite = xCreateFace(Image2, -nUnit, 0, 0, 90);   // 追加
var rightSprite:Sprite = xCreateFace(Image3, nUnit, 0, 0, -90);   // 追加
mySprite.addChild(frontSprite);
mySprite.addChild(backSprite);
mySprite.addChild(leftSprite);   // 追加
mySprite.addChild(rightSprite);   // 追加

つぎに,回転のアニメーションをさせるリスナー関数xRotate()には,垂直に回す処理が加わる。これは,第36回「Matrix3Dクラスの後から加える変換」スクリプト1とまったく同じだ。

function xRotate(eventObject:Event):void {
  var nRotationY:Number = (mouseX - nX) * nDeceleration;
  var nRotationX:Number = (mouseY - nY) * nDeceleration;   // 追加
  myMatrix3D.appendTranslation(-nX, -nY, 0);
  myMatrix3D.appendRotation(nRotationY, Vector3D.Y_AXIS);
  myMatrix3D.appendRotation(nRotationX, Vector3D.X_AXIS);   // 追加
  myMatrix3D.appendTranslation(nX, nY, 0);
  xSetOrder();
}

前掲スクリプト1にこれらの修正を加えたのが,つぎのスクリプト2だ。[ムービープレビュー]を確かめると,四方を囲む4つの面がマウスポインタの位置に応じて上下左右に回る(前掲図1)。

スクリプト2 四方に配置した面がマウスポインタの位置に応じて上下左右に回る

// タイムライン: メイン
// [ライブラリ]のビットマップに[クラス]としてImage0~Image3を設定
var mySprite:Sprite = new Sprite();
var nX:Number = stage.stageWidth / 2;
var nY:Number = stage.stageHeight / 2;
var nUnit:Number = 100 / 2;
var frontSprite:Sprite = xCreateFace(Image0, 0, 0, -nUnit);
var backSprite:Sprite = xCreateFace(Image1, 0, 0, nUnit, 180);
var leftSprite:Sprite = xCreateFace(Image2, -nUnit, 0, 0, 90);
var rightSprite:Sprite = xCreateFace(Image3, nUnit, 0, 0, -90);
var nDeceleration:Number = 0.3;
mySprite.z = 0;
var myMatrix3D:Matrix3D = mySprite.transform.matrix3D;
mySprite.x = nX;
mySprite.y = nY;
addChild(mySprite);
mySprite.addChild(frontSprite);
mySprite.addChild(backSprite);
mySprite.addChild(leftSprite);
mySprite.addChild(rightSprite);
addEventListener(Event.ENTER_FRAME, xRotate);
function xCreateFace(myBitmapData:Class, nX:Number, nY:Number, nZ:Number, nRotationY:Number = 0):Sprite {
  var myBitmap:Bitmap = new Bitmap(new myBitmapData(0, 0));
  var faceSprite:Sprite = new Sprite();
  faceSprite.addChild(myBitmap);
  myBitmap.x = -myBitmap.width / 2;
  myBitmap.y = -myBitmap.height / 2;
  faceSprite.x = nX;
  faceSprite.y = nY;
  faceSprite.z = nZ;
  faceSprite.rotationY = nRotationY;
  return faceSprite;
}
function xRotate(eventObject:Event):void {
  var nRotationY:Number = (mouseX - nX) * nDeceleration;
  var nRotationX:Number = (mouseY - nY) * nDeceleration;
  myMatrix3D.appendTranslation(-nX, -nY, 0);
  myMatrix3D.appendRotation(nRotationY, Vector3D.Y_AXIS);
  myMatrix3D.appendRotation(nRotationX, Vector3D.X_AXIS);
  myMatrix3D.appendTranslation(nX, nY, 0);
  xSetOrder();
}
function xSetOrder():void {
  var faces_array:Array = new Array();
  var nChildren:uint = mySprite.numChildren;
  for (var i:uint = 0; i < nChildren; i++) {
    faces_array.push(mySprite.getChildAt(i));
  }
  faces_array.sort(compare);
  for (var j:uint = 0; j < nChildren; j++) {
    var faceSprite:Sprite = faces_array[j];
    mySprite.setChildIndex(faceSprite, j);
  }
}
function compare(a:Sprite, b:Sprite):Number {
  var nA:Number = a.transform.getRelativeMatrix3D(this).position.z;
  var nB:Number = b.transform.getRelativeMatrix3D(this).position.z;
  if (nA < nB) {
    return 1;
  } else if (nA > nB) {
    return -1;
  } else {
    return 0;
  }
}

2面から4面に増やし,垂直回転を加える作業はあっけなかった。この実習からわかるように,まず仕組みや構成を初めによく考えておくことが大切だ。そしてつぎに,1面から2面,そして4面というように,簡単なつくりから,順を追って複雑にすることである。

フォーラムなどで,いきなり6面体を上下左右に回そうとして,どうしたらいいかわかりません,というような質問がある。しかも往々にして,スクリプトはどこかのサンプルのコピー&ペーストで,中身がわかっていなかったりする。遠回りなようでも,理解と試行をひとつひとつ着実に積重ねていくことが王道だろう。

3次元空間の扱いはこの後インスタンスというモノでなく,座標を使ったメモリ上の処理に移る。しかしその前に旬のお題として,Flash Professional CS5から加わったText Layout Frameworkによる新しいテキストの扱いを解説しよう。

今回解説した次のサンプルファイルがダウンロードできます。

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入