2009年6月アーカイブ

SWF以外の部分をクリックしたらポーズさせるための小技をご紹介します。
デスクトップなどブラウザウィンドウ外をクリックした場合も含みます。
下記のようにTextFieldのFocusEventを使うところがポイントです。

package {
	import flash.display.Sprite;
	import flash.events.FocusEvent;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	public class DocumentClass extends Sprite {
		private var debugTF:TextField ;
		public function DocumentClass() {
			//デバッグ用のテキスト
			debugTF = createTextField(600, 20, 0, 0, "はじめにここをクリックしてSWFにフォーカスを移してください。");
			addChild(debugTF);
			//フォーカス検知用テキストフィールド
			var focusTF:TextField = new TextField();
			//ステージ全体を覆うサイズにする
			focusTF.width = stage.stageWidth;
			focusTF.height = stage.stageHeight;
			focusTF.selectable = false;
			focusTF.addEventListener(FocusEvent.FOCUS_IN, onFocusIn);
			focusTF.addEventListener(FocusEvent.FOCUS_OUT, onFocusOut);
			//必ず最上位レイヤーに配置
			addChildAt(focusTF, this.numChildren);
		}
		//ポーズ処理
		private function onFocusOut(e:FocusEvent):void {
			debugTF.text = "SWFからフォーカスが外れたのでポーズ中。灰色のエリアをクリックすると再開します。";
		}
		//再開処理
		private function onFocusIn(e:FocusEvent):void {
			debugTF.text = "SWFにフォーカス中。画面外をクリックするとポーズ状態になります。";
		}
		private function createTextField(w, h, x, y, str):TextField {
			var tf:TextField = new TextField;
			tf.width = w;
			tf.height = h;
			tf.x = x;
			tf.y = y;
			tf.text = str;
			tf.selectable = false;
			return tf;
		}
	}
}

・サンプルSWF
・ソースファイル

2009/09/28追記:
わざわざTextFieldなんか使わなくても、Event.ACTIVATE と Event.DEACTIVATE 使えば済むね。

例えば、ゲームのセーブデータをサーバで保存していて
「アイテム1個持ってます」という情報をSWFで受け取る場合、
SWFに届く前に「アイテム100個持ってます」に改竄されるとまずいということで暗号化することにしました。

RSA暗号は「暗号」と「署名」の2つの使い方ができます。
▼暗号
公開鍵を使って誰でも暗号化できるが、復号できるのは秘密鍵を持っている人だけ。
SWFからサーバに送るデータを途中で読み取られないようにする場合などに使うと思います。
SWFに埋め込んだ公開鍵で暗号化して送り、サーバ側にある秘密鍵で解読というような使い方。
こちらが参考になります:suz-lab - blog: AS3で暗号/復号化(RSA版)
▼署名
秘密鍵を使って暗号化したデータを、公開鍵で復号する。
暗号文を復号した結果が平文と同じなら、正しい送り主からのデータであり改竄されていないということになる。
今回はこちらを使います。
サーバ側で秘密鍵を使って暗号化し、SWF側で公開鍵を使って復号するという流れ。

暗号化ライブラリはas3cryptoを使います。
下記がサンプルソースですが、
実際には【2】の処理はサーバ側で行い、SWF側では【1】と【3】を実装することになります。

import flash.utils.ByteArray;
import com.hurlant.crypto.rsa.RSAKey;
import com.hurlant.util.Base64;
import com.hurlant.util.Hex;
public function CryptTest() {
	// 暗号化の対象となる文字列
	var original_str:String = "アイテム1個持ってます"; 
	//------------------------
	//【1】復号用の公開鍵
	var public_modulus:String= 
"f0bc13f68e0c02397af4aeaf2edc94f92e94945eea1f745235ff05ff16e9b6490267b9"
+"82b22c6aff4b6887fc89e7d92d8a2254c7f4c2fb7a116478f875dc8da5";
	var public_exponent:String = "10001";
	//------------------------
	//【2】↓ここからは、サーバ側でやる処理ですがサンプルということで載せてます。
	//暗号化用の秘密鍵
	var private_exponent:String= 
"de6f3a16e7bb4ad6e7b86c2bec25def4bb48882b8732971d5b4d0fb25aee8a00f2fd"
+"6987d1ca990846b50e70be386867be09b64840157c0d7d451d91ccc92e21";
	var rsa_sign:RSAKey = RSAKey.parsePrivateKey(public_modulus, public_exponent, private_exponent);
	//ByteArrayに
	var srcEncryptBA:ByteArray = Base64.decodeToByteArray(Base64.encode(original_str)); 
	//暗号化したデータを格納するためのByteArray
	var dstEncryptBA:ByteArray = new ByteArray();
	//暗号化実行
	rsa_sign.sign(srcEncryptBA, dstEncryptBA, srcEncryptBA.length);
	//暗号化されたデータをBase64エンコード
	var encrypted_str:String = Base64.encodeByteArray(dstEncryptBA);
	trace("暗号化済み文字列。これをSWFに返す。" + encrypted_str);
	//↑ここまで、サーバ側でやる処理
	//------------------------
	//【3】復号
	var rsa_verify : RSAKey= RSAKey.parsePublicKey(public_modulus, public_exponent);
	var srcDecryptBA:ByteArray = Base64.decodeToByteArray(encrypted_str);
	//復号したデータを格納するためのByteArray
	var dstDecryptBA:ByteArray = new ByteArray();
	//復号実行
	try{
		rsa_verify.verify(srcDecryptBA, dstDecryptBA, srcDecryptBA.length);
		trace("復号した文字列:" + dstDecryptBA.toString());
		if(dstDecryptBA.toString()==original_str){
			trace("改竄なし");
		}else{
			trace("改竄あり");
		}
	}catch (e) {
		trace("verify失敗。不正なデータ。");
	}
	rsa_verify.dispose();
}

鍵の生成はAS3 Crypto Demo pageでやると簡単。

余談:「暗号化」の対義語は「復号化」ではなく「復号」なんだって。

追記:(09/06/15 02:50)
もっと厳しくやるには、タイムスタンプを含めておいてサーバ時間と比較しないといけないかも。
「アイテム1個持ってます」というサーバレスポンスを解析保存され
アイテム0個の時にそのデータを送り込まれる、ということを防ぐために。
素直にSSL使えば何も考えなくていいのかな。


FLV動画をマテリアルにする場合は、VideoStreamMaterial()を使います。

//FLV読み込み
var nc:NetConnection = new NetConnection();
nc.connect(null);
var ns: NetStream = new NetStream(nc);
var video:Video = new Video();
video.attachNetStream(ns);
ns.client = {};
ns.play("http://kyucon.com/nekotv/012.flv");
//マテリアル生成
var material:VideoStreamMaterial = new VideoStreamMaterial(video,ns);
//平面にマテリアルを適用
plane = new Plane( material, 320, 240);
scene.addChild(plane);

・サンプルSWF
・ソースファイル


オブジェクト同士の接触判定はhitTestObject()で可能です。

if(objA.hitTestObject(objB)){
	//接触している
}

ただしバウンディングボックス同士での判定なので、
形状によっては本当は当たってないのにtrueになったりします。
回転やスケールを変えてもバウンディングボックスは変化しないようです。
正確に判定したい場合は自前で実装するしかないですね。
・サンプルSWF
・ソースファイル

関連する情報として下記があります。
DisplayObject3D.geometry.boundingSphere バウンディングスフィア情報
DisplayObject3D.geometry.aabb ローカル座標軸に沿ったバウンディングボックス情報
Vertices3D.boundingBox() ローカル座標でのバウンディングボックス情報
Vertices3D.worldBoundingBox() グローバル座標でのバウンディングボックス情報


被写界深度のぼかし表現をシンプルに再現してみます。
ポイントは下記です。
・ぼかしをかける対象となるVieportLayerをviewport.getChildLayer()を使って作成。
・カメラからオブジェクトまでの距離はcamera.distanceTo()を使って求める。
・距離に応じてVieportLayerにBlurFilterをかける。

//ぼかし対象となるビューポートレイヤーを格納する配列
private var layers:Array = [];
//カメラから注視点までの距離(この距離にある物が一番はっきり見える)
private var offset:Number = 1000;
//レンダリングのたびに更新
override protected function onRenderTick(event:Event):void {
 for (var i:uint = 0; i < layers.length; i++) {
  //注視点からオブジェクトまでの距離
  var distance:Number=Math.abs(camera.distanceTo(layers[i].displayObject3D)-offset);
  //距離に応じてぼかし量を調節
  var v:uint = Math.min(30, distance* 0.02);
  //ViewportLayerにフィルターを掛ける
  layers[i].filters = [new BlurFilter(v,v,2)];
 }
}
・サンプルSWF ・ソースファイル


頂点を指定してポリゴンを作成するには下記のようにします。

//メッシュのマテリアル
var material:ColorMaterial = new ColorMaterial(0x00AA00);
//メッシュを作成
mesh = new TriangleMesh3D(material, [], []);
scene.addChild( mesh );
//頂点作成
var v0:Vertex3D = new Vertex3D(-25, 0, 0 ) ;
var v1:Vertex3D = new Vertex3D(25, 0, 0 ) ;
var v2:Vertex3D = new Vertex3D(0, 50, 0 );
//表面からみて反時計周りになるように頂点を選ぶ
var vertices:Array = [v0, v1, v2];
//メッシュに頂点の配列を追加
mesh.geometry.vertices=vertices;
//メッシュに面を追加
mesh.geometry.faces.push( new Triangle3D(mesh, vertices));
//頂点の法線計算実行(やらなくても支障ないかも、シェーディングに使うのかな)
mesh.geometry.ready = true;
・サンプルSWF ・ソースファイル

BitmapViewportMaterialを使うとBitmapViewport3Dをテクスチャにすることができます。
別のカメラで映している景色を壁面に投影したい時や、または鏡の表現を行う時などに使います。

//ビューポート生成
bmpView= new BitmapViewport3D(600, 600, false, false, 0xeeeeee);
//ビューポートをマテリアル化
var material:BitmapViewportMaterial = new BitmapViewportMaterial(bmpView);
//平面のマテリアルとして適用
var plane:Plane= new Plane(material, 200, 200);
//レンダリングのたびに更新
override protected function onRenderTick(event:Event = null):void {
 //cameraで映したsceneをbmpViewにレンダリング
 renderer.renderScene(scene, camera, bmpView);
 super.onRenderTick();
}
・サンプルSWF ・ソースファイル


ReflectionViewを継承することで、床(XZ平面)の反射表現を行えます。

public class World extends ReflectionView{
 public function World(){
  super(600, 600, false);
  //鏡面のY座標を設定
  surfaceHeight = -100;
  //鏡面の色を調整
  setReflectionColor(0.7, 0.7, 0.7);
  //鏡面をぼかしたい場合は下記フィルターを使う
  viewportReflection.filters = [new BlurFilter(10,10,2)]; 
 }
}
・サンプルSWF ・ソースファイル


残像エフェクトをかける場合は、通常のViewport3Dは使わずに
BitmapViewport3Dクラスを使います。このエフェクトは描画負荷がかなり高いです。

//BitmapViewport3Dを生成
viewport = new BitmapViewport3D(600, 600, true, true, 0xcccccc);
addChild(viewport);
//残像効果を描画するためには下記をfalseにする
viewport.fillBeforeRender = false;
そして、レンダリングのたびに残像をぼかす処理と徐々に消す処理を行う
override protected function onRenderTick(event:Event = null):void {
 var bmd:BitmapData=viewport.bitmapData;
 //残像をぼかす
 bmd.applyFilter(bmd, bmd.rect, point, blur);
 //古い残像が消えていくように
 bmd.colorTransform(bmd.rect, alphaTrans);
 super.onRenderTick();
}

・サンプルSWF
・ソースファイル


ベクターデータの文字を表示したい時はText3Dクラスを使います。

//マテリアル生成(色とアルファ指定)
var textMaterial:Letter3DMaterial = new Letter3DMaterial(0xFF0000,1);
//フォント生成
var font:HelveticaBold = new HelveticaBold();
//テキスト3D生成
var text3D:Text3D = new Text3D("Hello World.", font, textMaterial);
scene.addChild(text3D);

Papervision3Dライブラリに付属しているフォントクラスはHelveticaファミリーだけですが、
他のフォントを使いたい場合は、PotrAsなどを使ってフォントクラスを作るみたい。
参考:Papervision3DのText3Dで日本語使ってみたのをWonderflでforkした

・サンプルSWF
・ソースファイル

追記:09/06/16 19:54
フォントクラスの作り方は下記に載っています。FIVe3Dのmake_typographyツールを使います。
MAD VERTICES: PV3D Text Primitive
※日本語フォントを全文字変換するのは非常に時間がかかるので現実的ではないです。
※全角スペースはエラーが出るので変換対象に含めてはいけないようです。

環境マッピングを使った映り込み表現。
金属っぽい質感を出すときに使いますね。
ライトの位置によって映り込む方向が変わります。

使い方は、下記のようにEnvMapShaderの引数に
ライトと環境用ビットマップデータを渡してやります。

var shader:EnvMapShader = new EnvMapShader(light, env_bmd, env_bmd);
var shadedMaterial:ShadedMaterial =  new ShadedMaterial(bitmapMaterial, shader);
var sphere:Sphere = new Sphere(shadedMaterial);
・サンプルSWF ・ソースファイル

背景(風景)の作り方。
風景のテクスチャを張った巨大なボックスを置いて
中にカメラを置くだけですね。

ポリゴンの裏表をひっくり返すには下記のようにします。
material.opposite = true;

立方体よりも球体のほうが自然な感じになると思うけど
パフォーマンスとのトレードオフですね。

大気のテクスチャはLightwaveのSkyTracerで作りましたが
一般的にはどうしてるんだろう?

・サンプルSWF
・ソースファイル

カメラの視野角が広い(パースがきつい)場合に
テクスチャーの歪みが目立つことがあります。
これを補正するのがマテリアルのpreciseプロパティです。

var material1:BitmapMaterial = new BitmapMaterial(bmd);
material1.precise = true;
var material2:MovieMaterial = new MovieMaterial(clip);
material2.precise = true;

camera.fov=30とか視野角が狭く設定してある場合は
precise=falseのままでも歪みは目立たないです。

・サンプルSWF
・ソースファイル

追記:6月10日21:25
未検証ですがprecise=trueはかなり負荷が高いらしいのでむやみに使わないほうが良いかもしれません。


デフォルトではテクスチャーのジャギーが目立ちますが、
マテリアルのsmoothプロパティをtrueにするとスムージングが掛かって滑らかになります。

var material1:MovieMaterial = new MovieMaterial(clip);
material1.smooth = true;
var material2:BitmapMaterial = new BitmapMaterial(bmd);
material2.smooth = true;
・サンプルSWF ・ソースファイル

1つのオブジェクトを任意の平面で分割して、2つに分ける方法について。

下記のようにMeshUtil.cutTriangleMesh()を使うと
2つに分割されて配列が返ってきます。

//分割実行
var meshes:Array =MeshUtil.cutTriangleMesh(originalMesh, cuttingPlane);
//表示リストに加える
scene.addChild(meshes[0]);
scene.addChild(meshes[1]);
・サンプルSWF ・ソースファイル

Papervision3Dを勉強しなさい、とのお告げを受けたので
主要ポイントを押さえていくことにします。

まずは、QuadrantRenderEngineクラスについて。
これはポリゴン同士が交差したり接近した時に
表示が欠けるというか、前後関係がおかしくなる問題を
解決するためのクラスです。

使い方は下記のようにレンダラとして指定するだけです。

renderer = new QuadrantRenderEngine(QuadrantRenderEngine.ALL_FILTERS);

引数は下記の3種類あります。
・QuadrantRenderEngine.CORRECT_Z_FILTER
 →ポリゴンの前後関係を正しくなるよう並び替える。
  ただし交差し合っているポリゴンは補正できない。

・QuadrantRenderEngine.QUAD_SPLIT_FILTER
 →必要に応じて交差ポリゴンを分割する。

・QuadrantRenderEngine.ALL_FILTERS
 →上記2つを両方実行する。

処理が遅いので、相当ローポリゴンの場合にのみ使うのが
良さそうです。

・サンプルSWF
・ソースファイル

久しぶりにPapervisionでも試してみようと思ったら、DAEクラスがアップデートされてるじゃないですか。
Papervision3D 2.1 - alpha | Floorplanner Tech Blog

念願の複数アニメーションの再生がサポートされています。
下記のようにAnimationClip3Dを使うことでアニメーションを切り分けて再生することができます。

//開始時間0秒~終了時間0.5秒のモーションを"walk"と名づける
var anim1:AnimationClip3D = new AnimationClip3D("walk", 0, 0.5);
//開始時間0.5秒~終了時間1.5秒のモーションは"bow"と名づける
var anim2:AnimationClip3D = new AnimationClip3D("bow", 0.5, 1.5);
//DAEインスタンスにアニメーションクリップを追加
dae.animation.addClip(anim1);
dae.animation.addClip(anim2);
//"walk"モーションをループ再生
dae.play("walk", true);

動作サンプル

Lightwaveからアニメーションつき.daeへのコンバートはUnwap3Dで問題なくできました。

ようやく3Dゲームとか作れる環境が整ってきたかな。

アーカイブ