AS3で歩行グラフィックビューワー

ActionScript

前回に引き続き、歩行グラフィックについてもう少し検証してみます。
最終的には、歩行グラフィックの簡易ビューワー的なものを作りたいと思います。

キャラクターチップを描画するには、BitmapData#copyPixelsがだいたいにおいて効果的でした。
描画方法はこれで問題ないとして、あとはキャラクターチップをどのように取り込むかです。

この歩行グラフィックには一定の規格がないため、それを利用するエディタによって構成が違います。
たとえば、アニメーションフレームが収められた縦列の分割数や、方向パターンをおさめた行の並び順などがまちまちです。

方向行の組み合わせでよく見かけるのが 前・左・右・後 という並びと 後・右・左・前 という並びでした。
他にもあるかもしれませんが、ともかくこの要素は決め打ちできないことは確かです。

この問題に関するアプローチは、こちらが参考になります。
http://blog.tarotaro.org/archives/96

ゲームで利用するのであれば、たいていは画像はembedしてると思うのでこの方法がスマートだと思います。
今回はビューワーなので、表示クラスは抽象的なままの実装としておきます。

それから背景色も必ずしも透明ではないようです。
上の画像のように、緑で塗りつぶしてある箇所は透過させて表示させるようです。
これに関しては、BitmapData#thresholdが使えるので、AS側で実現できます。

簡単にまとめると

  • アニメーション（縦列）の列数は3〜5が多い（それ以上もある）
  • 方向パターン（横列）の並びには複数のパターンがある
  • 背景は必ずしも透過ではなく、特定の色が背景色として塗りつぶされていることもある（この場合、背景色を透過させる）

要件的にはこんな感じでしょうか。
UIコンポーネントでもって、これらの要素を編集できるようにしておけば、ビューワーとして成立しそうです。

とりあえず、ざくざくっと作ってみたので手元にキャラクターチップがあったら遊んでみてください。
とりこめる画像は、4方向単体画像のみです。

CharacterSprite Viewer - wonderfl build flash online

各コンポーネントの役割
  • [import]ボタン キャラクターチップの読み込み
  • 元画像の表示倍率を変更（1倍と2倍）
  • 透過色が指定できるピッカー
  • アニメーション列の分割数
  • 方向行をプリセット、または個別に指定
    • 1行目に格納されている方向を Front/Left/Right/Back から選択
    • 2行目に格納されている方向を Front/Left/Right/Back から選択
    • 3行目に格納されている方向を Front/Left/Right/Back から選択
    • 4行目に格納されている方向を Front/Left/Right/Back から選択
  • フレームレートの変更
  • キャラクターの移動量の変更

元画像の上にマウスを乗せると、マウス位置にある色がピックアップされます。
透過させたい色（塗りつぶされている背景色など）の上でクリックすると、透過色に設定します。

キャラクターはカーソル操作できるので、向きは実際にその方向のキーを押して確認してください。
方向行の指定ですが、キャラクターチップの並び順にあわせてボタンで選択していくか、プリセットから選びます。

  • プリセットA 前、左、右、後
  • プリセットB 後、右、左、前

ツクールシリーズでいえば、プリセットAが「VX」「XP」、プリセットBが「2000」にあたります。

つくってみて

キャラクタースプライトの表示クラスとしては、基本部分は前回の流用で、あれに透過処理とアニメーションを足しただけです。

UIについては今回のエントリーの本質じゃないんですが、行選択の方法は考える余地がありそうです。

今回は、4方向／単体のキャラチップだけを対象としてますけど、8方向＋チップセットにも対応しようと思うと、この手のUIじゃコントローラーが多すぎて、キャラクターチップがどういうものか分かっていないと、ちょっととまどうのではないかと。

ツクール系のソフトだとこのへんどうなってるんでしょう。

AS3で歩行グラフィック

ActionScript

ゲームキャラクターを表示させる歩行グラフィックというものがあるのですが
これをAS3で表示する方法をいろいろ調べた結果をまとめてみました。

こんな感じで、横列（行）には方向パターン、縦列にフレームアニメーション用のパターンをおさめた行列構造の画像を、歩行グラフィック（またはキャラチップ）と呼ぶそうです。

これを表示する方法としては、
行列構成のビットマップ画像から毎フレームごとに表示する箇所を切り出して描画する
という処理が一般的のようです。

歩行グラフィックの描画処理

つまり、右方向にキャラクターが進行しているのならば
右向きの画像が並ぶ行を、順に描画する、という感じです。

Spark project に歩行グラフィックを表示するライブラリがありました。

CharacterWalker
http://www.libspark.org/wiki/tarotarorg/CharacterWalker

Wonderflにもありました。
http://wonderfl.net/c/l7rP

他にもゲーム用フレームワークなどいろいろあるのでしょうけれども
キャラクターをフレームアニメーションさせる仕組みとしては、ほぼ同じだと思います。

描画方法の検証

ぱっと思いついた3つの方法で実装してみます。

キャラクターサイズのBitmapを作成して、BitmapData.copyPixelsで描画
キャラクターサイズのShapeを作成して、Graphics.drawRectで描画
キャラクターサイズにマスクしたSpriteに、Bitmapを配置して表示位置を変える

最初の二つがもっともよく見かけた方法でした。
最後のはJS版を作ったときの方法をそのまま流用したCSSスプライト的な考え方です。

実験としては、キャラクターを3000体描画してそのコストを比較します。

なのですが、大量に表示するのであれば、ステージサイズのビットマップに直接描画するのが効率的だと思います。
まずは基準として、これを実装してます。

ステージサイズのビットマップに描画

CharacterChip Test - wonderfl build flash online

手元の環境（Mac mini / Core 2 Duo 2.26 / 4GB）だと FPS 60 ぐらいです。
単純に速度を出すのであればこれが理想的な方法なのですが、今回は目的が違うので、この数字は参考までに。

次の3つは、3000体のキャラクターを生成して、描画方法の違いを検証してみます。

BitmapData.copyPixels

CharacterBitmap Test - wonderfl build flash online

Graphics.drawRect

CharacterShape Test - wonderfl build flash online

Spriteに配置したBitmapを移動させる

CharacterSprite Test - wonderfl build flash online

それぞれのFPSが 38、33、20 ぐらいになりました。
※一度にSWFを再生すると、どんどん重くなるのでリロードなどして個別に見てください

描画速度は、BitmapData.copyPixelsと、Graphics.drawRect が比較的速いですね。
数字の違いはあると思いますが、速度差はどの環境でもだいたい同じだと思います。

ただ、この方法だとかなりメモリを食っているように見えますが
まったく最適化していないので、今回の検証ではあまりそこは重要視しません。

例えば、同一の画像であればSWFに画像を埋め込むことでかなり軽減できます。

Flash コンテンツパフォーマンス最適化 （メモリ編 2）

BitmapData の単一参照機能

* Flash Player 10.1 では、埋め込まれたイメージから BitmapData インスタンスを作成すると、常に単一のインスタンスを参照する
* 既存のコンテンツも再コンパイル無しで Flash Player 10.1 上で実行するだけでこの機能が利用できる
* 従来の Flash Player では BitmapData のインスタンスを生成した数だけ、実際にインスタンスがメモリ上に生成されていた

この方法も一応、試してみます。
画像をLoaderで読みこまず、Embedした画像を 2番目の方法（Graphics.drawRect）で描画した場合です。
WonderflだとEmbedが使えないので、あらかじめパブリッシュしたSWFを貼っておきます。

Embedした画像で、Graphics.drawRect

Bitmap#scale9Grid をパターン画像で

ActionScript

Bitmap で Scale9Grid を可能にした ScaleBitmap というクラスがあるのですが
これだとドットパターンなどの柄モノが使えないんですよね。

そもそも使い方が違うので、そうならなくて当然なのですが
やっぱりパターン画像を使いたいなあと思ったので、作ってみました。

FillBitmap

FillBitmap - wonderfl build flash online

サイズ可変のボタンや、枠的な装飾に使えるんじゃないでしょうか。

使い方

初期化時に 元画像となるビットマップデータと、9スライスする矩形を指定します。
Rectangle に指定するパラメータの要領は DisplayObject#scale9Grid と同じです。

var fill:FillBitmap = new FillBitmap(bitmap.bitmapData, new Rectangle(6, 6, 12, 12));
fill.setSize(90, 90);

元画像の四隅を固定配置して、可変領域を bitmapFillRect のようにリピートで埋めています。
サイズ変更時は幅や高さの指定を、元画像の倍率とあわせる必要があります。

矩形領域の指定はインスタンスの scale9Grid パラメータで指定することもできます。
サイズ変更は、setSize メソッドまたは width/height から。

FillBitmap は Bitmap の拡張クラスなので、同じような感覚で使えると思います。

Mac OSXのPHP IDEとしてNetbeansを使う

PHP

非PHPerなので、補完とかステップ実行とかがないと辛いので
いろいろ探しているんですけれども、JSと同じく、いいツールがなかなか見つからないですね。

Aptanaの重さに辟易して、Netbeansを設定してみた作業手順です。

まずはダウンロード。

Netbeans
http://ja.netbeans.org/

最新版は、7.0のようですね。
バンドルを選択してダウンロードします。

続いて実行環境ですが、個人的にはOS標準のサーバ環境は
素のままにしておきたいので、MAMPというサーバアプリをいれます。
これ一つでApacheとPHP、Xdebugがインストールされます。

MAMP
http://www.mamp.info/en/index.html

PHP設定ファイルを編集して、Xdebugを有効にします。

/Applications/MAMP/conf/php5.X/php.ini

使用するPHPのバージョンのフォルダにiniファイルがあるので
テキストエディタで開いて、[xdebug] で検索してください。

[xdebug]
zend_extension="/Applications/MAMP/bin/〜略〜/xdebug.so"
xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_mode=req
xdebug.remote_host=localhost
xdebug.remote_port=9000

zend_extension="/Applications/MAMP/bin/〜の行頭のコメントアウト「;」を削除して有効にします。
続いてxdebugで始まる下5行を記述します。

サーバが起動していた場合は再起動して設定を反映させます。

これで、Netbeansのデバッガセッションが使えます。
ただこのままだと、ブラウザがいちいち起動してしまうので、出力パネルも有効にします。

メニューバー＞環境設定＞PHPタブ
コマンド行のインタプリタを指定します。

実行構成を切り替えます。
プロジェクトの構成からカスタマイズを選びます。

プロジェクトプロパティの実行構成を選び、実行方法を選択します。

設定はこれで完了です。
出力パネルが出てなかったら、メニューバー＞ウィンドウ＞出力 で表示させます。

AIRのapplication.xmlをAS3から取得する

ActionScript

AIR作成時にアプリケーションについての設定を記述するXMLファイルありますよね。
application.xml、マニフェストファイルというやつです。

<?xml version="1.0" encoding="utf-8" ?> 
<application xmlns="http://ns.adobe.com/air/application/2.0">
	<id>アプリケーションID</id>
	<version>アプリケーションのバージョン番号</version>
	<filename>アプリケーション名</filename>
	
	<name>インストーラで表示されるアプリケーション名</name>
	<description>同じく概要</description>
	<copyright>同じく著作権情報</copyright>
	
	<initialWindow>
		<title>タイトルバーに表示されるテキスト</title>
	</initialWindow>
</application>

このマニフェストファイルは、インストール時にユーザーのローカルディスクに保存されるので
VERSION要素の値を取得してアップデートを促したり、
リサイズ時の最小ウィンドウサイズを取得したりできるわけです。

取得方法なのですが、ローカルファイルのアクセスなのでFileStreamかと思いきや
NativeApplicationに格納されているので非常に簡単に取得できます。
以下AS3の例です。

var app:XML = NativeApplication.nativeApplication.applicationDescriptor;
var ns:Namespace = app.namespace();
var version:String = app.ns::version;

XMLオブジェクトなので、E4Xでアクセスできます。
簡単ですね！

Chromeを常にシークレットモードで起動するアプリケーションをつくる

Mac

やましいかどうかはともかくGoogle Chromeのシークレットモードは一発で開きたいですよね。

ターミナルから

open -a "/Applications/Google Chrome.app" --args "--incognito"

で開けるのですが、これをアプリケーションにするとなかなかいい感じです。
手順は下記を参考にしました。

シェルスクリプトをアプリケーションに変換
http://pqrs.org/macosx/doc/makeapp/

サンプルをダウンロードして、これを修正することにします。
.appを右クリックで「パッケージの内容を表示」します。
配下にあるシェルスクリプトをテキストエディタで開きます。

Contents/MacOS/core.sh

先ほどのコマンドを記入して保存します。
Chrome.appがApplications直下にない場合は適宜変更してください。

#!/bin/sh

open -a "/Applications/Google Chrome.app" --args "--incognito"
exit 0

アイコンファイルを適当なものに変更して完了です。

私が作ったものも公開しておきますので
こちらも自由に使ってください。

http://dl.dropbox.com/u/498311/Chrome-Incognito.app.zip

Titanium Studio 日本語化（Mac OSX環境）

Mac

Aptana Studio 2.0とまったく同じ手順で可能でした。
簡単ですけれども、ざっとまとめます。

まずは日本語化プラグインをダウンロード。

Pleiades 本体ダウンロード
http://mergedoc.sourceforge.jp/

今回は安定板の1.3.2にします。
ダウンロードして解凍して出てきたpluginsフォルダの
jp.sourceforge.mergedoc.pleiadesをTitanium Studioのプラグインフォルダに移します。

/Applications/Titanium Studio/plugins/

つづいて、設定ファイルを編集します。
Titanium Studio.appを右クリックして「パッケージの内容を表示」します。
開いたディレクトリの下記をたどるとiniファイルがあります。

/Contents/MacOS/TitaniumStudio.ini

これをテキストファイルで開いて下記を末尾に追記します。

-javaagent:../../../plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar

保存して再起動で有効になります。

日本語化までしておいてなんだけれども、しばらく使わなそう。。。