AdobeMAXでFlash関連いろいろ発表ありましたね。FlashPlayer11やらAIR3.0がリリースされたのでみなさんも遊ぶといいと思うのです。
» Flash Player 11とAdobe AIR 3の正式版がリリース(clockmakerさん)
で、フリーの環境FlashDevelopで遊ぶときのメモ書いておきますね。それぞれ incubator が公開されたときにみなさんがブログで提供されていた情報がほとんどですがメモということで。
FlexSDK
まずは最新のFlexSDKをダウンロードしましょ。今んところ4.5.1系ですね。「Flex 4.5 Downloads」から Adobe Flex SDK の zip をダウンロードして Cドライブ 直下あたりに展開しとくといいです。
AIR
どうせならAIRでも遊びたいので 3.0 のランタイムと SDK をいれときましょう。僕はいつもSDK落とすときに場所まようんですけどね。。「Adobe AIR 3」ページの右下あたりにリンクあるです。一応ランタイムとSDKへのリンクもおいときます。
SDK(zip)をダウンロードしたら展開して FlexSDK のディレクトリにコピー(上書き)しときましょ。これで FlexSDK に元々入っとった AIR SDK が 3.0 になります。
※何故か僕の Chrome さんだと AIR SDK がダウンロードできないんですよねぇ。ほかのブラウザでしときました。
Flash Player
次に FlashPlayer11 をゲットしときましょ。開発で遊ぶならスタンドアロンプレイヤーの「Flash Player 11.0 Projector content debugger」と「Flash Player 11.0 Projector」があるといいですね。ついでに PlayerGlobal(swc) を忘れずに落としときましょ。
» Adobe Flash Player Support Center
ダウンロードした PlayerGlobal(swc)のファイル名を「playerglobal.swc」に変更して、FlexSDK の 「flexsdk4.5.1/frameworks/libs/player/11.0/playerglobal.swc」のように置いておきます。「11.0」のディレクトリはつくってね。
※FlashDevelop4だとプロジェクトのターゲットが11で「11.0/playerglobal.swc」が存在しない場合は勝手につくってくれます。ただ今回は最新のやついれておこうってことで。
FlashDevelop
やっとFlashDevelop(以降 FD )ですね。FDのインストールは FlashDevelop.jp の方々が情報をまとめてくださっているのでそちらを参照するとよいです。このエントリに書いてない部分だとJavaがいるんで忘れないように。
※インストールするときは、「install Flex SDK」「install AIR SDK」のチェックを外しておきます
FD のバージョンは素直に最新の 4.0.0 RC1 をつかっとくといいです。以降は 4.0.0 RC1 について書いてます。
4.0系使わない場合は「flash incubator flashdevelop」でグーグルさんに聞くとよいです。
インストールが終わったら、FlexSDKとFlashPlayer11(スタンドアロンプレイヤー)をFDで使えるようにしときましょ。
FD設定
FlexSDK:
メニューの[Tools/Program Settings] を開き、[AS3 Context]から[Installed FlexSDKs]にいって、先ほどいれた FlexSDK を指定します。SDK を指定すると、SDK のバージョンと AIR のバージョンが出てきます。今回の場合だと「Flex 4.5.1, AIR 3.0」と表示されます。
FD4 から複数の SDK を設定できてプロジェクト毎に選択できるっぽい(前からでしたっけ?)。何気に便利。プロジェクトでの SDK 選択はメニューの[Project/Properties]の[SDK]タブからできます。「Program Settings」で設定してない SDK でも[Custom SDK]で指定できるみたい。
FlashPlayer:
メニューの[Tools/Program Settings] を開き、[FlashViewer]から[External Player Path]にいって、スタンドアロンプレイヤー(flashplayer_11_sa_debug_32bit.exeとか) を指定します。とりあえず debug 版を指定しておきましょう。
AS3 Project
ようやくプログラムですね。メニューの[Project/New Project] を開き[AS3 Project]を選択します。テスト用に次のような AS を書いときます。ただstage3Dあるか見てるだけのプログラムです。
package { import flash.display.Sprite; import flash.events.Event; import flash.display.Stage3D; /** * ... * @author nutsu */ public class Main extends Sprite { public function Main():void { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point trace( stage.stage3Ds ); } } }
これで[Test Project(F5)]をしてみると。。「Stage3D がみつかんねーよ」ってエラーでますね。FlashPlayer11の機能が使えるように[Project/Properties]を設定します。
- [Output]タブ:Platform を [Flash Player] [11.0]
- [Output]タブ:Test Project を [Play: External Player]
- [SDK]タブ:[Flex 4.5.1, AIR3.0]になってるか確認
- [Compiler Options]タブ:[Advanced/Additional Compiler Options]に[-swf-version=13]を追記
これでもう一度[Test Project(F5)]してみます。動きましたか? stage.stage3Ds が trace されるだけですけどね。
[Test Project(F5)]ではなく、表示しているASを走らせる[Build Current File(Ctrl+F8)]を行う場合(僕はよくやります)は、クラスのコメントに以下の @mxmlc を書いておきましょう。
/** * ... * @mxmlc -target-player=11.0 -swf-version=11 * @author nutsu */
AIR Project
次にAIRです。メニューの[Project/New Project] を開き[AIR AS3 Projector]を選択します。テストプログラムは同じもの使いますね。
同様に[Project/Properties]を設定します。
- [Output]タブ:Platform を [AIR] [3.0]
- [Compiler Options]タブ:[Advanced/Additional Compiler Options]に[-swf-version=13]を追記。(「+configname=air -swf-version=13」って感じになります)
次に application.xml のバージョンも 3.0 にしときます。
<application xmlns="http://ns.adobe.com/air/application/3.0">
これで[Test Project(F5)]すると「Context3Dつかえねーよ」って怒られます。AIRでGPUを利用する場合は、application.xml の[application/initialWindow]に以下を追記します。
<renderMode>gpu</renderMode>
これで遊べるようになります。この設定でANEさんとかも遊べるのでみなさんで楽しみましょう。
なんも絵がでないとやった感がないので、かんたんなプログラム貼っておきますね。
package { import com.adobe.utils.AGALMiniAssembler; import flash.display.*; import flash.display3D.*; import flash.geom.*; import flash.events.*; /** * ... * @author nutsu */ [SWF(backgroundColor="0x000000", width="800", height="600", frameRate="60")] public class Main extends Sprite { private var _stage3D:Stage3D; private var _context3D:Context3D; private var _indexBuffer:IndexBuffer3D; public function Main() { if (stage) init(); else addEventListener(Event.ADDED_TO_STAGE, init); } private function init(e:Event = null):void { removeEventListener(Event.ADDED_TO_STAGE, init); // entry point _stage3D = stage.stage3Ds[0]; _stage3D.addEventListener(Event.CONTEXT3D_CREATE, initContext3D); _stage3D.requestContext3D( Context3DRenderMode.AUTO ); } private function initContext3D(event:Event):void { _context3D = _stage3D.context3D; _context3D.configureBackBuffer(800, 600, 0, true); var vertexShaderAssembler:AGALMiniAssembler = new AGALMiniAssembler(); vertexShaderAssembler.assemble( Context3DProgramType.VERTEX, "m44 op, va0, vc0 \n" + "mov v0, va1 \n" ); var _vertexBuffer:VertexBuffer3D = _context3D.createVertexBuffer(3, 6); _context3D.setVertexBufferAt(0, _vertexBuffer, 0, Context3DVertexBufferFormat.FLOAT_3); _context3D.setVertexBufferAt(1, _vertexBuffer, 3, Context3DVertexBufferFormat.FLOAT_3); _vertexBuffer.uploadFromVector ( Vector.<Number>([ -1, -1, 0, 1.0, 1.0, 0.0, 0, 1, 0, 0.0, 1.0, 1.0, 1, -1, 0, 1.0, 0.0, 1.0 ]), 0, 3 ); _indexBuffer = _context3D.createIndexBuffer(3); _indexBuffer.uploadFromVector( Vector.<uint>([0,1,2]), 0, 3); var fragmentShaderAssembler : AGALMiniAssembler= new AGALMiniAssembler(); fragmentShaderAssembler.assemble( Context3DProgramType.FRAGMENT, "mov oc, v0" ); var _program3D:Program3D = _context3D.createProgram(); _program3D.upload( vertexShaderAssembler.agalcode, fragmentShaderAssembler.agalcode ); _context3D.setProgram( _program3D ); var _mtx:Matrix3D = new Matrix3D(); _context3D.setProgramConstantsFromMatrix(Context3DProgramType.VERTEX, 0, _mtx, true); this.addEventListener(Event.ENTER_FRAME, draw); } private function draw(event:Event):void { _context3D.clear(0, 0, 0); _context3D.drawTriangles(_indexBuffer, 0); _context3D.present(); } } }
なんか書き忘れてるきがする。。
忘れ物(2011/10/8 22:00):
やっぱ忘れてました。。。上のサンプルの AGALMiniAssembler クラスですが以下からダウンロードできます。
http://www.bytearray.org/wp-content/projects/agalassembler/com.zip