文字列の円運動‐Papervision3Dのお勉強(9)‐
※外部ライブラリ学習シリーズの目次はこちらです。
※使用しているPapervision3DのバージョンはPublic Beta 2.0 - Great Whiteです。
前回は球体を円運動させましたが、今回は文字列を円運動させてみます。
文字列を一文字ずつ抽出してそれぞれを一つずつのオブジェクトとし、円状に並べて、ぐるぐる回してみました。
Papervision3Dの学習というよりはActionScript3.0の学習といった感じです。
文字列の分解
まずは表示する文字列をString型として生成し、for文にてcharAt関数を使用して一文字ずつ抽出します。 そして抽出した文字毎にText3Dクラスを生成します。
また、このときに一緒に文字毎の角度も計算しておきます。
円は1周360度のため、たとえば10文字あるならそれぞれに
0度、36度、72度、108度、144度、180度、216度、252度、288度、324度
を初期値として設定します。
コードにて文字列の後ろから順番に抽出しているのは、右回しの回転だからです。
後ほど出てくるActionScriptのコードでは主に以下の部分が該当します。
-----------26行目～28行目-----------
private var degrees_arr:Array = new Array();//角度格納用配列
private var text_arr:Array = new Array();//文字格納配列
private var text_str:String = "SEISYUN-B CREATIVE LIFE RECOMMENDATION ";//表示文字列
-----------53行目～58行目-----------
//文字の分解とText3Dインスタンス生成
for(var i:int = 0 ; i < text_str.length ; i++){
text_arr.push(new Text3D(text_str.charAt(text_str.length - i -1) , new HelveticaBold() , letterformat));
degrees_arr.push(i * 360 / text_str.length);//角度を均等に分割
scene.addChild(text_arr[i]);
}
文字の回転
続いて、それぞれのText3Dインスタンスの回転処理です。 x座標とy座標の計算については前記事物体の円運動(三角関数の使い方)‐Papervision3Dのお勉強(8)‐にて書いた処理と同様です。
今回はx座標とy座標の変更に加えて、文字の向きも角度に沿うようにしました。
文字毎に今いる角度に合わせてrotationYパラメータをいじっています。
コード内にて現角度に180を加算しているのは、180度地点にいるときに正面を向かせるためです。
ただ、今回、ここで問題が一つ発生しまして……
文字の角度が90度～270度のとき、つまりは文字がこちらに背を向けているとき、描画がなされなかったのです。
Papervision3Dの仕様なのか、それともわたしのコードミスなのかわからないのですが。
(もしも原因をご存知の方がいればご連絡いただけると嬉しいです)
ということで今回は、かなり強引なのですが、scaleX(横倍率)を位置によって-1(つまり裏表反転)とすることで文字反転を表現しています。
これでもまだ、角度80度付近と280度付近がうまく描画されていないのですが……。
後ほど出てくるActionScriptのコードでは以下のfor文部分が該当します。
-----------66行目～84行目-----------
//各文字の座標及び角度計算と角度の増加
for(var i:int = 0 ; i < text_str.length ; i++){
text_arr[i].x = Math.sin(degrees_arr[i] * Math.PI/180) * diameter_int + basicx_int;
text_arr[i].z = Math.cos(degrees_arr[i] * Math.PI/180) * diameter_int + basicz_int;
//rotationYにおいての文字の反転が行えなかったため、scaleXを位置によって変更することで反転表示に対応
if(degrees_arr[i] > 90 && degrees_arr[i] < 270){
text_arr[i].rotationY = degrees_arr[i] + 180;
text_arr[i].scaleX = 1;
}
else{
text_arr[i].rotationY = degrees_arr[i];
text_arr[i].scaleX = -1;
}
degrees_arr[i] += speed_int;
degrees_arr[i] %= 360;
}
結果
ちょっと読みづらいですがSEISYUN-B CREATIVE LIFE RECOMMENDATION
という文字列がぐるぐる回っています。
ソース
ソースのダウンロードはこちらからどうぞ(flaファイルはasファイルをドキュメントクラス指定しているだけです)。
次回はさらにさらに円運動について、そして、物体のネスト(入れ子)について学習する予定です。
文字列の円運動2(表示物のネスト)‐Papervision3Dのお勉強(10)‐へ。
物体の円運動(三角関数の使い方)‐Papervision3Dのお勉強(8)‐へ。