unbland.org blog

今朝、メールチェックをしたら Scaleform の方からメールが来ていました。

ゲーム会社の人間でもないのにデベロッパー登録していたので、お叱りのメールかな？とビクビクしながらメールを開いてみたのですが内容は全然違ったもので、Scaleform GFx をゲーム業界だけでなく、Flash クリエイターと言われる人たちにも、ぜひ使ってみてほしいといったものでした。

Scaleform GFx について簡単に説明すると、Flash IDE と ActionScript 2.0 を用いて、ゲーム（PS3, XBox360, Wii, PC, PSP, PS2）用の UI などを制作出来るというものです。fladdict.net さんのエントリーもご参考ください。

他の Flash を生業とされている方々の参考になればと思い、メールの内容を箇条掲載します。ブログへの掲載については快諾頂いてます。

GFx についての内容

• GFx の一般的なアプリケーションは 3D ゲーム内の 2D 表示部分。
• 主に、メニュー、テキスト表示、HUD などに使われている。
• 導入事例は国内では 20 ほど、海外に至っては 300 タイトル以上。
• フルフラッシュのゲーム（あるいはゲームではないコンテンツ）をブラウザ以外のプラットフォームでプレイバックまたはプレイすることも可能。
• 現行の GFx3.0 で搭載された CLIK では、海外の著名な Flasher である Grant Skinner 氏がゲーム用 UI のコンポーネントセットを作っている。
• 現在は AS2.0 のみの対応だが、将来的には AS3.0 への対応も視野に入っている（一年後くらいには？）。
• 海外ではゲーム業界とウェブ業界の垣根がなく人材の行き来が盛ん。
• 国内でも業界間での Flasher との垣根が取り払われて、相互の行き来が生じることでよりクリエイティブなものを産み出せれば。

国内での GFx 導入事例

• 「あいうえ・おーちゃん (Home Media)」WiiWare – 幼児用教育ゲームのフルフラッシュのコンテンツ。GFx2.2 で開発。
• 「NINJA BLADE (FromSoftware)」XBox360 – シネマティックアクションゲーム（映画を見ているようなアクションゲーム）。
• 「ガンダム無双2 (Bandai Namco/Developer Koei)」PS3/XBox360 – アクションゲーム。
• 「King of Fighters 12 (SNK Playmore)」アーケード – 格闘アクションゲーム。

海外での GFx 導入事例

• 「Crysis (Crytek)」PC – 一人称視点シューティングゲーム (FPS)。
• 「Crysis Warhead (Crytek)」PC – 一人称視点シューティングゲーム (FPS)。
• 「シヴィライゼーション レボリューション (Firaxis/2K games)」PS3/XBox360 – ターン制のシミュレーションゲーム。

といった内容でした。

個人的には早く AS3.0 への対応が進めば嬉しい限りです。会社名義であれば試用目的でのデベロッパー登録も大丈夫との事でしたので、興味のある方はぜひ！

以前紹介したスクロールペインをホイール標準対応にしました。内部で JSModifier というクラスを使用することにより Mac のホイールにも標準対応しています。

今回のスクロールペインのデモ（※ 要 FlashPlayer 9）

Firefox や Opera だと前回のものは、バーやコーナーをドラッグしたまま swf の領域外に持っていった状態でマウスボタンをリリースすると、領域内に戻っても引っ付いたままになってしまっていましたが、これも JSModifier クラスによって改善されています。前回のものも掲載しておきますので、両方を試してみて下さい。

前回のスクロールペインのデモ（※ 要 FlashPlayer 9）

ちなみに JSModifier というクラスは何かというと、Mac のホイールを認識しない問題や、wmode を使用した際の不具合、その他ブラウザに起因する問題を JavaScript を用いて改善するクラスで、使い方は JSModifier.initialize(stage) するだけです。

ASDoc をアップロードしてますので、どういった問題が改善されるかなどの詳しい情報は JSModifier の項を参照して下さい。

unbland as3 library の機能で ActionScript 上で JavaScript の DOM 操作やイベントハンドリングを行う機能があります。そんな機能の紹介です。

package {

import flash.display.Sprite;
import org.unbland.core.events.JSEvent;
import org.unbland.core.external.JavaScript;
import org.unbland.core.external.JSObject;

public class Example extends Sprite
{
    public function Example():void
    {
        // JS が利用できない環境なら終了
        if (!JavaScript.enabled) {
            return;
        }

        // JavaScript.proxy で JS 操作用のオブジェクトを取得
        var document:JSObject = JavaScript.proxy.document;
        var body:JSObject = document.body;

        // 最初は赤色に
        body.style.backgroundColor = "#FF0000";

        // ドキュメント領域をクリックしたらイベントを発生させる
        document.addEventListener(JSEvent.CLICK, function (e:JSEvent):void
        {
            // イベントが発生したら黄色に
            body.style.backgroundColor = "#FFFF00";

            // イベントの詳細情報をアラート
            var temp:String = "";
            for (var key:String in e.info) {
                temp += "key : " + key + " / value : " + e.info[key] + "\n";
            }
            JavaScript.alert(temp);
        });
    }

}

}

※ 09.04.16 追記:
バージョンアップしました。くわしくは “自作ライブラリのスクロールペインをバージョンアップ” をご覧下さい。

Bitbucket に自作ライブラリを一挙に公開しました。unbland as3 library といいます。現在開発中ではありますが、公開記念に UI 作成用のクラスを紹介したいと思います。

スクロールペインのデモ（※ 要 FlashPlayer 9）

「コンポーネントを使えば？」なんて声が聞こえてきそうですが、標準のコンポーネントはスクロールのイージングに対応していなかったり、スキンのカスタマイズがものすごく面倒くさかったり、拡張性が低かったり、バグが多かったりと問題が多い（扱ったことがある方なら分かって頂けるかと思います）ので自分で実装してみました。

出来るだけ拡張性を持たせ、且つ見た目のカスタマイズなどが簡単に行えるように作成しているつもりです。具体的には、Flash IDE 上でデザインしたオブジェクトにインスタンス名を付け、抽象クラスを継承させたクラスで各種設定を記述するだけで簡単に作成出来ます。

その他にも色々な機能を実装していますので、興味の有る方は unbland as3 library Wiki をご覧になって遊んでみて下さい。サンプルなんかも置いています。今後は TextInput, TextArea, ComboBox など、最近の Flash 案件で良く使うようになってきた UI については実装していきたいなーと思っています。

先日 3/14 に、5ive のシモムラさん主催で Flash 勉強会「福岡のFlasher全員集合！」が開催されました。記念すべき第一回ということで、プレゼンには慣れてないけど発表してきました。色々トラブルもあって終始グダグダな感じになってしまいましたが、発表中には緊張している僕に対して暖かいお言葉も頂き、無事に発表を終える事が出来ました。タメになったと言って下さる方もいらっしゃったので、発表して良かったなぁと思います。

各スピーカーの内容と資料は ATND に掲載されていますので、そちらをご参考ください。

飲み会では普段出来ない Flash 談義に花が咲いてとても楽しかったです。で、やはりみんなの共通意識としてあったのが、福岡には Flash を行う土壌がまだまだ整ってないなぁという事。今回みたいな勉強会を今後も続ける事で土壌を整えて、福岡でも Flash が出来る環境が整えば良いなと思いました。東京の代理店さん、福岡にも Flash の案件をぜひ振ってくださいませ！

勉強会を企画＆開催して頂いたシモムラさん、場所を提供（？）して頂いた grafoo の noby さん、参加して下さった皆さん、お疲れさま＆ありがとうございました！

kayac さんが Wonderfl というサービスをリリースしていたのですが、これがかなり面白い。サーバー上で書いた ActionScript がそのままリアルタイムでコンパイルされて表示されるので、かなりのお手軽さ。試しに自分も前に作った 3D ドーナッツを投稿してみました。ここから。ブログパーツにまで出来ちゃうから、ちょっと試してみたい時にも気軽に使えますね。ただ、環境によって BitmapData のエラーが出るのは FlashPlayer の所為？

ちなみにブログパーツ↓

graffiti-blog さんと全く同じFlashの書き出せないバグに遭遇中。ASO ファイルを削除したりしても駄目。意味分からない。だれか解決法知りませんか？

※ 08.11.21 追記：
ActionScript 設定の Warning モードのチェックを外す事でエラーが表示されるようになり、正常に書き出せました。ただ、なぜ正常に書き出せなかったかは不明。

とても良い話しが ALT FACEs に。バスキュール x AKQA のネットミーティングの記録。

前に MT アップデートした時に一式データが消えてしまったけど、101LAB さんに保管されてた、感謝。忘れないうちに貼付けておきます。

function FloatLayer() {
    this.initialize.apply(this, arguments);
};

FloatLayer.prototype = {

    initialize:function () {},

    add:function () {
        var container = document.createElement("div");
        $(container).attr("id", "floatLayer");
        $(container).css({margin:0, padding:0, background:"none"});
        $(document.body).append(container);
        var input = document.createElement("input");
        $(input).attr("type", "button");
        $(input).attr("value", "クリックで閉じる");
        $(container).append(input);
        $(input).click(function () {
            $("#floatLayer").remove();
        });

        if($.browser.msie) {
            if(!window.XMLHttpRequest || !document.compatMode.match(/CSS/i)) {
                $(container).css({position:"absolute", background:"#000000", filter: "alpha(opacity=50)"});
                this.optimizeScroll();
                $(window).scroll(this.optimizeScroll);
                this.optimizeSize();
                $(window).resize(this.optimizeSize);
            }
        } else {
            $(container).css({width:"100%", height:"100%", position:"fixed", left:0, top:0,
                background:"#000000", opacity: 0.5
            });
        }
    },

    optimizeScroll:function () {
        var scrollLeft = (document.compatMode.match(/CSS/i)) ?
                document.documentElement.scrollLeft : document.body.scrollLeft;
        var scrollTop  = (document.compatMode.match(/CSS/i)) ?
                document.documentElement.scrollTop : document.body.scrollTop;
        $("#floatLayer").css({
            left:scrollLeft,
            top:scrollTop
        });
    },

    optimizeSize:function () {
        var windowWidth = (document.compatMode.match(/CSS/i)) ?
            document.documentElement.clientWidth : document.body.clientWidth;
        var windowHeight = (document.compatMode.match(/CSS/i)) ?
            document.documentElement.clientHeight : document.body.clientHeight;
        $("#floatLayer").width(windowWidth);
        $("#floatLayer").height(windowHeight);
    }
};

var floatLayer = new FloatLayer();
floatLayer.add();

Java でいう abstract 修飾子がないので疑似実装するしかないですが、今までは getQualifiedClassName() 使ってクラス名を取得後、文字列で判別してました。でも前回のエントリーで constructor プロパティの有用性を知ったので、こちらを使っての実装法を考えてみました。

※ 09.04.09 追記:
Proxy を継承したクラスのインスタンスの場合で constructor プロパティを呼び出した場合、Object#constructor でなく Proxy#getProperty が優先的に呼ばれるので注意が必要です。Proxy クラスを継承したクラスには constructor のゲッターで自クラスの参照を返すことでこの問題を回避出来ます。

// AbstractClass
package
{
    public class AbstractClass
    {
        public function AbstractClass():void
        {
            if (Object(this).constructor == AbstractClass) {
                throw new Error("このクラスは抽象クラスなので直接インスタンス化できません.");
            }
        }
    }
}

// SubClass
package
{
    public class SubClass extends AbstractClass
    {
        public function SubClass():void
        {

        }
    }
}

こんな感じにしておけば、new AbstractClass() だとエラーになりますが、new SubClass() だとインスタンス化できます。className プロパティとかを実装したいのであれば、やっぱり getQualifiedClassName() を使わないといけませんが、そうでなければこの方法で十分な気がします。

この方法を考えてる時に constructor プロパティの取得法がいまいち分からなかったんですが、seyself さんから教えていただきました。ありがとうございます。