Monthly Archives: 11月 2011

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年の春に公開できるようですので、楽しみですね!

世界CMフェスティバル2011に行ってきました。

世界CMフェスティバル2011

今年も世界CMフェスティバルに行ってきました。
夜(22時)から翌日の朝(6時30分)まで世界のCMを見続けます。

日本ではなかなか見れない貴重なCMもありますので、興味のある方はぜひいってみてください。
※12/9 大阪で開催予定です。

今年は#CMFES というハッシュタグでみなさんがつぶやいた内容を確認して、YOUTUBEから検索してみました。

“Never Say NO to Panda: パンダにはNOって言わないで。” というキャッチコピーで最高の人気作(?)になった、「パンダチーズ」。

SKODA SUPERB GLASS HARP (Škoda Superb Skleněná Harfa)

“Life’s for Sharing” というキャッチコピーですごく楽しいパフォーマンスを見せてくれた「T-Mobile」シリーズ。

「T-Mobile」シリーズ。

「T-Mobile」シリーズ。

「T-Mobile」シリーズ。

「VISA」

「Tutti Fruitti」のジュンジ先生。

Adobe Photoshop LightRoom3 購入しました。


1年前くらいにお試し版のLightRoom2を使ってみた経験があります。
便利で写真加工には絶対的なプリセット機能、Raw形式でも自分が必要なときならいつでも簡単に検索できる管理システム、それ以外にも写真を補正する人なら役に立つ様々な機能が体験できました。

それでも、写真編集のメインツールとして LightRoom を選択してなかった理由としては、作業スピードでした。

自分のようなアマチュアの時点で見ると、撮影した写真をFlickrやFacebook、ブログなどにアップロードする目的が多いです。

そこに対して、いくら管理機能や詳細機能が良くても、さくさく動作できないと利用頻度はだんだん減ってしまい、いつのまにか使わなくなります。

まさに自分もそうで、いろいろ悩んだんですが、結局選択したのは、ファイルの管理はローカルフォルダーやFlickrを、補正ツールとしてはPhotoshop Camera Rawを利用することでした。
※Photoshop Camera Rawは、全体的な管理モジュールはありませんが、大量のRaw形式のファイルの読み込み、補正、それから書き出すまでの流れがすごく簡単につながります。

最近にきて、ローカルフォルダーが多くなり、手動で一々管理するのに時間がかかってしまって、やっぱり全体的なファイル管理を自動にしてくれるツールが必要になったことにより、再度 Lightroom3 の購入を考えてみました。

本日、家のPCにインストールして、立ち上げて簡単にRawファイルを触ってみた感想はLightroom2に比べて、動作スピードがかなり早くなったことです。
※もちろん、自分のPC環境が改善されたこともありますけど。。

そこで、本ブログでは、Lightroom3の機能の使い方や自分が感じた感想、PhotoshopのCamera RawやカスタマイズTone Curveの使った色補正方法みたいな自分の経験をベースにしたノーハウなどを投稿してみようと思っています。

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: 指定したインデックスが境界外です。
*/

Adobe MAX 2011参加報告

Adobe MAX 2011 参加報告関連の記事が会社ホームページに本日公開されました。

内容は以下の3つに分けて書いています。

  • Adobe Creative Cloud
  • Flash Platformの進化
  • HTML5の受け入れ

記事リンク: Adobe MAX 2011 参加報告

技術関連記事はこのブログを通して、少しつつアップデートしていきたいと思います。

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に設定されていることが分かります。