unbland.org blog

前回の UITextField に引き続き、自作ライブラリに今度は UITextArea クラスを追加しました。

テキストエリアのデモ（※ 要 FlashPlayer 9）

前回の UITextField クラスのラッパークラスで、スクロールが可能な UI を作成できます。

扱い方はサンプル [ドキュメントコード | TextArea 実装コード ] や UITextArea の ASDoc をご覧下さい。

自作ライブラリに UITextField クラスを追加しました。

テキストフィールドのデモ（※ 要 FlashPlayer 9）

このクラスを使用して、コンポーネントでいうところの TextInput と Label が作成出来ます。標準コンポーネントでは、ダブルクリックやトリプルクリックした際のテキスト選択がおかしいですが、このクラスを使用して作成した UI では、内部で拡張したテキストフィールドを用いる事により、ダブルクリックで単語、トリプルクリックで段落を選択するように拡張されています。その他にもクリックやタブなどで最初にフォーカスが移った際にテキストを全選択する機能や、IME を制御する機能なども備えています。

詳しい扱い方はサンプル [ドキュメントコード | TextInput 実装コード | Label 実装コード ] や UITextField の ASDoc をご覧下さい。また、使ってみて変な所があれば、Issue にぜひ登録してください。

ActionScript の最適化って色々なサイトに載っていますが、wonderfl にまとめて載っておくとコードと動きを同時に確認できるし、自分のためにも便利だと思って色々と投稿しました。コードへのリンクに個人的な私見を加えてご紹介します。ただ、人によって意見が異なるかもしれないので、コードと動きを直接確認しておくことをお勧めします。この処理はおかしいんじゃないか？とかありましたらコメントください。

変数名の長さによる処理速度の違い

変数名の長さによる違いはありません。ですので変数名は、他の人が見やすい・自分が後で確認しても分かり易いような名前を付けておいた方が良いです。

変数を参照する際の処理速度の違い

上のコードでは _getPi <<< Math.PI <<< MyMath.PI = Main.PI < PI = _pi = ns::_pi = pi という結果で、ビルトインクラスのプロパティアクセスは若干重いので、ループ内で大量に参照する場合は変数に格納しておく方が良いです。また、getter アクセスの実態は関数ですので結構重いみたいです。MyMath.PI や Main.PI は、他の参照方法に比べると一階層下がるので若干重いですが、100 万回もループしての結果なので、あまり気にする必要はないんじゃないかと思います。ただ、注意事項が一つありますので「色々な整数化手段での処理速度の違い」も目を通しておいて下さい。

if … else と switch での処理速度の違い

if … else 文は比較回数が少ない場合は軽いですが、比較回数が増えると switch 文の方が高速です。ただ、100 万回も処理させて数ミリ秒の違いですので、臨機応変に見やすい方を記述しておけば良いんじゃないかと思います。

色々な整数化手段での処理速度の違い

Math.floor() が重いのは周知の事実。ただ、ローカル変数に格納したもので計算した場合は軽くなりそうなものの、逆に重くなるというのは以外だったと思います。これは先の「変数を参照する際の処理速度の違い」で Math.PI のようなプロパティを変数に格納しておく Tips と反して、ビルトインクラスのメソッドは逆に負担になりますので注意が必要です。そして本題の整数化では、n >> 0 などのビット演算で整数化する方が多いのですが、int(n) の方が高速だし見やすいのでお勧めです。

Array, Vector 走査時のイテレーション方法による処理速度の違い

forEach は関数を実行するコストが掛かるのでやはり重いです。ただ、for each よりも for の方が高速なのは自分的にもビックリでした。倍速近い差が出るので、大量な処理の中で走査処理が必要な場合は for の方が良いかもしれません。もちろん、Array より Vector の方が高速です。

Array, Vector 走査時に加算を行う際の処理速度の違い

これももちろん、Array より Vector の方が高速という結果に。ただ、Vector の長さを固定している方が高速になるかと思いきや、固定していなくても参照速度に差はないようです。

オブジェクト生成による処理速度の違い

new Object() より {}、new Array() より [] が高速というのは周知だと思います。あと、Vector の長さを指定すると最初に要素の初期化処理が入るようで、生成コストが高くなります。あとは Sprite の生成コストは当たり前のように高いです。独自クラスの生成は、処理が少なければ Object を生成するのとあまり変わりません。

サイン・コサインの取得方法による処理速度の違い

予めサインテーブルを生成した後、ラジアンをテーブルのインデックスに変換して近似値を参照するというもの。かなりの高速化が期待できますが、取得できる値は近似値だという点に注意が必要です。3D での頂点処理などで大量のループ処理を行う際などに効果が期待できるかと思います。

今のところ試したコードはこんな感じです。これからも、他の最適化を思い付いたら wonderfl に投稿した後、ブログにエントリーしていきます。

今朝、メールチェックをしたら 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 モードのチェックを外す事でエラーが表示されるようになり、正常に書き出せました。ただ、なぜ正常に書き出せなかったかは不明。