Tag Archives: Flash Player 11

ADC MEETUP ROUND 03 RETWEET: SQUARE-ENIX MEMBERSの次期Flashコンテンツ

先週開催されました、ADC MEETUP ROUND 03 RETWEETでは、今年、アメリカのAdobe MAX 2011で発表されたキーノートの内容、話題になったテーマをFLASHトラックとHTML5トラックに分けて説明されました。

その中、最初の一般セションで紹介された、「SQUARE-ENIX MEMBERSのコードネーム: BARTS」の内容をまとめてみました。

スピーカはコーポレート・エグゼクティブ「橋本 真司」さんとオンライン事業部のディレクター「小林 吉彦」さんでした。

約6年ほど前からサービスしているSQUARE-ENIX MEMBERSは、ゲームを買い上げした人建ちをメインにいろんな会員制サービスを提供してきています。
ここで、会員たちは3Dアバータを生成し、サイト内で遊ぶことができます。
アバータのパーツはすでに1万点以上のパーツが登録されているようです。

この3年間になってからは、3Dアバータを利用して、ゲーム会社らしいサービスを考えてみたようですが、ブラウザ上の制限により、実現できなかったと言いました。

そのような条件の中、Stage3Dが発表され、これを利用して新しいサービスとして適用できるのではないかと思い、今回紹介されたコードネーム BARTS が開発進行中されたと言いました。

下記はそのデモの映像です。

動画の中のデモはブラウザ上でリアルタイムで動作できるFlashゲームで、Wiiソフト Final Fintasy クリスタルクロニクルクリスタルベアラーからモンスター「バハムート」とバトルフィールドマップのモデリングデータをそのまま持ってきて表示したものだと言いました。

ポリゴンの数が約20,000ポリゴンにもかかわらず、フレームレートは30~40フレームで安定されています。
このゲームで登場するキャラは実際にSQUARE-ENIX MEMBERSでサービスしているアバータになるので、自分が好きな服やアイテムを選択してゲームに適用することも可能だと言いました。
それから、ソーシャルゲームなので、友達を読んで一緒にモンスタと戦うこともできます。

最後に、Flashをプラットフォームとして選択した理由は、現在の普及率を考えたら当然なことで、大分の人たちがインストールなしで、ブラウザ上のFlashで遊ぶことができるからと言いました。
実際に、グラフィック性能が向上したことで、従来のコンシューマゲームがソーシャルゲームで遊べることができること、すなわち、新しい遊び方の提供を目的としてプロジェクトを進行していると言いました。

Flashの3DライブラリはAlternativa3Dを利用し、業界で3D制作で有名なclockmakerさんも関わっていると言いました。

2012年の春に公開できるようですので、楽しみですね!

Flash Player 11 & AIR 3の新機能を調べよう – DisplayObjectContainer.removeChildren

関連外部リンク

2011年 10月 3日に公開された、Flash Player 11とAIR 3の新機能を一つ一つ調べてみます。

今回は DisplayObjectContainer.removeChildren について説明します。
まず、DisplayObjectContainer とは、画面に表示できる表示用オブジェクトを子として持つ基本クラスです。
removeChildren()は指定された範囲(もしくは全て)の子をremoveChild()してくれます。

リファレンスには以下のように説明されています。

public function removeChildren(beginIndex:int = 0, endIndex:int = 0x7fffffff):void
// Parameters
beginIndex:int (default = 0) — The beginning position. A value smaller than 0 means all child objects from the beginning of the list.
endIndex:int (defalut = 0x7fffffff) — The ending position. A value smaller than 0 means all child objects to the end of the list

引数がない場合は、すべての子をremoveChild()します。
引数を指定する場合、beginIndexからendIndexまでの間にaddChild()されている子をremoveChild()します。
※endIndexで指定できる最大数は0x7fffffff(2^32-1 = 2,147,483,647)個になります。

サンプルデータを作成してみました。
※画面をクリックしてSpriteをaddChild()/removeChildren()できます。

以下はサンプルデータのコードになります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;

// Spriteを生成するか、削除するか判断するフラグ
var flag:Boolean = true;

// Stageをクリックしたら、生成/削除を開始する。
stage.addEventListener( MouseEvent.CLICK, onClickHandler );


function onClickHandler( $e:MouseEvent ):void {
    if ( flag ) {
        addEventListener( Event.ENTER_FRAME, update );
    }
    else {
        this.removeChildren();
        removeEventListener( Event.ENTER_FRAME, update );
    }
    flag = !flag;
}

// 毎回新しいSpriteを生成する。
function update( $e:Event ):void {
   
    // Stageが存在しない場合は何もしない。
    if ( !stage ) return;
   
    // Spriteを生成する部分
    with( addChild( new Sprite() ) ) {
        graphics.beginFill( 0xFFFFFF * Math.random() );
        graphics.drawRoundRect( 0, 0, 20, 20, 14 );
        graphics.endFill();
        x = ( stage.stageWidth - width ) * Math.random();
        y = ( stage.stageHeight - height ) * Math.random();
        alpha = 0.5;
    }
}

では、今までよく使用されたコードとパフォーマンスがどのように違うか試してみましょう。
比較したコードは以下になります。

1
while( numChildren > 0 ) removeChildAt(0);

※Repeatの部分に1~10000間の数字を入力すると、n個のSpriteをaddChild()し、removeChildren()が終わるまでのかかる時間を表示します。

自分のPCで表示された数字は以下になります。

Sprite数 removeChildren() while(…){…}
500
1,000
1,500
5,000
10,000
0.01 sec
0.02 sec
0.029 sec
0.107 sec
0.247 sec
0.013 sec
0.039 sec
0.083 sec
0.757 sec
4.119 sec

処理する数が500個の場合はほぼ変わらないですが、10,000個の場合は約16倍の差が発生するのが分かります。

ちなみにこのようなテストもしてみました。

1
2
3
4
5
6
7
8
9
removeChildren(); // すべての子がremoveChild()
removeChildren(0); // すべての子がremoveChild()
removeChildren(0, numChildren - 1 ); // すべての子がremoveChild()
removeChildren(0, 0); // 0番目の子がremoveChild()
removeChildren(1); // 1番目以降の子がremoveChild() ⇒ 0番目の子は残る
removeChildren(-1, 2); // RangeError発生
/*
RangeError: Error #2006: 指定したインデックスが境界外です。
*/

Flash Pro CS5/CS5.5に Flash Player 11 の制作環境を追加しましょう。

昨日(11月1日)にAdobe SystemsのFLASHを担当している
テクニカルプロダクトマネージャRichard GalvanさんのブログにFlash Pro CS5/CS5.5にFlash Player11で書き出せる拡張機能が登録されました。
>> Adding Flash Player 11 support to Flash Pro CS5 and CS5.5

※(AIR3を含め)手動で追加するのは、上条さんのブログにも登録されていますので、ご参考ください。
>> Flash Professional CS5.5 で Flash Player 11 と AIR 3 を使う方法

拡張機能の追加は簡単です。
まず、開いているFlash Proを終了して、
自分のCSバージョンに合うmxpファイルをブログからダウンロードします。
※mxpは「Adobe Extension Manager」を利用してインストールできます。

ブログでこのファイルをダウンロードします

ダウンロードされたzipを解除します。

mxpファイルをダブルクリックするとインストールが開始されます。
※実行されない場合は、「Adobe Extension Manager」を開いて、「インストール」からダウンロードしたmxpファイルを選択してインストールに進んでください。

インストールが完了されましたら、「Adobe Extension Manager」は終了して、Flash Proを起動してみましょう。
下記のようにFlash Player 11が追加されていることが分かります。

では、実際に Flash Player 11 の制作が可能か試してみましょう。

※FP11で追加されました、removeChildrenメソッドがコードヒントに表示されました。

Publishingの部分を確認してみましょう。
Flash Pro CS5/CS5.5の内部Flash Playerのバージョンはまだ、10.xですので、Ctrl + Enter(もしくはCmd + Enter)で「ムービープリビュー(Test Movie)」モードでは正しく動作できません。
※Galvanのブログによると、ユーザ側でこのプレイヤーを変更することはできないと言ってます。

removeChildrenメソッドを使った場合のエラー

ですので、F12(もしくはCmd+F12)でHTMLを生成して、ブラウザで確認しましょう。

Stage3Dコンテンツをレンダーリングできるように、HTMLテンプレートを「Flash WMODE Direct」にしておくのも良いでしょう。

1
<param name="wmode" value="direct" />

wmodeがdirectに設定されていることが分かります。