脳の中の風船

いまさら感もしますが、Papervision3Dの紹介です。

Papervision3Dとは、Flashで3Dの描画を実現させる、ActionScriptクラスライブラリ。
SpriteやMovieClipを扱うような感じで簡単に3Dのオブジェクトを制御でき、しかも、ただ描画するだけじゃなくてFlashのイベントリスナとしても機能します。

たとえば、こんなものが作れるようです。
（たぶん…Papervision3Dを使っていたと思います。）

• Rudebox’74
  Papervision3Dかなり初期のころに制作されたサイト。3D空間をグルグル移動できます。
  ＊該当ホストが疑わしいサイトとして診断されたため、リンクをはずしました。［＊］
• Domenico Tedone design
  イタリアのデザイナーDomenico Tedoneさんのポートフォリオサイト。なかなか上手い見せ方です。
• Osram - Mörkerkörning
  障害物を避けながら車を運転するゲーム。これにインスパイアされてレースゲームが作りたくなりました。

Papervision3Dの特徴。
私が今までちょくちょく触ってみての、「主観」ですが。

• ものすごく簡単に3Dが扱える！
  ActionScript3も3Dプログラミングもろくに分かって私でも、難なく3Dコンテンツっぽいものができました。冒頭でも書きましたが、普通にムービークリップをいじるような感覚で3Dを制御できてしまう、とっつき易さが魅力です。
• Flashである！
  （そのまんま。）3DコンテンツとはいえFlashであることには変わらないので、ウェブとの親和性は抜群。再生環境も選びません。
• かなり多機能！
  テクスチャにムービークリップやFLVの使用、3Dモデリングデータの表示、3Dモデルのアニメーション、フィルタによるエフェクト、シェーディング、写り込み表現、…などなど様々なことができるみたいです。（が！→次とその次）
• 雪だるま式に重くなる！
  いろいろな描画機能をつかったり、高ポリゴン、高解像度になるにつれ、どんどん動作負荷が高くなります。ですので、実際にウェブで使うとなると、ローポリ、テクスチャ任せ、2Dと併用してごまかす、等のテクが必須かもしれません。
• ハイペースで更新＆仕様変更！
  すごい勢いでリビジョンアップされ、機能が追加されるのはいいんですけれど、それにあわせてかなりの頻度で仕様変更されたりもします。頑張って情報共有しましょう。
• 欠ける！歪む！
  今回私は3Dレースゲームを作ろうかとしているんですが、手前のポリゴンがすぐ欠けたり、ポリゴンの重なり（Ｚソート）がおかしくなったり、視点を変えるとテクスチャがぐにゃぐにゃに歪んだりと、結構しんどいです。プレステ初期のやたらポリ欠けするゲームなんかより全然ひどいです。動作負荷を妥協すれば綺麗に描画できるんだけれども…。

なお、似たようなライブラリにAway3Dといったものもあるようです。
でも根本的な部分は似たり寄ったり、まだFlashでバリバリの3D表現は難しそうです。
最後にPapervision3Dの入手先を。

公式ブログ
アナウンスとか、Papervision3Dを使った事例とか、あんま関係ない事例とか。

Google CodeのPapervision3Dページ
正式版の配布ページ。ただし古いバージョン1.5です。最新版（開発版）は以下。

公開リポジトリ
SVNリポジトリです。私が使った2.0Alphaもここに含まれています。

インストール＆セットアップについては、ちょっと長くなるので次回にでも書きます。

技術ネタ | actionscript3, papervision3d | 3 Comments »

今回は、FLAファイルからActionScriptを分離させ、FlashDevelopでコーディング→Flash CS3でパブリッシュ、という連携の開発をしてみます。
実はtrick7.com blogさんの記事にて、丁寧にビデオ解説されているので、正直そちらを参照してねって感じなんですが、一応要点だけ書いておきましょう。

１．まず、FlashDevelopでプロジェクトを作成します。
Project > New Project から、ActionScript 3 - Flash IDE Project を選択し、新規プロジェクトを作成。
今回はプロジェクトフォルダがまだ空のままですね。

２．次にFLAの作成。
今度はFlash CS3で 新規作成 > Flash ファイル（AS 3.0） を作成し、プロパティウィンドウのドキュメントクラス欄にクラス名（たとえば、Main）と入力し、先ほどのプロジェクトフォルダ内にFLAファイルを保存します。

３．ActionScriptファイルの作成。
FlashDevelopに戻って、Projectウィンドウのプロジェクトフォルダを右クリック、Add > New Class を選択し、ASファイルを作成、ファイル名はドキュメントクラス名と同じものにします（Main.as）。
Flash CS3の出力を試してみようと、traceするスクリプトにしてみました。

package
{
	import flash.display.Sprite;
	public class Main extends Sprite
	{
		public function Main()
		{
			trace("Hello, World!");
		}
	}
}

４．そして、ムービープレビュー！
FlashDevelopで[F5]もしくは[F6]を押すと、自動でFlash CS3に切り替わり、ムービープレビュー（Flashの[Ctrl]+[Enter]のやつですね）ができます。
SWFファイルはプロジェクトフォルダ直下に作成されます。

…だいたいこんな流れですね。
文字だと分かりにくッ。

さてさて、最初の準備がちょっと面倒くさかったり、同一フォルダで管理しないといけなかったりはしますが、これなら、従来のデザイナー的制作手法で、FlashDevelopの強力なエディタ機能を利用できるようになりました。
ライブラリ管理とムービークリップ作成をFlashで行って、あとはスクリプトで制御する派（？）の人にはオススメです。

技術ネタ | flash, flashdevelop | 1 Comment »

さて、Flexをセットアップできたということで、今度こそAS開発環境FlashDevelopのインストールです。＊参考サイト
現在の最新版は ver.3.0.0 Beta7。これを使いました。
＊ただしこのバージョンはUAC関連の問題を抱えています。詳しくはこのエントリ中程を見てください。

公式サイトFlashDevelop.orgからReleasesとたどり、FlashDevelop-3.0.0-Beta7.exe をダウンロード、インストーラを起動すればＯＫ。

さっそくFlashDevelopを起動させて、設定を見直します。とりあえず重要そうなのはこの３点でしょうか。

• Tools > Program Settings にて、FlashDevelop > その他 > Default CodePage が “UTF8″ になっているか確認。
• AS3Context > AS3 > Flex SDK Location が “C:\flex_sdk_3″ になっていることを確認。
• プロジェクトのテンプレートが作成するファイルのエンコード File > Encoding が “UTF-8″であることを確認。

なんだ、全部デフォルトで大丈夫じゃないですか～。
なお、UIのフォントはProgram Settingsから設定できますが、肝心のコードビューのフォントは直接設定ファイルを編集しなければなりません。Tools > Application Files をクリックするとアプリケーションデータのフォルダが表示されるので、その中の Settings\ScintillaNET.xml をテキストエディタで編集します。name=”default-font” あたりですね。

さて、Beta7ではVistaのUAC関連の問題があるらしく、Flash Developを起動するたびに「管理者として実行」のダイアログがでてきたりします。
まあ、（それが関係しているのか分かりませんが）ごくまれに起動時に妙なエラーを吐くこと以外は問題なく動作しているのでたぶん大丈夫でしょう。。 公式フォーラムの様子を見るかぎり次のバージョンでは解決してくれるかも、です。よろしくお願いします、Mikaさん (> <)

FlashDevelopでサンプルプロジェクトを作って、コンパイルしてみます。

Project > New Project を選択し、ActionScript 3 - Default Project を選んで、適当な名前をつけてプロジェクトを作成します。
プロジェクトフォルダ内、src/Main.as をとりあえず前回と同様以下のように編集します。

package
{
	import flash.display.Sprite;
	[SWF(backgroundColor=0xFFFFFF)]

	public class Main extends Sprite
	{
		public function Main():void
		{
			graphics.lineStyle(5, 0×8888FF);
			graphics.moveTo(150, 50);
			graphics.lineTo(250, 250);
			graphics.lineTo(50, 250);
			graphics.lineTo(150, 50);
		}
	}
}

そして、[F5]を押す（または Project > Test Movie）と、こんな感じのSWFファイルが bin/（プロジェクト名）.swf として生成されるはずです。

技術ネタ | actionscript3, flashdevelop | No Comments »

前回のエントリで紹介したAS開発環境FlashDevelopのインストールメモです。
ちなみに私の環境Windows Vista （32bit）でAS3の開発を行う、という前提でのメモです。
CodeZineの記事を参考にしました。あわせてどうぞ。

FlashDevelopで開発するためには、Flex SDKとJava（ver.6以降）が必要です。私の場合はFlash IDEとの連携も考えているので、あらかじめFlash CS3がインストールされています。

というわけで今回はまずFlex SDKのインストールから。
Flex SDKにはASクラスライブラリやコンパイラ、デバッグ用Flashプレイヤーなどが含まれています。

今回は先日オープンソース化された、最新版のFlex 3 SDKを使いました。
AdobeのFlexページからリンクをたどり、flex_sdk_3.zip をダウンロード、解凍フォルダを C:\flex_sdk_3 として保存すればインストール完了。
＊以前と違い、ダウンロードにAdobe IDは必要ありません。
＊フォルダ名は flex_sdk_3 でなくてもかまいませんよ。
　ただし、ドライブ直下、半角スペースを含まないフォルダにしておいた方が無難です。
　以降このブログでは上の通りにインストールしたとして記事を書きます。

参考サイトにしたがい、C:\flex_sdk_3\bin\jvm.config を次のように編集しました。

# Arguments to VM

java.args=-Xmx384m -Dsun.io.useCanonCaches=false -Duser.language=en -Duser.region=JP

が、デフォルトのままでも問題ないかもしれません。（動作しました。）

Flex 2の頃は、コンパイルを高速化させるための fcsh（Flex Compiler Shell）を追加インストールしたりしたものですが、どうやら3ではFlex SDK自体に同梱されているみたいです。
というわけで、Flex 3 SDKの導入はこれだけで完了～。

ためしに動作確認をしてみましょうか。
まだIDEがインストールされていないのでコマンドラインからの操作となります。
コマンドプロンプトで次のように入力します。

C:\>cd C:\flex_sdk_3\bin [Enter]
C:\flex_sdk_3\bin>fcsh [Enter]
Adobe Flex Compiler SHell (fcsh)
Version 3.0.0 build 477
Copyright (c) 2004-2007 Adobe Systems, Inc. All rights reserved.

(fcsh)

こんな感じで fcsh のプロンプトが開始できればＯＫ。
せっかくですので、Flashをコンパイルしてみましょう。
テキストエディタで適当なActionScriptファイルを作成し、C:\as\Main.asにでも保存します。

package
{
	import flash.display.Sprite;
	[SWF(backgroundColor=0xFFFFFF)]

	public class Main extends Sprite
	{
		public function Main():void
		{
			graphics.lineStyle(5, 0x8888FF);
			graphics.moveTo(150, 50);
			graphics.lineTo(250, 250);
			graphics.lineTo(50, 250);
			graphics.lineTo(150, 50);
		}
	}
}

そしてfcshでコンパイル！

(fcsh) mxmlc c:\as\Main.as [Enter]
fcsh: Assigned 1 as the compile target id
Loading configuration file C:\flex_sdk_3\frameworks\flex-config.xml
C:\as\Main.swf (639 bytes)
(fcsh)

こんな感じのMain.swfが生成されました。
なお、fcshを終了するには、[Ctrl]+[C] と入力すると通常のコマンドプロンプトに戻れます。

ローカルのSWFファイルが開けない場合は、C:\flex_sdk_3\runtimes\player\win にある FlashPlayer.exe を一度起動しておくと、SWFがFlashPlayerに関連づけされるみたいです。

技術ネタ | flashdevelop, flex3 | No Comments »

オープンソースのActionScript開発環境、FlashDevelopを導入しました。
なかなか使いやすいです。

• いろいろな開発スタイルに対応。
  Flex SDKを使用したActionScript開発、MXML+ASのウェブ開発、Adobe Airの開発、Flash CS3との連携などなど。ActionScriptは3.0と2.0両方に対応しています。基本FLAで管理しつつスクリプトだけ外部ASに分離、みたいなライトな使い方ができるのもいいですね。もちろん、Flex Builderの代替or併用として使ってるユーザも多そうです。
• 入力補完機能。
  ActionScript標準クラスだけでなく、インポートした外部ライブラリ、自分で定義した変数や関数も補完してくれます。しかも、その候補は、現在インポートしているクラス、クラスが対応しているメソッドやプロパティに限定されるので、関係ない候補がやたらと表示されて煩わしい…なんてことはありません。おりこうさん。
• 自動補完・整形。
  たとえば、コード中にBitmapクラスを使うと、自動で冒頭部分にimport flash.display.Bitmapが挿入されます。これは便利。ほかにも、関数の「 } （カッコとじ）」だとか、演算子の隣の半角スペースを追加してくれたりします。
  ＊そういうのがイヤな人は、設定でオフにもできるそうです。
• クラスの定義やドキュメントの参照。
  F4キーを押すと、カーソル上のクラスの定義（ソースファイル）が参照できます。これもAS標準のものだけでなく、カスタムクラスにも対応しているので、Papervision3Dみたいな外部ライブラリを多用する私にとってはありがたいことですね。
  F1キーを押すと、Adobeのオンラインドキュメントが参照できます。（厳密には、オンラインドキュメントからキーワードをGoogle検索したページが、ブラウザで開きます。）

ほかにも、動作がカナリ軽かったり、（コード内で）日本語が標準で使えたり、FlashDevelop自体の開発も結構ハイペースだったりと、好感が持てます。FD2.0の頃と比べて日本語情報が増えてきているのもありがたいかぎりです。

技術ネタ | actionscript3, flashdevelop | No Comments »