FlashLiteでゲームをつくる（１）
1.ターンと構造
ゲームにはいくつかの基本的なパターンがある。
パターンを覚えると、あとはその変形になる。
関係ないようだけど、スポーツのことを考えてほしい。
野球は攻撃と守備が交互に繰り返される。
ドラクエの戦闘シーンような感じ。
ボクシングには攻守のターンはない。
ゲームで言えばシューティングやアクションゲームという感じかもしれない。
とにかく、ゲームの種類によって、構造が変わるが、それでもいくつかのパターンの応用なので、心配する必要はない。
2.FlashLiteの特性
正直言って、FlashLiteにはアクションゲームは向いていない。
処理速度が機種によって違うし、複数のキーを一度に入力できないからだ。
もちろん、全く出来ないというわけではないけど、それはもっと上級者になってからでもいいだろう。
アクションの中でも「適度なタイミングで1キー押す」というゲームなら、比較的問題は少ない。
最初につくるゲームはクイズ、パズルなどが向いている。
FlashLiteダイエットの考え方
1.FlashLiteダイエットの考え方
FlashLiteに関して、一応の制作手順を書いたので、次にリクエストの多そうな容量の削減(ダイエット)を紹介する。FlashLite1.1では、swfの最大容量が100KB(100*1024バイト)に決まっている。いまどきWEBの挿絵でも100KBより大きいぞ！と思うだろうが、ルールなのだからしかたない。
さて、削減の方針としては「パレートの法則」を思い出して欲しい。
http://ja.wikipedia.org/wiki/%E3%83%91%E3%83%AC%E3%83%BC%E3%83%88%E3%81%AE%E6%B3%95%E5%89%87
「20％の金持ちが資産の80％を所有する」とか、「20％の顧客から利益の80％を得る」などのアレ。つまり、容量を食っているのは特定の部分で、「20％に手を入れると80％が改善する」ということだ。正確に言えば、「20％に手を入れると80％が改善する部分だけを変更せよ」ということ。苦労して、スクリプトを数バイト短くできたけど、その分テストをやり直さないといけないという状況では意味が無い。FlashLiteのダイエットはこの改善をすれば、これだけ効果があるぞ！というポイントを探すことがFlashLiteダイエットのスタートである。
個々のテクニックやノウハウというものは当然ある。しかし、基本的な方針なしに動き出すと、いつまでたってもゴールにたどり着くことは出来ない。
2.ダイエットには現状の把握
どんな困難な仕事でも、最初は現状を把握すること。
仮に、現在ムービーは完成しているが、容量オーバーを起こしている状態としよう。この場合、「現在の容量」と「目標の容量」の2つがわかれば、その差がダイエットすべきサイズだ。多くの場合、「目標の容量」は100KBだが、使い方によってはもっと小さい場合もある。ダイエットすべきサイズが「5バイト」の場合と「５Kバイト」の場合では、使う手法が違う。なんにしても、現状どうなっていて、どうしたいか、というのは重要だ。
また、各レイヤーのデータを確認して、どのレイヤーが容量を食っている原因かを把握する事も必要だ。使っていない無駄なデータが容量を食っているという可能性もある。この調査段階で勝負は決まっていると言える。
3.容量を削減する3つの要素
さて、容量を削減するには、3つの要素を考慮するとよい。逆に言えば、この3つが容量を食う犯人ともいえる。
(1)グラフィック
グラフィックが一番容量を食いやすい。細かすぎるデータやグラデーションなどが容量食いの代表。全く消してしまうか、ポイント数を減らすか、グラフィックの質を下げるなどの対策をする。
(2)スクリプト
変数名、ラベル名を短くする。
以上。
(3)アルゴリズム
スクリプトとかぶっているが、処理の手法自体に問題があって容量が大きい場合もある。
また、複雑な条件のif文があると容量が大きくなるなどのクセは覚えておいた方がいいかも。(※うろ覚え)
4．ダイエットまとめ
今回は基本的なダイエットのすすめ方の概略について書いた。要するに、容量をオーバーするには原因がある。仕様が詰め込みすぎなのか、グラフィックデータが大きいのか、作った人のスキルが低いのか・・・
それぞれ、原因にあわせた対策をとればよい。
FlashLite入門【2】ムービー作成の流れ
1.とりあえず作ってみる
FlashLiteの単純なアプリケーションを1つ作る。
作業手順はこちら
１）FlashCS4でムービーを作成、PC上でテストする。
２）FTPソフトでWEBサーバーにswfファイルをアップロードする。
３）ケータイでWEBサーバーをアクセスし、動作を確認する。
３で動作がおかしい場合は１に戻って修正する。今回は2つのボタンを用意し、それぞれをおすとステージ上のテキストエリアに”ボタン１””ボタン２”と表示するムービーをつくる。
2.flaファイルを新規作成する。
Adobe Flash CS4 Professionalを起動する。ところで”Flash”といった場合、Flashの作成をするソフトなのか、ブラウザ用のFlashプラグインなのか、混同することがある。Flash(swfムービー)を再生するブラウザ用のプラグインは無料。作成用のAdobe Flash CS4 Professionalは有料。
http://www.adobe.com/jp/products/flash/
作成用のソフトは、フリーも含めていくつかあるが、FlashLiteを開発できる環境は正規のFlashがお勧め。持っていない場合は、試用版が約1ヶ月使える。さて、Adobe Flash CS4を起動して、新規作成から「Flashファイル(モバイル)」を選ぶ。新規作成時にモバイル用を選ぶと、Device Central CS4が起動する。ここで、これから作るムービーのバージョンなどを決める。ここでは「新規ドキュメント」タブの設定は以下のように
・プレイヤーバージョン Flash Lite 1.1
・ActionScriptバージョン ActionScript 1.0
・コンテンツタイプ スタンドアローンプレイヤー
ウィンドウ左のサンプルデバイスセットから「FlashLite1.1 16 176x208」を選ぶ。開発ターゲットをダブルクリックすると、画面の左側にクリックしたデバイスが表示される。そこで、ウィンドウ下部の「選択されたすべてのデバイスのカスタムサイズ」という部分にチェックを入れると、デバイスのサイズに応じたステージサイズになる。
※このへんが面倒と感じる人は、最初「AS2.0」で作成し、「ファイル」メニューの「パブリッシュ設定」の「Flash」タブを変更して作成することもできる。
3.ボタンの作成
デバッグで変数の内容を確認するには主に2つの方法があります。
１）Traceを使う
２）画面上にテキストフィールドを配置する
１の方法は、開発中のPC上で確認する場合に使う。
２は、実機でもチェックできるので、PC上での開発が終わり、実機チェックの段階でトラブルを解決する方法。
・なんでもいいけど、ステージ内に四角を書いてみる。
・四角をドラッグして選択状態にする。
・右クリックで「シンボルに変換」(Windowsの場合）
・「シンボルに変換」ウィンドウの「タイプ」を「ボタン」にする。
・「OK」ボタンを押す。
・作成した「ボタン」を選択状態にして、アクションウィンドウを開く。
・下記スクリプトを記述する。
on (keyPress "1"){
trace("1");
}
これでいったん完成。
ここからはテスト。CTRL+EnterキーでDevice Centralが起動する。Device Centralではエミュレータがうごいてるので、画面上のケータイのキーをクリックするとキーを押したときの動作になる。ちなみに、テンキーを押しても動作するが、PCのキーとは配列が違うので、注意。(PCは123が下)
エミュレータ上で”1”キーを押と、Flashのウィンドウの”出力”に「1」が表示される。何度も押すと、その回数分表示される。このtrace命令は開発中に”出力”ウィンドウに文字を出す命令。実機で動作中には機能しないし、無駄にswfの容量を消費する。
swf生成時にtraceを入れない設定がある（と思う）。ここでFlashLiteのポイントとしては「作成したボタンをクリックしているワケではない。」という事。
ケータイにはマウスもないしね。確認のために、ボタンのスクリプトを以下のように修正する。
on (keyPress "1"){
trace("1");
}
on (keyPress "2"){
trace("2");
}
1つのボタンに、”２キー”で押した動作を追加できる。
4.テキストフィールドの作成
さて、trace、実機で動いているか確認出来ないし、エミュレータ上のテスト以外では意味が無い。確認用、もしくは占いの結果の表示、スコアの表示などで便利に使えるのがテキストフィールド。テキストフィールドはFlashと同様、変数を割り当てると、その内容が表示される。ただし、インスタンスで指定して、変数を割り当てない方式は使えない。テキストフィールドを配置して、ダイナミックテキストに指定。
変数名をaとする。
画面上の適当な位置に適当なサイズのテキストフィールドを配置する。上部１／３に左上(0，0)から配置すればOK。
ボタンのスクリプトを修正。
on (keyPress "1"){
trace("1");
a=1;
}
on (keyPress "2"){
trace("2");
a=2;
}
これでムービープレビューしてみる。Device Centralのケータイのキーをマウスでクリックして、1を押したらテキストフィールドに1が表示され、2を押せば２が表示される。
問題無ければ、どこかレンタルしているWEBサーバーにFTPでアップする。QRコードを作ってくれるサイトもあるから、そのへんを利用すると便利。ひんぱんにテストするなら、テスト用のディレクトリをブックマークしておけばよい。
サンプルをこちら。
FlashLiteサイト[usuaji Games]
■FlashLiteのサンプル sample2_3.swf
http://hspcenter.com/i/
※ケータイ用のサイト
テスト用のディレクトリはURLさえわかれば誰でもアクセスできてしまう。企業からの依頼の物などをチェックする時には何か対策を取ること。実機で試して問題がなければ、おわり。出来れば、複数のキャリアのケータイでチェックするなどの体制があると安心。
という事で、駆け足の解説でわかりにくくてもうしわけないが、ここまでで作成の流れを紹介した。
FlashLite入門【1】概要
＜このエントリについて＞1年以上FlashLiteの開発をしてきた経験をまとめてみました。ケータイ用Flash開発の参考になれば幸いです。
1.バージョン
ケータイ電話用のFlash規格をFlashlLiteという。(以降、FlashLiteはFLと略す。)
FlashLiteは各機種でプレイヤーのバージョンが違い、日本国内には「1.0/1.1/2.0/2.1/3.0/3.1」がある。
ケータイの場合、PC用のFlashプレイヤーと違い、購入時のバージョンから簡単にバージョンアップができない。
FL1.0は最初のFlashLite。
swf(実行ファイル)の容量制限が20KB。
外部ファイルの読み込みは出来ない。
Flash4相当。
FL1.1が多くのケータイに搭載されている。
外部ファイルの読み込みが可能。
これ以降、swfの容量制限が100KBになる。
一般向けのコンテンツを対象にする場合はFL1.1に向けに作ると、それ以降のバージョンのハードはFL1.1にも対応しているので、問題が少ない。（2009年4月現在）
Flash4相当。
FL3.0はドコモが採用。
FL2.0よりさらに高度な命令が
Adobeが作った規格上では動画を再生する仕様もあったが、その部分はドコモが採用しなかった。
Flash8相当。
FL3.1はドコモが採用。
データ取得時にユーザーのキー入力アクションを必要としないなどの変更が行われた。
以下の解説はFL1.1を基本に記述する。
2.容量制限
swfの容量は100kバイトまで。
FL1.0では20kバイトだったが、FL1.1以降は100kバイト。
(※FL3.1の一部の環境では100kバイト以上に対応)
ファイルの追加読み込みなども可能だが、100kバイトの制限に含まれる。
また、キーアクションがないとファイル読み込みなどができない仕様である。
パケット代が発生する動作にはユーザーの確認が必要という方針から。(※FL3.1以外)
データのセーブ等が発生するなどパケット代がかかりそうな場合には、事前にユーザーに確認した方がよい。
