スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
公開: --年--月--日, カテゴリ: スポンサー広告

Plane要素(面)の組み合わせによる立方体オブジェクト

patpat氏が公開したkara boxというテーマからはじまり、その後様々なCTFで採り入れられているPlane要素を組み合わせた立方体オブジェクトについて、この記事ではどのように『面』を組み合わせて立方体を組み立てているのかをkara boxを参考にして調べていく。

立方体の展開

別図1: 立方体
別図1: 立方体

PSP上で表示されるイメージ、テキスト等のオブジェクトはリソースファイル(*.rco)によるものに限れば、これらは全て『平面』で捉えることができる。これは別にレイヤー(層)と言い換えても構わない。奥行きのある立体的なオブジェクトを表現するためには別図1のごとく複数の面を、立方体であれば正方形の面を6枚組み合わせる必要がある。

さて、早速ここでkara boxのsystem_plugin_bg.rcoファイルのソースを確認してみよう。以下に示すのはPlane要素の組み合わせを表している。

box_plane
    +- x_plane
    |    +- 1_plane
    |    +- 2_plane
    |
    +- y_plane
    |    +- 3_plane
    |    +- 4_plane
    |
    +- z_plane
         +- 5_plane
         +- 6_plane

上記のように10種類のPlane要素により立方体が組み上げられている。実際にイメージを置換しているのは1_planeから6_planeまでの6つでありそれぞれ2つずつ集まって3つのペアになっているのが分かる。これらはX方向、Y方向、Z方向にそれぞれ2つずつ展開することができる。

別図2: 立方体の展開
別図2: 立方体の展開

別図1で示した立方体をX,Y,Z方向に展開すると別図2のごとく表すことができる。

ソースを確認すると分かるが、これらの面は全て同じ大きさの正方形で異なるのはそれぞれの初期配置座標のみだ。では、どのようにしてX,Y,Z方向に組み合わせているのだろうか。これらはPlane要素だけでは実現できないためRotate要素というアニメーション系統に分類される要素を利用することになる。

さて、立方体の展開はここまでにして次章からはソースを参考にして立方体を組み立てていく。

立方体の組立

先に共通する条件を挙げておく。1_planeから6_planeまでの面の大きさは全てwidth="100" height="100"とする。また、立方体の中心座標はposX="0" posY="0"とする。

X軸の面(x_plane)とY軸の面(y_plane)

別図3: x_planeの組立
別図3: x_planeの組立

x_planeとy_planeはどちらも同じようなつくりをしている。それぞれは面の配置の仕方とRotate要素による傾きの起点となる軸が異なっている。

まずx_planeについて。x_planeを組み立てているのは1_plane及び2_planeで、それぞれはX軸線上にちょうど重なり合わない位置に並べられている。この面はY軸方向にはずらさない。posX="0" posY="0"を中心にしてwidth="100" height="100"の面を並べたいのでそれぞれの面は50ずつずらせばよい。つまり、1_planeはposX="50" posY="0"、2_planeはposX="-50" posY="0"となる。

そして、この並べられた面をRotate要素で90度傾ければx_planeは完成する。Rotate要素で傾けるときには回転方向に注意しておくこと。別図3で示しているように外側へ開くように(観音開きのような形に)すればよい。もしこれを逆にしてしまうと置換されたイメージが裏返って表示されてしまう。回転方向はプラスの値では反時計回りマイナスの値では時計回りとなる。従って、以下の通りに記述すればよい。

<Rotate object="object:1_plane" duration="0" accelMode="0x0" x="0" y="1.57" z="0" />
<Rotate object="object:2_plane" duration="0" accelMode="0x0" x="0" y="-1.57" z="0" />

次にy_planeについて。これはx_planeでやったことを方向を変えてやるだけでいい。初期配置として3_plane及び4_planeをposX="0" posY="0"を中心にしてY軸線上にちょうど重なり合わない位置、つまり3_planeはposX="0" posY="50"、4_planeはposX="0" posY="-50"へと配置する。そして、以下に示すとおりRotate要素でX軸を起点にして90度分傾ける。

<Rotate object="object:3_plane" duration="0" accelMode="0x0" x="1.57" y="0" z="0" />
<Rotate object="object:4_plane" duration="0" accelMode="0x0" x="-1.57" y="0" z="0" />

Z軸の面(z_plane)

別図4: z_planeの組立
別図4: z_planeの組立

z_planeはx,y_planeと同じ要領では上手くいかない。何故ならどのように傾けようとも面に奥行き(または深さ)を与えることはできないからだ。それならば5_planeと6_planeの共通の土台ごと傾ければよい。実は、z_planeとはこのために用意された見えない面(層)なのだ。

Plane要素を入れ子にするとその全ての子要素は親要素のパラメータに影響されるようになる。変なたとえだが、下敷きの上に消しゴムを2個置いて下敷きを動かせばどうなるのかを想像してみるといい。このとき消しゴムも同時に動くはずだがそれは消しゴムが移動しているのではなく下敷きが移動しているからだ。下敷きを回転させれば消しゴムも同じようについてくるだろう。この時下敷きがz_planeで消しゴムが5,6_planeである。ちなみにRecolourの効果は継承しない。下敷きに絵の具を塗りたくっても消しゴムの色は変わらないだろう? それはさておき。

別図4を参考にすると、まずはx_planeと同様に5_planeと6_planeを配置し、Rotate要素により90度傾ける。

<Rotate object="object:5_plane" duration="0" accelMode="0x0" x="0" y="1.57" z="0" />
<Rotate object="object:6_plane" duration="0" accelMode="0x0" x="0" y="-1.57" z="0" />

そして親要素であるz_planeをRotate要素により90度傾ける。

<Rotate object="object:z_plane" duration="0" accelMode="0x0" x="0" y="-1.57" z="0" />

このようにすることで別図4の状態が出来上がるわけだ。また、z_planeの回転方向は別図4では半時計方向を示しているがこれは別に時計方向でも構わない。どちらにしても表裏はひっくり返らないからだ。

まとめ

以上でx,y,z_planeは別図2の状態となる。そしてそれらを組み合わせることで最初に示した別図1のような立方体は完成する。

kara boxではこうして組み上げた立方体の親要素であるPlane[name="box_plane"]をRotate要素で回転させFireEvent要素でループ処理させることであのような表現をしている。

あとはこれをどう扱うかはユーザー次第。今回の例では最初から立方体は完成形で表示されるが、初期配置をばらばらな座標に設定し、その状態から時間差をつけて立方体をつくれば散らばった面の集合を表現できるだろう。実際にそのようなアニメーションが組み込まれているテーマがある

さて、このようにz_planeを組み立てるためにはx,y_planeより少しだけ手間が掛かるが、実を言うとz_planeはRotate要素で傾ける必要が無いことが判っている。kara boxが公開された時期にはまだ判明していなかったがオブジェクトの座標はZ軸線上にも配置することができる。そこで次の機会ではツェネダ氏が公開している5.50系CTF制作キットのsystem_plugin_bg.rcoファイルのソースをサンプルとしてその仕組みを調べていこう。

続く:

公開: 2011年05月05日, カテゴリ: 雑談・小ネタ・資料集