ボール増殖処理を組み込み。
[MOVE]と表示されている箇所の穴にボールが入ると画面内にボールが一つ追加されます。

実験として ボール増殖量には制限をかけておらず、一度ボールが増えると とてもにぎやかな画面になります。もはや何のゲームかわからないほどです。

また、今回より swf 表示倍率(100% or 200%)の設定をプレイヤーが任意に行えるようにしました。200% の表示倍率のものを ノート PC で確認してみたところ、表示がたいへんゆっくりしたものになってしまっていたからです。

■ 操作説明

swf 画面クリック後 以下のキーで操作を行います。

フリッパー操作 : 左右キー
画面振動 : 上キー
100%表示(画面動作が遅い方向け) : 1キー
200%表示 : 2キー

▽続きを読む

[ FLASH ] [ update ] 2012年01月30日 12:43 | コメント (4) | トラックバック

「ピンボールゲームの楽しさとは何たるか」を調査するために、無料で遊べるピンボールゲームを片っ端からプレイしてみました。結果 一番楽しめたのは、長いフリッパーで勢いよく次々とボールを弾きまくるピンボールゲームでした。ふんわり浮くボールが画面内で弾かれる様を長く眺めているよりも、自分で頻繁に弾いて操作するほうが遊んでいる感が強いのかもしれません。

というわけで今回のサンプルでは、ボール落下速度を上げフリッパーの長さを増加し、ゲームテンポの向上を行なってみました。

動作対象オブジェクトのすり抜け対策

ボール落下速度を上げてみると、ボールがフリッパーをすり抜けてしまうという問題が発生。
何か設定が足りないところはないか ネット上で「Box2D すり抜け」といった単語で調べてみたところ、以下の情報が見つかりました。

動作対象オブジェクト(b2Body)の b2BodyDef.bullet プロパティを true に設定すれば解決との事です。

bodyDef.bullet = true;

すり抜け対処のための衝突判定を continuous collision detection(CCD) と呼ぶ模様。Box2DFlash v2.1a 用のマニュアルではありませんが、以下の Box2D manual の Bullets の項目に説明がありました。

　Box2D v2.2.0 User Manual
　http://www.box2d.org/manual.html

ただし、この機能を利用すると負荷が増えるため、フレームレートが下がる原因となります。低スペックなPCほど影響がでてきます。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2012年01月16日 16:14 | コメント (0) | トラックバック

かぼちゃ風オブジェクト追加や得点表示拡大等、演出を少しずつ追加中。

▽続きを読む

[ FLASH ] [ update ] 2012年01月09日 19:00 | コメント (0) | トラックバック

団子一味のメインテーマをカジノ風にしてみた BGM に差し替えました。
その他、ゲーム画面内上部の扉を開けるとランプに火がつき、３つ全てのランプに火がつくと、得点が倍になるような処理を組み込んでいます。

また、今回より swf 画面を二倍に拡大して表示するようにしています。

▽続きを読む

[ FLASH ] [ update ] 2011年12月30日 18:46 | コメント (4) | トラックバック

少しずつ合間合間に手を加えています。
今回は「クリスマス風」になっているかどうかわかりませんが、それっぽい BGM (約 500KB)を作成し組み込んでみました。

　
　http://www.dango-itimi.com/blog/swf/147/preloader.swf

■ 操作説明

swf 画面クリック後 以下のキーで操作を行います。

フリッパー操作 : 左右キー
PAUSE : スペースキー
画面振動 : 上キー

[ FLASH ] [ update ] 2011年12月24日 17:32 | コメント (0) | トラックバック

最近 Google App Engine(GAE) では python 2.7 が利用可能になったため、新しく python 2.7 用にアプリケーションを作成してみたところ、PyCrypto のモジュールをインポートする箇所でエラーが発生してしまう事がわかりました。

例えば以下の一行を記述するだけで、GAE のサーバ上では ImportError が発生してしまいます。

import Crypto.Cipher

python 2.5 のアプリケーションでは上記記述を行なっても問題なく動作します。GAE python 2.7 では何か別の記述が必要なのでしょうか？

行なった検証手順は、以下の URL にある「Hello, World!」を表示するだけのアプリケーションの二行目に「import Crypto.Cipher」を追加しただけ、となります。

http://code.google.com/intl/en/appengine/docs/python/gettingstartedpython27/helloworld.html

Dashboard から確認可能なログに出力されたエラー内容

Traceback (most recent call last):
  File "/base/python27_runtime/python27_lib/versions/1/google/appengine/runtime/wsgi.py", line 168, in Handle
    handler = _config_handle.add_wsgi_middleware(self._LoadHandler())
  File "/base/python27_runtime/python27_lib/versions/1/google/appengine/runtime/wsgi.py", line 206, in _LoadHandler
    handler = __import__(path[0])
  File "/base/data/home/apps/s~test-crypto/1.355228157185667132/helloworld.py", line 2, in <module>
    import Crypto.Cipher
ImportError: No module named Crypto.Cipher

現状解決策が見つからないため、python 2.5 用のアプリケーションを別途作成しそちらで開発を進めることに。

追記)
GAE フォーラム「1.6.1 Pre-release SDKs are live」のスレッド内記述に以下の項目を発見。

- Fixed an issue in the SDK where importing Crypto.Util.Counter caused an
  ImportError.

今回の ImportError は次回バージョンで解決されるのかな？

追記2 2011/12/14)
本日 GAE 1.6.1 がリリースされたとのことで再度検証してみましたが、同じエラーが発生。
ちなみに Windows ローカル開発環境上では import Crypto.Cipher という記述ではエラーは発生しませんが、import Crypto.Cipher.DES という記述を行なうとエラーが発生します。

追記3 2011/12/14)
問題ほぼ解決。
python2.7 では外部ライブラリを用いる際、app.yaml に追記が必要なことがわかりました。
今回の場合、以下の記述を行えばサーバ上で ImportError は発生しなくなりました。

libraries:
- name: pycrypto
  version: latest

GAE ドキュメントをしっかり読んでいなかった私のミスでした。
残りの問題は、Windows ローカル開発環境上での ImportError のみ、となります。
Windows Vista 上での ImpoerError は以下のような記述になっています。

ImportError: DLL load failed: %1 は有効な Win32 アプリケーションではありません。

ファイル権限が関係している感じがします。引き続き調査を行います。
もしかしたら「GAEローカル開発環境では python 2.7 はまだサポートされていない」という事に対するエラーの可能性あり。

[ FLASH ] [ tips ] 2011年12月08日 16:20 | コメント (0) | トラックバック

Google App Engine(GAE)にて、以下の処理動作を行うサンプルアプリケーションを作成しました。

・swf 内データを Google アカウントを用いて GAE のデータストアに記録
・記録されたデータを元に Google アカウントユーザ毎の独自 URL の発行

サンプルアプリケーション URL
http://dango-itimi.appspot.com/crypto_test/

SCORE 欄 に最大 5桁の数値を入力し登録ボタンを押すと処理が開始します。使用しているブラウザで Google アカウントにログイン中の場合、GAE サーバ上に入力した数値が記録され、ログインしていない場合 ログインを促す画面が表示されます。

数値を登録した Google アカウントには アプリケーション上で ユニークID が割り振られ、http://dango-itimi.appspot.com/crypto_test/home/ユニークID/ という URL で、記録された数値を誰からも閲覧することができるようになります。

Google アカウント情報から取得可能な情報(ユーザID)はハッシュ化(暗号化)して利用しており、どの Google アカウントがこのサンプルアプリケーションを利用したのか等の情報は 管理人の私でもわからないようにしています。数値を登録するだけの大した内容ではありませんが、お気軽にご利用ください。

GAE と Google アカウント

GAE には Google アカウントと紐付けたアプリケーションの作成を比較的簡単に行うことができる仕組みがあります。何かユーザサービスを作成したい場合、GAE と Google アカウントを利用する事で、アプリケーション作成者はユーザのアカウント管理システムを作成する必要はなくなります。私のようなサーバ側の知識はほとんどない Flash 開発者にとっては、この仕組は非常に大きいです。アカウント管理は Google にまかせ、コンテンツ制作に力をそそぐことができます。

現在 Google アカウントを取得するには電話番号確認が必須となっています。(IP によっては電話番号は必須にならないケースもあるとの情報も見かけます)
Web サービスに Google アカウントを利用するメリットとして、ユーザの唯一性が保ちやすいという点が挙げられます。例えば何かの投票サービスを作成する場合、一人が多数のアカウントを利用してたくさんの投票を行う、という事態を避ける事ができます。
デメリットとしては、電話番号が必須のため アカウント作成にやや手間がかかるという点が挙げられます。サービスにログインしようとしたら、Google アカウントが必須な事がわかり、アカウントを取得するには電話番号が必須、となると「これはめんどうだ」という事で、ユーザを逃してしまう可能性がでてきます。簡単なゲーム等では、ログインはしなくても遊ぶことは可能で、スコア登録を行う場合のみログインが必要である、といった工夫が必要となりそうです。

暗号・難読化

Flash(swf) とサーバ(GAE)とで通信を行う箇所では、調査した以下の記事の内容を元に暗号化通信を行なっています。

・暗号化調査
・暗号化調査2 : as3crypto ←→ PyCrypto : DES, AES, RSA
・暗号化調査3 : Crypto.getCipher メソッドの利用 : DES, AES 修正版

また、secureSWF を導入し、swf の難読化を行なっています。(現在円高なので secureSWF は割とリーズナブルなお値段になっているかもしれません。)

python 側(PyCrypto)で RSA 暗号化したデータを as3 側(as3Crypto)で復号可能であれば もう少し安全な暗号化通信を行えそうなのですが、ここは残念なところです。

今回行なった通信内容のデータ改ざん対策の他、ゲーム等ではメモリ操作によるチート対策も必須となりそうです。

　参考 : Flashゲームのチート対策 | NJF
　http://njf.jp/?p=999

今後

複数の swf からでもデータ登録を可能にするシステムへ修正予定。汎用性をもたせたライブラリ化を図ります。

サーバ・ユーザアカウント管理問題や swf 解析問題により、今までは諦めてしまっていた事が多々ありました。「それを行うにはサーバ側を専門としている会社が必要」であったり「swf は解析されてしまうから、それを Flash で行うには避けたほうがよい」等々。
GAE の利用や、暗号・難読化により、これら問題は解決してきているのではないかと思います。

[ FLASH ] [ tips ] [ update ] 2011年12月02日 17:26 | コメント (0) | トラックバック

前回の記事「暗号化調査2 : as3crypto ←→ PyCrypto : DES, AES, RSA」を元に、as3 と python とで暗号化通信を行うサンプル制作を進めていた所、PyCrypto 側で DES 暗号化したデータを as3crypto 側で DES 復号できないケースがある事に気づきました。
8 byte 丁度の文字列は DES 復号可能でしたが、16 byte といった 8 byte より大きな文字列の復号が正常に行われませんでした。

調査の結果、AS3 版 SymmetricCrypter クラス内に問題があったため以下のように修正を行いました。

package com.dango_itimi.crypto {

	import com.hurlant.crypto.symmetric.IPad;
	import com.hurlant.crypto.symmetric.NullPad;
	import com.hurlant.crypto.symmetric.ICipher;
	import com.hurlant.crypto.Crypto;
	import com.hurlant.util.Base64;
	import com.hurlant.util.Hex;
	import flash.utils.ByteArray;
	
	public class SymmetricCrypter {

		private var crypter:ICipher;

		public static function createDESCrypter(key:String):SymmetricCrypter {
			
			return new SymmetricCrypter("des-ecb", key, new NullPad());
		}
		public static function createAESCrypter(key:String):SymmetricCrypter {
			
			return new SymmetricCrypter("aes-128-ecb", key, new NullPad());
		}
		public function SymmetricCrypter(cipherName:String, key:String, pad:IPad = null) {
			
			var keyBin:ByteArray = Hex.toArray(Hex.fromString(key));
			crypter = Crypto.getCipher(cipherName, keyBin, pad);
		}
		
		public function encrypt(plainText:String):String {
			
			var textBin:ByteArray = Hex.toArray(Hex.fromString(plainText));
			crypter.encrypt(textBin);
			
			var cipherText:String = Base64.encodeByteArray(textBin);
			return cipherText;
		}
		public function decrypt(cipherText:String):String {
			
			var decodedTextBin:ByteArray = Base64.decodeToByteArray(cipherText);
			crypter.decrypt(decodedTextBin);	
			
			var decryptedText:String = Hex.toString(Hex.fromArray(decodedTextBin));
			return decryptedText;
		}
	}
}

DESKey, AESKey クラスインスタンスを直接作成するのではなく、Crypto クラスの getCipher メソッド経由で DES, AES 処理を行うためのクラスインスタンスを取得するように変更を行なっています。

Crypto.getCipher メソッド第一引数

Crypto.getCipher メソッド第一引数にどういった文字列を指定すればよいかは Crypto.getCipher メソッドのコメントに記述があります。

引用 : com.hurlant.crypto.Crypto クラス getCipher メソッドコメント

/**
 * Things that should work, among others:
 *  "aes"
 *  "aes-128-ecb"
 *  "aes-128-cbc"
 *  "aes-128-cfb"
 *  "aes-128-cfb8"
 *  "aes-128-ofb"
 *  "aes-192-cfb"
 *  "aes-256-ofb"
 *  "blowfish-cbc"
 *  "des-ecb"
 *  "xtea"
 *  "xtea-ecb"
 *  "xtea-cbc"
 *  "xtea-cfb"
 *  "xtea-cfb8"
 *  "xtea-ofb"
 *  "rc4"
 *  "simple-aes-cbc"
 */
public static function getCipher(name:String, key:ByteArray, pad:IPad=null):ICipher {
	…
}

python 側では、DES 暗号化モード? に MODE_ECB と設定したので、as3 側でも同じく ECB モードに設定するために "des-ecb" という文字列を指定しました。

Crypto.getCipher メソッド第三引数の注意点

Crypto.getCipher メソッド第三引数には Padding 方法を指定します。

「AS3 Crypto Demo page」の Secret Key タブ内 Padding: 選択フォームを見ると「PKCS#5」「NONE」二種類の Padding 方法を選択できる事がわかります。Padding: に「NONE」を選択すると、前回作成した python 側での DES 暗号化した文字列の復号が可能となります。

Padding は「NONE」なのだから、Crypto.getCipher メソッド第三引数にデフォルトで設定されている null を指定すればよいのではないか、と考えてしまいそうですが、null を指定すると「PKCS#5」方式が選択されてしまう点にご注意ください。Padding に「NONE」を指定するには、NullPad クラスインスタンスを設定すればよいようです。

引用 : com.hurlant.crypto.symmetric.ECBMode クラスコンストラクタ 注意点

public function ECBMode(key:ISymmetricKey, padding:IPad = null) {
	this.key = key;
	if (padding == null) {
		padding = new PKCS5(key.getBlockSize());
	} else {
		padding.setBlockSize(key.getBlockSize());
	}
	this.padding = padding;
}

[ FLASH ] [ tips ] 2011年12月01日 10:53 | コメント (0) | トラックバック

前回の「暗号化調査」記事の続きです。
Action Script 3(AS3), python 双方向に暗号化通信を目的とした、共通鍵暗号方式(DES, AES)と公開鍵暗号方式(RSA)のプログラミングに関する調査が完了しました。

環境

AS3 側は as3crypto という暗号化用ライブラリを用いています。as3crypto.swc バージョン 1.3 と、svnリポジトリにある最新バージョンのソースファイル一式 両方で検証しました。

python 側は Google App Engine がデフォルトでサポートしている PyCrypto という暗号化ライブラリを用いました。python のバージョンは 2.5.2, PyCrypto のバージョンは 2.0.1 となります。最近 GAE でサポートされた python 2.7, PyCrypto 2.3 でも動作検証を行っています。

　as3crypto
　http://code.google.com/p/as3crypto/

　PyCrypto
　https://www.dlitz.net/software/pycrypto/

　windows 用 PyCrypto 2.0.1 ダウンロード URL
　http://www.voidspace.org.uk/python/modules.shtml#pycrypto

調査結果

AS3, python 共にネット上にサンプルソースが載っていた、共通鍵暗号方式(DES, AES)と公開鍵暗号方式(RSA)についてプログラミング調査を行ないました。共通鍵暗号方式の AS3, python 双方向暗号化に対しては、特に問題は発生せず、意図通りの動作となりました。

しかし公開鍵暗号方式(RSA)で問題が発生。AS3 側で暗号化したデータを python 側で復号する事は成功しましたが、python 側で暗号化したデータを AS3 側で復号する事ができませんでした。as3crypto の復号処理でエラーが発生してしまいます。

何が問題か as3crypto, PyCrypto 両方共に調査を行なってみましたが、ネット上の資料はあまり多くは見つからず、はっきりとした原因はわかりませんでした。どうも、RSA 暗号化方式にはパディング処理という物がいくつかあり、PyCrypto の採用しているパディング処理に対し as3crypto の復号処理が対応していないっぽい、という感じがします。それらしきキーワードが書かれていた英語の質問フォーラムの記述を断片的につなげてみただけなので、めちゃくちゃ言ってしまっているかもしれません。PyCrypto の RSA 暗号処理は PKCS#1 v1.5？方式で、as3crypto ではそれは解析できないとかどうとか、まだよく分かっていません。

「環境」の項目に記述した as3crypto, PyCrypto 二種類のバージョンで検証を行いましたが、動作の違いはなく問題は解決しませんでした。

as3crypto の復号処理で、「どういう復号処理を行うか」を指定できる箇所(RSAKey.decrypto メソッドの第四引数)があり、そこに pycrypto で暗号化したデータを復号するための独自のメソッドを指定すれば問題は解決しそうではあります。しかし別途、復号アルゴリズムの勉強を行わなくてはならなそうなので、python → AS3 への RSA 暗号化通信に関しては保留としたいと思います。

参考サイト

　■ AS3
　AS3で暗号/復号化 : suz-lab
　AS3で暗号/復号化(RSA版) : suz-lab
　RSA暗号化して通信経路途中での改ざんを防止 : KYUCON*BLOG
　
　■ python
　Pythonでの暗号化/復号化(AEC-DES,RSA) : YutaKikuchiのTechBlog
　PyCryptoで暗号化する : Pythonメモ

　■ ツール
　AS3 Crypto Demo page

サンプルソースコード

暗号化・復号用クラスと検証用クラスのソース一式は以下となります。AS3, python 共にロジックはほぼ同じです。

暗号化対象の文字列を暗号化し Base64エンコードするまでを encryptメソッドで行い、Base64エンコードされた暗号化文字列を 暗号化されていない文字列にまで復号するまでの処理を decrypt メソッドで行なっています。

▽続きを読む

[ FLASH ] [ tips ] 2011年11月10日 13:39 | コメント (0) | トラックバック

ものすごく状況が限定される情報です。世の中同じような状況で Adobe 製品がインストール出来ない…！なんて人の方のための解決へのヒントになれば幸いです。

Windows にて、近年の Adobe 製品のインストーラで発生します。インストール(アンインストール)時のエラーメッセージとして「Error 1325. ******* is not a valid short file name」といった「ショートファイル名が有効でない」といった意味の文言が表示された時の対処となります。

原因の可能性

上記エラーメッセージが表示される原因として、以下の Windows 上での以下の(a)～(b)の操作が問題である可能性があります。

(a)ドキュメント(マイドキュメント)ディレクトリの場所を任意に設定

私は外部ハードディスクにドキュメントディレクトリを設定するよう変更していました。私の場合、外部ハードディスクは Gドライブだったので「G:\MyDocument」というパスを設定していました。

(b)ドキュメントディレクトリのドライブを変更

関東大震災時いろいろ作業環境を変更していた際、外部ハードディスク名が変わってしまった事があります。Gドライブから Hドライブに変更がかかりました。「H:\MyDocument」へと変わりました。

いきさつ

本日、購入した Adobe Flash Professional CS5.5 アップグレード版が家に届いたのですが、インストールエラーが発生。たくさん表示されるエラーと警告文の中に気になるエラー文言が見つかります。

　Error 1325. MyDocument is not a valid short file name

このエラーメッセージは半年前くらいに DreamWeaver 体験版のインストールや Adobe Reader のアンインストールを行おうとした際にも表示されました。近年の Adobe 製品のインストーラで発生するかと思われます。

購入した Adobe Flash Professional CS5.5 でも同じエラーメッセージが表示されインストールできないのはまずい、という事で再度調査を開始しました。

解決手順

エラーメッセージの内容は「『MyDocument』という文字列を含むディレクトリパスが見つからない」という事かと予測し、任意に変更していたドキュメントディレクトリの場所をまずはデフォルトに戻してみようと思いました。しかし戻し方が思い出せない。
おかしいなとネット上で調べてみると「ドキュメントディレクトリのプロパティに[場所]タブで設定が可能」との事ですが、プロパティウインドウ内に[場所]タブが見つからない。更に検索してみると以下の情報がありました。

　Vistaのドキュメントプロパティから[場所]タブが消えた
　http://lufia.org/notes/2008/0808.html

上記記事を参考に、レジストリのドキュメントディレクトリの位置を調べてみると「G:\MyDocument」となっていました。「H:\MyDocument」になっていなくてはならないのに、ドライブ名は G のままでした。よって、「G:\MyDocument」を「H:\MyDocument」に編集し PC を再起動。(レジストリの書き換えには十分にご注意ください。)

これにより万事解決。エラーメッセージは表示されることなく無事 Flash CS 5.5 へのアップグレードを行うことができました。ドライブが変わったがレジストリは書き換えられていなかった、というのが主原因だったようです。

[ FLASH ] [ info ] [ tips ] 2011年11月04日 15:38 | コメント (0) | トラックバック

暗号化通信 並びに swf の暗号化についての調査を少しずつ開始。

暗号化通信

いくら暗号化通信を行おうとも swf 自体を解析されてしまえば意味が無い、といった認識がありました。ざっと調査した結果 その認識は変わらず。とはいえ暗号化しないと、誰でも簡単に不正なリクエストを行うことが可能となってしまうため、重要なデータを扱う swf では暗号化は必須となります。

swf は Google App Engine 上で動作させることを予定しており、AS3 ←→ Python 双方向に暗号化通信を可能にすることを第一の目標とします。

暗号化の方法を調べてみると、共通鍵暗号方式と公開鍵暗号方式、そして両者を組み合わせたハイブリッド暗号方式等が見つかります。以下はハイブリッド暗号方式に関しての参考 URL です。

　http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1065429575
　http://itpro.nikkeibp.co.jp/article/COLUMN/20060620/241303/

共通鍵暗号化通信、公開鍵暗号化通信それぞれサンプルを制作した後、ハイブリッド暗号方式に挑戦してみようと思います。ハイブリッド式にするのは、上記 URL 内にあるような両者の利点をとるため、というのではなく、スクリプト難読化のため(不正なリクエストを送り難くするため)の対処といえます。

AS3, python 共に暗号化に関する情報は検索すると結構見つかります。MD5, RSA あたりがキーワードになるでしょうか。

Adobe のサイトでも少々解説がありました。

　より安全なSWF Webアプリケーションの作成
　http://www.adobe.com/jp/devnet/flashplayer/articles/secure_swf_apps_12.html

ただし、上記 URL の以下の文章は誤りではないでしょうか。

非対称暗号化方式を使用する場合は、SWFファイル内に公開鍵を格納しても、
脅威にさらされることはありません。

第三者がSWFファイルを逆コンパイルして鍵を盗んだとしても問題はありません。
攻撃者が不正な暗号化済みデータをサーバに送りつける可能性もありますが、
サーバ側で、暗号化が行われているかどうかにかかわらずデータの検証を行うよう対策を施していれば、
問題はありません。

サーバ側でデータの検証を行えばよい、とありますが、データを作る側のロジックは swf 内に存在するため、ロジックが解析されてしまえば不正なデータは作れてしまうような気がします。

swf 暗号化

まず、どれくらいの精度で解析可能なんだろうかと、世にある swf の解析ソフトを試用してみました。
swf バイナリ解析を勉強していた時、相当これはややこしいな、と感じていたため、解析ソフトも大した解析はできないのではないか？などと思っていましたが、いやはや実際に試用してみてびっくり。クラスパッケージ構造そのまま、ソースファイルの内容ほぼそのままに解析されました。あまりのそのままさに、ブーッと吹いてしまいました。暗号化通信対処を行なっても、その処理箇所がどうなっているのか知識のある人ならばすぐに見ることができてしまいます。

これは手詰まりか、と思いましたが、次に「swf 難読化ソフト」の試用を行って見ました。ソフト名は secureSWF です。試用してみた結果、解析ソフトで解析したとしてもソースファイルの内容は何が書かれているのか分からないような難読化が行われました。ディレクトリ構造やらクラス名やら何から何まで解析結果はめちゃめちゃな状態になり、これを解読するのは無理と言ってもいいような状況ではないでしょうか。

ただし、secureSWF によってクラス名等変更されているのが原因かどうか、外部 swf を読み込む箇所で動作が停止してしまう現象が発生しました。secureSWF の Identifiers Renaming タブに、クラス名や変数名等 rename 設定を任意に行うことができるような箇所があるので、その設定によってこの問題は解決するかもしれません。

secureSWF のデモダウンロードページを見てみると、FDT Plugin バージョンというものも用意されている模様。これはなんとか上記問題を解決し、導入を検討してみたいところです。

まとめ

暗号化通信並びに swf 暗号化、双方が問題なく可能になれば、サーバと swf とのデータのやりとりを行う処理にて、最低限の対策はとった と言うことができそうです。

[ FLASH ] [ tips ] [ update ] 2011年10月31日 16:23 | コメント (0) | トラックバック

過去制作していた素材データの組み込みが完了。
自力での物理演算処理組み込みにおいて難題だった「フリッパーがボールを跳ね返す動作」は、Box2DFlash によって見事なまでの跳ね返り具合を見せてくれるようになりました。

　http://www.dango-itimi.com/blog/swf/146/preloader.swf

画面クリック後、左右キーでフリッパーを操作することが可能です。スペースキーを押すと PAUSE となります。
また、ボールがどこか平坦な地で停止してしまった場合の対処として、上下キーで画面全体を揺らす事ができます。ボールがどこかに接地している場合のみ機能し、一度揺らしたら一定時間立たないと再度揺らすことはできません。

効果音はテストとしてフリッパーを操作した時のみ鳴るようにしています。また、現段階で得点はスロットがそろった時のみ入ります。

どのようにすれば Box2DFlash でピンボールゲームを作ることが可能かの調査は、今回のサンプル製作でほぼ完了しました。今後は、スロットのようなゲーム内イベントを少しずつ増やしていき、充実化を図りたいと思います。

[ FLASH ] [ update ] 2011年10月29日 13:36 | コメント (0) | トラックバック

AS3 用エディタとして利用している FDT の新しいバージョン FDT5 が昨日登場しました。

　http://fdt.powerflasher.com/

早速導入してみようと eclipse プラグイン設定から http://fdt.powerflasher.com/update/ へアクセスしてみるも、FDT4 までしか見つからない状況。twitter の情報を追ってみると、プラグイン版はまだとの書き込みを発見。プラグイン版が出るまで、うずうずしながら使用はしばらく待ちたいと思います。

コード補完機能の向上

ざっとどのような機能があるのか見てみたところ、一番に目についたのはエディタのコード補完機能が向上したという点。

　Advanced Refactoring & FDT 5

値から変数と型宣言を自動で補完してくれたり、ローカル変数定義を直でフィールド変数定義に変換してくれたり、値をフィールド定数値に変換してくれたりと、かゆい所にまで手を届けてくれた感じの機能向上です。コーディング時で薄々不便に感じていた点を補完してくれるようになり、開発効率も微量ながらアップすることでしょう。

メソッドの戻り値に対する変数と型宣言も補完してくれそうな気もしますが、上記サイト内にはその説明がなかったので試してみないとわからないところです。例えば「test.run();」という記述を「var *:int = test.run();」と補完してくれるのならば、とても効率がアップします。

haXe サポート

以前 FDT の blog で文字を目にしたことはありましたが haXe とはなんぞや状態でノーチェックでした。haXe のサイト内説明を見てみたところ、なんとも面白そうなプログラミング言語であることがわかりました。

　haXe の紹介

javascript でのゲーム開発、といったソースコード量が大変多くなりそうな時に、代行手段として haXe を用いることができるのではないかな？と感じました。現行の javascript を記述していて一番問題に感じるのは、eclipse の Refactor 機能(Rename, Moveコマンド)を用いる事が可能なエディタが存在しない、という点です(存在していたらごめんなさい)。大規模開発にて javascript の利用が厳しいと感じるのは、これが理由です。
しかし FDT の Refactor 機能を haXe に用いることが可能ならばこの問題は解決します。AS1 の利用をやめ AS2 を利用するイメージと同等となります。とはいえまだ試してもいないので、FDT の Refactor 機能が haXe に利用できなかったらごめんなさい。

haXe にて jQuery といった外部ライブラリを利用したい場合、どのように記述するのだろうか、それとも同等の API が用意されているのだろうか、等 疑問は多々ありますが、時間があるときに簡単に調査したい所です。

フリー版

FDT5 には機能を制限したフリー版があります。フリー版では肝と言える Refactor 機能の利用はできませんが、基本となるコード補完機能の利用は可能のようなので、eclipse + FDT によるコーディングがどのようなものか、これを機に試してみてはいかがでしょうか。

　ダウンロードページ
　http://fdt.powerflasher.com/buy-download/

vi 使いの方には合わせて viPlugin for Eclipse (有料)の導入もお勧めします。

[ FLASH ] [ info ] [ tips ] 2011年10月27日 11:09 | コメント (0) | トラックバック

先日 TortoiseSVN 1.7 がリリースされ、それに伴い WC-NG(Working Copy Next Generation) というファイル管理方法に変更がかかりました。

　参考)Subversion 1.7が出たので、TortoiseSVN 1.7でWC-NGやってみた
　http://d.hatena.ne.jp/lino/20111014/1318597181
　
引用

Subversion 1.7の新機能の中でも個人的に嬉しいのが、WC-NG(Working Copy Next Generation)です。WC-NGは作業コピーのメタデータ変更で、フォルダの中にたくさんあった.svnフォルダがルートフォルダだけに集約されます。

今までは各ソースディレクトリ内毎に .svn ができてしまっていたため、eclipse(FDT) の Refactor コマンド(Rename, Move)を用いて「ディレクトリ名の変更」や「ディレクトリを他ディレクトリへ移動」を行うと、作業コピー内ディレクトリの構造が壊れてしまうという問題がありました。しかしこれからはその問題は発生しなくなります。

TortoiseSVN 1.6 以前の問題点

例えば以下のような Subversion 管理のディレクトリ構造があったとします。testA ディレクトリ内には AS3 ソースファイルの SampleA.as と SampleB.as が存在します。

root/
├ testA/
│　├ SampleA.as
│　└ SampleB.as
├ testB/
└ testC/

実際には以下のように、各ディレクトリ内には隠しディレクトリ .svn/ が存在します。

root/
├ .svn/
├ testA/
│　├ SampleA.as
│　├ SampleB.as
│　└ .svn/
├ testB/
│　└ .svn/
└ testC/
　　└ .svn/

Refactor Move コマンドを用いて testA ディレクトリを testB ディレクトリの下に移動させると以下のようになります。

root/
├ .svn/
├ testB/
│　├ .svn/
│　└ testA/
│　　　├ SampleA.as
│　　　├ SampleB.as
│　　　└ .svn/
└ testC/
　　└ .svn/

FDT の Refactor Move コマンドでは testA/SampleA.as と testB/SampleB.as の内容は自動で書き換えてくれますが、testA/.svn/ ディレクトリ内の内容を書き換える機能はありません。上記のように Move コマンドで root/testB/testA/.svn/ に移動しても Subversion 上では root/testA/.svn/ 上に存在している事となり、不整合が発生してしまいます。よって今までは、任意に root/testB/testA/ 内の .svn/ ディレクトリを削除したりしなくてはなりませんでした。

TortoiseSVN 1.7 以降

上記ディレクトリ構造例を TortoiseSVN 1.7 に適用すると以下のようになります。

root/
├ .svn/
├ testA/
│　├ SampleA.as
│　└ SampleB.as
├ testB/
└ testC/

Refactor Move コマンドを用いて testA ディレクトリを testB ディレクトリの下に移動させると以下のようになり、ディレクトリ構造の不整合は発生しません。

root/
├ .svn/
├ testB/
│　└ testA/
│　　　├ SampleA.as
│　　　└ SampleB.as
└ testC/

[ FLASH ] [ tips ] 2011年10月20日 15:32 | コメント (0) | トラックバック

過去 AS2 で製作し中途で止まっていたピンボールゲームを、Box2DFlash v2.1a にて動作させてみることに。

「Flash オーサリング環境上で製作したシェイプデータを Box2DFlash の物体として再現するライブラリ」の精錬化と、Box2D を用いてのゲームプログラミングの練習の意味も兼ねての制作となります。

過去製作したピンボールゲームの背景データと、Flash オーサリング上で背景用グラフィックスシンボルを配置したイメージは以下となります。

まだまだお粗末ですが Box2D debug モードでの動作は以下となります。

　http://www.dango-itimi.com/blog/swf/145/0/preloader.swf

画面クリック後、左右キーでフリッパーを操作することが可能です。ゲーム中スペースキーを押すと PAUSE となります。どこかくぼみにボールがはまるとゲームは停止してしまいます。

PAUSE 機能を実装してみて、Box2DFlash v2.1a では内部で何か独自のスレッドを持ってはいないことが確認できました。b2World.Step メソッドを実行することで 1フレーム分の処理が実行されるような内容になっているようです。

背景グラフィックスや、ボールとフリッパーのグラフィックスを合わせたものが以下となります。

　http://www.dango-itimi.com/blog/swf/145/1/preloader.swf

b2RevoluteJointDef 制限角度注意点

フリッパーの動作は b2RevoluteJointDef クラスのモーター機能を利用しています。

　参考サイト)
　http://flashjp.com/apiindex.php
　http://d.hatena.ne.jp/matsu4512/20090110/1231585208

b2RevoluteJointDef を利用してみた所、b2RevoluteJointDef.lowerAngle, b2RevoluteJointDef.upperAngle の値を設定したとしても、その値 丁度には停止してくれない、という点に気づきました。制限値に近い角度になっている状態で更に大きなチカラを加えたり モーターを回したりすると、一瞬大きく角度がはみ出てしまいます。よって、制限角度を超えたらそれ以上にチカラを加えたりモーターを回したりはしないようにするための制御を別途行うようにしています。

[ FLASH ] [ tips ] [ update ] 2011年10月13日 16:56 | コメント (0) | トラックバック

業務にて HTML 主体の Web サイト制作がいくつか続き、ようやく一息つける段階になりました。

HTML 主体なので Flash はまったく利用していないのか、というとそんな事はなく、むしろメインで使っています。Flash を用いている箇所は「ブラウザ上の表示」ではなく「開発の段階」でとなります。

端的に言えば「Flash による HTML サイト開発」となり、詳しく言うならば「オーサリングソフト Flash Professional CS5 にて利用可能な Adobe AIR 出力機能を用いての HTML サイト開発」です。

Adobe AIR のファイル入出力機能を利用して 簡易的な CMS(コンテンツマネジメントシステム) を構築し、システム内の機能を用いて Web サイトを運用します。

Adobe AIR から出力されたアプリケーションには Dreamweaver にあるようなテンプレート機能が用意されており、更新者は最小必要減のデータを入力後、アプリケーションの出力ボタンを押すだけで、データが反映された 静的 HTML が出力されます。当 blog で用いている Movable Type の内容にも近いです。条件によって変化する複雑な HTML レイアウト等 テンプレート機能だけでは補えないものは、AS3(Action Script 3) で HTML レイアウトタグを出力する処理を記述します。

作成したシステムは、以後流用が可能となり、専用のソフトウェアを購入する必要はありません。システムを 1 から構築しているので、ルール付けも自由。難しいレイアウト変更など、クライアントの要望にも答えやすいです。

こういったシステム開発を行うには、今までは他のプログラミング言語を利用するしかありませんでしたが、Adobe AIR の登場により Flash からも開発が可能となりました。利用する言語が少なければ、それだけ開発者の負担も減ります。

Adobe AIR はデスクトップアプリケーションを始め、モバイルデバイス対応(iOS, Android)など、現在進行中で機能拡大しています。それに合わせてオーサリングツール Flash の利用方法も変化していくこととなりそうです。

Flash と HTML5 的なお話

HTML 主体のサイト製作の流れ上、Flash の利用の是非や HTML5 に関する話がクライアントからあった、という話をよく耳にするようになりました。少し勘違いされているような内容もあり、よい説明を心がけるためにも、最近ではそれ関連の記事をブクマしています。

　・Appleが嫌うけどGoogleは好きっぽいFlashとHTML5について | smartgoods.me
　・HTML5があるからFlashがいらないということについての見解
　・情弱なはてブ民にも判りやすく HTML5 vs Flash のこと教えてやる
　・Impression of Chrome+HTML5 Conference by @coppieee
　・バズワードに流されてませんか? 今チェックしておきたい、現場の開発者から見たHTML5の実際のところ

私が現段階で HTML5 についてどう考えているかは以下となります。実際に自分の手で検証してみたわけではなくネット上で調べただけの内容が含まれているため、誤っている可能性もあります。検証しない理由も以下となります。

・正式な仕様が決まってから習得

仕様決定は2014年を目指しているとの事です。未決定の仕様は変更される場合があり、学習した内容が無駄になる箇所がでてくる可能性があります。
時間に余裕があれば学習する価値はあります。しかし私は他にもまだまだ覚えなくてはならないものが山ほどあり、優先度は下がります。そして、習得した技術は年中利用していないと確実に忘れます。

別途、仕様が決まっていない事に合わせて、各ブラウザの HTML5 表示具合が統一されていない、という状況が懸念点です。現状の HTML4 の悲劇が再びになりそうで怖い。表示統一のためにも、ギミック的な箇所は Flash(swf) を利用する検討の考慮を。

・HTML5 習得 とはいっても大変な内容ではない(だろう)

ざっと調べたた感じ、HTML5 のキモと言われている canvas 操作はそのまま Flash 内ステージ操作と同じ事をするのではないかな(AS で書いていたものを javascript に書き換えるだけ)、と思います。CSS3? によるアニメーションの表現など、javascript 以外にも表現方法があるとのことで、そこらへんの仕組みを考えるのは面白そうですね。

ECMAScript を準拠としている AS1(Action Script 1.0) によるクラス設計が可能ならば、そのまま javascript によるクラス設計も可能です。HTML サイト製作において、jQuery は現状使いまくっているので、そのまま HTML5 の DOM 操作も簡単に行うことができる事でしょう。

ECMAScript4 標準化が白紙にならなければ、AS3 で書いた処理がそのまま HTML5 上でも利用できる、なんて日が来たのかもしれませんが、ここらへんは残念です。

---

その他、よく HTML5 の解説ページで「～という記述を用いれば IE6 でも HTML5 の表示が可能」と書かれていますが、これって本当なのでしょうか。こちら調べた限りでは「ただし、完全に HTML5 の表示はできません」という記述が必要だと思うのですが、実際に試してみていないので強くは言えないところです。

[ FLASH ] [ info ] [ tips ] 2011年09月18日 15:29 | コメント (2) | トラックバック

斜面を並行移動するプレイヤー(操作可能な箱)が、斜面を登り切った後 繋がる平面に対し、スムーズな平面並行移動に遷移するサンプルを作成しました。斜面を登り切るタイミングで Y軸方向の移動ピクセル量を調節し、平面から浮かないような処理を加えています。

　http://www.dango-itimi.com/blog/swf/144/preloader.swf

斜面を下り終えた後に繋がる平面への並行移動遷移処理は、今回の処理とは別となるため恐らく次回となります。

斜面を登り切った後 どうすれば平面並行移動にスムーズに遷移できるのか、胃袋が痛くなるまで悩みましたが、Box2D上におけるピクセル移動処理の方法が判明したため今回のサンプルを作成できました。

その他 悩ましかった点は、プレイヤー位置や移動量を決定する b2Body.SetPosition, b2Body.ApplyImpulse, b2Body.SetLinearVelocity メソッドがそれぞれ適用されるタイミングはいつなのか、プレイヤー位置操作後 プレイヤーが衝突している物質を取得できるタイミングはいつなのか、についてです。

結論としては、1フレーム内に 以下の順序で処理を行うことにより、問題は解決しています。

(1)プレイヤー移動
b2Body.SetPosition, b2Body.ApplyImpulse, b2Body.SetLinearVelocity 等を実行

(2)b2World.Step メソッド実行

(3)衝突物質の判定
b2World.GetContactList メソッドからの衝突物質データの取得

(4)衝突判定
プレイヤーが衝突している物質が何であるかを判定し、次のフレームでプレイヤーがどの行動を取るのかを設定

プレイヤー位置を設定するメソッド実行後、b2World.Step メソッドにより プレイヤーの位置が確定し、確定された位置から衝突物質が何であるのか判定できるようになる、といったところでしょうか。誤っていたらごめんなさい。

[ FLASH ] [ tips ] [ update ] 2011年08月18日 17:47 | コメント (0) | トラックバック

移動する物質を指定位置でぴったり停止させたい、という場合、任意で物質の移動速度を調節する必要があります。しかしどういう記述をすれば、ピクセル単位で物質を移動させることができるのか わからない状態でした。

検索してみたところ、丁度それらしき情報を発見。

　適当ブログ:物体を投げる処理(box2d c++)
　http://wt03.blog.fc2.com/blog-entry-42.html

上記サイトによると、以下の式から得られる値を b2Body.SerLinearVelocity に設定すればよいとのことです。

移動させたいピクセル数 * フレームレート / BOX2D_SCALE

例えば、フレームレート 30, BOX2D_SCALE の値を 10 として、横に 5 ピクセル移動させたい場合以下のような記述を行います。

var FRAME_RATE:uint = 30;
var BOX2D_SCALE:uint = 10;

body.SetLinearVelocity(new b2Vec2(5 * FRAME_RATE / BOX2D_SCALE, 0));

変数 body は操作したい物質の b2Body クラスインスタンスです。

上下左右キーで空中を 5 ピクセルずつ移動するだけのサンプル swf は以下となります。

　http://www.dango-itimi.com/blog/swf/143/preloader.swf

このサンプルでは前回の記事に記述した、操作対象となる物質に重力を無視する処理を組み込んでいます。

[ FLASH ] [ tips ] [ update ] 2011年08月17日 10:00 | コメント (0) | トラックバック

Box2D 上でプレイヤーに何か弾のようなものを撃たせたい場合に必要と思われる、「重力を無視して直進する物質」はどのようにすれば表現できるのかの調査を行ってみることに。

ネットで検索してみると以下のサイトに、重力を無視するにはどうすればよいかの説明がありました。(恐らくバージョンは Box2DFlash v2.0.2)

　Master of None
　http://d.hatena.ne.jp/o_healer/20080508

上記サイトでは、b2Math.MulFV というメソッドを用い、物質の質量と反対方向の重力数値を加工し、加工後取得可能な力を物質に加えているらしき事がわかります。

しかし v2.1a では b2Math クラスは無くなっており、v2.0.2 のリファレンスで b2Math.MulFV メソッドの項目を見てみるも何も説明がなく、MulFV メソッドによりどのような加工が行われるのかわからない状況です。

よって色々な方法を試し、なんとかそれっぽい動作になる形にしました。
重力を無視して物質を直進させるには以下の二行を毎フレーム呼び出す形となります。

body.SetLinearVelocity(new b2Vec2(x軸速度, y軸速度));
body.ApplyForce(new b2Vec2(0, body.GetMass() * -gravityY), body.GetPosition());

変数 body は直進させたい物質の b2Body クラスインスタンスとなります。
一行目 SetLinearVelocity は、今までの物質の速度を無視して、引数で指定した速度に強制的に変更します。二行目では重力を相殺しています。もっとスマートな方法はあるかもしれません。

物質を空中に留めたい場合は以下のように記述します。

body.SetLinearVelocity(new b2Vec2(0, 0));
body.ApplyForce(new b2Vec2(0, body.GetMass() * -gravityY), body.GetPosition());

今回作成したサンプルは以下のような記述を行い、弾が右方向に直進するようにしています。

body.SetLinearVelocity(new b2Vec2(10, 0));
body.ApplyForce(new b2Vec2(0, body.GetMass() * -gravityY), body.GetPosition());

サンプル swf は以下となります。スペースキーで弾が発射されます。(スペースキーを有効にするにはキーボード変換を半角英数モードにする必要があります)

　http://www.dango-itimi.com/blog/swf/142/preloader.swf

他参考にさせていただいたサイト

■ SetLinearVelocity 関連
http://www.haphands.com/sw_flash/tech/box2d/box2d_07.html

■ 衝突 する / しない のグループ分け関連
http://www40.atwiki.jp/spellbound/pages/647.html
http://hokori.net/2009/05/27/box2dflashas3_contact/

[ FLASH ] [ tips ] [ update ] 2011年08月07日 15:27 | コメント (0) | トラックバック

前回の記事「Box2DFlash v2.1a 調査2 : 斜面に対して平行に移動する箱」からの続きです。

二つの物質が衝突した際 得ることが可能な b2Manifold というクラスインスタンスがあります。b2Manifold クラスインスタンスのプロパティ値をどのように見れば「斜面に衝突したかどうか」「どの斜面に衝突したのか」を判別できるのかの調査を行いました。

調査用 サンプル swf

　http://www.dango-itimi.com/blog/swf/141/preloader.swf

上下左右キーで回転しない箱(以後プレイヤー)を操作する事ができます。斜面に接地時は、斜面に対して平行に移動します。
プレイヤーが背景オブジェクト(緑色の物質)に衝突すると、m_type と m_localPlaneNormal テキストフィールドに衝突時のデータが表示されます。

b2Manifold.m_type

まず、m_type プロパティの値に注目します。サンプルから以下のデータを得ることができます。

(1)
プレイヤーの上下左右の面が多角形(box or polygon)の背景オブジェクトにぶつかる
あるいはプレイヤーのどこかが円の背景オブジェクトにぶつかると
b2Manifold.m_type は 2 の値(b2Manifold.e_faceA) を返却する

(2)
プレイヤーの四隅が背景オブジェクトにぶつかると
b2Manifold.m_type は 4 の値(b2Manifold.e_faceB) を返却する

プレイヤーの角度は常に一定であり、プレイヤー上下左右の面が背景オブジェクトの斜面に衝突する事はありません。背景オブジェクト斜面に衝突するのはプレイヤーの四隅のみです。
よって、b2Manifold.m_type の値が 4 の時に、プレイヤーが斜面に衝突していることになります。

b2Manifold.m_localPlaneNormal

m_localPlaneNormal は「ローカル座標軸を元とした衝突面の単位法線ベクトル」といった意味でしょうか。b2Manifold.m_type プロパティと合わせて見ます。

(1)
m_type の値が 2 で プレイヤーが多角形(box or polygon)に衝突した場合
プレイヤー衝突面の単位法線ベクトルを返却する

(2)
m_type の値が 4 の場合
背景オブジェクトのローカル座標軸を元とした
背景オブジェクト衝突面の単位法線ベクトルを返却する

(3)
m_type の値が 2 で プレイヤーが円に衝突した場合は
今回の斜面衝突判定とは関係ないため説明略

ローカル座標軸を元としたデータの取得となるため、画面上に表示されている物質の角度がなんであれ、角度を 0 とした単位法線ベクトルが返却されます(多分)。box の角度が 15度、-30度の背景オブジェクトいずれも、上面にプレイヤーをぶつけると m_localPlaneNormal の値は (0, -1) となります。

これより今回のサンプルでは、以下の条件(a)～(c)いずれかの時 プレイヤーは斜面に衝突していることになります。

(a)
衝突した長方形(box)背景オブジェクトの角度が正で
m_localPlaneNormal の値が(-1, 0) または (0, -1)

(b)
衝突した長方形(box)背景オブジェクトの角度が負で
m_localPlaneNormal の値が(-1, 0) または (1, 0)

(c)
衝突した背景オブジェクトが多角形(polygon)で
m_localPlaneNormal の y 値が負

多角形(polygon)の角度が 0 ではない場合、斜面に衝突したかどうかの判定処理は複雑になりそうです。

参考)
Box2DFlash Documentation : b2Manifold
http://www.box2dflash.org/docs/2.1a/reference/Box2D/Collision/b2Manifold.html

Box2D 2.1a Tutorial – Part 4 (Collision Detection)
http://blog.allanbishop.com/box2d-2-1a-tutorial-–-part-4-collision-detection/

[ FLASH ] [ tips ] [ update ] 2011年08月05日 02:14 | コメント (0) | トラックバック

アクションゲームを作る場合に必要と思われる機能「斜面に対しての並行移動」は、Box2Dにて実現可能かどうかの調査を行ってみることに。

斜面に平行に移動するには、衝突した物資の斜面の角度が分かればよい事になります。

ネット上で調べてみると、物質衝突時得ることが可能な b2Manifold というクラスインスタンスがある、という情報が見つかります。しかし b2Manifold から得られる各値をどのように見れば、「衝突した斜面」と「斜面の角度」の判別を行うことが可能なのかの情報は見つかりませんでした。(特にv2.1aの日本語の情報は皆無)

よって あらゆる方向から物質をぶつけ、得られる数値から推測を行い、おそらくこうであろうと予測しつつ、なんとか形にする所まで進めました。

成果物は以下となります。画面クリック後、上下左右キーでプレイヤー(回転しない箱)を操作する事が可能です。

　http://www.dango-itimi.com/blog/swf/140/preloader.swf

通常はプレイヤーに対し上下左右キーでその方向に力が加わります。しかし長方形の固定物質の斜面にプレイヤーが接地(上から衝突)した場合のみ、左右キーはプレイヤーに対して 斜面に並行した力が加わるようにしています。
現在は多角形の斜面には対応しておらず、多角形に対応後、調査結果をまとめたものを記事にできればと思います。

[ FLASH ] [ tips ] [ update ] 2011年07月31日 19:30 | コメント (0) | トラックバック

世に公開されている物理エンジンライブラリを用いてのプログラミング法を学習すべく、Box2DFlash v2.1a を利用してみることに。

　Box2DFlash
　http://www.box2dflash.org/

Box2DFlash はバージョンごとに API が変化しているようで、最新の v2.1a に関しては以下のサイトが参考になります。

　Box2D 2.1a Tutorial - Part 1(英語)
　http://blog.allanbishop.com/box2d-2-1a-tutorial-part-1/

まずは Box2D の使用方法を学びつつ、Flash オーサリング環境上で制作したシェイプデータを、そのまま Box2DFlash の物体として再現するような処理を作成する事を第一目標としました。

成果物

以下のような 四角、丸、点(緑丸)の集合体、のムービークリップを Flash オーサリング上で用意します。

四角なら(box～)、丸なら(circle～)、多角形なら(polygon～)、といった具合にムービークリップ名には規則性を持たせ、ムービークリップ名称と形状・座標・角度に応じた Box2D の物質を生成するように処理を作ります。

例えば一番左上の紫色の四角形のムービークリップ名は box4_1_0_10 としており、数値の部分は以下の意味を持ちます。

　4 : id
　1 : 動作する物体であることを示す
　0 : 反発係数
　10 : 摩擦係数

反発係数と摩擦係数は処理内では 1/10 として計算されます。

処理作成後の再現結果は以下となります。

　http://www.dango-itimi.com/blog/swf/139/preloader.swf

ムービークリップの名称を変更すれば、ソースコードを変更する事なく各物体の振る舞いを変更する事が可能です。また、ムービークリップ群を配置しているクラスは dynamic に設定しており、ソースコードを変更する事なく、自由にムービークリップを追加・削除する事ができます。(dynamic なクラスはバグの温床ともなるため、使用の際は注意が必要)

以後の予定

反発係数や摩擦係数をムービークリップ名で設定できるようにはしましたが、その仕様は削除する事になるかもしれません。物体1から10までを同じ反発係数や摩擦係数にしたい、という場合、専用のクラスを用意し、そのクラスと結びつけるほうがよいからです。また、反発係数や摩擦係数以外の物体に設定可能なパラメータはまだまだたくさんあり、全てのパラメータをムービークリップ名で設定可能にする、というのは大変で現実的ではありません。

[ FLASH ] [ tips ] [ update ] 2011年07月25日 12:38 | コメント (0) | トラックバック

何らかの Flash(swf) を作成する際、私は以下のサイトを参考に、イージングを行うための数値を取得するクラスを作成し有用させてもらっています。

　http://www.graviness.com/virgo/dhtml/mathematics/edging.html

ここ最近の業務では iPhone, iPad といった Flash 非対応の端末に対応すべく html ベースのサイト制作が続いているため、AS3 で作成していた簡易的なイージング処理用クラス(Edginger)を javascript に移植することに。

使い方 how to use

(1)Edginger クラスのコンストラクタに、イージング値(-100～100) と 動作分割数(1以上の値) を設定

(2-a)移動量一覧を取得するには getDistances メソッドを呼び出す
　→ 移動総量を引数に指定

(2-b)移動地点一覧を取得するには getPoints メソッドを呼び出す
　→ 初期位置と到達位置を引数に指定

var edginger = new Edginger(100, 5);
this.distances = edginger.getDistances(200);
this.points = edginger.getPoints(0, 200);

//this.distances の内容
//[77.41957135154557, 63.12656693970699, 40, 16.873433060293024, 2.580428648454415]

//this.points の内容
//[0, 77.41957135154557, 140.54613829125256, 180.54613829125256, 197.41957135154559, 200]

対象の移動量 or 移動先位置をあらかじめ配列で取得し、任意のタイミングで位置設定を行うことが可能となります。

対象を「移動」する事を目的としていますが、これは例えとなります。例えば「拡大縮小」用として Edgingerクラスを用いることも可能です。

利用例 example

jQuery と Edginger.getPoints を利用して、画面上の div 要素を 0 px から 200 px までイージング処理で移動する例は以下となります。index.html から Index.js を呼び出し、Index.js 内で Edginger.js を利用しています。

index.html

<html>
	<head>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript" src="Edginger.js" ></script>
		<script type="text/javascript" src="Index.js" ></script>
		<script language="javascript">

$(function(){
	new Index();
});	
		</script>
	</head>
	<body>
		<div id="box" style="position: relative; width:50px; background-color:#ffccaa;">ABC</div>
	</body>
</html>

Index.js

function Index(){

	this.init.apply(this, arguments);
}
Index.prototype.init = function(){

	var edginger = new Edginger(100, 30);
	this.points = edginger.getPoints(0, 200);

	var sc = this;
	this.mainFunction = this.move;
	this.intervalId = setInterval(function(){ sc.run(); }, 30);
};
Index.prototype.run = function(){

	this.mainFunction();
};
Index.prototype.move = function(){

	var point = Math.floor(this.points.shift());
	$("#box").css("left", point);

	if(this.points.length == 0)
		this.mainFunction = this.end;
};
Index.prototype.end = function(){

	clearInterval(this.intervalId);
};

実際の表示は以下となります。
http://www.dango-itimi.com/blog/swf/138/

ダウンロード download

利用例でのファイルを含むファイル一式は以下の URL よりダウンロードが可能です。

　http://www.dango-itimi.com/blog/swf/138/Edginger.zip

以下 Edginger.js のソースとなります。

▽続きを読む

[ FLASH ] [ tips ] 2011年07月18日 17:02 | コメント (0) | トラックバック

http://flaprinter.appspot.com/rpg_battle2/custom/

FLA.PRINTER フラプリ 第五弾 RPG BATTLE2 のカスタムモードを公開しました。
シンプルモードに対し色々と設定が可能になっております。お暇がありましたらどうぞご利用ください。

[ FLASH ] [ update ] 2011年07月17日 16:52 | コメント (0) | トラックバック

http://flaprinter.appspot.com/rpg_battle2/simple/

FLA.PRINTER フラプリ 第五弾 RPG BATTLE2 のシンプルモードを公開しました。
シンプルモードでは敵画像の差し替えを行うことが可能です。お暇がありましたらどうぞご利用ください。

仕様

・敵の画像サイズは最大で 幅 220px 高さ 115px

これより大きい表示サイズの画像を指定すると JPG 形式で縮小されます。

・JPG, PNG 以外の画像を指定すると JPG 形式に変換される

透過 GIF 画像は JPG に変換されてしまうため、透過 PNG で作成する事をお勧めします。

[ FLASH ] [ update ] 2011年07月15日 10:21 | コメント (0) | トラックバック

フラプリ第五弾、RPG BATTLE 2 のベースとなる swf を作成中。
以下よりサンプルをプレイできます。

▽続きを読む

[ FLASH ] [ update ] 2011年07月08日 10:48 | コメント (2) | トラックバック

キャラクターが出来上がるまでのラフ画

ゲーム画面

[ FLASH ] [ GRAPHIC ] [ update ] 2011年06月29日 11:06 | コメント (0) | トラックバック

http://flaprinter.appspot.com/shooter_cols/simple/
http://flaprinter.appspot.com/shooter_cols/custom/

FLA.PRINTER フラプリ 第四弾 縦シューティングゲームを公開しました。
内容は横シューティングをほぼそのまま縦バージョンにしただけとなります。
お暇がありましたらどうぞご利用ください。

[ FLASH ] [ update ] 2011年06月22日 00:00 | コメント (0) | トラックバック

業務で必要となるため Pager(ページャー) 用処理を javascript にて作成してみることに。

図 1)

仕様

どのような動作にするかの仕様を決定します。prev, next ボタン表示に関しては、まずは考慮から外します。

デフォルトの現在のページ表示位置

現在のページ表示位置は、中心位置となるようにします。

例えばページ総数が 30, ページ表示総数を 6 (偶数値)、現在表示されているページが 7、とした場合の表示は 図 2 となるようにします。

図 2)

ページ総数が 30, ページ表示総数を 7 (奇数値)、現在表示されているページが 7、とした場合の表示は 図 3 となるようにします。

図 3)

特定条件での現在のページ表示位置

ページによっては表示位置を中心位置以外にする必要がでてきます。

例えば 図 2 と同じ条件で現在のページが 2 あるいは 1 の場合、図 4, 5 となるようにします。

図 4)

図 5)

同じように、図 2 と同じ条件で現在のページが 29, あるいは 30 の場合、図 6, 7 となるようにします。

図 6)

図 7)

仕様詳細

「ページ総数」「ページ表示総数」「現在のページ」を与えることで、「表示最小ページ」「表示最大ページ」「現在のページ表示位置」の値が取得できるようにすれば、各図のような表示が可能となります。

例えば 図 2 の表示を行うには 以下の値のやりとりを行います。

[ 与える値 ]
ページ総数 : 30
ページ表示総数 : 6
現在のページ : 7

[ 取得する値 ]
表示最小ページ : 5
表示最大ページ : 10
現在のページ表示位置 : 2

図 5 の表示を行うには 以下の値のやりとりを行います。

[ 与える値 ]
ページ総数 : 30
ページ表示総数 : 6
現在のページ : 2

[ 取得する値 ]
表示最小ページ : 1
表示最大ページ : 6 
現在のページ表示位置 : 1

現在のページの表示位置は、配列要素数と同じく 0 から始まるものとします。ページ表示総数が 6 の場合、現在のページの表示位置は 0 ～ 5 の値となります。

ソースコード

▽続きを読む

[ FLASH ] [ tips ] 2011年06月12日 01:30 | コメント (0) | トラックバック

配列最後の要素を取得するには pop メソッドがありますが、元の配列の最後の要素を削除してしまいます。

var arr:Array = [1, 2, 3];
var n:uint = arr.pop();

pop を用いないよくある方法としては、以下のような記述を行います。

var arr:Array = [1, 2, 3];
var n:uint = arr[arr.length - 1];

ここで、配列を何かのインスタンスメソッド経由で取得する場合 以下のようになります。

var arr:Array = instance.getArray();
var n:uint = arr[arr.length - 1];

ローカル変数 arr は上記二行以降利用されない場合、もう少し簡略して記述する方法はないかと考えました。処理速度うんぬんはおいておき、不要な変数定義を避ける案として slice を用いて記述してみることに。

var n:uint = instance.getArr().slice(-1)[0];

もっとよい記述方法はあるでしょうか。とりあえずメモ。

[ FLASH ] [ tips ] 2011年06月07日 18:02 | コメント (0) | トラックバック

http://flaprinter.appspot.com/rpg_battle1/custom/

FLA.PRINTER フラプリ 第三弾 RPG BATTLE1 のカスタムモードを公開しました。
シンプルモードに対し色々と設定が可能になっております。お暇がありましたらどうぞご利用ください。

サーバ側の処理や html, javascript の処理は、用意しておいたモジュールを組み合わせて作成しただけなので、ベースの swf が完成した後は公開までかなり早く済みました。一点、クッキーに日本語の文字列を保存しようとしたところ、python 独自?の Unicode の扱いが原因でエラーが発生し少々つまずくことに。対策法を別途記事にするかもしれません。

[ FLASH ] [ update ] 2011年05月29日 20:54 | コメント (2) | トラックバック

http://flaprinter.appspot.com/rpg_battle1/simple/

FLA.PRINTER フラプリ 第三弾 RPG BATTLE1 のシンプルモードを公開しました。
シンプルモードでは敵画像の差し替えを行うことが可能です。お暇がありましたらどうぞご利用ください。

仕様

・敵の画像サイズは最大で 幅 240px 高さ 115px

これより大きい表示サイズの画像を指定すると JPG 形式で縮小されます。

・JPG, PNG 以外の画像を指定すると JPG 形式に変換される

透過 GIF 画像は JPG に変換されてしまうため、透過 PNG で作成する事をお勧めします。

後日公開のカスタムモード 予定仕様

・敵画像は二枚まで指定可能
・背景画像設定可能
・プレイヤーや敵のパラメータ(HP, MP, 名前等)設定が可能
・デフォルトサウンド設定
・クリア後の URL 設定

[ FLASH ] [ update ] 2011年05月22日 14:04 | コメント (5) | トラックバック

フラプリ第三弾、RPG BATTLE のベースとなる swf の作成が概ね完了。
以下よりサンプルをプレイできます。

▽続きを読む

[ FLASH ] [ update ] 2011年05月20日 09:39 | コメント (0) | トラックバック

背景差し替えイメージ

敵表示イメージ

x2倍の敵表示イメージ

背景画像と表示サイズが合っていないため黒背景で

■ 予定事項

・敵画像は二枚まででアニメーション可に

・敵表示位置は自動的に画面中央になるようにするため
　縦位置調節を行う場合は透明ピクセルを設けてもらう？
　あるいは数値で指定できるようにする

・ドラクエタイプの他、FF タイプの戦闘画面も設定可能なモードも後に制作
　第五弾あたり

[ FLASH ] [ GRAPHIC ] [ update ] 2011年05月03日 14:12 | コメント (2) | トラックバック

http://flaprinter.appspot.com/shooter_rows/custom/

FLA.PRINTER フラプリ 第二弾 シューティングゲームのカスタムモードを公開しました。
カスタムモードでは敵機体画像、プレイヤー機体画像、背景画像、その他細かいパラメータ設定が可能です。どこか不具合等ありましたら、お気軽に申し付けください。

共通処理モジュール化

今回のカスタムモード制作に伴い、出来る限りの共通処理のモジュール化を実施。今後はFlash Lite 制作のみになるべく専念できるような形にしたつもりです。

モジュール化は頭を少々使いますが楽しい作業でもあります。
ただし、モジュールが出来上がった後はモジュールを組み立てるだけの作業が発生するため、モチベーションがどうも保ちにくい、という難点があります。

カスタムモード UI 変更

ブロック崩しのカスタムモード製作時 感じていましたが、テキストフィールドやラジオボタン等、画面上に input フォームがたくさん配置されていると、どうも乱雑で見た目がいまいちな感じがありました。

また、今回シューティングゲームでは結構多くの設定を行う事が可能なのですが、設定項目が多ければ多いほど input フォームも増え、見難さが増してしまいます。設定するつもりのない設定項目の input フォームが見えているのは邪魔かもしれません。

上記問題を解決するために、必要な設定項目以外はデフォルトでは閉じるようにしました。

項目タイトルをクリックすると開きます。

その他、作り直しが何度も行われるかもしれない事を考慮し、設定したデータがクッキーに記憶されている間は、カスタムページを開いた時 自動で設定項目が開くようにもしています。

[ FLASH ] [ tips ] [ update ] 2011年04月27日 20:27 | コメント (0) | トラックバック

http://flaprinter.appspot.com/shooter_rows/simple/

FLA.PRINTER フラプリ 第二弾 シューティングゲームのシンプルモードを公開しました。シンプルモードでは敵機体の画像の差し替えを行うことが可能です。
お暇がありましたらどうぞご利用ください。

追記)
ボス機体表示サイズは 幅x高さ 100 x 150 px ですが、それより小さい JPG, PNG 以外の画像を指定するとエラーが発生するかもしれないため、修正予定

追記2)
修正完了しました。カスタムモードで詳細を記述する予定ですが、現在の仕様を以下に記述しておきます。

・ボス機体表示サイズは最大で 幅 110 px, 高さ 150 px

これより大きい表示サイズの画像を指定すると JPG 形式で縮小されます。

・JPG, PNG 以外の画像を指定すると JPG 形式に変換される

透過 GIF 画像は JPG に変換されてしまうため 透過 PNG で作成する事をお勧めします。

[ FLASH ] [ update ] 2011年04月19日 19:22 | コメント (0) | トラックバック

ブロック崩し simple モードが正常に動作していなかった不具合を修正しました。
http://flaprinter.appspot.com/block/simple/

第二弾シューティングゲームは、fla ファイルをパブリッシュするための jsfl の開発が完了し、サーバ側(python)の処理制作にとりかかりました。まずはシンプルモードから作成を行い、ブロック崩しとの共通処理項目をまとめていきます。

[ FLASH ] [ update ] 2011年04月17日 19:15 | コメント (0) | トラックバック

フラプリ第二弾、横シューティングゲームのベースとなる swf を作成中。
もう少し弾避けが楽しい感じにもしてみたいところです。

▽続きを読む

[ FLASH ] [ update ] 2011年04月13日 10:37 | コメント (0) | トラックバック

■ 検討中の仕様メモ

昔の携帯端末を考慮すると 表示可能な弾数は 10 が限界
PC 版はふんだんに弾を表示する

ゲームは音があるとなしとではぐっと印象が変わるため、
PC 版はサウンドエフェクト ON/OFF 機能が欲しい
配布される事を考慮し SE は自作で

負荷がかかるが、背景画像も自由に差し替え可能にすることを検討

機体の当たり判定は画像幅 or 高さの 1/2 程度に自動設定
弾を発射する場所はピクセルで指定できるようにする

[ FLASH ] [ GRAPHIC ] [ update ] 2011年04月08日 20:20 | コメント (0) | トラックバック

2011年3月30日に Google APP Engine SDK 1.4.3 がリリースされたとのことです。気になった内容は Image API のあらゆる処理に画質設定が可能になったという点です。

　参考) python 練習帳 : Google App Engine SDK 1.4.3リリース文抄訳
　http://php6.jp/python/2011/04/02/google-app-engine-sdk-1-4-3/

試してみたところ、見事画質 100 のまま、画像の 変形・切り抜き・合成 までが可能となりました。

ちなみに GAE ドキュメント の日本語ページの内容は相当古いようで、Image API の画質設定を行える説明箇所がありません。右上の言語設定を英語にすると、比較的新しい内容となります。ただし現在はまだ 1.4.3 の内容には書き変わっていない模様。

http://code.google.com/intl/ja/appengine/docs/python/images/

画質設定はメソッドの最後の引数に 0～100 の値を設定すれば有効となりました。

画質100 で変形・切り抜き・合成 を行う記述例)

from google.appengine.api import images

images.resize(imageBytes, width, height, images.JPEG, 100)

images.crop(imageBytes, 
	leftX, topY, rightX, bottomY,
	images.JPEG, 100
)

images.composite(
	[(imageBytes, 0, 0, 1.0, images.CENTER_CENTER)], 
	width, height, 
	4294967295, #ffffff
	images.JPEG, 100
)

早速 FLA.PRINTER フラプリにて画質 100 設定をデフォルトにしようと考えました。しかし、生成される swf の容量が 100 KB を超えやすくなってしまうため、カスタムモードで ユーザが任意に画質を選択できるようにしたいと思います。

あと余談ですが、フラプリ ブロック崩しのサンプルでクリア後に表示される URL が誤っており、せっかくのボーナス画像が見ることができない状態になってしまっていたため修正しました。ごめんなさい。

追記 2011/4/7)
ブロック崩しカスタムモードにて画質設定可能になりました。

[ FLASH ] [ tips ] [ update ] 2011年04月04日 11:48 | コメント (0) | トラックバック

SWFバイナリ解析にて、表示サイズの異なるビットマップ画像を差し替える際に必要な DefineShape タグの解析が完了。以後、フラプリにて利用予定。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2011年04月03日 19:53 | コメント (0) | トラックバック

今年正月より調査を行っていた Google App Engine(以下GAE) にて、ゲーム・待ち受け Flash(swf) が簡単に作成できる Webツール「FLA.PRINTER フラプリ」を公開しました。

機能・コンセプト

画像一枚用意するだけでオリジナルの携帯向け Flash 製作を行えます。
結構古い携帯電話にも対応します。(vodafone 等)
簡単に作れるかわりに、Flash の内容もシンプルです。
カスタムモードを用いれば、ある程度 こった Flash を作ることが可能です。
携帯向けの他、PC向けに、マウス対応など 機能を拡張したファイルも同時に出力します。

何かものを作る際、形にするまでには多くの根気が必要となりますが、その根気の必要量をなるべく少なくすべく、シンプルモードはできるだけ簡単なステップで Flash(swf) を生成できるようにしています。生成後に表示される QR コードから、携帯電話で即表示確認・保存が可能となります。

ブロック崩し

現在フラプリでは、ブロック崩しのみが作成可能です。内容はとても単純なブロック崩しなので、ゲーム性は薄いです。バーの中心でボールを当てた際、ブロック貫通ボールになるようにする、等、まだ改良の余地はあるかもしれません。

個人的には、以下のようなムフフな感じでも利用してほしく思います。
サンプルギャラリー : block 3

---
以下少々技術的な余談

python による swf バイナリ解析処理実装

swf 内に任意のスクリプトの埋め込みと、画像データの入れ替えを行う処理を python にて実装しました。

はじめは PIL(Python Imaging Library) を利用して swf に画像を埋め込むための解析処理を作成していましたが、中途、PIL は GAE 上では利用できない事が判明しました。よって GAE 上では、PNG の画像解析に関しては pypng というモジュールを利用し、GIF の解析処理は断念することに。
最終的に、swf バイナリ解析処理は、PIL 利用版と pypng 利用版 を切り替えて利用出来るようにまとめました。

swf 埋め込み対象データはあらかじめ解析しデータストアに登録

ブロック崩しカスタムモードでは背景画像を選択することができます。この背景画像は PNG ファイルなのですが、PNG ファイルを swf 内に埋め込むための解析処理に結構な処理行数を必要としてしまいます。

ユーザからのリクエスト(生成処理呼び出し)のたびに PNG 解析処理を実行するのは よろしくないため、事前に swf 内に埋め込める形にバイナリ解析しデータストアに登録しておく、という方法を採りました。

ローカル PC 上のデータストアに設定したデータを、本サーバ上に登録する方法があるようですが、資料が少なくややこしそうだったため、Web 上からアップロードできる要パスワードの専用ページを別途作成することに。

様々な状況に応じた swf を出力するための fla ファイルと jsfl の作成

jsfl を用い、パブリッシュ時に ガイドレイヤーやプロファイラを動的に切り替えることで、一つの fla ファイル内に 携帯向け Flash Lite 1.1 用スクリプトと、PC向け Flash Player 7 用スクリプトの両立を行っています。

今回作成したブロック崩し用 fla ファイルでは jsfl を実行すると、以下のような swf (計16種類)がパブリッシュされます。

fla
├ シンプルモード用
│　├ ゲーム用
│　│　├ Flash Lite 1.1 用
│　│　│　├ jpg 画像用 swf
│　│　│　└ png 画像用 swf
│　│　└ Flash Player 7 用
│　│　　　├ jpg 画像用 swf
│　│　　　└ png 画像用 swf
│　└ 待ちうけ用
│　　　├ Flash Lite 1.1 用
│　　　│　├ jpg 画像用 swf
│　　　…　…
│
└ カスタムモード
　　├ ゲーム
　　…

ユーザがシンプルモードで投稿した画像が jpg だった場合、サーバ側では「シンプルモード」の「jpg 画像用 swf」4種類を取得し、それら swf 内に投稿 jpg の埋め込みを行います。

PC 向け Flash(swf) が Flash Player 7 である理由は、Flash Player 7 が Flash Lite 1.1 用スクリプトを判別可能な最大のバージョンであるからです。Flash Player 8 からは Flash Lite 1.1 のスクリプトはパブリッシュできません。

動作検証の手間

Google App Engine SDK でのローカル(Windows上)環境上では動作したものが、サーバにアップロードすると動作しない、といった箇所がいくつかありました(後述)。バグを完全に取り除いてから本サーバにアップロード、という手順は無理かもしれません。
また、Google App Engine Launcher からの「Deploy」コマンドによるファイルアップロードは 毎回 ID と パスワード入力を行わなくてはならないため、本サーバ上での動作確認はやや手間がかかります。

ローカルと本サーバとの動作の違い

urlopen によるファイル取得に関しまして、ローカルと本サーバ上とでは動作が異なる点に少々つまづきました。

Windows 上では、プロジェクトルートからの相対パスで静的ファイルが取得できるのに対し、本サーバ上では相対パスでの urlopen による静的ファイルの取得は不可。「http://～」というアドレス経由で Web 上から取得できる形にしておけば本サーバで取得可能。しかし、ローカル環境上では「http://localhost～」というアドレス経由では urlopen が機能せず？ファイル取得できず。

結局、ローカル環境上では相対パスで、本サーバ上では「http://～」経由でファイルを取得するような処理を作成することに。webapp のテンプレートファイルのファイルパス指定は相対パスでローカル本サーバどちらとも正常に機能するので、何かよい方法があるのかもしれません。

エラー後の表示は適当

ユーザが設定する画像のフォーマットエラーや容量オーバー時等に発生するエラーにて、「フォーマットエラーです」といったきちんと場合分けしたエラー表示処理は面倒なのでまだ行っていません。エラー発生時は強制的にホームに戻されるという、やや不親切設計です。

ブロック崩し 画像分割

古い携帯機種にも対応するために、ブロック画像を細かく分割するという作業を行っています。一つの大きな画像をブロックの数だけスクリプトで複製し、各ブロック内では画像の一部分を表示する、という方法が本来はセオリーであり、簡単で swf 容量も少なく済みます。しかしその簡単な方法ですと 昔の携帯機種ではブロック消去時に負荷がかかるようで、画面が一瞬止まってしまうという現象が発生します。事前に画像をわざわざ小さく分割するのは苦肉の作であります。

開発者向けおまけツール swfdumper

今後の開発用に、Web 上から swf 内ヘッダとタグを解析し表示するツールを作成しています。どのタグのデータを入れ替えれば良いのかを判別するために利用します。

http://flaprinter.appspot.com/swfdump/

解析結果は header, tagSet, tagMap の順で表示されます。

　header --- swf ヘッダ内のデータ
　tagSet --- 登場順タグ一覧
　tagMap --- タグ毎の 登場順に ID を割り振った一覧

サイト内表示している広告に関して

Amazon 商品の表示を行う予定でしたが、東北関東大震災により Amazon が正常に機能していない状況のため、現在は勝手に日本赤十字社へのリンクを貼らせていただいております。

以後の予定

■ swf バイナリ解析処理の拡張

画像表示領域(DefineShape)の動的変更

■ ゲーム第二弾製作

ブロック崩しの次のゲームを製作中。二作目まで製作できたら量産体系が整うことになりそうなので、以後は Flash Lite の製作のみに集中できそうです。

[ FLASH ] [ tips ] [ update ] [ web service ] 2011年03月26日 16:05 | コメント (0) | トラックバック

追記)
サービス終了しました。
遊んでくださった皆様ありがとうございました。

なんとびっくり、Mobage(モバゲータウン)にて 団子一味のゲームが遊べるようになりました！「団子一味の野望 mobile」という名称となります。

「団子一味の野望 mobile」は個人で頂いたお話の仕事となり、私は運営・開発共にほぼ関わっておりません。一部グラフィックスデータの提供とストーリーモードの台詞の監修を少々させていただいただけとなります。

内容は 「OH! DANGO! JAM」がベースとなり、そこにさまざまなソーシャル要素が加わって、携帯ゲームならではの楽しい仕組みがてんこ盛りとなっております。よろしければ是非一度お遊びください！

　■ モバゲータウン上の URL(携帯からしかアクセスできません)
　http://pf.mbga.jp/12001690

　■ QRコード
　

※ モバゲーという事で無料でも遊べますが、課金アイテム等もありますゆえ、お子様に遊んでいただく場合はご注意ください。

※ 「団子一味の野望 mobile」については、「団子一味の野望 mobile」の制作会社へお問い合わせください。

※ PC 版 OH! DANGO! JAM のゲストキャラクター(熊猫男性・ビーンズ・猫剣士等)は、「団子一味の野望 mobile」には登場しないのでご了承ください。

[ FLASH ] [ GRAPHIC ] [ info ] [ update ] [ web service ] 2011年02月24日 19:31 | コメント (4) | トラックバック

Flash Lite にて、とある制約上、一枚の画像をあらかじめ細かく分割して使用しなくてはならない場合があります。分割画像を作る場合、私は Photoshop のスライス機能を用いる事にしています。

ここで、過去 Photoshop のいくつかのバージョンで行った同じ手順にてスライス画像を作成してみたところ、0.5～1KB 以内に収まるはずの一つのスライス画像容量が 4KB 以上となってしまう現象が発生しました。

スライス画像は総数 80枚 ほどあるため、80 * 4KB = 320KB で出力されるという結果に。Flash Lite の容量制限 100KB を大きく超えてしまっています。

問題は、Photoshop の「Web およびデバイス用に保存」の際での「メタデータ」の項目を「著作権情報」に設定していた事が原因でした。一つずつの画像内にメタデータが混入されてしまっていたようです。「メタデータ」の項目を「なし」にすることで問題は解決しました。

---
ちなみに Flash は PNG 画像をインポートする際、メタデータは含まずに読み込むため、Photoshop の設定でメタデータ項目は何に設定していても問題はありません。検証していませんが GIF でも PNG と同じ扱いになると思われます。(Python + SWFバイナリ解析 その4 : パレット形式の png 埋め込み)

よって、上記問題が発生するのは、JPEG でスライス画像出力を行い Flash に読み込んだ場合、となります。

PNG や GIF を Flash でインポートした際、読み込み元画像の容量が微妙に減っている、という場合は、画像データ内のメタデータが原因の可能性があります。

[ FLASH ] [ tips ] 2011年02月07日 17:45 | コメント (0) | トラックバック

先日、Google App Engine(GAE) にて gif や png 画像のピクセルデータを解析するために、Python Imaging Library を丸ごと任意のフォルダに配置して利用することにしました。

　Python + SWFバイナリ解析 その3 : gif 埋め込み
　Python + SWFバイナリ解析 その4 : パレット形式の png 埋め込み

上記処理では問題なく動作したので、今度は画像を加工する各メソッドを利用してみようと試してみたものの、エラーが表示され動作せず。

pylib.another.pil ディレクトリに PIL 関連ファイル一式を配置し 以下のコードを記述

import pylib.another.pil.Image as pil
pil.new("RGB", (100, 100))

表示されるエラー

ImportError: The _imaging C module is not installed

この問題は解決できそうもないので、GAE にてサーバ側で画像の加工を行うためには、正式にサポートされている google.appengine.api.images モジュールを用いることになりそうです。

　http://code.google.com/intl/ja/appengine/docs/python/images/imageclass.html

二つの画像を合成する処理等ないため、やや予定を変更しなくてはならず。

追記)
composite 関数があったため画像合成に関しては解決しました。
http://code.google.com/intl/ja/appengine/docs/python/images/functions.html

追記2)
すみません、再度検証してみたところ、GAE 上での PIL によるピクセルデータ解析も利用不可でした。
よって GAE 上での GIF と PNG のピクセルデータ解析は PIL を用いず別途手段で実現するしかなさそうです。
これは困った。

追記3)
png のピクセル値解析は pypng で解決できそうです。GAE 上でも pypng による png ファイルのピクセル値読み取り動作確認済み。
http://code.google.com/p/pypng/

gif に関しては pygif というものを見つけましたが、ライセンスうんぬん等 まだ未調査です。

[ FLASH ] [ tips ] 2011年01月30日 22:03 | コメント (0) | トラックバック

Google App Engine で Python を用いての、静的ファイルやバイトストリーム状のデータをまとめて zip 圧縮出力し、ダウンロードさせるためのサンプルです。

サンプル用クラスファイルとして以下のような Zipper.py クラスファイルを作成しました。

pylib.core.utils.Zipper.py

import zipfile

class Zipper:
	
	def __init__(self, file, mode = "w", compression = zipfile.ZIP_DEFLATED, allowZip64=False):
		
		self.__zipFile = zipfile.ZipFile(file, mode, compression, allowZip64)
	
	def write(self, writeDataSet = None, writeStrDataSet = None):
		
		if writeDataSet:
			dataSet = writeDataSet.getDataSet()
			for writeData in dataSet:
				
				self.__zipFile.write(
					writeData.getFileUri(),
					writeData.getArchiveUri(),
					writeData.getCompressType()
				)
		
		if writeStrDataSet:
			dataSet = writeStrDataSet.getDataSet()
			for writeStrData in dataSet:
			
				self.__zipFile.writestr(
					writeStrData.getZipInfo(),
					writeStrData.getBytes()	
				)
	
	def close(self):
		self.__zipFile.close()
	
class WriteDataSet:
	
	def __init__(self):
		self.__dataSet = []
	
	def add(self, fileUri, archiveUri=None, compressType=None):
		self.__dataSet.append(WriteData(fileUri, archiveUri, compressType))
	
	def getDataSet(self):
		return self.__dataSet
	
	
class WriteData:
	
	def __init__(self, fileUri, archiveUri=None, compressType=None):
		
		self.__fileUri = fileUri
		self.__archiveUri = archiveUri
		self.__compressType = compressType
	
	def getFileUri(self):
		return self.__fileUri
	
	def getArchiveUri(self):
		return self.__archiveUri
	
	def getCompressType(self):
		return self.__compressType


class WriteStrDataSet:
	
	def __init__(self):
		self.__dataSet = []
	
	def add(self, bytes, zipInfo):
		self.__dataSet.append(WriteStrData(bytes, zipInfo))
	
	def getDataSet(self):
		return self.__dataSet

class WriteStrData:
	
	def __init__(self, bytes, zipInfo):
		
		self.__zipInfo = zipInfo
		self.__bytes = bytes
	
	def getZipInfo(self):
		return self.__zipInfo
	
	def getBytes(self):
		return self.__bytes


def createBytesFile():
	
	import StringIO
	return StringIO.StringIO()

def createZipInfoOfNowTime(archiveUri):
	
	import datetime
	date = datetime.datetime.now()
	
	return zipfile.ZipInfo(archiveUri, date.timetuple()[:6])

def output(response, file, fileName):
	
	response.headers["Content-Type"] = "application/zip"
	response.headers['Content-Disposition'] = "attachment; filename=" + fileName + ".zip"
	response.out.write(file.getvalue())

Zipper.py の利用方法は以下となります。

from pylib.core.utils.Zipper import *

# 出力用ファイル作成
file = createBytesFile()

# 静的ファイル用 データ作成
writeDataSet = WriteDataSet()
writeDataSet.add("test/index.html", "index.html")
writeDataSet.add("img/purin.jpg", "img/purin.jpg")

# バイトストリーム用 データ作成
writeStrDataSet = WriteStrDataSet()
writeStrDataSet.add(bytesA, createZipInfoOfNowTime("test.swf"))
writeStrDataSet.add(bytesB, createZipInfoOfNowTime("test/aaa.swf"))

# zip 圧縮
zipper = Zipper(file)
zipper.write(writeDataSet, writeStrDataSet)
zipper.close()

# 画面に出力
output(self.response, file, "sample.zip")

bytesA と bytesB は swf ファイルのバイトストリームとします。最後の output メソッドの引数には webapp フレームワークの? response インスタンスを指定します。

上記で出力されたファイル(sample.zip)をダウンロードし解凍すると、以下のファイルディレクトリ構成で展開されます。

sample.zip
├ index.html
├ test.swf
├ img/
│　└ purin.jpg
└ test/
　　└ aaa.swf

2011/5/26 追記)
output メソッドにてダウンロードする zip ファイル名を設定できるように変更しました。

[ FLASH ] [ tips ] 2011年01月28日 17:20 | コメント (0) | トラックバック

Google App Engine で Python を用いての、バイトストリーム状の SWF データを html 上に表示するためのサンプルです。

処理内で読み込んでいる index.html, sample.swf は main.py と同じディレクトリに配置しているものとします。

main.py

#!/usr/bin/env python
# -*- coding: utf-8 -*-

from google.appengine.ext.webapp import template
from google.appengine.ext import webapp
from google.appengine.ext.webapp import util

URL_ROOT = "/"
URL_SWF = "/swf"

class MainHandler(webapp.RequestHandler):

	def get(self):
		
		tmplValues = { "swfUri": URL_SWF }
		self.response.out.write(template.render('index.html', tmplValues))	

class SwfViewer(webapp.RequestHandler):

	def get(self):
		
		from urllib import urlopen
		
		swfBinary = urlopen("sample.swf").read()
		
		self.response.headers["Content-Type"] = "application/x-shockwave-flash"
		self.response.headers["Content-Length"] = len(swfBinary)
		
		self.response.out.write(swfBinary)

def main():
	
	application = webapp.WSGIApplication([
		(URL_ROOT, MainHandler),
		(URL_SWF, SwfViewer)
	], debug=True)
	
	util.run_wsgi_app(application)

if __name__ == '__main__':
	main()

swf を表示する テンプレート index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <title></title>
		<link rel="shortcut icon" href="favicon.ico" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript">
			swfobject.embedSWF(
				'{{ swfUri }}', 'swf', '240', '240', '4'
			);
        </script>
    </head>
    <body>
        <div id="swf">
        </div>
    </body>
</html>

index.html 内では swfobject を用いて swf 表示を行っています。swf の URL を指定する箇所に、SwfViewer クラスを呼び出すための URL パスを指定しています。

今回のサンプルの SwfViewer クラス内では、静的に配置済みの sample.swf を開いてバイトストリームに変換していますが、実際は「データストアから swf データを取得する処理」等に置き換える事となりそうです。

追記)上記サンプルの swf 出力方法では、携帯から swf が表示できない事を確認。設定に何かが足りないのかもしれません。

追記2)Content-Length を設定することで解決しました。

[ FLASH ] [ tips ] 2011年01月25日 21:13 | コメント (0) | トラックバック

Python による パレット形式の png データ解析処理サンプルを作成しました。

　・参考
　GREE Engineers' Blog : SWFバイナリ編集のススメ第五回 (PNG)
　http://labs.gree.jp/blog/2010/12/1902/

png-8 に対する認識の誤り

上記参考サイトの png の形式に関する説明を読んでみたところ、どうも今まで自分は png に対して誤った認識を持っていた事がわかりました。

Photoshop からしか png を書き出した事がなかったせいか、png-8 形式で出力する png は半透明の情報を持たせることはできず、gif と同じような透明化しかできないものだ、と考えてしまっていました。

しかしこの考えは誤りで、本来は png-8 形式でも半透明の情報を持たせることができるとのこと。Photoshop が、半透明の情報を持たせた png-8 の出力に対応していない、という訳でした。

過去、半透明の情報をもった png (png 32bit)の利用は メモリの消費を多く使い容量も大きくなるため利用は避けて欲しい、と答えていた事がありましたが、半透明の情報をもった png-8 形式の png ならば可能になったこともあったのやもしれません。

とはいえ、png-8 に半透明の情報を持たせて出力するための何かいいフリーのツールはあるのかとざっと探してみましたが、なかなか見つからず。Adobe Fireworks が有名のようですが、書き出しのために購入するのも考えものでもあります。

gif 解析処理と共通化

png は gif と同じタグにデータを設定するということから処理内容もほぼ同じとなりました。よって、パレット形式の画像を扱う親クラスを用意し、gif と png(パレット形式)のデータ解析用処理クラスを子クラスとすることに。

true color 形式の png データを解析するクラスを作成にとりかかると、またクラス構造は変化するかもしれません。

gif データを元にした パレットに半透明情報をもった画像データ

透明化 gif の ColorTable 作成処理にて、アルファ値 0x00 の色以外は全て アルファ値を 0xff に設定する必要がある、という仕様は少々無駄があるのではないか、と疑問に思っていましたが、png も同じタグで扱う、という点で納得できました。

　png はカラーパレット内各色に対して一つずつアルファ値が設定可能
　　↓
　png を扱うタグの ColorTable 各色にはアルファ値を設定できるようにする必要がある
　　↓
　gif と png は同じタグで扱うため
　透明化 gif の ColorTable 各色全てにもアルファ値の設定が必要

逆に言うと、gif データ解析時、作成する ColorTable の各アルファ値を任意の数値に設定すれば、swf 内には「gif データを元にした パレットに半透明情報をもった画像データ」を埋め込む事も可能になります。

swf 上では 元画像が png, gif であれ、同じ形式の独自のデータに変換されている、と言ったところでしょうか。

swf 内画像埋め込み処理の段階で パレットのアルファ値の変更を行うことはないかもしれませんが、豆知識としてメモしておきます。

PIL png tRNS 情報取得

PIL 内のソース調査をまだあまり行っていないという点と、PIL のバージョンによって動作が異なるようなので確実ではありませんが、PIL は PNG のパレット内 各色のアルファ値情報を どこか変数に保存するようにはなっていないとのことです。それを解決するための方法として、PIL 内クラスを拡張して対応する方法が以下のサイトに記述されています。

　methaneの日記 : Python Imaging Library (PIL) で、パレット形式のPNGを扱う
　http://d.hatena.ne.jp/methane/20100214/1266119110

(※上記サイトの chunk_tRNS メソッド内「PngStream.chunk_PLTE」メソッドの呼び出しは誤りと思われるため「PngStream.chunk_tRNS」メソッド呼び出しに修正して利用させてもらいました。)

ソースコード

▽続きを読む

[ FLASH ] [ tips ] 2011年01月20日 22:42 | コメント (0) | トラックバック

Python による gif データ解析と swf 内データ差し替えのサンプルを作成しました。

　・参考
　GREE Engineers' Blog : SWFバイナリ編集のススメ第四回 (GIF)
　http://labs.gree.jp/blog/2010/10/1263/

初め、gif バイナリ解析を自力で行おうと考えましたが、gif データ内の LZW 圧縮箇所の解析で頭が沸騰しそうになったため断念。解析部分は Python Imaging Library (以下PIL) を利用することにしました。

Google App Engine (以下GAE) サイト内説明に「PIL をインストール」する旨の項目があり、GAE は PIL をデフォルトでサポートしているのかと思いましたが、どうやらそんなことはなく？、PIL の Image クラスに似た Google App Engine 独自の Image クラスが用意されている模様。その独自の Image クラスの API 説明を見る限りでは、gif 解析を行うのに十分な処理が用意されていないため、本家の PIL モジュール一式そのまま GAE のサーバにアップロードして利用しています。

サンプル

▽続きを読む

[ FLASH ] [ tips ] 2011年01月18日 23:49 | コメント (0) | トラックバック

Python による jpeg バイナリ解析と swf 内データ差し替えのサンプルを作成しました。

　・参考
　GREE Engineers' Blog : SWFバイナリ編集のススメ第三回 (JPEG)
　http://labs.gree.jp/blog/2010/09/782/

SWF version 8 より前のバージョンならば erroneous header を jpeg に付与するだけで jpeg 差し替えが可能との事です。swf のバージョンを判別して、version 8 以降ならば jpeg バイナリ解析を行い、version 8 未満ならば erroneous header 付与形式にすれば、サーバ側での処理負荷を減らすことができそうです。

一応 試しに erroneous header 付与形式の jpeg を version 10 の swf に埋め込んでみましたが、今回作成したサンプルの処理範囲内では問題なく動作していました。

つまずいた点

Tag DefineBitsJPEG2 の Content 内 先頭箇所 2 byte には CharacterID が必要ですが、上記参考サイトの図には その説明が省略されています。swf 内にある jpeg データが、元 jpeg データより 6 byte 容量が大きくなっており、そのうち 4 byte は erroneous header だとして 残り 2 byte は何のデータなんだろうと悩みました。

サンプル

▽続きを読む

[ FLASH ] [ tips ] 2011年01月15日 16:30 | コメント (3) | トラックバック

Google App Engine に試用に伴う Python の勉強として、Python による swf バイナリ解析処理を作成してみることに。

以下の URL の解説の順序通り解析処理まで作成しました。

　GREE Engineers' Blog : SWFバイナリ編集のススメ第一回
　http://labs.gree.jp/blog/2010/08/631/
　

・少々つまずいた点

パブリッシュ設定の「XMP メタデータを含める」にチェックがあると、このデータが Header の後に追加されるようなので、ひとまずチェックを外した swf を利用しました。

Google App Engine の Python の現バージョンは 2.5.2 で、数値を二進数文字列に変換する処理がデフォルトでサポートしていない?ため、以下のサイトにあった処理を利用させていただきました。

　PythonRecipe : 2進、8進、10進、16進の各表現を相互に変換

・その他参考サイト等

　Flash SWF バイナリ
　http://pwiki.awm.jp/~yoya/?Flash/SWF

　Python 3.x で Flash Lite 1.1 のパラメータ埋め込み
　http://nakagami.blog.so-net.ne.jp/2010-02-02

以下、作成した Python サンプルソースコードと実行結果を掲載。初めての Python につき、誤っていたり無駄な処理がある可能性があります。

▽続きを読む

[ FLASH ] [ tips ] 2011年01月10日 02:43 | コメント (2) | トラックバック

http://www.dango-itimi.com/blog/swf/112/

システム制作優先でグラフィックは現在あるものをほぼ使い回しています。
今回までの主な実装内容は以下のとおりです。

■ つかむ処理実装

相手の側に近寄ると相手をつかむ
つかんでから「斬る」キーで相手を斬る
三回まで斬る事が可能

■ つかみからの投げ

つかんだ後 マウスをプレイヤーから一定距離離してから「斬る」キーで相手を投げる
投げた相手に敵が触れると その敵は吹き飛ばされる

つかんだ後 「ジャンプ」キーでつかんだままジャンプ
つかみジャンプの後 つかみからの投げと同じ操作で相手を投げることが可能

---

【 キャラクター操作 】

　[マウス] --- ポインタ方向へ移動
　[スペース] --- ジャンプ
　[F] --- 斬る
　[A] --- 矢を放つ
　[D] --- 防御(キーを押し続けると状態を一定時間持続)

【 特殊操作・仕様 】

・技によっては攻撃モーション途中で ジャンプ or 防御 に移行可
・防御成功時 斬るボタンを押すことにより無敵状態でカウンターアタック可能
・技によっては一度の攻撃で複数回ヒット
・相手の側に近寄ることでつかむ
　つかみ状態から 攻撃・投げ・ジャンプ投げが可能

【 カメラ操作 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスホイール] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

左手はホームポジションに添えるイメージで操作キーを割り振っています。
キー操作を有効にするためには一度画面をクリックする必要があります。

---

相手をつかんだ瞬間?ダメージを受けると、相手が空中に浮かんだままになってしまうバグあり
低空で投げると 相手のダメージ色が初期化されないバグあり

[ FLASH ] [ update ] 2011年01月04日 17:41 | コメント (0) | トラックバック

http://www.dango-itimi.com/blog/swf/111/

今回までの主な実装内容は以下のとおりです。

■ 防御処理実装

相手の攻撃を受け止めることが可能
防御キーを押し続けると 防御モーションをしばらく持続

■ 防御成功時からカウンター処理実装

相手の攻撃を防御キーで受け止めた後 無敵状態でカウンターアタックが可能
暫定として
防御成功時 「斬る」キーを押した場合 「斬る 二段目」が発動するように設定

■ 攻撃モーションをキャンセルして 防御 or ジャンプ 処理に遷移する処理実装

暫定として以下の攻撃を防御遷移可能技に設定

・「斬る 一段目」と「矢を放つ」

暫定として以下の攻撃をジャンプ遷移可能技に設定

・「斬る 二段目」と「矢を放つ」

■ 多重ヒット攻撃設定可能に

暫定として以下の攻撃を 2回ヒットする技として設定

・タケノコ「斬る 一段目」
・カバの地上攻撃

---

【 キャラクター操作 】

　[マウス] --- ポインタ方向へ移動
　[スペース] --- ジャンプ
　[F] --- 斬る
　[A] --- 矢を放つ
　[D] --- 防御(キーを押し続けると状態を一定時間持続)

【 特殊操作・仕様 】

・技によっては攻撃モーション途中で ジャンプ or 防御 に移行可
・防御成功時 斬るボタンを押すことにより無敵状態でカウンターアタック可能
・技によっては一度の攻撃で複数回ヒット

【 カメラ操作 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスホイール] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

左手はホームポジションに添えるイメージで操作キーを割り振っています。
キー操作を有効にするためには一度画面をクリックする必要があります。

---
複数攻撃を一度に防御しようとするとエラーが発生して画面が停止するバグがあり、処理見直し中。

ノートPCで表示確認してみたところ、3D描画に負荷がかかってしまっているのか処理落ちがかなりある事がわかりました。3D背景は床と壁と木の柱があるだけにもかかわらず、これだけ処理落ちが起こってしまうとなると考えものです。

[ FLASH ] [ update ] 2010年12月25日 15:02 | コメント (0) | トラックバック

http://www.dango-itimi.com/blog/swf/110/

今回までの主な実装内容は以下のとおりです。

■ 吹き飛ばし攻撃処理実装

暫定として以下の攻撃を吹き飛ばし攻撃に設定

・タケノコの「斬る」二段目
・カバの空中攻撃

■ 吹き飛ばされた場合ダウン状態へ遷移

・一定時間でダウン状態解除
・プレイヤーキャラクターの場合
　一定時間経過の他 何かキーを押す事によりダウン状態解除
・ダウン状態でも攻撃を受ける

■ その他

吹き飛ばし処理実装に伴い 空中Y軸方向移動は自由落下するよう処理変更

---

【 キャラクター操作 】

　[マウス] --- ポインタ方向へ移動
　[スペース] --- ジャンプ
　[F] --- 斬る
　[A] --- 矢を放つ

【 カメラ操作 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスホイール] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

左手はホームポジションに添えるイメージで操作キーを割り振っています。
キー操作を有効にするためには一度画面をクリックする必要があります。

[ FLASH ] [ update ] 2010年12月15日 10:45 | コメント (0) | トラックバック

できているところまで一旦アップロード。

　http://www.dango-itimi.com/blog/swf/109/

今回までの主な実装内容は以下のとおりです。

・空中ジャンプ処理追加

・飛び道具 表示範囲外で消去する処理追加
　→ 画面内青線位置で飛び道具消去

・移動可能範囲制御処理追加
　→ 床上のみ移動可能に
　→ 移動可能範囲はメタセコイア上で設定

・ヒットストップ(攻撃がヒットした場合の画面描画微量停止)処理追加
・攻撃エフェクト表示処理追加
・ダメージ中の色変化処理追加

【 キャラクター操作 】

　[マウス] --- ポインタ方向へ移動
　[スペース] --- ジャンプ
　[F] --- 斬る
　[A] --- 矢を放つ

【 カメラ操作 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスホイール] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

左手はホームポジションに添えるイメージで操作キーを割り振っています。
キー操作を有効にするためには一度画面をクリックする必要があります。

[ FLASH ] [ update ] 2010年12月08日 10:49 | コメント (2) | トラックバック

まだまだハリボテ状態ですが 一旦アップロード。
3D描画・ゲーム用ライブラリ製作、大量のドット絵アニメーションオーサリング用 jsfl 作成、メタセコイアデータ表示 等々、じっくり足場を固めつつ当ゲーム製作に戻りました。

　http://www.dango-itimi.com/blog/swf/108/

【 キャラクター操作 】

　[マウス] --- ポインタ方向へ移動
　[スペース] --- ジャンプ
　[F] --- 斬る
　[A] --- 矢を放つ

【 カメラ操作 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスホイール] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

ひとまず左手はホームポジションに添えるイメージで操作キーを割り振っています。
キー操作を有効にするためには一度画面をクリックする必要があります。

[ FLASH ] [ update ] 2010年12月01日 16:07 | コメント (0) | トラックバック

処理負荷軽減を考慮した 3D モデルの面分割数の削減 並びに、各オブジェクトを個々で操作しやすいような設定を行ないました。今回はタンスの扉と引き戸を開けたり閉めたりできるようにしています。

http://www.dango-itimi.com/blog/swf/107/mqo.swf

【 カメラ操作方法 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスホイール] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

swf 画面内 各[OPEN/CLOSE]ボタンで、タンスの操作が可能です。

・メタセコイア上でのモデリング図

[ FLASH ] [ tips ] [ update ] 2010年10月22日 12:30 | コメント (0) | トラックバック

ここ最近 3D 表示関連の勉強をし始めた理由は、某ポケモン最新作のゲーム映像を見てからの事でした。ドット絵と 3D 表現の融合に、これは一度表現してみたい、と感じました。
現在までの 研究結果が以下の URL となります。

http://www.dango-itimi.com/blog/swf/106/mqo.swf

【 カメラ操作方法 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスホイール] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

ビットマップ画像の重ねあわせの関係でカメラ回転角度には制限がかかっています。

表示はこれだけですが、かなり処理に負荷がかかりカメラ回転もややカクつきが発生してしまっています。PC のファンがうるさく鳴り出したらごめんなさい。

Zソート で面の表示順がおかしくならないようにするには、面を等間隔で細かく分割すればよい、と考えました。その結果、とても簡単なモデルなのに面数がとても多く処理負荷が高くなってしまっています。

もう少し単純な面で分割できるような形状にし、テクスチャで凹凸をごまかせば、面数が減り処理負荷も削減できそうです。

---
3D 表示において色々ネット上で調査をしておりましたら、今月に「Flash が 3D 対応する」といった旨の発表が「Adobe Max 2010」とやらで行われるようですね。これは Flash Player で Zバッファ を用いることができるようになるのですかなあ。なんとも期待したいところです。

[ FLASH ] [ tips ] [ update ] 2010年10月16日 17:05 | コメント (2) | トラックバック

1px 縁取り処理を再作成。
ベクターデータをビットマップデータに変換(Bitmap.draw)し、変換後のビットマップデータ内グラフィックス形状の外周に アルファ値を含むピクセルが存在している場合でも、縁取りを見た目綺麗に行えるようにしました。

ドット絵に適用

ベクターデータに適用

メタセコイアから取り込んだ 3D モデルに適用してみると以下のようになります。
http://www.dango-itimi.com/blog/swf/105/mqo.swf

【 カメラ操作方法 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

swf 内 左側の 3D モデルを元に、白く縁取り後 二倍表示を行なったものが右側の 3D モデルとなります。

カメラの角度のよっては 面と面との結合部がやや離れて表示されてしまう場合があり、その離れた隙間に対しても縁取りがされてしまいます。隙間を埋めるような面の形状にする等、工夫すればある程度は解決できそうです。

[ FLASH ] [ tips ] [ update ] 2010年10月09日 18:06 | コメント (0) | トラックバック

必要と思われる機能の実装とバグをもろもろなくし、メタセコイアで製作した 3D モデルを Flash にて表示を行うライブラリ製作はほぼ完了しました。

今回試しに以下のようなモデルを作成しました。

Flash 上で表示すると以下のようになります。
http://www.dango-itimi.com/blog/swf/104/mqo1.swf

鏡面表示例
http://www.dango-itimi.com/blog/swf/104/mqo2.swf

【 カメラ操作方法 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

マウスでカメラをくるくる操作してみると、角度によって一部面の描画順が変わる事があります。

どういう描画法を行なえば問題ないものになるのかを調べてみたところ、面作成方法を工夫すればある程度改善はできそうですが、Flash では完全な解決策はないとのこと。よって面の形状やカメラ角度等によって描画順が変わってしまうのは仕方無しとしました。

[ FLASH ] [ tips ] [ update ] 2010年09月29日 19:40 | コメント (8) | トラックバック

以前から課題にしていた、メタセコイアで製作した 3D モデルを Flash にて表示を行うライブラリ製作にとりかかりました。

世には Papervision3D 用にメタセコイアファイルを読み込むライブラリが公開されており、どのような解析を行うのか等を参考にさせてもらいつつ進めています。

　■ Papervision 3D 用 Metasequoia クラス
　http://www.libspark.org/wiki/rch850/Metasequoia
　http://www.libspark.org/svn/as3/Metasequoia/src/org/libspark/pv3d/Metasequoia.as

メタセコイアはシェアウェア版を用いて 3D モデルを製作することにしました。
シェアウェア版とはいえ、無料で利用可能な機能のみを用いています。
　http://www.metaseq.net/metaseq/index.html

メタセコイアファイル(mqo)はテキストファイルで開くことが可能で、ファイル内は以下のファイルフォーマット通りになっています。
　http://www.metaseq.net/metaseq/format.html
mqo ファイルは テキストファイルとして Flash から読み込むことが可能です。

mqo ファイル読み込み後はファイルフォーマットに従い、Material チャンクや Object チャンクといった内部の情報をそのままクラスファイルにし、その後、独自の 3D 表現ライブラリで使用できるように変換します。

3D 描画を行う際の難点として以下の(a)(b)がありました。

　(a)メタセコイアのY軸とZ軸の向きが Flash の座標軸と逆
　(b)メタセコイアと Flash とでは面表示規則(上面はどちらかの判定)が逆

ひとまずとして以下の対処で解決しました。

(aの対処)
　Flash 上では 各頂点座標を X軸を中心として 180 度回転させる
(bの対処)
　面にテクスチャを表示する際は TriangleCulling.NEGATIVE を用いて描画を行う

今回サンプルとしてメタセコイアで作成した簡単な 3D モデルのスクリーションショットが以下となります。

このメタセコイアファイルを Flash 上に読み込み表示を行ったものが以下となります。

http://www.dango-itimi.com/blog/swf/103/dpzl.swf

【 カメラ操作方法 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

どの面が手前にくるかのソート処理はまだ組み込んでいないため、常に三角面体が手前に表示されます。

[ FLASH ] [ tips ] [ update ] 2010年09月26日 19:34 | コメント (0) | トラックバック

透視投影と平行投影の切り替えを行うサンプルを作成しました。クォータービューのドット絵を合わせ、その他もろもろの処理を加えたものが以下となります。

http://www.dango-itimi.com/blog/swf/102/

画面 UI 等適当で、キャラクターアニメーションも抜けがあります。

【 UI 説明 】

・投影方法選択
PROJECTION
　├ PERSPECTIVE --- 透視投影
　└ PARALLEL --- 平行投影

・カメラ選択
CAMERA CONTROL
　├ AUTO --- 自動操作
　├ MANUAL --- マニュアル操作
　└ FIXED --- 固定

【 マニュアル選択時のカメラ操作方法 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

[ FLASH ] [ GRAPHIC ] [ tips ] [ update ] 2010年09月25日 13:46 | コメント (0) | トラックバック

javascript 版の Google Maps API (Version3)では円を描く処理はサポートされているようですが、Flash バージョンの Google Maps API では円描画はサポートされていない模様(javascript 版 Version2 相当?)なので、ネット上の記事を参考に円を描く処理をクラス化しました。

【 参考サイト 】

http://www.nanchatte.com/map/circle.html

【 ダウンロード 】

ファイル一式ダウンロード
http://www.dango-itimi.com/blog/swf/101/com.zip

上記ファイル内には以下の二つのファイルを配置しています。

・楕円頂点座標群取得用クラス
com.dango_itimi.geom.core.Polygons

・Google Maps 上に円描画用クラス
com.dango_itimi.googlemap.Circle

【 利用方法 】

事前に map インスタンス(com.google.maps.Map)を生成し、利用準備可能状態にしておく必要があります。
東京の緯度(35.689506)と経度(139.691701)に 頂点数 360 半径 300メートルの円を描画したい場合以下となります。

var lat:Number = 35.689506;
var lng:Number = 139.691701;
var circleData:Circle = Circle.create(new LatLng(lat, lng), 360, 300);
Circle.draw(map, circleData);

以下クラスのソースコードをそのまま記述。

▽続きを読む

[ FLASH ] [ tips ] 2010年08月13日 16:47 | コメント (0) | トラックバック

シンボルを原点座標(0, 0)に配置するだけの jsfl を作成しました。
前回記事の続きの記事ともなります。

【 ダウンロード 】
http://www.dango-itimi.com/blog/swf/100/OriginalPositioner.zip

【 jsfl ファイル解説 】

■ OriginalPositioner.jsfl

メインクラスファイル
このファイルを実行しても何も起こらず

■ OriginalPositionerOfSelectedLayer.jsfl

現在編集中のステージ内で
選択している1つのレイヤーの
全てのフレームに配置している
一つ目の要素(シンボルやシェイプ)の配置位置を
原点(0, 0)に設定する jsfl ファイル

ステージ上に複数シンボル等が配置されている場合、どれが「一つめの要素」と判定されるかわかりません。上記スクリプトは、一つのフレーム内にシンボル等が1つだけ配置している場合を用途としています。

【 使用手順例 】

前回記事からの続きとなります。

(1)

ムービークリップ walk_bottom.psd 内の、フレーム 1～6 に配置されている各ムービークリップ 1～6 を処理の都合上原点座標に配置したい場合があります。

(2)

OriginalPositionerOfSelectedLayer.jsfl を実行することで、各ムービークリップ 1～6 が原点座標に自動で配置されます。

[ FLASH ] [ tips ] 2010年07月15日 19:49 | コメント (0) | トラックバック

シンボル配置位置の小数点以下を四捨五入して再配置する jsfl を作成しました。

【 ダウンロード 】
http://www.dango-itimi.com/blog/swf/100/IntegralValuePositioner.zip

【 jsfl ファイル解説 】

■ IntegralValuePositioner.jsfl

メインクラスファイル
このファイルを実行しても何も起こらず

■ IntegralValuePositionerOfStage.jsfl

現在編集中のステージ内全てのレイヤーの
再生ヘッダ一にあるフレーム(currentFrame)に配置している
全ての要素(シンボルやシェイプ)の配置位置に対し
小数点以下を四捨五入して再配置する jsfl ファイル

■ IntegralValuePositionerOfSelectedItems.jsfl

ライブラリで選択したアイテム(シンボル)内全てのレイヤーの
1フレーム目に配置している
全ての要素(シンボルやシェイプ)の配置位置に対し
小数点以下を四捨五入して再配置する jsfl ファイル

■ IntegralValuePositionerOfSelectedLayer.jsfl

現在編集中のステージ内で
選択している1つのレイヤーの
全てのフレームに配置している
全ての要素(シンボルやシェイプ)の配置位置に対し
小数点以下を四捨五入して再配置する jsfl ファイル

【 作成経緯と使用手順例 】

Photoshop での大量のキャラクターアニメーション制作後、Flash の psd インポート機能にて以下の状況が大量に発生しそうなため、今回の jsfl の制作を行ないました。

(1)

ゲーム制作において都合のよい、足元を中心とした基準点で各レイヤー毎にムービークリップを作成する設定で psd を読み込みます。

(2)

psd が読み込まれた後のライブラリの様子です。ムービークリップ 1～6 内には同数値のビットマップデータ 1～6 が配置されています。
ここで例えばムービークリップ1 の内容を見てみると…

(3)

ビットマップデータの横幅が 21 ピクセルため、配置 X座標が -10.5 という 0.5 ピクセルの少数値が付与されてしまっています。こいつはいただけねえぜ…！

(4)

ライブラリのムービークリップ 1～6 を選択し IntegralValuePositionerOfSelectedItems.jsfl を実行すれば、小数点以下は四捨五入されて再配置されます。

次にライブラリ内 walk_bottom.psd ムービークリップを見てみます。

(5)

Photoshop で作成したそのままの配置位置に、各ムービークリップ 1～6 が フレーム 1～6 に割り当てられているのがわかります。ここでよく見ると、配置されているムービークリップ の X座標 が 24.5 という、またしても小数点以下の数値が見えます。

(6)

walk_bottom.psd レイヤーを選択し IntegralValuePositionerOfSelectedLayer.jsfl を実行すれば、選択したレイヤー内全てのフレームのムービークリップの小数点以下は四捨五入されて再配置されます。

次の記事「原点座標(0, 0)にシンボルを再配置する jsfl」へ続きます。

追記 2010年7月19日)
jsfl ソースファイル内に誤りがあったため修正したものを再アップロードしました。

[ FLASH ] [ tips ] 2010年07月15日 17:11 | コメント (0) | トラックバック

すでにどこかにありそうですが、勉強も兼ね、選択された一つのレイヤー内全てのキーフレームに指定数フレームを挿入or削除する jsfl を作成しました。

■ 実行イメージ図

　↓ 1フレーム挿入

　↓ 1フレーム挿入　

　↓ 1フレーム削除

■ ダウンロード

[ jsfl ファイル一式をダウンロード ]

■ jsfl ファイル解説

FrameTotalChangerToKeyFrames.jsfl
コアとなるクラスファイル
このファイルを実行しても何も起こらず

FrameInserterToKeyFrames.jsfl
1フレーム 挿入

FrameRemoverToKeyFrames.jsfl
1フレーム 削除

FrameTotalChangerToKeyFramesGUI.jsfl
プロンプトにて挿入 or 削除数を指定

[ FLASH ] [ tips ] 2010年07月12日 17:52 | コメント (0) | トラックバック

一つ前の記事の Flash CS4 から CS5 で swf 容量が大きくなってしまう現象にて、原因の調査を行いました。

結論は記事タイトルの通りでした。以下の手順で確認を行なえます。

(0)Flash CS4 で以下の(1)～(5)までの作業を行う
(1)「ダイナミックテキスト」に設定したテキストフィールドをステージ上に配置
(2)フォントファミリーを「_ゴシック」に設定
(3)テキストフィールドに適当な文字列を記述
(4)パブリッシュ設定内「サイズレポートの作成」にチェックを入れる
(5)サイズレポート _gothic 箇所に何も文字列が埋め込まれていないことを確認し fla ファイル(test.fla とする)を保存

(6)Flash CS5 にて test.fla を開きパブリッシュ
(7)サイズレポート _gothic 箇所に(3)で設定した文字列が埋込み設定されてしまっている事を確認

上記(2)で _sans を設定した場合 CS5 では文字列は埋め込まれない事を確認。また、CS4 ではなく CS5 で _ゴシック のテキストフィールドを作成し、テキストフィールド内に文字列を設定した場合、文字列は埋め込まれない事も確認。

CS5 にて新規で何かを制作する場合は問題は起きませんが、今まで CS4 で制作していたものを CS5 に移行しようとした場合の問題点となりそうです。

[ FLASH ] [ tips ] 2010年06月16日 19:14 | コメント (4) | トラックバック

Flash CS4 の Flash Lite にて swf 容量が 100 KB ギリギリになるように制作していた fla ファイルを そのまま Flash CS5 でパブリッシュしてみると、swf 容量が 115 KB となってしまいました。

Flash CS4 までは Player バージョンを Flash Lite に設定しておけば、パブリッシュ時 自動的に Device Central が立ち上がりましたが、CS5 では通常のムービープレビューが行われるのみ。パブリッシュ時 Device Central を立ち上げるような設定項目は見つからず。Device Central が立ち上がらないから Flash Lite 用に swf がパブリッシュされず容量がふくれあがってしまっている、とかそういったことがあるのですかなあ？

他、気になる点といえば、ライブラリにフォントシンボルが自動的に作成されているという点。Flash CS5 からはフォントの埋め込みは一括で設定できるようになった、とのことですが、このフォントシンボルが何か容量増加に影響を及ぼしているのかどうか。

Flash CS5 に関する情報がまだ少ない状況なので原因がわかるまでひとまず Flash Lite の開発は Flash CS4 で行う事に。

追記)
メニューの[制御]-[ムービープレビュー]から Device Central でムービープレビューを行える項目を発見しました。容量の問題に関しては未解決。

追記2)
CS5 で容量が大きくなってしまった原因がなんとなく判明。
CS4 と CS5 とでパブリッシュ時のサイズレポートを作成し比較してみたところ、CS5 ではフォントの _gothic(_ゴシック) に設定した文字列が swf 内に埋め込まれてしまっているようです。その他フォントに関しても CS4 に比べ CS5 では埋め込まれている文字数が増えています。CS5 では新たに何かフォント設定を変更しなくてはならない模様。

追記3)
問題の原因が判明しました。 → 次の記事へ

[ FLASH ] [ tips ] 2010年06月16日 17:39 | コメント (0) | トラックバック

サンプルライブラリのサウンドで何か利用出来そうなものはないかと、一つ一つ曲を再生確認してみたのですが、あまりのマウス移動の多さに腕がつりそうになりました。

CS4 よりも前のどのバージョンかの Flash では、ライブラリウインドウ内のサウンドシンボルを選択した状態で Enterキーを押すとサウンドが再生・停止されたり、再生後 または再生中に上下キーを押すことで次のサウンドシンボルにフォーカスを当てることができたはずですが、この操作仕様は破棄されてしまったのですかね。ライブラリシンボル操作用のショートカットキーが割り振られていないのかと探してみたもののみつからず。

[ FLASH ] [ tips ] 2010年06月08日 18:07 | コメント (0) | トラックバック

来月末に発売されるという Flash CS5。どのような新機能があるのかネットを徘徊してみたところ、「XFL」という新フォーマット形式による fla ファイルの保存というものがあると知りました。

　xingxx : 動画でみる Flash CS5 の 押さえておきたい新機能
　http://log.xingxx.com/2010/04/flash-cs5.html

XFL が Flash CS5 の一番の売りになりそうなものですが、それほどプッシュされてる感はないので、過度な期待はしないほうがよいのかどうなのか。

fla ファイルライブラリ内の構造や、各シンボル内のレイヤーやタイムライン内の情報が全て xml ファイルに記述され、その xml ファイルの記述や XFL 内画像データを変更することで fla ファイルを編集せずとも Flash オーサリングが行えるというもの、のようですが実際に触ってみないとどこまで出来るかはわからず。

Flash オーサリング自動化処理は jsfl で可能でしたが、今後はどのようなツールを用いても可能ということになりそうなので、Flash オーサリング自動化処理ツールを Flash(AIR) で作成、といったこともできるのでしょうか。

想定している XFL の機能で行いたいことといえば、タイムラインアニメーションムービークリップの自動スクリプト処理変換です。

指定のフォーマットでタイムラインアニメーションを作成し、XFL 形式で保存。XFL 内 xml から 各フレームに配置された各シンボルの配置座標等読み取り、クラスファイルにそれら情報を出力。また、スクリプトで操作しやすいようなムービークリップを自動生成。

ゲームのキャラクターの動作イメージをタイムラインアニメーション(ムービークリップ)で作成し、XFL を利用して変換処理を自動化すれば、キャラクター動作用スクリプトの調整は一切手をつけずにムービークリップの編集内容そのままをゲーム内画面の動作に反映させる、なんて事が可能となります。

ありそうな難点といえば、xml 構造を破壊して fla ファイルを開く事ができなくなってしまうということ。要バックアップとなりそうです。

[ FLASH ] [ info ] 2010年04月15日 11:08 | コメント (0) | トラックバック

もろもろ適当なベストスクロール処理実装。マウス方向にキャラクターが移動します。キャラクターはまだ奥の壁を突き抜けます。また、衝突判定確認用に立方体の表示を行っています。

　http://www.dango-itimi.com/blog/swf/98/

【 3Dカメラ操作方法 】

　・マウス
　[マウスドラッグ] --- Y軸を軸にした回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

軸回転は微量行われるようにしています。ゲーム中演出としてY軸の微量回転もありかな、といったところです。

[ FLASH ] [ update ] 2010年04月11日 17:32 | コメント (2) | トラックバック

OH! DANGO JAM が起動しなくなってしまった、という報告を時たま受けていました。ネットワーク上に登録された おかしなデータの敵と戦うと、自分のデータもおかしいことになってしまい、起動しなくなってしまうというものです。

なので、データを一度リセットするためのツールを用意しました。
http://www.dango-itimi.com/jam/jamClear.html

大変申し訳ありませんが、上記ツールを用いてデータをリセットし、それでも宜しければ再び 1 から遊んでやってください。

敵の名前が「CPU」とつくものは戦っても安全な敵となっています。NaN と表示される敵と戦うと データが壊れてしまうという報告を受けていますのでご注意ください。

[ FLASH ] [ info ] [ update ] 2010年02月18日 02:14 | コメント (1) | トラックバック

今まで作成してきたドット絵キャラクターが3D表現上にどのように映るか一度確認したかったため、適当な背景画像を作成し、簡単なサンプルを作成しました。

　http://www.dango-itimi.com/blog/swf/97/

※要 最新の Flash Player 10
　豆粒のように小さく表示される場合は Flash Player 10 が最新のものではありません

【 3Dカメラ操作方法 】

　・キーボード
　[W] --- 上移動
　[S] --- 下移動
　[A] --- 左移動
　[D] --- 右移動

　・マウス
　[マウスドラッグ] --- Y軸を軸にした回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

軸回転は微量行われるようにしています。

用意した背景画像はこちら

今度は 3D上の表示を確認しつつ描き込んで行く予定。

[ FLASH ] [ update ] 2010年02月17日 01:46 | コメント (3) | トラックバック

Flash CS4 上から一度でも設定されたリンケージクラス名は、Flash CS4 上にて「ActionScript用に書き出し」のチェックボックスを外す等をして リンケージ設定を完全に解除しない限り、jsfl からはリンケージクラス名設定は変更不可能な状態となってしまうようです。

「Flash CS4 上からリンケージ設定が完全に解除された状態」とは、「対象となるアイテムのライブラリウインドウ内の『リンケージ』の項に何も表示されていないない状態」とします。(図2)

Flash CS4 上でリンケージ設定を行ったアイテムに対し jsfl でリンケージ設定の解除命令(Item.linkageExportForAS = false)を実行しても、ライブラリウインドウ内の『リンケージ』の項には、設定されていたクラス名のみが表示される状態となり(「書き出し：」という文字列は消える)、完全解除とは言わない状態となります。(図3)

Flash CS4 からのリンケージ設定が完全に解除されていない状態では、jsfl からリンケージクラス名を設定しようとしても、その設定は fla ファイルへは反映されません。

jsfl にて Flash CS4 で行われたリンケージ設定を完全に解除する方法を調査してみましたが、現在のところわからない状況です。対象となるアイテムを複製し元アイテムは削除…といった方法で解決できるかもしれませんが、削除するという操作を入れるのは危険なので、調査対象からは外しています。

検証は以下の環境で行いました。

　Flash CS4 10.0.2
　Windows Vista Home 64bit

OS や Flash のバージョンによっては上記現象の動作が異なる可能性があります。

開発途中では、どんどんクラス名やクラスのディレクトリ構造の変更をかけるので、普段は jsfl でリンケージ設定を行っているのに、まれに Flash CS4 上のシンボルプロパティから設定してしまったりすると、後にそれが原因でつまずいてしまうことが結構あります。

参考: Flash の拡張機能 Item オブジェクト
http://help.adobe.com/ja_JP/Flash/10.0_ExtendingFlash/WS5b3ccc516d4fbf351e63e3d118a9024f3f-7f92.html

参考図

図1) リンケージ設定が行われている状態

図2) リンケージ設定の解除が完全にが行われている状態

図3) リンケージ設定の解除が完全にが行われていない状態

図4) 図3の状態でシンボルプロパティを開いた状態
　　 この状態から「OK」ボタンを押すと図2の状態に移行する

[ FLASH ] [ tips ] 2010年02月13日 21:20 | コメント (0) | トラックバック

Flex SDK の mx.graphics.codec.PNGEncoder クラスを改造し、負荷が高くなる箇所を分割して処理を行う PNGEncoder クラスを作成しました。

すでに分割処理を行う PNGEncoder を作成されている方はいますが、私が改造したものは 指定した数値分処理を行ったら中途でループを抜けるものとなっています。イベント発行などは行わず、処理が終了したら 取得対象となる ByteArray インスタンスを返却します。

サンプルファイル一式

http://www.dango-itimi.com/blog/swf/90/sample.zip

使い方

サンプルファイルの一部を抜粋/見やすく修正

private var main:Function;
private var pngEncoder:PNGEncoder;

...

public function Sample() {

	...
	
	pngEncoder = new PNGEncoder(
		new TypeBitmapData32(bitmapData), //32bit PNG エンコード指定
		bitmapData.width, bitmapData.height,
		5000 //1フレーム内に実行するループ数を任意に設定	
	);
	main = encode;	
	addEventListener(Event.ENTER_FRAME, run);
}
private function run(event:Event):void{
	
	main();
}
private function encode():void{
	
	var pngBytes:ByteArray = pngEncoder.run();
	trace(pngEncoder.getProgress());
	if(pngBytes) main = stop;	
}
private function stop():void {}

PngEncoder.run メソッドを実行し、戻り値が null の場合はまだ処理が完了していません。ByteArray インスタンスが返却されると処理が完了したことを示します。PngEncoder.run メソッドを実行後 PngEncoder.getProgress メソッドを呼び出すことで現在の進行状況(0～100%)が確認できます。

mx.graphics.codec.PNGEncoder では、処理行数が多くなる for 文内で if 文があり、これはなくしたほうがよいのではと考え、コンストラクタの引数には あらかじめ一定の処理を行うためのインスタンスを渡すようにしました。しかし逆にこれでは処理が遅くなってしまうという場合はごめんなさい。

サンプルでは 32bit PNG エンコードを行いますが、アルファチャンネルなしの PNG エンコードを行いたい場合は、TypeBitmapData24 クラスのインスタンスを引数に指定します。

	pngEncoder = new PNGEncoder(
		new TypeBitmapData24(bitmapData),
		bitmapData.width, bitmapData.height,
		5000
	);

コンストラクタの第四引数に何も数値を指定しない(デフォルト数値 0を指定した)場合は、分割処理は行われません。PNGEncoder.run メソッド一度の実行で ByteArray インスタンスを取得できます。

その他改造点としまして、Array を Vector に変更しています。Flash Player 9 対応にする場合は Vector 記述箇所を Array に戻す必要があります。

mx.graphics.codec.PNGEncoder 内にある Adobe の著作権表示箇所やその他コメントは、そのまま残しておいたほうがよいのか、記述を何か変えるべきなのか、削除したほうがいいのか、どのように扱えばいいか判断がつかなかったため、改造後のソースには何も書いていません。何か問題がありましたらご指摘願います。

■ Flex SDK mx.graphics.codec.PNGEncoder
http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/framework/src/mx/graphics/codec/PNGEncoder.as

[ FLASH ] [ tips ] [ update ] 2009年12月10日 19:07 | コメント (0) | トラックバック

習作として GridCutter という画像加工出力を行う Web ツールを製作しました。
各ピクセルデータを拡大して等間隔に配置し 32bit の PNG で出力を行います。

以下簡単な操作手順です。

・FILE から加工元となる画像ファイルを PC 上から選択
・各ピクセルデータを 四角か丸か どちらの模様で表示するかを TYPE から選択
・zoom (倍率)、margin(間隔ピクセル数) に数値を入力
・出力される 画像サイズ W(横幅)と H(縦幅)を確認
・VIEW ボタンを押して画像トレース開始
　→ 進行状況はツールバー最下部に表示
・画面に表示されたトレース画像で問題なければ SAVE ボタンで PC 上に保存

すべての処理はローカルPC上で行われます。「四角」あるいは「丸」の模様を配置するだけなので、画像加工処理自体は非常に簡単なものですが、何か機会がありましたらお気軽にご利用ください。

Opera で発生する問題

zoom あるいは margin のテキストフィールドそばにマウスカーソルがあると、各テキストフィールドに自動的にカーソルがあたり、ハイライトするようにしています。これにより、テキストフィールドをクリックすることなくキーボードから数値入力が可能となります。
しかし、以下の条件が合わさると、テキストフィールドの数値はハイライトされているのにキーボードから数値入力ができなくなる、という場合があります。

・ブラウザに Opera を用いている
・FILE または SAVE ボタン押下からファイル選択ダイアログ表示を行い
　ファイル選択あるいはキャンセルからダイアログを閉じた直後の状態

上記条件の場合、ユーザは swf 画面を一度クリックしないと 数値入力ができません。
Opera のみフォーカスの動作が少々異なるのかもしれません。

[ FLASH ] [ update ] [ web service ] 2009年12月06日 13:57 | コメント (0) | トラックバック

Flash Player 10 で扱えるビットマップの表示サイズの限界はいくつなんだと以前から気になっていましたが、Flash のヘルプに書いてあったのでメモ。

---
AIR 1.5 および Flash Player 10 では、ビットマップイメージの最大サイズは幅または高さが 8,192 ピクセルで、ピクセルの総数が 16,777,216 を超えないようにする必要があります（したがって、ビットマップイメージの幅が 8,192 ピクセルの場合、高さは 2,048 ピクセル以下にする必要があります）。Flash Player 9 以前では、高さの制限は 2,880 ピクセル、幅の制限は 2,880 ピクセルです。
---

[ FLASH ] [ tips ] 2009年12月04日 02:48 | コメント (0) | トラックバック

AS3 ライブラリ整理を一旦終了。ライブラリ内の一機能を用いたサンプルの紹介です。

まず、核となるスクロールバー機能があり、そのスクロールバー機能を用いて四角形の領域に縦方向と横方向にスクロールバー表示を行う BoxScroller というものを作成しました。

BoxScroller を用いることにより、ブラウザのデフォルト機能であるスクロールバー表示のような表現を行うことが可能となります。以下のサンプルを閲覧ください。表示には Flash Player 10 が必要です。

　→ サンプル1(表示領域の外側にスクロールバーを表示する例)
　→ サンプル2(表示領域の内側にスクロールバーを表示する例)

画面内に表示されるスクロールバーは Flash で実装しています。スクロールバー押下でのスクロール処理の他、マウスホイールによるスクロールや、各ページをドラッグ&ドロップすることでもスクロールする事が可能です。

画面右下の数値ボタンを押すことにより、表示されるページが変化します。ブラウザサイズを変更することにより、あるいはページを切り替える(PAGE1, PAGE2を切り替える)ことにより、スクロールバーの表示サイズや位置が適切に調整されます。また、ページの表示サイズに対しブラウザの表示サイズが大きい場合、スクロールバー表示は消去されます。

PAGE3 は BoxScroller を複数画面内に適用した例となります。BoxScroller が複数存在する場合、マウス位置により どの BoxScroller をマウス処理対象とするかの判定を行うかの機能を組みこんでいます。

[ FLASH ] [ tips ] [ update ] 2009年11月24日 11:11 | コメント (0) | トラックバック

Flash Lite でのキャリア毎の swf 書き出し作業の問題点

Flash Lite では、どのキャリアの携帯端末で swf が実行されたのか 動的に判別することができません。swf 実行時、各キャリア専用の認証用 URL にアクセスしたいといった場合等、あらかじめキャリアごとに専用の swf を書き出しておく必要があります。(サーバ側で swf 内の変数を動的に書き換える方法もありますが、その環境がないものとして話を進めます。)

例えば以下のようなスクリプトを、ルートのフレーム 1 に記述します。

//1 : docomo
//2 : au
//3 : softbank
CARRIER = 1;

//1 : 本番サーバ
//2 : 検証サーバ
SERVER = 1;

//認証 URL 一覧
URL1_1 = "http://～"; //docomo 本番サーバ用
URL1_2 = "http://～"; //docomo 検証サーバ用
URL2_1 = "http://～"; //au 本番サーバ用
URL2_2 = "http://～"; //au 検証サーバ用
URL3_1 = "http://～"; //softbank 本番サーバ用
URL3_2 = "http://～"; //softbank 検証サーバ用

//実際に認証で用いる URL
url = eval("URL" add CARRIER add "_" add SERVER);

変数 CARRIER, SERVER の各値を手動で書き換えた後 パブリッシュを行い、書き出された swf を docomo.swf, au.swf, softbank.swf …、といった具合に名前を変更します。

ここで、ファイルにどこか修正が入る場合、再び上記 swf 書き出し作業を繰り返す必要がでてきます。この作業の繰り返しは、ミスが発生しやすく、時間も浪費し、精神衛生上よろしくありません。

サンプルファイル ダウンロード

上記問題を解決するために、「プロファイラ内容変更」と「フレームへのスクリプト記述」を行う jsfl のサンプルを作成しました。

　→ サンプルファイル一式 ダウンロード[trunk.zip]

今回作成した jsfl ファイルは Flash CS4 以降対応となっています。

サンプルファイルディレクトリ構造は以下のようになっています。

trunk
　├ fla 
　│ ├ PublishChanger.fla
　│ └ test
　└ jsfl
　　 ├ publish.jsfl
　　 ├ Main.jsfl
　　 ├ ProfileXMLReplacer.jsfl
　　 └ CarrierActionScript.jsfl

サンプル実行手順

jsfl ファイルから fla ファイルのパブリッシュを行うには、fla ファイルへの絶対パスの指定が必要です。まず publish.jsfl ファイルに fla ファイルへの絶対パスの記述を行います。

publish.jsfl をテキストエディタで開き、一行目に trunk ディレクトリはどこかの指定を行ってください。ダウンロード直後は例として以下の記述が行われています。

var PROJECT_DIRECTORY = 
	"file:///f:/MyDocument/eclipse/workspace/PublishChangerJsfl/trunk/";

例えば以下の環境の場合
　OS : windows XP
　ユーザ名 : Owner
　trunk 配置ディレクトリ : デスクトップ
以下のように変更を行います。

var PROJECT_DIRECTORY = 
	"file:///C:/Documents and Settings/Owner/デスクトップ/trunk/";

上記設定後 publish.jsfl をダブルクリックで実行することで fla ディレクトリ内の PublishChanger.fla ファイルがパブリッシュされ、各種 swf ファイルが fla ディレクトリ内に書き出されます。書き出し先ディレクトリを指定することも可能で、test ディレクトリにも swf が書き出されるようにしています。

書き出される swf ファイルは以下の形式にするようにしています。

(キャリア名 + サーバ種別).swf

各種 swf をパブリッシュする直前には、フレーム 1 に以下のスクリプトを組み込むようにしています。

testTxt = 'キャリア名' add 'サーバ種別';

各 swf ファイルに上記スクリプトが正常に埋め込まれているかを確認するために、PublishChanger.fla 内には testTxt というテキストフィールドを配置しています。各 swf を開いてご確認ください。

今回のサンプルでは上記書き出しと設定を行なうだけのサンプルなので、プロジェクトに合わせて jsfl の処理内容を書き換えてください。swf 名書き出しに関する処理は Main.jsfl 内の for 文以下、フレームへのスクリプト埋め込みに関する処理は CarrierActionScript.jsfl 内に記述されています。各 jsfl ファイル内のスクリプトはさほど長いものではないので、細かい説明は省略します。

参考 プロファイル設定を行う jsfl 処理説明

Flash から swf 等の各種ファイルを書き出す設定プロファイル(xmlファイル)内の、以下の要素を設定する事で swf 出力ファイル名を任意に変更する事が可能となります。

<PublishFormatProperties enabled="true">
	<defaultNames>0</defaultNames>
	<flashDefaultName>0</flashDefaultName>
	<flashFileName>任意のswf名</flashFileName>
</PublishFormatProperties>

ProfileXMLReplacer.jsfl は プロファイル内の指定要素の値を 変更・設定 する処理を行います。Main.jsfl は ProfileXMLReplacer.jsfl を用いて defaultNames, flashDefaultName, flashFileName 要素の値を変更するようにしています。

問題点

私は、Flash Lite の swf は容量を削減するため Flash 8 で書き出す事があります。しかし、Flash 8 では今回作成したサンプルの jsfl 内に記述したスクリプトが使用できないものがあり、せっかく作ったのに使用できないなんて事が。

その他 参考

Adobe Flash CS4 Professional の拡張機能(jsfl API ドキュメント)
http://help.adobe.com/ja_JP/Flash/10.0_ExtendingFlash/index.html

[追記 2009年11月2日]

this.doc.getTimeline().layers[0].frames[0].actionScript

開いたflaファイルから取得したドキュメントオブジェクト変数(doc)に対し、以下の記述を追加することでルートタイムラインを参照するようになる模様。

this.doc.currentTimeline = 0;

[ FLASH ] [ tips ] 2009年10月29日 14:12 | コメント (3) | トラックバック

ここ最近 UI 関連のライブラリを再構築してく中(現在はスクロールバー関連処理再構築中)、マウスイベント(MouseEvent)は Stage インスタンスのみから検出できるようにするべきではないか、と考えました。

以下予定している今後についてまとめ書きを行いました。

変更内容

(a) MouseEvent を扱うクラスは一つ

・MouseEvent は Stage インスタンスからのみ検出する
・各種 DisplayObject への MouseEvent 検出処理定義は削除
・検出したい MouseEvent はあらかじめ一通り定義しておく

(b) MouseEvent.MOUSE_OUT, MouseEvent.MOUSE_OVER 処理削除

・Rectangle を用いて、領域上にマウスが存在するかを判定する
　→ Rectangle.contains 等を利用

(c) 領域がクリックされたかどうかを判定

・(a)でマウスクリックを検出された時
　(b)の領域内にマウスポインタが存在する場合 とする

ポイント

・各所に散らばっていた addEventListener の MouseEvent 処理は不要となる
・DisplayObject 関連インスタンスを生成せずともマウス状況に対する処理が扱える

数値上で計算を行っておき、任意のタイミングで DisplayObject 関連インスタンスを生成し表示・位置設定、といった描画処理を行う事が可能となります。
不要なインスタンスや処理を定義する箇所が減り、なおかつ処理が分割され、見やすいクラス設計が可能となります。

まだ実際に変更作業は行っていないので、あくまで「おそらく」の話となります。

別途考慮が必要になる点

Stage インスタンスに addEventListener で MouseEvent を検出するようにするため いつでも MouseEvent は発生するようになる

DisplayObjectContainer の表示重なり具合を考慮する必要がでてきます。
この SimpleButton は手前に Sprite が表示されているから、マウスクリック判定は無効とする、等です。

複雑な形状の判定

シンプルな UI ならば矩形領域判定で十分かと思われますが、複雑な形状の UI に対して領域クリック調査などを行いたい場合は別途考慮が必要となりそうです。

---

UI 関連ライブラリ全体(特にボタン(SimpleButton)の扱い)に修正が入りそうです。
個人的なコーディングスタイルがよりいっそう統一されたものになりそうです。

考え方にどこか欠陥は必ずありそうです。変更作業を行いながら気づくかもしれません。
やっぱりこうしないほうがいいや、といった事もあるかも。

[ FLASH ] [ tips ] 2009年10月24日 18:07 | コメント (0) | トラックバック

Slider コンポーネントの部分部分のマウス当たり判定がとても小さく操作しにくいため、当たり判定を大きくするための手順を記述します。

手順

(1)前準備

Flash のコンポーネントウインドウから Slider コンポーネントを ライブラリに配置してください。

(2) fl.controls.Slider クラスの拡張

fl.controls.Slider クラスの configUI メソッド内で、スライダーの三角のボタン(thumb)とスライダーのバー(track)のインスタンスが生成されています。そして、各インスタンスは setSize メソッドにより表示サイズが設定されています。
thumb, track の各インスタンスは protected 設定されており外部クラスから操作できないため、Slider のサブクラスを作成し、外部から表示サイズを変更できるようにします。

package {

	import flash.display.Sprite;
	import flash.utils.getDefinitionByName;
	import fl.controls.Slider;
	
	public class CustomSlider extends Slider {

		override protected function configUI():void{
			
			super.configUI();

			//表示変更したい任意の大きさにする
			thumb.setSize(16, 52);
			track.setSize(80, 40);
		}
	}
}

thumb, track 各インスタンス内にはライブラリ内にある各種スキン用ムービークリップが配置されます。実際には以下のようなソースコードにすれば、スキン用ムービークリップの表示サイズそのままの大きさが各インスタンスに適用されるようになります。

package {

	import flash.display.Sprite;
	import flash.utils.getDefinitionByName;
	import fl.controls.Slider;
	
	public class CustomSlider extends Slider {

		override protected function configUI():void{
			
			super.configUI();
			
			var cls:Class;
			
			cls = getDefinitionByName("SliderThumb_upSkin") as Class;
			var tmpThumb:Sprite = new cls();
			thumb.setSize(tmpThumb.width, tmpThumb.height);
			
			cls = getDefinitionByName("SliderTrack_skin") as Class;
			var tmpTrack:Sprite = new cls();
			track.height = tmpTrack.height;
		}
	}
}

(3) クラス設定

上記 CustomSlider クラス作成後、ライブラリ内にある Slider コンポーネントのクラス設定を fl.controls.Slider から CustomSlider へ変更します。

(4) スキン変更

ライブラリ内にある以下のムービークリップシンボルを編集します。

Component Assets
　└ SliderSkins
　　│ 
　　├ SliderThumb_downSkin
　　├ SliderThumb_overSkin
　　├ SliderThumb_upSkin
　　│
　　└ SliderTrack_skin

サンプルでは、デフォルトのグラフィックほぼそのままで、当たり判定のみが広がるように透明のシェイプを hitArea というレイヤーに追加しています。

SliderTrack_skin には 9 スライス設定がされているので、編集には少々コツがいるかもしれません。後のサンプルファイルをご参考ください。

サンプルファイル

http://www.dango-itimi.com/blog/swf/86/slider.zip

追記) サンプルの fla ファイルを Flash CS3 からでも開けるようにしました

[ FLASH ] [ tips ] 2009年09月07日 23:29 | コメント (0) | トラックバック

■ Twice Me
http://www.dango-itimi.com/twiceme/

zoome で公開されている動画をアンチエイリアスなしで拡大して閲覧可能

個人用に製作。あれこれやってるので小さく宣伝。
最低限の機能のみ実装し UI グラフィックは適当です。
時間帯によっては API からまったく反応が返ってこないため使い物になりません。

[ FLASH ] [ info ] [ update ] [ web service ] 2009年08月31日 00:47 | トラックバック

最近動画に関して少々調査を行っています。
ここで、動画共有サイト zoome で提供されている API で XML-RPC という単語を目にしました。XML-RPC とはなんぞや、と調べて見たところ、指定の形式の XML データ(request)を指定のサーバ(URL)に送信すると、指定の形式の XML データ(response)が得られるというもののようです。

そういえば、XMLをサーバに送信するような処理を書いたことはなかったな、ということで、zoome API を元に Flash(AS3) から XML-RPC をどのように利用するかのメモを以下に記述します。

例として「マイページのURLネーム(zoomeurl)」が「sample」という会員の、「zoome の会員ID(zoomeid)」を取得します。

　zoome API 解説ページ
　http://www.zoome.jp/help10

　会員基礎情報 取得メソッド説明
　http://www.zoome.jp/help10#zoome.getUserInfo

会員基礎情報 取得メソッド(zoome.getUserInfo)の説明箇所の「▼request」 に記されている XML データを、APIのURI(エンドポイント) http://up.zoome.jp/xmlrpc に送信することで、「▼response」 に記されている XML データを取得することができます。

package twm.index.analyze {
	
	import flash.events.ErrorEvent;
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequestMethod;
	import flash.net.URLRequest;

	public class Sample {

		private var response:URLLoader;
		
		public function Sample() {
		}
		
		public function startRequest():void{
			
			var requestXml:XML = 
				<methodCall>
					<methodName>zoome.getUserInfo</methodName>
					<params>
						<param><value><struct>
							<member><name>zoomeurl</name><value><string></string></value></member>
						</struct></value></param>
					</params>
				</methodCall>
			;
			var zoomeurl:String = "sample";
			requestXml.params.param.value.struct.member.value.string = zoomeurl;
			
			var request:URLRequest = new URLRequest();
			request.contentType = 'text/xml';
			request.data = requestXml;
			request.method = URLRequestMethod.POST;
			request.url = "http://up.zoome.jp/xmlrpc";
			
			response = new URLLoader();	
			response.addEventListener(Event.COMPLETE, eventComplete);
			response.addEventListener(ErrorEvent.ERROR, eventError);
			response.load(request);
		}
		
		private function eventError(event:ErrorEvent):void {
		}
	
		private function eventComplete(event:Event):void {
				 
			var loader:URLLoader = URLLoader(event.target);
			var responseXml:XML = new XML(loader.data);
			
			var zoomeidList:XMLList = responseXml.params.param.value.struct.member.(name == "zoomeid");
			var zoomeid:String = zoomeidList.value.i4;
			trace('zoomeid: ' + (zoomeid));
		}
	}
}

追記) zoome API はクロスドメインの関係で web 上からは直接アクセスできない事に気づきました。上記サンプルコードはローカル PC 上では動作します。

[ FLASH ] [ tips ] 2009年08月27日 16:39 | コメント (0) | トラックバック

Flash Player 10 にすると動作しなくなってしまうという欠陥ゲーム PICT PUZZLE の修正を行いました。サイトに設置してくださっていたみなさま、何ヶ月も放置してしまいまことに申し訳ございませんでした・・・！

　PICT PUZZLE 説明ページ
　http://www.dango-itimi.com/download/pictpuzzle/

　最新版ファイル一式 pict.zip ver1.03
　http://www.dango-itimi.com/download/pictpuzzle/pict.zip

過去のバージョンから ver1.03 へバージョンアップを行うには、pict.zip 内の pict.swf のみを差し替えてください。

▽続きを読む

[ FLASH ] [ update ] 2009年07月29日 02:17 | コメント (0) | トラックバック

前回記述した Opera でスクロールバーが表示されてしまう問題が解決しました。xml 要素の記述の仕方が悪かった事が原因でした。

mixi Developer Center にある 「はじめてのmixiアプリ」の項で以下のような記述箇所があります。

<div>Hello, <span id="target"></span>!</div>

これをこのまま流用して、span 要素内に swf を埋め込ませようとしていました。

<div><span id="target"></span></div>

しかしこれが誤りでした。上記記述だと Opera でスクロールバーが表示されてしまいます。
ここで、span 要素を削除し div 要素に id 設定を行なってみたところ Opera にてスクロールバー表示がなくなりました。

<div id="target"></div>

gadgets.flash.embedFlash の第四引数に何も指定しなくても、gadgets.window.adjustHeight メソッドを呼び出そうともスクロールバーは表示されなくなります。
以下のように div 要素で入れ子にしても問題ありませんでした。

<div><div id="target"></div></div>

[ FLASH ] [ tips ] 2009年07月16日 10:29 | コメント (0) | トラックバック

mixi アプリがまだベータ版という事と、私もまだ調査し始めたばかり、ということでどちらに問題があるかわかりませんが、ひとまず現在までにひっかかった点と不明点を記述。

■embedFlash、IE6、 Flash Player 10 表示指定不可

mixiアプリに Flash を利用する場合のサンプル例として公式サイトに以下の説明があります。

gadgets.flash.embedFlash(
      "http://your.server.host/flash/content.swf",
      document.getElementById("target"),
      6);

数値の 6 は Flash Player のバージョンを示すものですが、ここに 10 を指定すると IE6 で何も表示されなくなってしまう。swf 自体が埋め込まれないようです。

IE6 で Flash Player 10 対応の swf を問題なく表示するにはどうすればよいのか、現時点では不明。上記公式の swf 表示方法ではなく swfobject での swf 表示を試してみる予定。

■Opera 9.64 で縦スクロールバーが表示されてしまう

公式の mixi アプリに Flash を 表示する方法に順番に従っていくだけでは Opera 9.64 で mixi アプリ表示領域右側にスクロールバーがデフォルトで表示されてしまいます。(IE6, Firefox3, Safari3.2.3 では表示されず)

公開されている swf を用いた mixi アプリではスクロールバーが表示されていないので、何か解決策があると思いますが、どうすればよいのか情報が見つからず。ありとあらゆる手を模索して色々試してみるしかなさそうです。

※開発環境は Windows XP です。

---
[ 追記 2009年7月15日 ]

Opera でスクロールバーが表示されてしまうケースが少々判明

■判明内容

(1) embedFlash 第四引数 パラメータ設定で width や height を記述しない

swf の表示サイズ設定を行なわない場合にスクロールバーが表示されてしまうようです。上記 コード引用にあるような gadgets.flash.embedFlash に第三引数までしか設定していない場合に起こります。

(2) gadgets.window.adjustHeight メソッドを実行

マニュアルによると、表示対象コンテンツ縦幅 が アプリ表示領域を超える場合、gadgets.window.adjustHeight() を実行するとアプリ表示領域が調節される、とあります。しかしこの命令を実行すると Opera ではスクロールバーが表示されてしまいます。
gadgets.window.adjustHeight 単体実行ではスクロールバー表示は行われません。embedFlash メソッドと同時に利用するとスクロールバーが表示されてしまいます。

表示されてしまうスクロールバーの長さを見る感じ 2px ほど表示対象コンテンツの縦幅が余計に加算されている感じがします。2px という数値、ブラウザの違いで起こる CSS のバグで見たことがあるような気が。

■現在までの解決案

以下の全ての条件を満たせばよしとなりそうです。

・表示対象コンテンツ縦幅をアプリ表示領域内に収める
・embedFlash 第四引数 パラメータ設定で width や height を記述する
・gadgets.window.adjustHeight メソッドを実行しない

■引き続きの調査項目

公開されている Flash を用いた mixi アプリでは gadgets.window.adjustHeight() にて高さ調節を行っているにもかかわらずスクロールバーが表示されていないものもあります。何か解決策がありそうです。

---
[ 追記2 2009年7月16日 ]

上記 2009年7月15日 の内容は誤りがありました。
mixi アプリ表示箇所は home, profile, canvas 三つありますが
上記スクロールバーを表示させない方法は canvas にのみに適用されます。
home, profile に関しては上記内容でも Opera でスクロールバーが表示されてしまいます。

---
[ 追記3 2009年7月16日 ]

Opera でスクロールバーが表示されてしまう件は解決しました。
→ 次の記事

[ FLASH ] [ tips ] 2009年07月14日 17:32 | コメント (0) | トラックバック

現在製作している Flash コンテンツにてクラスファイル数が 200 近くになっているのですが、一度のパブリッシュ時間が 30 秒近くかかる状況になってしまっています。グラフィックシンボルは別 fla ファイルに切り分けているので、ソースコードの解析に時間がかかっていそうです。

少々のソースコード変更に対して 毎回 30 秒待たされるのは非常に時間の無駄です。まだまだ未完成コンテンツもあり今後さらにソースコードは増加していきます。

ここで、FCSH というものの存在を思い出しました。劇的にパブリッシュ速度を速めてくれるといものです。AS3 を記述するエディタは FDT を利用しており、FDT には丁度 FCSH で簡単に swf を書き出す機能がついています。

早速試してみたところ、確かに swf を書き出す速度は早くはなりましたが、時間は半分くらい短くなった程度。確か初回書き出し時はあまり早くはならず、二回目以降はキャッシュが効き劇的に早くなるはずですが早くなってくれない。おかしいなあと調べてみたところタイムリーな記事が。

　FDTでFCSHのキャッシュがきかない問題 : RingoDiary
　http://d.hatena.ne.jp/rin_go/20090612/1244799938

　俺は口うるさい姑か？的fcshを英語版で動かす話。: タロタローグ ブログ
　http://blog.tarotaro.org/archives/15

flex SDK インストールフォルダ内 bin/jvm.config の内容を書き換えれば、FCSH のキャッシュが有効になるとのこと。書き換えてみたら、うおー、なんじゃこの速度は。今までの時間を返せと言いたくなるくらいの速度で swf を書き出してくれます。(1秒かからない)
上記設定を行なうことで同時に、FDT AS3 Application の Run コマンド実行時、何故か External SWF Viewer 等が起動しなかった不具合が直ってしまったのもめでたい。

以下、FDT AS3 Application から FCSH を設定するまでの動画と簡単な説明です。

▽続きを読む

[ FLASH ] [ tips ] 2009年06月26日 02:28 | コメント (0) | トラックバック

Flash CS4 10.0.2 へのアップデートができるとのことで早速アップデートしてみたところ、ムービープレビュー時の Flash Player のバージョンはめでたく最新?の 10,0,22,91 となりました。今後も Flash Player のアップデートとともに Flash CS4 のアップデートもしてほしいですなあ。

アップデートページ
http://www.adobe.com/support/flash/downloads.html

その他もろもろ改善されているようですが、まだあまり調査はしていません。
http://blogs.adobe.com/rgalvan/2009/05/flash_cs4_update_now_available.html

オーサリング上でのテキストの扱いが非常に重たい(動作が遅くなる)ので、それも改善されればなあ、と考えましたが アップデート後もあまり変化無し。そろそろ PC 買い換え時か。

関連記事
Flash Player のバージョンにより Matrix3D.transformVector で Vector3D の値が 1/20 になるバグ？

[ FLASH ] [ info ] [ tips ] 2009年05月14日 22:49 | コメント (0) | トラックバック

自作スクロールバーコンポーネントのインスタンスを生成・表示した swf を Loader.unloadAndStop メソッドで破棄すると以下のエラーが発生する問題に直面。

Error #2044: ハンドルされていない IOErrorEvent : text=Error #2036: 読み込みが未完了です。

Loader.unloadAndStop を用いず Loader.unload メソッドを用いると上記エラーは発生しません。

大抵エラーが発生すると、Flash の出力パネルに、どのクラスのどのメソッドでエラーが発生したか表示されるのですが、上記エラーはどこで発生したかの表示がなされず調査に時間がややかかってしまいました。

自作スクロールバーコンポーネントの何か作りが悪い、あるいは外部 swf 読み込みでのややこしいセキュリティなんたらが原因でエラーが発生しているのかもしれません。
ただし、上記エラーは Flash CS4 内のムービープレビューの Flash Player(以前も記事にした、3D関連処理にバグのある Flash Player) で実行すると起こるようで、バージョンアップしたデバッグ用 Flash Player では上記エラーは発生しませんでした。

Flash Player のバージョンアップにより、Loader.unloadAndStop に関して何らかの問題が解決した可能性もありますが、Flash Player 10 Release Notes には Loader.unloadAndStop に関しての記述はみつからず。

　Flash Player 10 Release Notess
　http://www.adobe.com/support/documentation/en/flashplayer/10/Flash_Player_10_Release_Notes.pdf

ひとまず最新の Flash Player で問題なく動作するので上記エラーは無いものとすることに。しかし、Flash CS4 で動作確認を行なう際 ムービープレビューとデバッグモードとで動作が異なるというのは避けたいので、Loader.unloadAndStop の使用は一旦とりやめに。
Loader.unloadAndStop はとりあえずとして用いていましたが、内部の作りとしては Loader.unload でも問題ないようになっています。

[ FLASH ] [ tips ] 2009年05月05日 17:22 | コメント (0) | トラックバック

SWFAddress で動的に設定される URL と html のページタイトル(ブラウザウインドウ左上に表示される文字列)を、Google Analytics は解析収集してくれるのかどうか、という疑問点がありました。
検証してみた結果、見事解析収集してくれることがわかりました。

【 詳細 】

デフォルト設定では swfaddress.js を利用する html 上に Google Analytics トラッキングコード用タグを記述することで、SWFAddresss から設定される URL が Google Analytics へ送信されます。

例えば以下の URL の場合

http://www.dango-itimi.com/#/sample/

以下の URI データが Google Analytics へ送信されます。

/sample/

また、Google Analytics 上では 解析した URL にページタイトル(html の title タグ内のデータ)が設定してある場合、Google Analytics 内の「コンテンツ」→「タイトル別のコンテンツ」と選択することで、解析された URL に対するタイトル文字列を一覧とした解析結果表示がなされます。

例えば以下の用な Google Analytics トラッキングコード タグを埋め込んだ ページが存在するとします。

ページタイトル名 ： Flash ページ
URL : http://www.dango-itimi.com/flash/

ページタイトル名 ：OH! DANGO JAM
URL : http://www.dango-itimi.com/jam/

Google Analytics 上では以下の文字列が表示されます。

[ URL一覧 ]
　/flash/
　/jam/

[ タイトル別コンテンツ一覧 ]
　Flash ページ
　OH! DANGO JAM

ここで、SWFAddress で出力される各 URL と、その URL と同時に SWFAddress で設定したページタイトルは Google Analytics は解析収集してくれるのだろうか、と試してみたところ、以下のような結果になり、見事解析してくれることがわかりました。

ページタイトル名 : サンプル
http://www.dango-itimi.com/#/sample/

ページタイトル名 : サンプル 記事1
http://www.dango-itimi.com/#/sample/001/

ページタイトル名 : サンプル 記事2
http://www.dango-itimi.com/#/sample/002/

[ URL一覧 ]
　/sample/
　/sample/001/
　/sample/002/

[ タイトル別コンテンツ一覧 ]
　サンプル
　サンプル 記事1
　サンプル 記事2

【 経緯 】

以下のような経緯があり、今回の調査にいたりました。

・Google Analytics に表示される URL 一覧では
　ぱっと見どの URL がどのページとなっているのかわかりにくい

・解析されたページが html の場合
　「タイトル別のコンテンツ」から日本語でタイトル一覧閲覧が可能

・Full Flash で製作されたサイトの場合 html に設定されるタイトルは一つなので
　「タイトル別のコンテンツ」に表示されるタイトルは一つだけになってしまう

・SWFAddress を用いて動的に URL や タイトルが変化する場合はどうなるのだろうかと検証

きっと、すでに Progression と Google Analytics を利用している方は周知の事なのでしょうね。

【 別件 】

swfaddress.js 経由で URL 文字列を送信するのではなく、日本語のタイトル文字情報を swf から直接 Google Analytics へ送信すれば、解析結果一覧に日本語文字が一覧で表示され見やすくなる？のでは、という案も挙がりました。

というわけで以下のように Google Analytics へデータを送信するための pageTracker._trackPageview メソッドに日本語文字列をどんどん送信してみました。

　ExternalInterface.call("pageTracker._trackPageview", 日本語文字列);

しかし Google Analytics は日本語は解析してくれない(URL形式になっていないとダメ？)のようで解析結果一覧には反映されませんでした。

[ FLASH ] [ tips ] 2009年04月24日 20:19 | コメント (2) | トラックバック

以前、SWFAddress を用いたサイトに使用する、xml ファイル出力 AIR アプリケーションを製作しました。しかし 出力する xml ファイルのフォーマットが変更されるたびに、AIR アプリケーションをパブリッシュし直し、アプリケーションを再インストールする必要がある、という問題がありました。

AIR で製作されたアプリケーションは、インストールとアンインストール作業がやや面倒です。Windows にインストールする場合、まず、以前のバージョンのアプリケーションを コントロールパネルの「プログラムの追加と削除」からアンインストールする必要があります。アンインストール後、インストーラを実行します。

現在 SWFAddress を用いたサイト製作の第一回納品が完了し、今後未完成部分をどんどん製作していくことになっています。各ページの表示に必要な xml ファイルのフォーマットも随時変化していくこととなりそうな状況です。

ここで、xml のフォーマットが変化するたびに プロジェクトメンバーの PC に AIR アプリケーションのインストール/アンインストール作業を繰り替えす事は時間の無駄となってしまうため、どうしたらいいか考えてみました。そして、以下の方法を試してみる事に。

　1)xml フォーマットの変更に伴い処理変更のかかる箇所は
　　AIR アプリケーション内で扱うのではなく 別途 swf(xmlParser.swf) で扱う

　2)AIR アプリケーションは 上記 xmlParser.swf を読み込み実行する

　3)各プロジェクトメンバーは Subversion 経由で xmlParser.swf を随時更新する

AIR からの外部 swf 実行にエラー等が発生しなければ、これで問題が解決するはず。

追記)
どうやら AIR のパブリッシュ設定によっては、インストーラーを実行するだけで即アンインストールや新しいバージョンの AIR アプリケーションにアップグレードできるようです。「このセッションのパスワードを保存する」という項目にチェックを入れたらその設定が有効になった？模様。

また、外部 swf で利用したクラスAのインスタンスを AIR 側で利用しようとしたら コンバートエラーが発生。loader.context の ApplicationDomain の設定を一通り試してみましたがダメでした。クラスA は複数のデータを一まとめとして受け渡すだけのためのクラスなので、ひとまず Object 型に変換し利用してお茶を濁すことに。

[ FLASH ] [ tips ] 2009年04月21日 11:05 | コメント (0) | トラックバック

以前どこかで FlashPlayer10 から Mac でもマウスホイール対応、といった旨の記事を読んだことがあり、おーそうなんだと特に何も考えず マウスホイール処理を記述し あぐらをかいておりました。しかし Mac ではマウスホイールが動作しない、Windows IE7 でも動作しない等、色々と不具合報告をいただきました。自分で検証してみたら Windows Safari でも動作しない模様。うおー

そんな中、SWFWheel というライブラリがあるのを見つけました。

　SWFWheel
　http://www.libspark.org/wiki/SWFWheel

　使用方法の詳しい解説記事
　http://feb19.jp/blog/archives/000167.php

SWFWheel.initialize メソッドを呼び出した後、通常通り MouseEvent.MOUSE_WHEEL イベントにリスナー定義をすればよいだけの模様。どういう仕組みになっているのか理解しておりませんが、利用させていただこうと思います。

[ FLASH ] [ tips ] 2009年04月10日 21:23 | コメント (0) | トラックバック

当 blog X-LABO でも利用している Google Sitemaps というものがあります。サイト内の URL 一覧を登録しておくことで google がその URL を巡回するようになり、検索結果に反映されやすくなる、たしかそんな感じでした。

ここで、Google Sitemaps に SWFAddress を用いた Flash サイト内で生成される URL 一覧を登録するとどうなるのだろうか、という疑問が一つわきました。登録した一つ一つの URL を一つの Flash サイトとしてではなく、別途 URL として判定し検索結果に各 URL が表示されるのであれば是非実行してみたいところ。

現在 google は、動的にテキストデータを読み込む Flash サイトのテキストデータも検索が可能になってきているとの事です。もしかしたら Google Sitemaps に URL を登録しなくとも SWFAddress を利用した Flash サイト内の各 URL は google 検索結果に表示されるのではないだろうか？とも思い、SWFAddress を用いて作られている世の各サイトを「site:http:～」と検索してみました。しかし 検索結果は swf を配置している html と swf, その他 swf を配置している以外の別ページのみという事に。

私のような考えは当然持つだろうし、検索結果に表示されないと言うことは、無理ということなのですかなあ。

例えば http://www.dango-itimi.com に SWFAddress を用いた swf を配置していたとして、以下のような 二つのテストページ用 URL があるとします。

　テストページ1
　http://www.dango-itimi.com/#/test1/

　テストページ2
　http://www.dango-itimi.com/#/test2/

理想は テストページ1, テストページ2 が検索結果にでてくれればいいのですが、現実は

　団子一味の野望
　http://www.dango-itimi.com

と判定されてしまいそう。

■参考
SWFコンテンツ検索に関するFAQ
http://www.adobe.com/jp/devnet/flashplayer/articles/swf_searchability.html

ディープリンク URL と サイトマップについて少々書かれています。

[ FLASH ] [ tips ] 2009年04月04日 14:19 | コメント (0) | トラックバック

スクロール対象コンテンツ長が一定時間ごとに変化する場合の スクロールバーコンポーネントの動作確認用 swf を作成しました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年03月29日 16:00 | コメント (0) | トラックバック

スクロール対象のコンテンツの高さが変化する場合、スクロールバーの高さや表示位置を同時に変化させる必要があります。その動作確認を行なうための swf を作成しました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年03月27日 20:44 | コメント (0) | トラックバック

必要になりそうなので、AS3 による定番のイーズ処理で滑らかに動作するスクロールバーコンポーネントの製作を行ないました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年03月27日 11:29 | コメント (0) | トラックバック

ライブラリで用いる設定ファイルを扱うアプリケーションを Adobe AIR にて製作。

以下は自分用のメモ

サイト全体の設定ファイルとしてまず index.xml という XML ファイルを用意し、そこにサイト内で読み込む対象の設定項目を記述します。現在までの習作 の index.xml の内容は以下のようになっています。

　index.xml

この index.xml ファイルはデータ量が多くなるので直接 Flash からは読み込みません。コンテンツごとの複数の xml ファイルに分割し、各コンテンツ表示時に読み込むようにします。
ファイル分割を行なうには AIR を用います。index.xml を AIR で作成したアプリケーションで読み込み、index.xml の内容を解析し、定めたフォーマットに整形した後、コンテンツごとの xml ファイルを出力させます。

出力している xml ファイルは以下のとおりです。

　page.xml
　etc.xml

page ボタンで表示されるコンテンツと etc ボタンで表示されるコンテンツ用の xml ファイルです。読み込む 画像やswf ファイル名、表示するテキスト情報が主となります。

また、当ライブラリでの核となる scene.xml ファイルも index.xml を元に AIR で生成します。

　scene.xml

scene.xml には、各コンテンツシーンをいくつ生成する必要があるのかの情報が記述されます。scene.xml を元に全てのシーンインスタンスを生成し、id を割り振ったり、アドレスバーから指定された URL は存在するか、といったチェックを行なう事が可能となります。

今回作成した AIR アプリケーションのスクリーンショット

「選択」ボタンを押すことでファイル選択ダイアログが表示され、index.xml のディレクトリ位置指定が可能となります。
「書き出し実行」ボタンを押すことで、 index.xml を配置しているディレクトリを基準に scene.xml, page.xml, etc.xml が 指定のディレクトリに書き出されます。

xml 編集ソフトは XMLEditor.NET を用いています。

http://www.xmleditor.jp/

サイトの更新を行なう人は index.xml を編集し AIR にて xml ファイル書き出し処理を実行後、各更新ファイルをサーバにアップロードします。上記 xml 編集ソフトは Windows 用のものなので Mac の人は別途何かいい xml 編集ソフトを探す必要がありそうです。

[ FLASH ] [ tips ] [ update ] 2009年03月25日 11:02 | コメント (0) | トラックバック

自シーンでの外部データ読み込み中に 子孫シーンで外部データ読み込みが発生した場合、子孫シーンの読み込みが完了するまで 自シーンの読み込みを一旦停止し、子孫シーンの読み込み終了後、自シーンの読み込みを再開するための処理を実装しました。内容は以前のエントリーの通りです。子孫シーンとはしていますが、現在は子シーンのみの監視を行なうテストしか行なっておりません。

今回までの習作は以下の URL から確認できます。

http://www.dango-itimi.com/blog/swf/82/

page ボタンを押すと、サムネイル画像が複数読み込まれるページが表示されます。サムネイル画像を押下すると、大きな画像が画面下に読み込み表示されます。複数のサムネイル画像の読み込み途中で どれかサムネイル画像を押下すると、サムネイル画像の読み込みが一旦停止し、大きな画像を先に読み込んだ後、サムネイル画像の読み込みが再び開始されます。

その他実装内容として、ディレクトリの ID 表示に関して設定が可能となりました。以下はその仕様のルールとメモ。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年03月25日 03:45 | コメント (0) | トラックバック

Flash Player 10 から FileReference クラスによる ファイル入出力機能がサポートされたとのことで、簡易的な xml ファイル操作と xml 入出力アプリケーション製作をしてみようかと調査してみました。しかし FileReference クラスでは一括で複数のファイル出力を行なうといった事は無理なのですね。一度のユーザのボタン押下等のタイミングに対し、ひとつのファイル操作処理が可能、という仕様でした。

Flash でファイル入出力ができるようになったので、個人的な AIR の用途はますますなくなった、と思っていましたが見当違いでした。AS3 を用いて複数のファイル操作を行なうアプリケーションを作成するには AIR で、ということで。

[ FLASH ] [ update ] 2009年03月21日 14:40 | コメント (0) | トラックバック

Flash で製作された以下のような構造になっているページがあるとします。
page, btn, window はどれもムービークリップです。

page
├ btn1 --> window1
├ btn2 --> window2
├　…
└ btnN --> windowN

仕様は以下のようになっています。

・page 内に btn が複数(1～N)個ある
・各 btn を押すと 対応する window を開く
・各 window はブラウザで新規ウインドウで開くのではなく
　page 内の指定の位置(page前面、page右側等)にムービークリップとして表示する

更に外部データの扱いに関して以下のような仕様となっています。

・各 btn には外部から読み込んだ画像(サムネイル画像等)を表示
・window 内に表示するデータは btn が押された後に外部から読み込む

今までの私の AS2 での作りでは btn の画像が全て読み込み終了するまで btn は押せず window は開かないようにする、といったものにしていました。しかし btn に読み込む画像が多ければ多いほど各 window を開くまでの時間がかかってしまいます。

読み込み中断処理可能な AS3 からは次の仕様を考えていくことに。

・各 btn に表示する画像が読み込まれなくても各 btn は押下可能に
・各 btn 押下後は 全 btn の読み込みは中断し
　開く window 内で表示するデータを読み込む

ここでの考慮事項として、画像が表示されていない(読み込みが完了していない) btn は押せないようにしてほしい、という要望が挙がる場合もあるかもしれないので、画面遷移の仕様を決める段階でどうするか決めておいたほうがよさそうです。

更に次のような page 内処理で window の状態を監視する処理も考えていくことに。

・window 内のデータの読み込みが完了したら
　中断していた page 内の各 btn の画像読み込みを再び開始する

・window が閉じられ再び btn 選択 page 画面が表示されたら
　中断していた page 内の各 btn の画像読み込みを再び開始する

前者の方法ならば、window 内のデータを閲覧している間、バックグラウンドで全 btn のデータ読み込みを完了しておく、といったことが可能になります。
window から更に外部データを読み込む別ページを前面に表示する...といったいったものになってくると、後者のほうがいいかもしれません。

回線速度が上がっており、待機時間に関して考慮するのであるならば、まずは別の製作箇所優先 となっている今日ではありますが、よりよいテンポのいいページを製作するためにも、こういった工夫は随時行なっていけたらよいものです。

[ FLASH ] [ tips ] [ update ] 2009年03月16日 18:17 | コメント (0) | トラックバック

シーン外部 swf 対応と読み込み中断処理実装や、表示切替処理最適化などを行ないました。今回までの習作は以下の URL から確認できます。

http://www.dango-itimi.com/blog/swf/81/

画面一番右上のボタンが 外部 swf を読み込んで表示するとなっております。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年03月09日 18:32 | コメント (0) | トラックバック

Progression で構築されたサイトが増える中、今後の Flash サイト製作ではディープリンク機能は欠かせないものになりそうです。というわけで、ディープリンク機能を実現するための SWFAddress を用いてのサイト構築を行なうためのライブラリを作成中。

SWFAddress を用いると、ユーザは URL 指定によりコンテンツ表示切替を行なう命令を いつでも行なうことが可能となります。これは、どのような表示状態からでも 指定した URL に対応するコンテンツ表示を行なうことができるシステム構築が必要になることを意味します。

どのような表示状態からでもコンテンツ表示切替が可能、とはいえ、矛盾が生じないためにある程度決め事が必要となります。現在作成中のシステムでは以下のような決め事を行ないました。

1)コンテンツA表示切替中に コンテンツBへの表示切替命令が行なわれた場合
　コンテンツA表示切替が終了するまでコンテンツBへの表示切替は行なわれない

2)コンテンツA表示切替中に 他コンテンツへの表示切替命令が 複数 行なわれた場合
　コンテンツA表示切替終了後は
　最後にリクエストのあったコンテンツ表切り替え命令に対するコンテンツを表示する

画像やボタンや画面遷移がとっても適当な今回の習作はこちら
http://www.dango-itimi.com/blog/swf/80/

ブラウザの[戻る][進む]にも対応しています。

存在しない URL が指定された場合の対処はまだ行なっておらず、適当な URL をアドレスバーに入力すると 処理が停止し画面が止まります。

[ FLASH ] [ tips ] [ update ] 2009年03月01日 20:39 | コメント (0) | トラックバック

Flash でディープリンク機能を実現するための SWFAddress を試してみることに(バージョンは 2.2)。しかしもっとも簡単なサンプルを作成するも、意図どおりに動作してくれず。
ブラウザの「戻る」「進む」を押すと SWFAddress.CHANGE イベントが実行されるはずなのですが、まったく呼ばれる気配がないのです。

原因は Flash CS4 のパブリッシュで書き出される HTML ファイルの一行目に ドキュメントタイプ宣言がないからだった模様です。SWFAddress のサンプルフォルダ(samples/splash)内にある indes.html ファイル一行目にある ドキュメントタイプ宣言を何も考えずそのままコピペしたら意図どおり正常に動作するようになりました。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ちなみにドキュメントタイプ宣言は一杯あって、それぞれが何を示すのかよく意味がわかっておりません。

[ FLASH ] [ tips ] 2009年02月26日 02:54 | コメント (0) | トラックバック

3Dで表示されるローグライクマップにスクロール機能を実装。
ひとまずよくある操作方法 [W][S][A][D]各キーで 上下左右に移動します。

今回は色々あって swf 直リンクではなく ページ埋め込みです。

▽続きを読む

[ FLASH ] [ update ] 2009年02月24日 00:08 | コメント (0) | トラックバック

AS2で作成していたローグライクマップ生成処理をAS3に移植し3D表示。
3Dカメラ機能も向上させ、マウスホイールがなくても拡大縮小・焦点位置の変更が可能になりました。

http://www.dango-itimi.com/blog/swf/78/automap3D.swf

※要 最新の Flash Player 10
　豆粒のように小さく表示される場合は Flash Player 10 が最新のものではありません

【 操作方法 】

　[マウスドラッグ] --- 回転
　[マウスドラッグ + Shift] --- 拡大縮小
　[マウスドラッグ + Ctrl] --- 焦点位置変更

　[マウスホイール] --- 拡大縮小
　[マウスホイール + Ctrl] --- 焦点位置変更

マップの一部を表示するようにしています。マップ移動はまだできません。
swf を表示するたびにマップ表示が切り替わります。ブラウザの再読み込みで swf の表示が更新されます。
表示画像が二種類しかなかったり等、見た目はまだまだいまいちです。

カメラをぐっと寄せれば、一人称視点の3Dダンジョン風ゲームも作れそうです。

[ FLASH ] [ update ] 2009年02月16日 00:41 | コメント (0) | トラックバック

ようやく3D空間上に2D絵を表示する際の表示サイズの取得方法がわかりました。いわゆる、3D空間上の とある一点の座標の表示サイズを求めるための方法です。一点の座標の表示サイズ、というのは変な話なのですかね。どのように求めればよいのかずっと悩んでいましたが、とても簡単な方法でできました…
今までの勉強内容のソースがまったくまとまっていないので、後日にまとめて記事にしたいところです。

http://www.dango-itimi.com/blog/swf/77/Test3D.swf

[ 操作方法 ]

・マウスドラッグ：回転
・マウスホイール操作：拡大縮小
・右クリック(Mac では Ctrl + クリック)でコンテキストメニューを表示
　→マウスホイールによるカメラ操作方法の変更が可能

Y軸を軸とした回転の他に X軸での回転も可能とし、常にフィールド(地面)をスクリーンに向けたまま回転するようにしています。

マウスホイールが無い PC の事を考え、Shift + マウスドラッグ等で拡大縮小等を行えるようにする予定。

[ FLASH ] [ update ] 2009年01月12日 21:55 | コメント (4) | トラックバック

http://www.dango-itimi.com/blog/swf/76/Test3D.swf

[ 操作方法 ]

・マウスドラッグ：回転
・マウスホイール操作：拡大縮小
・右クリック(Mac では Ctrl + クリック)でコンテキストメニューを表示
　→マウスホイールによるカメラ操作方法の変更が可能

2Dドット絵の表示サイズ拡大縮小処理に不整合が起きないよう、Y軸のみを用いて回転させています。青い四角のワイヤーフレーム表示は当たり判定を行う領域です。試験的に表示しています。
ドット絵周囲に一ピクセルの黒い線と白い線を描き込んでいますが、線につぶれた感がでてあまり綺麗には見えないですね。足元に影表示を行えば、少し地面から浮いている感が薄れるかもしれません。

今回用意した二つのドット絵

[ FLASH ] [ GRAPHIC ] [ update ] 2009年01月11日 13:22 | コメント (0) | トラックバック

マウスホイールで拡大縮小表示調節を行うだけではなく、スクリーンからの焦点位置？の変更を行えるようにしました。焦点位置を変更すると、3Dの奥行き感が変わります。
デフォルトではマウスホイールは3Dオブジェクトの拡大縮小を行いますが、右クリック(Mac では Ctrl + クリック)でコンテキストメニューを表示することで、マウスホイールの処理を変更することが可能です。

http://www.dango-itimi.com/blog/swf/75/Test3D.swf

※要 最新の Flash Player 10
　豆粒のように小さく表示される場合は Flash Player 10 が最新のものではありません

[ 操作方法 ]

・マウスドラッグ：カメラ回転
・右クリック(Mac では Ctrl + クリック)でコンテキストメニューを表示
　→マウスホイールによるカメラ操作方法の変更が可能

ブラウザ上にスクロールバーが表示されている場合、マウスホイールがブラウザのスクロールバーも同時に操作してしまうようなので swf 直リンクで表示させることにしました。

[ FLASH ] [ update ] 2009年01月04日 15:29 | コメント (0) | トラックバック

3Dカメラをマウスで操作する処理を実装。ドラッグすることでカメラが回転し、マウスホイールで拡大縮小します。
マウスにぴったりひっついてカクカクとカメラが動作するのもあまり面白くないので、イージング処理(イーズアウト/イーズイン)を加え、多少滑らかに動作させるようにしました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2009年01月03日 13:47 | コメント (0) | トラックバック

正月も近づいている事なので和室っぽい簡易的な3Dの部屋を作成してみました。
各面に対する光源処理も追加し、斜面になると少し暗くなるようにしています。

▽続きを読む

[ FLASH ] [ update ] 2008年12月29日 22:38 | コメント (0) | トラックバック

ようやくできました、遠近法 + テクスチャ描画。いつかできるようになってやるんだ…！と意気込んでから長かった。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2008年12月27日 20:10 | コメント (0) | トラックバック

http://support.adobe.co.jp/faq/faq/qadoc.sv?230767+002#anc_b

上記サイトから Flash CS4 から使用される Flash Player のバージョンをアップできるようなので早速インストールしてみました。しかし手順通り行ってみるも更新が反映されず、Flash CS4 の ムービープレビューから表示される Flash Player のバージョンは WIN 10,0,2,54 のままです。

～\Adobe\Adobe Flash CS4\Players\FlashPlayer.exe

上記ディレクトリにある Flash Player を立ち上げて調査してみると バージョンは「WIN 10,0,12,36」と最新のものに置き換わっています。Flash CS4 のムービープレビューはどの Flash Player を見に行っているのだろうか？
原因がさっぱりわからないので一度 Flash CS4 をインストールし直す予定。
Cドライブに Flash CS4 をインストールしていないのが問題なのですかなあ。

追記)
ノートPCの Windows Vista で Flash CS4 をインストールし試してみたところ、同じく前の記事の問題が発生し、Flash CS4 ムービープレビューの Flash Player もバージョンアップされず。
手詰まりじゃあー！

追記2)
[ムービープレビュー]ではなく [ムービーのデバッグ] から立ち上がる Flash Player は どうやらバージョンアップが反映されているようなので、問題が解決するまで [ムービーのデバッグ]を用いることにします。

[ FLASH ] [ info ] [ tips ] 2008年12月25日 21:12 | コメント (0) | トラックバック

Flash Player 10 から利用できる 3D関連処理の勉強をするためにネットとヘルプを見ながら格闘している最中です。それらしいものはできたのですが、期待する結果と異るものができている感じがする。なぜか3D変形を行ったオブジェクトが豆粒のような小ささになってしまうのです。

何がいけないのかと原因を調べてみると、Matrix3D.transformVector の処理でおかしくなってしまっているらしい。

var m:Matrix3D = new Matrix3D();
var v:Vector3D = new Vector3D(500, 1000, 0);
var c:Vector3D = m.transformVector(v);

trace(c); 出力結果
c: Vector3D(25, 50, 0)

特に何も変形を行っていないのですが、Matrix3D.transformVector を実行することにより Vector3D の各値が 1/20 の値になってしまっている。この 1/20 はいったいどこからきたのだ、と調べてみたところ Flash Player バージョンによっては上記バグが発生するらしき記述が英語のサイトにありました。

各ブラウザのバージョンの異なる Flash Player で試してみたところ以下のような結果に。

IE : Flash Player バージョン 10,0,2,54
　cの値 → Vector3D(25, 50, 0)

Opera : Flash Player バージョン 10.0.12.36
　cの値 → Vector3D(500, 1000, 0)

残る問題は Flash CS4 自体の Flash Player のバージョンをアップグレードするにはどうしたらよいのだ、という点だ。　→続き

[ FLASH ] [ info ] [ tips ] 2008年12月25日 19:11 | コメント (0) | トラックバック

Flash CS4 が Amazon から届いたので早速調査。

Flash CS3 で書き出した Flash Lite 用 swf は Flash 8 で書き出したものに比べ swf の容量が大きくなってしまう、という事がありました。→以前の記事

Flash CS4 ではどうなのかな～、と早速 swf を書き出してみたところ Flash CS3 と同じく Flash 8 に比べ容量が大きくなってしまうようです。
Flash 8 は当面 PC にインストールしておく必要がありそうです。

[ FLASH ] [ info ] [ tips ] 2008年12月23日 15:48 | コメント (0) | トラックバック

Flash Player 10 が正式にリリースされた、との事ですが、某ちゃんねる掲示板で Flash Player 10 を導入してみたところ、色々なサイトの Flash が見れなくなってしまったとのこと。

169 名前：Now_loading...774KB[] 投稿日：2008/10/16(木) 15:11:46 ID:FTqYc9sh
なんかバージョンが古いって判別されてしまうサイト多いな
Ver.10なのにVer.1として認識されてるっぽい

ＵＷＡＡＡＡＡＡＡＡＡＡＡ！
こいつはまずい。思い当たる節がたくさんありすぎます。
まだ未熟な腕でバージョンチェックスクリプトを記述していた頃、Flash Player のバージョンチェックは 一桁目しか想定していませんでした。団子一味のゲームも動かなくなってしまうものが結構ありそう。
以前 当blog X-LABO でのバージョンチェックスクリプトメモも一桁目しか想定していなかったものでした。（二年くらい後で気づいて修正しました）

[ FLASH ] [ info ] [ tips ] 2008年10月16日 15:30 | コメント (0) | トラックバック

ようやっと初めての AS3 の業務に取り掛かっています。今までなんだかんだの制約があり AS3 でまともな業務を行なったことはありませんでした。早速 AS3 で気付いた点を以下に記述します。恐らくとっても何をいまさらなエントリーです。

親クラスのコンストラクタに引数が指定してある場合、子クラスでは明示的に super メソッドを呼び出す必要がでてくるようです。
例えば以下のような Person クラスを親に持つ Boy クラスと Girl クラスを Sample クラスから利用するには以下のようになります。

※package記述は略

public class Person{
	private var name:String;
	public function Person(name:String){
		this.name = name;
	}
}
public class Boy extends Person{
	public function Boy(name:String){
		super(name);
	}
}
public class Girl extends Person{
	public function Girl(name:String){
		super(name);
	}
}
public class Sample{
	public function Sample(){
		var boy:Boy = new Boy("boy");
		var girl:Girl = new Girl("girl");
	}
}

ここで Person クラスを親に持つクラスが Boyクラス、Girl クラス以外に複数増える場合、それら複数のクラス全てに明示的なコンストラクタの実装と super メソッドの呼び出しを行なう記述が必要になってしまいます。また、Person コンストラクタに引数を追加したいという場合、子クラス全てのコンストラクタと super メソッド呼び出しの箇所に修正を入れる必要がでてきてしまいます。

これを避けるためには、Personクラスのコンストラクタに引数を指定するのはやめ、別メソッドで同処理を行なうようにします。

public class Person{
	private var name:String;
	public function create(name:String):void{
		this.name = name;
	}
}
public class Boy extends Person{
}
public class Girl extends Person{
}
public class Sample{
	public function Sample(){
		var boy:Boy = new Boy();
		var girl:Girl = new Girl();
		boy.create("boy");
		girl.create("girl");
	}
}

[ FLASH ] [ tips ] 2008年08月12日 20:33 | コメント (0) | トラックバック

業務に必要になりそうなので再度透視投影について勉強。最近丁度 Flashによる透視投影方法について詳しく解説してある記事があったので参考にさせてもらいました。

　■てっく煮ブログ
　AS3.0 で 3D プログラミングを１から勉強する (1)
　AS3.0 で 3D プログラミングを１から勉強する (2) - 行列の導入
　AS3.0 で 3D プログラミングを１から勉強する (3) - 透視投影

なんともシンプルな式と方法で透視投影ができてしまうようで、今まで私が知っていた方法はなんだったのと言わんとぞばかりです。

試しとして以前作成したローグライクマップ自動生成処理と組み合わせてみました。

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2008年07月09日 10:31 | コメント (4) | トラックバック

Action Script 2.0 三項演算子内で getter を使用する場合、代入対象の値を全て getter にするとコンパイルエラーが発生します。

以下のような Sampleクラスがあるとします。

class Sample{

	private var num1:Number = 1;
	private var num2:Number = 1;
	public function get _num1():Number{ return num1; }
	public function get _num2():Number{ return num2; }
}

ここで、以下の Test クラスのような三項演算子での Sample クラスの getter の利用は問題はありません。

class Test{

	public function Test(flg:Boolean){

		var sample:Sample = new Sample();

		var num1:Number = flg ? 1 : 2;
		var num2:Number = flg ? sample._num1 : 2;
		var num3:Number = flg ? 1 : sample._num2;
	}
}

しかし以下の用な記述を行うと、コンパイルエラーが発生します。

class Test{

	public function Test(flg:Boolean){

		var sample:Sample = new Sample();

		//コンパイルエラー発生
		var num:Number = flg ? sample._num1 : sample._num2;
	}
}

■エラー内容

代入ステートメントが一致しません。Function が見つかりましたが、Numberが必要です。

getter の sample._num1 と sample1._num2 がNumber型ではなく Function型として評価されてしまうようです。

上記エラーを避け、なおかつ三項演算子を使用したい場合は、キャストを用いて型変換を行えばよいようです。

class Test{

	public function Test(flg:Boolean){

		var sample:Sample = new Sample();

		//コンパイルエラーは発生せず
		var num:Number = flg ? Number(sample._num1) : Number(sample._num2);
	}
}

[ FLASH ] [ tips ] 2008年05月14日 20:27 | コメント (0) | トラックバック

山にこもって二ヶ月ほど経過しましたが、現在取り組んでいる仕事がなかなか終わりません。中途 細かい仕事がいくつか入り、頭がいい具合に煮詰まっております。

以下、業務を通していくつか覚えた事を参考サイトと共にメモ。

【 Subversion 上の html ファイルのブラウザ表示設定 】

Subversion 上の html ファイルにブラウザからアクセスすると、html のソースがブラウザに表示されます。しかし html ファイルに属性設定を行と、html をブラウザで開いたときのそのままの表示にすることができるようになります。この設定をしたおかげで、打ち合わせ時に Subversion 上のファイル一式を PC上にダウンロードしなくても 表示確認を簡単に行えるようになりました。

　日常の備忘録:: HTMLをSubversionで管理しながらWebで参照可能に
　http://www.kaede-software.com/2008/01/htmlsubversionw.html

【 デバイスフォント シェイプマスク適用にフィルタ設定 】

デバイスフォントにマスクをかける際、マスクはどのような形をしていようと、矩形マスクとして適用されてしまう問題があるようです。その問題を解決するために以下のサイトのような ビットマップキャッシュを用いた方法があります。

　fumiononaka.com : デバイスフォントが表示されない
　http://www.fumiononaka.com/TechNotes/Flash/FN0502002.html

上記サイトの他の方法として、デバイスフォントのテキストフィールドにフィルタ設定を行うと、ビットマップキャッシュを用いずとも、マスクは矩形として適用されず、シェイプの形そのままで適用することができるようです。

【 ローカル上で確認する際の 他バージョンへのswfへの変数アクセスの制限 】

FlashPlayer8で書き出した swf(8.swf) から FlashPlayer7 で書き出された swf(7.swf)を読み込む場合、ローカルPC上に配置している 8.swfを表示するhtmlをブラウザで開いて動作確認を行おうとしても、8.swf から 7.swf への変数へはアクセスできませんでした。

Flashのムービープレビューやネットワーク上では問題なく動作するため、おそらく他バージョンへのswfのローカルアクセスは制限されているのかもしれません。表示確認に、やや手間がかかってしまうのが面倒です。

[ ETC ] [ FLASH ] [ info ] [ tips ] 2008年05月14日 20:17 | コメント (0) | トラックバック

最近情報収集にうとくなっており見逃していました。
FlexBuilder なり FDT なり、早く Refactor Move コマンドがサポートされるようにならないかなあ、と鼻をほじほじしながら待ち望んでいたところ、FDT 3.0 Enterprise beta版 で Move コマンドがサポートされたとのこと。

http://fdt.powerflasher.com/blog/?p=40

早速利用してみましたが、oh ブラボー！としかいいようがありません。プログラミング中に、クラス名、メソッド名、変数名はおろか パッケージ名やパッケージ構造もモリモリ変更したくなる方にはうってつけのツールとなりました。

追記)ベータ版のせいなのか、パッケージ名付でクラスを newを行っている箇所に対しては Moveが実行されない等、まだ動作は完全ではない模様。

---

以下、Action Script での Refactor Rename コマンド実行における注意事項。
配列演算子による変数へのアクセスの記述は注意が必要となります。

▽続きを読む

[ FLASH ] [ info ] [ tips ] 2008年03月13日 21:42 | コメント (0) | トラックバック

今後のネットでの検索用に、20分ほどつまずいた ファイル読み込み時の簡単なエラーのメモ。

URLLoaderでcsvファイルを読み込む処理を作成し ローカルPC上で動作検証してみたところ、次のような csv ファイルが読み込めないという旨のメッセージが表示されました。

[IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2
text="Error #2032: ストリームエラー。 URL: file:///～/viewer.csv"]

原因は、読み込み対象の csv ファイルを Excel で開いていたからでした。Excelで開くことにより読み込み対象のファイルがロックされてしまっていたようです。Microsoft Office系のソフトは皆このようになるのでしょうか。メモ帳等のテキストエディタの場合は、この現象は起きません。csvファイルをExcelで開くようにファイル関連付けをしていると、ローカルPC上でのcsvファイル読み込み検証時、同じようにつまずく事があるかもしれません。

[ FLASH ] [ tips ] 2008年02月18日 16:57 | コメント (1) | トラックバック

会社の携帯端末 docomo SO905i の Flash Lite 3.0 にてトレジャーボインゴの動作確認を行ってみました。そして見事動作させることができました。

---

■Flash Lite 3.0 搭載 携帯用アドレス

・サンプル5 直アドレス
　http://m.dango-itimi.com/trebo/test/5.swf

・携帯電話用 団子一味のアドレス
　http://m.dango-itimi.com/

・QRコード

携帯端末での操作方法は、「2」「8」「4」「6」キーでキャラクター移動＆攻撃となっております。

携帯用のトレジャーボインゴは、フレーム分割処理というものを組み込んでいるため、マップ生成からステージ表示まで20秒くらい時間を必要とします。携帯版ではマップ生成中は「マップ生成中...」といった表示を行う予定です。

---

Flash Lite 3.0 が搭載されている docomo 905i シリーズのワークメモリは以下のページによると 一律 3072KB とのこと。

http://www.nttdocomo.co.jp/service/imode/make/content/spec/flash/index.html

Adobe Device Central CS3 のエミュレータ上では、トレジャーボインゴのワークメモリ使用数は 2400～2600KB 程度となっているので、携帯端末上でも問題なく動作してくれました。

現状わかっている問題点として、フロア切り替え後、階段をすぐさま下り次のフロアへ移動すると メモリ解放が上手く行われない、といったことがあるようです。使用メモリが上がったままになってしまい どんどん 3000KB に近づいいってしまう、という現象が起こってしまいます。

端末の性能がアップしていることからか、Flash Lite 2.0 が搭載されていた au よりも処理速度は早く動作しています。キャラクター等の移動速度は PC に比べると遅いですが、au よりは早く動作するようになりました。

docomo 905i シリーズから画面領域がいままでの倍となったので swf表示サイズを当初の予定通り倍にしています。ドット感が出ていい感じです。

■PC版はこちら

▽続きを読む

[ FLASH ] [ tips ] [ update ] 2008年01月14日 22:21 | コメント (0) | トラックバック

年の最後に今までに出来ているものまでをアップ。
ポップアップテキスト表示やステージ切り替え処理組み込みなどなど。

▽続きを読む

[ FLASH ] [ update ] 2007年12月27日 16:59 | コメント (1) | トラックバック

「処理フレーム分割」を行った事により、ローグライクマップ自動生成処理を携帯端末で動作させることに成功しました。しかし、生成処理の処理行数が多いためかメモリを結構消費してしまい、ゲーム本体であるトレジャーボインゴのメイン処理を続けて実行すると「FLERR: メモリ不足エラーです。」というエラーが発生。

　モバイルデバイスに適した Flash Lite アプリケーションメモリの管理

上記ヘルプページによると、メモリを解放するには使用していない変数に null を代入すればよいとのことなので、色々 null なり delete なり試してみましたが一向に解放される気配を見せてくれず。

Adobe Device Central CS3のエミュレータからメモリについて調べてみたところ、現状の au の FlashLite のヒープメモリ量では トレジャーボインゴを動作させることは困難かもしれません。後もう少しで動作する…！ というところでメモリが足りなくなってしまいます。vodafone は au よりもヒープメモリが高く設定されている(500KB程多い)ようで、動作するみたいです。

ローグライクマップ自動生成処理を AIR か何かで作成し、マップ情報をあらかじめたくさんの静的ファイルに書き出しておき、ゲーム実行時にそのファイルをランダムで読みに行く… といった対策が考えられますが、ローグライクマップ自動生成処理をAS3で作り直す気力は現在なし。

「処理フレーム分割」等、携帯用の対策を行っているだけで時間がかかり 先になかなか進めることができないため、しばらくは携帯で動作させる事はあきらめようと思います。当面は PC と Wii 用向けということで、今後 携帯端末の性能がもう少し上がってくれることを願います。

[ FLASH ] [ update ] 2007年11月18日 18:34 | コメント (0) | トラックバック

AS3対応になった FDT3.0、いつのまにやら発売されていた模様。

FDT3.0
http://fdt.powerflasher.com/

eclipseでAS2の開発を行う場合、もっぱらFDT2.0を用いておりました。
丁度仕事でAS3の開発を行うことになりそうなので、AS3の開発を行う場合、現在まだベータ版である FlexBuilder とどちらが開発がし易いか等、調査してみたいと思います。

追記)
FDT3.0をインストールした後、Flash Explorerを開こうとすると 「メモリが足りないから eclipse.ini 内のメモリ設定箇所を -Xmx512m に書き換えてください」といった旨のダイアログが表示され、起動することができませんでした。

調べてみたところ、以下のページが参考になり無事起動成功。

Hatena::Question
Eclipseが「応答なし」にならない方法を教えて下さい。

追記2) 2007/11/28
メインマシン Windows XP の eclipse 3.3.1 でソースコードを書いている途中 頻繁にeclipseがフリーズしてしまいます。ノートPC Windows Vista の eclipse 3.2.2 では快適に動作しています。フリーズの原因は eclipse が悪いのか FDT が悪いのか PCの性能がよくないのか、わからずの状況。

追記3) 2008/1/14
フリーズの原因が恐らく判明。
追記2では Vistaではフリーズは起こらないと書きましたが、その後Vistaでも頻繁にフリーズが起きてしまっていました。
viplugin を eclipse に導入していて、なおかつ vi のファイル保存コマンド「：w」を実行する、と eclipse がフリーズする可能性が高いようです。なので、Windowsデフォルトの「Ctrl + S」で保存すればフリーズを回避することができます。FDT と viplugin で何か処理がバッティングしてしまっているのですかね。

[ FLASH ] [ info ] 2007年11月16日 02:06

「ローグライクマップ自動生成処理」を 現在作成しているFlashLiteゲーム「トレジャーボインゴ」に組み込んでみた所 携帯端末上ではエラーが発生し動作しなくなった、と以前blogに記述しました。1フレーム内で処理する行数が多すぎたためエラーが発生しているものと思われます。

「ローグライクマップ自動生成処理」のみを携帯端末で動作させてみたところ、同じくエラーが発生。「ローグライクマップ自動生成処理」を行う各クラス内のメソッドを複数のフレームをまたぎつつ呼び出す必要がありそうです。

対処として以下のような方法をとることにしました。

【 メインクラスの変更 】

メインとなる Sampleクラス があるとします。

class Sample{

	private var testA:TestA;
	private var testB:TestB;
	private var testC:TestC;

	public function Sample(root:MovieClip){

		testA = new TestA();
		testB = new TestB();
		testC = new TestC();

		testA.run();
		testB.run();
		testC.run();
	}
}

TestA～Cクラスの runメソッドを実行すると それぞれの処理行数が多すぎてエラーが発生してしまう、という場合、各runメソッドを1フレームにつき一つずつ実行するためには以下の様に変更します。

class Sample{

	private var testA:TestA;
	private var testB:TestB;
	private var testC:TestC;

	private var main:Function = null;

	public function Sample(root:MovieClip){

		testA = new TestA();
		testB = new TestB();
		testC = new TestC();

		main = funcA;
		var sc:Sample = this;
		root.onEnterFrame = function(){ sc.run(); }
	}
	private function run():Void{

		main();
	}
	private function funcA():Void{

		testA.run();
		main = funcB;
	}
	private function funcB():Void{

		testB.run();
		main = funcC;
	}
	private function funcC():Void{

		testC.run();
		main = end;
	}
	private function end():Void{
		～
	}
}

上記変更により、一つのフレームで実行される処理は mainメソッドのみとなります。実際は、mainメソッドの参照先メソッド(funcA～C)が実行されます。参照先メソッド内の処理終了後 次に行いたい処理を再び mainメソッドに代入し、次々とTestA～Cクラスの runメソッドを実行していきます。

【 各クラスの変更 】

ここで TestA クラス の内容が以下のようになっているとします。

class TestA{

	public function TestA(){}

	public function run():Void{

		func1();
		func2();
		func3();
	}
	private function func1():Void{
		～
	}
	private function func2():Void{
		～
	}
	private function func3():Void{
		～
	}
}

TestAクラスの func1～3 メソッドの処理行数が多く、TestA.runメソッドを実行するとエラーが発生してしまう場合、以下の用に変更します。

class TestA{

	private var main:Function = null;

	public function TestA(){}

	public function run():Boolean{

		if(main == null) main = func1;
		main();
		return main == null;
	}
	private function func1():Void{
		～
		main = func2;
	}
	private function func2():Void{
		～
		main = func3;
	}
	private function func3():Void{
		～
		main = null;
	}
}

また、Sampleクラス の funcAメソッド を以下の用に変更します。

	～
	private function funcA():Void{

		if(testA.run()) main = funcB;
	}
	～
}

これにより、TestAクラス内の各メソッドが1つのフレームで一つだけ実行されるようになります。TestA.runメソッドから true が返ると、TestAクラス内のすべての処理が終了したことを意味します。

現在は「ローグライクマップ自動生成処理」に上記のような対処を各クラスに追加/変更中...
しかしなかなか動作してくれず。

[ FLASH ] [ tips ] 2007年11月14日 20:28 | コメント (0) | トラックバック

「おもしろFLASHゲーム集」というサイトに「OH! DANGO JAM」が無断掲載されているという情報をメールにていただきました、

おもしろFLASHゲーム集
http://flash.ge-mu.net/

おもしろFLASHゲーム集 の 「OH! DANGO JAM」が掲載されているページ
http://flash.ge-mu.net/html/072703.php
びっくりしたことに「自分のサイトに設置」タグまで用意されています。こ、こいつは信じられねえ…

このサイトを運営しているのが「有限会社チビコン」というところらしい。
http://chibicon.net/top.html

なんか見たことあるなこのURL、と、過去のメールをさかのぼって調べてみたところ、団子一味のゲームのURLに片端からリンクを貼り、ゲーム集リンクサイトを作っていたところではないですか。リンクが貼られるたびに、都度「ゲームを紹介しました」というメールがどんどん送られてきました。そのサイトには、各ゲームのURLと共にゲーム感想用掲示板というものが設置してあり、こちらの制作したゲームの感想が好き放題書けるようになっておりました。何が書いてあるかは、そのサイトがまだあるのであれば行って見るとわかります。こちらとしては、その書き込み内容に不快にさせられるだけだったためリンクを外してくれとメールを書きましたがスルーされてしまいました。

上記サイト、どうやら iframe で OH! DANGO JAM の swf を表示している模様。以前海外のサイトにて同じような事があった時、対策したような気がしましたがもう一度見直す必要がありそうです。何故こういう行為を行うサイトのために、こちらの時間を割かなくてはならないのかと、なんとも悩ましいものです。サクッとどこかに通報するだけで、対処してくるような所はないのですかね。.htaccessで制限かけることできるのですかなあ。

追記)
以下のページ 「さくらのレンタルサーバ非公式FAQ」の「画像への直リンクを防ぐ」を参考にさせてもらったところ、アクセス制限が上手くいった模様です。
http://faq.sakuratan.com/wiki/wiki.cgi?.htaccess

ばんじゃーい！

[ FLASH ] [ info ] 2007年11月09日 03:53 | コメント (10) | トラックバック

docomo 905iシリーズに Flash Lite 3.0が搭載されることが公式から発表があった模様で以下のページに記述がありました。

　905iシリーズの主な特長

そのうち以下の一覧に 905i が載ることになりそうです。

　端末スペック一覧

docomoでは Flash Lite 2.x 対応の機種は出ることはなくなったのでしょうか。
Flash Lite 3.0 は FlashPlayer8 相当との事ですが、ActionScript 1.0～2.0 で FlashLite の開発を行いたい、という場合は、 au, vodafone の事を考え FlashPlayer7 相当の Flash Lite2.0 での開発を行ったほうが良さそうです。wiiにも対応できますしね。

後はFlashLite2.0を用いればこれくらいのゲーム/携帯サイトが作れます、といったものを作成し 色々な所にプッシュしていければと思います。時間はえらいかかってしまっていますが、トレジャーボインゴはなんとしても完成させなくては。

[ FLASH ] [ info ] 2007年11月01日 19:33 | コメント (0) | トラックバック

「OH! DANGO JAM」でも使用していた 数値や英字がポップアップして表示される テキスト表示処理をライブラリ化。トレジャーボインゴに用いる予定。
以前も作成したような気がしましたが、過去とコーディングスタイルが徐々に変わっており、現在のコーディングスタイルに合わせたものを作成し直しました。

▽続きを読む

[ FLASH ] [ update ] 2007年10月18日 20:53 | コメント (0) | トラックバック

Flash8で作成していたFlashLite用ゲームを Flash CS3(Flash9)でパブリッシュしてみると、Flash CS3で書き出される swfの方が容量が大きいことがあります。原因は詳しく調査はしていないのでわかりませんが、100KBの容量ギリギリにswfを作成している場合は とても困る問題です。

Flash CS3では ラスタデータの画像の書き出し処理に何か不備がある、といった記事をどこかで見かけたことがありますが、そこらへんが関係しているのかもしれません。

[ FLASH ] [ tips ] 2007年09月21日 10:40 | コメント (0) | トラックバック

先日より作成していたマップ自動生成処理をトレジャーボインゴに組み込み。しかし携帯端末で動作確認をしてみるとエラーが発生しswfが停止してしまいまいた。
単一フレーム内での処理行数が多すぎたためエラーが発生したと思われます。まずマップ自動生成処理とゲームメイン処理の合間にフレームを一つまたぐ必要がありそうです。それでも動作しない場合、マップ自動生成処理の各処理毎の合間合間にフレームをまたがせる必要がでてきます。

■PC上での動作確認はこちら

▽続きを読む

[ FLASH ] [ update ] 2007年08月05日 17:45 | コメント (2) | トラックバック

トレジャーボインゴで使用するゲーム画像を作成中

【 タイトル画像とゲーム中の主な画面構成 】

【 イベントシーン 】
ややこった家などを表示。

複数マップチップをまたぐグラフィックの背景パーツを配置するのは何かと難しいので、左図の家はイベント中のみに表示されます。

【 自動生成マップ背景用ブロック配置イメージ 】
クォータービューなので、キャラクターが隠れない程度の高さがよさげです。

【 アイテム 】
ハート、金塊、剣、盾、階段

【 操作方法確認画面 】
見難いのでおそらく作り直します。

[ FLASH ] [ GRAPHIC ] [ update ] 2007年06月18日 20:47 | コメント (6) | トラックバック

うわ～い！、またPICT PUZZLEをカスタマイズ設置したくださった方がきましたよ！
背景画像に加え音楽まで変更してくださっています。

wrv
http://wrv.jugem.jp/?eid=97

設置してくださった方は instantGarden のハラさんでした。
私mixiではロムに徹していてすみません＞＜

instantGarden
http://www.ninefive95.com/ig/

[ FLASH ] [ info ] 2007年06月17日 14:18 | コメント (0) | トラックバック

Flex 3 パブリックベータがダウンロード可能になったようです。新機能の一つとして「コードのリファクタリング機能」がついたとのこと。こいつは待ちに待っていた機能ではありませんか、というわけで早速試してみることに。

Flex Builder 3 Public Beta
http://labs.adobe.com/technologies/flex/flexbuilder3/

ActionScript Project を作成し、メインクラスとなる Sample.asファイルを作成。

次にNavigatorウインドウから右クリックでメニュー表示を見てみると、ありました「Refactor」コマンド。
「Refactor」コマンドの項目内には「Rename」がありました。

ベータなのでまだこれだけなのかな、と思いつつ、Renameの項目からクラス名「Sample」を「Sample2」に変更してみると次のようなエラーダイアログが表示されました。

An unexpected exception occurred while performing the refactoring. See the error log for more details.

See the error log for more details.

なんだか Flex Builder 2 を使用していた時もこのようなエラーメッセージが表示されたことがあったような気がします。エラーの原因は少しわかりませんが、Flex Builderを何度か再起動してみたらエラーがでなくなりました。

「Rename」が成功すると、Sample.as内の「Sample」というクラス名とコンストラクタが「Sample2」にすべて変更されました。

次にtest.Testクラス(Test.as)を作成し、Sample2クラスからTestクラスのインスタンスを生成します。そしてTestクラスをRefactorコマンドでRenameし、クラス名を「Test2」にしてみるとどうなるか試してみます。

Previewボタンを押してみると、Testクラスを使用している全てのファイルの修正点を閲覧することが可能のようです。Sample2クラス内の「Test」の記述が「Test2」に変わることを教えてくれます。こ、こいつを待っていたんだぜ…！

今後できるようになるのかはわかりませんが、パッケージ名をRefactorコマンドで Rename等することはできない模様。属するパッケージを変更したい場合、今までどおり一個一個全てのクラスを修正していかなくてはならないようです。

Javaでeclipseによるリファクタリング機能説明のすごそうなページがありましたが、このようなことができるようになるのですかなあ。

実践！リファクタリング
http://gihyo.jp/magazine/wdpress/information/2007/vol37-refactoring

[ FLASH ] [ tips ] 2007年06月11日 19:12 | コメント (0) | トラックバック

ブログパーツ的に設置可能なパズルゲームとして、以前作成しま�