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

第50回 立方体の4面にテクスチャを貼って上下左右に回す

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

4つの面の塗り順を並べ替える

さて,4つの面の塗り順を並べ替えるのが,今回のメインイベントになる。とはいえ,面の中心のz座標値で前後を決めるという考え方は,前述のとおり第38回「z座標値に応じて重ね順を変える」と同じだ。ただ,扱うオブジェクトが目に見えるDisplayObject(のサブクラスの)インスンスから,目に見えない座標や数値のデータに変わる。したがって,それに応じて処理の仕方も工夫しなければならない。

改めて確認しておきたいのは,このテクスチャマッピングのスクリプトでは,基本的に座標値のデータは初期設定のままいじらないということだ。3次元空間の座標変換はMatrix3Dオブジェクト(worldMatrix3D)に加える(第48回テクスチャに遠近法を適用する - uvt座標の指定「Utils3D.projectVectors()メソッドを使う」参照⁠⁠。今回もこの基本は変えない。並べ替えるのは,頂点番号の組を納めたVectorオブジェクト(indices)のエレメントのみとする。

三角形の頂点番号が納められたVectorオブジェクト(indices)は,エレメントをつぎのような流れで並べ替えよう。

  1. 4面の中心座標をMatrix3Dオブジェクト(worldMatrix3D)で変換する。
  2. 変換された中心座標のzの値により四角形4面の並び順を決める。
  3. 4面の順にしたがって頂点番号のVectorオブジェクトのエレメントを並べ替える。

考えどころは上述2.だ。中心座標と四角形の4面は,それぞれ異なるVectorオブジェクト(centersとfaces)に納められている。これらをどう組み合わせるかについては,いくつかの手が考えられよう。

今回は面の数も少ないので,変換した中心座標のVector3Dオブジェクトとそれに対応する面の4頂点番号のVectorオブジェクト(uintベース型)を配列に入れ,Arrayベース型のVectorオブジェクトに納めることにする。そのうえで,Vectorオブジェクトの配列エレメントを,中心座標のzの値で並べ替えればよい。Vector.sort()メソッドの引数には,Array.sort()メソッドと同じ比較関数が渡せる(比較関数については,第24回インスタンスの管理と配列の並べ替え「インスタンスの重ね順を管理する」参照⁠⁠。三角形の頂点番号の組を並べ替える関数(xSetOrder())はつぎのとおりだ。

function xSetOrder():void {
  var transformedFaces:Vector.<Array> = new Vector.<Array>();
  for (var i:uint = 0; i < nFaces; i++) {
    var transformedVector3D:Vector3D = worldMatrix3D.transformVector(centers[i]);
    transformedFaces[i] = [transformedVector3D, faces[i]];
  }
  transformedFaces.sort(compare);
  indices.length = 0;
  for (var j:uint = 0; j < nFaces; j++) {
    addRectangleIndices(transformedFaces[j][1]);
  }
}
function compare(a:Array, b:Array):Number {
  var nA:Number = a[0].z;
  var nB:Number = b[0].z;
  if (nA < nB) {
    return 1;
  } else if (nA > nB) {
    return -1;
  } else {
    return 0;
  }
}

まず,ひとつ目のforステートメントでは,回転した後の各面の中心座標のVector3Dオブジェクト(transformedVector3D)Matrix3D.transformVector()メソッドで求め,対応する面とともに配列に入れたうえで,Arrayベース型のVectorオブジェクト(transformedFaces)に加えるMatrix3D.transformVector()メソッドについては, 第42回Vector3Dクラスの3次元空間座標とインスタンスへの描画「Vector3DインスタンスをMatrix3Dオブジェクトで座標変換する」参照⁠⁠。

つぎに,変換した中心座標と面の配列が納められたVectorオブジェクト(transformedFaces)に対して,Vector.sort()メソッドを呼出す。引数の比較関数(compare())は,エレメントの配列から中心座標のVector3Dオブジェクトを取出して,そのz座標値で並べ替えている。

そして,ふたつ目のforステートメントが,中心のz座標値で並べ替えたVectorオブジェクトから面の(頂点番号の)Vectorオブジェクトを順に取出し,関数(addRectangleIndices())により三角形の頂点番号に置き換えて,新たなVectorオブジェクト(indices)にエレメントとして加える。なお,Vector.lengthプロパティを0に設定すると,すべてのエレメントが削除されて空のVectorオブジェクトになる。

これで,Graphics.drawTriangles()メソッドの第2引数に渡す頂点番号のVectorオブジェクト(indices)は,各面のz座標値にしたがって並べ替えられる。水平に回る立方体の見た目は,前回のスクリプト2と同じだ。しかし,カリングはしていない第49回図4再掲⁠⁠。面の塗り順が正しく設定されたということだ。これで水平の回転はできあがったので,フレームアクション全体をスクリプト2に掲げる。

function xRotate(eventObject:Event):void {
  var nRotationY:Number = mySprite.mouseX * nDeceleration;
  var vertices2D:Vector.<Number> = new Vector.<Number>();
  xTransform(vertices2D, nRotationY);
  xSetOrder();   // 追加
  xDraw(vertices2D);
}

第49回図4 カリングによって手前向きの面だけが表示される(再掲)

第49回図4 カリングによって手前向きの面だけが表示される(再掲) 第49回図4 カリングによって手前向きの面だけが表示される(再掲)

スクリプト2 3次元空間で水平に回す立方体の4面にテクスチャマッピング(完成)

// フレームアクション
var nUnit:Number = 100 / 2;
var mySprite:Sprite = new Sprite();
var myTexture:BitmapData = new Image();
var vertices:Vector.<Number> = new Vector.<Number>();
var indices:Vector.<int> = new Vector.<int>();
var uvtData:Vector.<Number> = new Vector.<Number>();
var nDeceleration:Number = 0.3;
var myGraphics:Graphics = mySprite.graphics;
var myPerspective:PerspectiveProjection = transform.perspectiveProjection;
var worldMatrix3D:Matrix3D = new Matrix3D();
var viewMatrix3D:Matrix3D = myPerspective.toMatrix3D();
var nFaces:uint = 4;
var faces:Vector.<Vector.<uint>> = new Vector.<Vector.<uint>>();
var centers:Vector.<Vector3D> = new Vector.<Vector3D>();
faces.push(new <uint>[0, 1, 2, 3]);
faces.push(new <uint>[1, 5, 6, 2]);
faces.push(new <uint>[5, 4, 7, 6]);
faces.push(new <uint>[4, 8, 9, 7]);
centers.push(new Vector3D(0, 0, -nUnit));
centers.push(new Vector3D(nUnit, 0, 0));
centers.push(new Vector3D(0, 0, nUnit));
centers.push(new Vector3D(-nUnit, 0, 0));
viewMatrix3D.prependTranslation(0, 0, myPerspective.focalLength);
mySprite.x = stage.stageWidth / 2;
mySprite.y = stage.stageHeight / 2;
vertices.push(-nUnit, -nUnit, -nUnit);
vertices.push(nUnit, -nUnit, -nUnit);
vertices.push(nUnit, nUnit, -nUnit);
vertices.push(-nUnit, nUnit, -nUnit);
vertices.push(-nUnit, -nUnit, nUnit);
vertices.push(nUnit, -nUnit, nUnit);
vertices.push(nUnit, nUnit, nUnit);
vertices.push(-nUnit, nUnit, nUnit);
vertices.push(-nUnit, -nUnit, -nUnit);
vertices.push(-nUnit, nUnit, -nUnit);
for (var i:uint = 0; i < nFaces; i++) {
  addRectangleIndices(faces[i]);  
}
uvtData.push(0, 0, 0);
uvtData.push(1/4, 0, 0);
uvtData.push(1/4, 1, 0);
uvtData.push(0, 1, 0);
uvtData.push(3/4, 0, 0);
uvtData.push(2/4, 0, 0);
uvtData.push(2/4, 1, 0);
uvtData.push(3/4, 1, 0);
uvtData.push(1, 0, 0);
uvtData.push(1, 1, 0);
addChild(mySprite);
addEventListener(Event.ENTER_FRAME, xRotate);
function xRotate(eventObject:Event):void {
  var nRotationY:Number = mySprite.mouseX * nDeceleration;
  var vertices2D:Vector.<Number> = new Vector.<Number>();
  xTransform(vertices2D, nRotationY);
  xSetOrder();   // 追加
  xDraw(vertices2D);
}
function xTransform(vertices2D:Vector.<Number>, myRotation:Number):void {
  worldMatrix3D.prependRotation(myRotation, Vector3D.Y_AXIS);
  var myMatrix3D:Matrix3D = worldMatrix3D.clone();
  myMatrix3D.append(viewMatrix3D);
  Utils3D.projectVectors(myMatrix3D, vertices, vertices2D, uvtData);
}
function xDraw(vertices2D:Vector.<Number>):void {
  myGraphics.clear();
  myGraphics.beginBitmapFill(myTexture);
  myGraphics.drawTriangles(vertices2D, indices, uvtData);
  myGraphics.endFill();
}
function addRectangleIndices(face:Vector.<uint>):void {
  indices.push(face[0], face[1], face[3]);
  indices.push(face[1], face[2], face[3]);
}
// 頂点番号で定める面の順序を並べ替える
function xSetOrder():void {
  var transformedFaces:Vector.<Array> = new Vector.<Array>();
  for (var i:uint = 0; i < nFaces; i++) {
    var transformedVector3D:Vector3D = worldMatrix3D.transformVector(centers[i]);
    transformedFaces[i] = [transformedVector3D, faces[i]];
  }
  transformedFaces.sort(compare);
  indices.length = 0;
  for (var j:uint = 0; j < nFaces; j++) {
    addRectangleIndices(transformedFaces[j][1]);
  }
}
function compare(a:Array, b:Array):Number {
  var nA:Number = a[0].z;
  var nB:Number = b[0].z;
  if (nA < nB) {
    return 1;
  } else if (nA > nB) {
    return -1;
  } else {
    return 0;
  }
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書