flash
マクロスFのシェリルのCGっぽいのをFlashで書く
こういうやつ。
ライブシーンとかでたまに出てくる映像エフェクト。
なんかカッコいいよねぇ。
これをPaperVision3Dで、基本的なところを書くとこんな感じ。
SherylEffect (要FlashPlayer10)
ソースはこんな感じ。
package {
import flash.display.StageAlign;
import flash.display.StageQuality;
import flash.display.StageScaleMode;
import flash.events.Event;
import org.papervision3d.core.math.NumberUV;
import org.papervision3d.materials.BitmapFileMaterial;
import org.papervision3d.objects.DisplayObject3D;
import org.papervision3d.objects.primitives.Plane;
import org.papervision3d.view.BasicView;
[SWF(width="800", height="500",backgroundColor="0x000000")]
public class SherylEffect extends BasicView {
private static var NUM_FACES_W:uint = 10;
private static var NUM_FACES_H:uint = 10;
private var basePlane:DisplayObject3D;
private var texture:BitmapFileMaterial;
private var sizeW:Number;
private var sizeH:Number;
private var planes:Array;
public function SherylEffect() {
super(0,0,true,true,"Target");
init();
}
private function init():void {
stage.frameRate = 60;
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.quality = StageQuality.MEDIUM;
camera.x = 0;
camera.y = 0;
camera.z = -1200;
camera.fov = 35;
this.basePlane = new DisplayObject3D();
scene.addChild(this.basePlane);
createFaces();
startRendering();
}
override protected function onRenderTick(event:Event=null):void {
this.basePlane.yaw(1);
if (this.planes.length == NUM_FACES_W * NUM_FACES_H) {
movePlanes();
}
super.onRenderTick(event);
}
private function movePlanes():void {
for (var i:uint = 0; i < NUM_FACES_H; i++) {
for (var j:uint = 0; j < NUM_FACES_W; j++) {
var plane:Plane = this.planes[i * NUM_FACES_W + j];
plane.x = (this.sizeW + .2 * Math.abs(this.basePlane.rotationY) * j;
plane.y = (this.sizeH + .2 * Math.abs(this.basePlane.rotationY) - texture.bitmap.height / 2) * i;
}
}
}
private function createFaces():void {
this.texture = new BitmapFileMaterial("penpen.png");
texture.doubleSided = true;
this.planes = new Array();
BitmapFileMaterial.callback = onLoadTexture;
}
private function onLoadTexture():void {
this.sizeW = texture.bitmap.width / NUM_FACES_W;
this.sizeH = texture.bitmap.height / NUM_FACES_H;
for (var i:uint = 0; i < NUM_FACES_H; i++) {
for (var j:uint = 0; j < NUM_FACES_W; j++) {
var plane:Plane = new Plane(texture, this.sizeW, this.sizeH);
this.basePlane.addChild(plane);
plane.x = this.sizeW * j;
plane.y = this.sizeH * i - texture.bitmap.height / 2;
plane.z = 0;
plane.geometry.faces[0].uv = [new NumberUV(sizeW * j / texture.bitmap.width,
sizeH * i / texture.bitmap.height),
new NumberUV(sizeW * (j + 1) / texture.bitmap.width,
sizeH * i / texture.bitmap.height),
new NumberUV(sizeW * j / texture.bitmap.width,
sizeH * (i + 1) / texture.bitmap.height)];
plane.geometry.faces[1].uv = [new NumberUV(sizeW * (j + 1) / texture.bitmap.width,
sizeH * (i + 1) / texture.bitmap.height),
new NumberUV(sizeW * j / texture.bitmap.width,
sizeH * (i + 1) / texture.bitmap.height),
new NumberUV(sizeW * (j + 1) / texture.bitmap.width,
sizeH * i / texture.bitmap.height)];
this.planes.push(plane);
}
}
}
}
}
ポイントは、後半のonLoadTextureでグルグルfor分で回しているところです。
テクスチャとして使うpenpen.pngを分割して、個別のPlaneオブジェクトに貼りつけています。
plane.geometry.faces[0].uvが1枚の四角のうち左下半分を、plane.geometry.faces[1].uvが右上半分のポリゴンを表現します。
ここで指定しているNumberUVの配列は、左下半分のポリゴンが、左下, 右下, 左上、右上半分のポリゴンが、右上, 左上, 右下のポイントを指定しています。
これは、0から1までの値で表現するため、全部テクスチャのサイズで割ります。
これを分割数分ぐるぐる回して、テクスチャをざくざく分割しちゃいます。
んで、movePlanesで書いているように、フレーム毎にそれぞれのPlaneをplane.x、plane.yプロパティを調整してちょっとずつづらすと、分割したテクスチャがばらけてそれっぽいエフェクトになります。
z位置も調整するとよりそれっぽい動きになると思います。
こういう整然と動くエフェクトって単純だけど好き。
なんかカッコいいよねぇ。
