Flashでタイピングゲームを作る
出典: YKAwiki
目次 |
概要
タイピングゲームを作りながら、Flashによるソフトウェア開発の方法を説明します。
このページでは "Flash" という言葉は
- ブラウザなどで実行できるもの（ふつう、拡張子は swf ）
- 上記 1. を作るための開発環境
の２通りの意味で使います。
では、どんなゲームを作るのかを以下に簡単に説明しておきます。
- Flash8 以上がインストールされたブラウザまたは Flashプレーヤーで動作するタイピングゲーム。
- デフォルトの単語はYKA用語集を参考にして登録する。
- ユーザーが単語の追加を行うことができる。
開発時には用語集に載っている単語を登録しますが、開発終了後は任意のユーザーが単語登録できるようにします。
- 開発環境
- macromedia FLASH 8 trial, Ruby1.8.4, MySQL4.1.5, MySQL/Ruby2.7
- 動作環境
も書いておくべき？
要求分析
必要な機能を定め、機能の関係を適当な図で表す。 （この項目は Flash とはあまり関係ありません。これくらいの緩い分析でも作れる、という指標にでもしてください。）
機能
このタイピングゲームに必要な機能を以下に箇条書きにします。
- 単語を保存するファイルを管理する機能
- タイピングする単語とその説明を読み込む機能、書き込む機能
- タイピングされた文字列を処理する、ゲームとしての諸機能
以下は実装するか未定の案です。
- ランキング？
- 時間制限？
- コンボ？
- 機数？
- 無敵？？
- 単語にマッチした画像の表示？？？
(stub)未定の案を要求仕様書に書くのはどうかと思う。
状態遷移図
ゲームの全体像は以下のような遷移図で表すことができます。
遷移の条件は以下のシステム設計の項でモジュールごとに分けて記述する。
システム設計
状態遷移図を参考に、機能を分割してみる。
データベース構造も書いておく。
機能の分割
まず、Flashで作る部分とそれ以外の部分（主に CGI ）に分けた。
ムービークリップって何？
Flash 特有のムービークリップについて、別ページで説明します。
簡単に言えば Flash の部品みたいなものです。javaで言えばクラスぐらいの位置づけでしょう。
それに加えて、ステージとタイムラインを持つことが特徴です。
Flash で作る部分
ムービークリップ単位で分割した。
- ゲームのメイン部分。主に状態遷移を担当する。
- タイピング部分を担当するムービークリップ。
ここまでの２つは、データベースへの読み書きを行わない。 以降のムービークリップは CGI を利用してデータベースにアクセスする。
- 単語データを読み込むムービークリップ。
- ランキングを読み込むムービークリップ。
データベースからの読み込みは、Flash 本体のロード後すぐに連続して行う。
- 単語データを書き込むムービークリップ。既に登録されている単語かどうかは Flash（クライアント側）で判断し、登録許可がおりたら CGI に単語名と文字列を渡して MySQL データベースに登録する。
- ランキングを書き込むムービークリップ。
そのほかの部分 CGI(Ruby), MySQL
アップロードしたい画像が指定されている場合（このへんは Flash8 で使いやすくなった）は、ファイルをアップロードする cgi を同時に呼ぶ。画像をアップロードした場合は、画像ファイル名の入ったパスも MySQL データベースに登録する。
データベース構造
単語の情報を管理するテーブルは以下の属性を持つ。
- 単語名
- 説明文
- 参照画像へのURI
mySQL データベース（あらかじめ、YKAwords_db を作成した）にログインして、以下のようにテーブル words を作成した。
mysql> create table words (word varchar(64) NOT NULL PRIMARY KEY,
-> note varchar(255) NOT NULL,
-> image varchar(64));
ランキングを管理するテーブルは以下の属性を持つ。
- ランキング順位
- ランキング上位者の名前
- 回答単語数
- 誤答数
- 入力文字数
- 修正文字数
以下のようにテーブル ranking を作成した。
mysql> create table ranking (rank int(4) NOT NULL PRImary KEY,
-> name varchar(64) NOT NULL,
-> prob int(32) NOT NULL,
-> solv int(32) NOT NULL,
-> inpt int(32) NOT NULL,
-> modi int(32) NOT NULL)
-> ;
できたテーブルの確認。
mysql> show tables; +-----------------------+ | Tables_in_YKAwords_db | +-----------------------+ | ranking | | words | +-----------------------+
mysql> describe words; +-------+--------------+------+-----+---------+-------+ | Field | Type | Null | Key | Default | Extra | +-------+--------------+------+-----+---------+-------+ | word | varchar(64) | | PRI | | | | note | varchar(255) | | | | | | image | varchar(64) | YES | | NULL | | +-------+--------------+------+-----+---------+-------+
mysql> describe ranking; +-------+-------------+------+-----+---------+-------+ | Field | Type | Null | Key | Default | Extra | +-------+-------------+------+-----+---------+-------+ | rank | int(4) | | PRI | 0 | | | name | varchar(64) | | | | | | prob | int(32) | | | 0 | | | solv | int(32) | | | 0 | | | inpt | int(32) | | | 0 | | | modi | int(32) | | | 0 | | +-------+-------------+------+-----+---------+-------+
余談）書き込むときに使う MySQL/Ruby ライブラリ使ってテーブル作ることもできるようですが、今回のタイピングゲームではテーブルや属性を追加することは無いので、使用するテーブルだけを手作業であらかじめ作成。
それと文字コードは Flash-Ruby-MySQL 通して UTF-8 で統一して作ってるけど、UTF-8 で日本語扱うと一文字3バイトも使う。 ので、今回作ったテーブルでは単語名は 64 割る 3 で21文字まで登録可能、説明文は85文字。
MySQL はバイト長が大きすぎないかどうかの判断をアプリケーション側に任せるという見解に立っているらしいので、今回の場合はFlashにそのへんを判断させてからデータベースに渡す。
MySQL/Ruby は便利だけど、MySQL が返り値を返したり返さなかったりなので扱いにくい･･･
プログラム
(stub)
そろそろプログラムに入れそうな気が。
と思ったら cgi の部分にソース書いちゃったよ。この項目は ActionScript 専用になるのか？
要求仕様に入る前の時点で既に使う言語が決めてあるのがそもそもおかしいな。
画像のロードが出来るかどうか考えてなかった、あぶねー。
調べてみたら jpg, png, gif, swf の外部ファイルを表示できるらしい。良かった良かった。
mysql> update ranking set rank="9" where ranking.rank="10"; ERROR 1062 (23000): Duplicate entry '9' for key 1
rank は primary だからカブるような変更は出来ないっつーの。データベースは注意してないと構造をすぐ忘れる。
あと、POST で送る時に文字列として送られるので全てのキーの属性を char にした。
