TOPシステム開発【モバイル向けサイト制作】出遅れるな!Flash Lite入門> 第4回:Flash Liteでゲームを作ろう! (1/3)




【モバイル向けサイト制作】出遅れるな!Flash Lite入門

【モバイル向けサイト制作】
出遅れるな!Flash Lite入門

第4回:Flash Liteでゲームを作ろう!

著者:株式会社24-7 古本 光司

公開日:2008/10/22(水)

はてなブックマークの登録数

ゲームの概要
 前回は、Flash Lite 1.1での時計待ち受けを作成してみましたが、今回は、簡単なゲームサンプルの解説をしていきます。

 ゲームを作る時の基本的な注意点はキーの割り当てです。第2回で説明したように、Flash Lite 1.1のキーイベントでキャリア対応を考慮した場合、左右のキーを使用することができません。そのため、基本として数字のキーを割り当てていくこととなります。例えばキャラクターを上下左右に動かす場合などは「2」「8」「4」「6」などのキーを使用すると良いでしょう。今回のゲームも、すべての数字キーを使用する内容となります。

 ゲームの内容として、まず数字がランダムに表示されます。その表示された数字のキーを素早く押すと得点が加算されるというものです。数字はしばらくたつと消えてしまい、再度新しい数字が表示されていきます。一定時間内に数字キーを押せなかった、間違った場合は減点の対象とします。これを一定時間の間に繰り返し、タイムオーバーとなった時点で得点の結果が表示されるという流れになります。
図1:ゲームの構成
(画像をクリックすると別ウィンドウに拡大図を表示します)

構成とポイント
 まずはこちらからサンプルをダウンロードしてください(14441.zip/32.2 KB)。このサンプルファイルに沿って解説していきます。

 Flashファイルを開いてタイムラインを確認してみてください。図1のような3つで構成されています(ラベルを見ると分かりやすいです)。

 また、タイムラインの最後に「hit」と「miss」というラベルがあります。これはfunctionの代わりとなるcall()処理のために用意したラベルとなります。

 まずラベル「title」ですが、タイトルである「集中力ゲーム」という文字と説明文が配置してあります。ここでポイントとなるのが説明文は画像で作成されているということです。

 Flash Lite 1.1でもデバイスフォントを使用することができますが、機種によって表示が変わる場合があります。画像だと機種に依存されずに表示できるため、すべて画像で配置しています。また「集中力ゲーム」という文字については、フォントを指定しているため埋め込みフォントの扱いとなりますが、フォントデータがswfファイルに埋め込まれるため、機種に依存されずに表示されます。

 しかし、デメリットとしてデータ容量が重くなってくるので注意が必要です。もちろん容量の点を考慮した場合、デバイスフォントを使用した方が良いのですが、一部の機種で思い通りのレイアウトでフォントが表示されない可能性も考えられます。コンテンツの目的やターゲットから対応機種の範囲を定め、デバイスフォントを使用するかしないかを決めていくと良いでしょう。

 次に、下部に配置してあるスタートボタンを押すとゲームがスタートします。

 スタートボタンは数字キー「0」にも対応させています。ボタンのスクリプトは下記になります。

on (press, keyPress "0") {
gotoAndPlay("setNo");
}

 onハンドラで「press」「keyPress "0"」と2つ同時に記述することができます。さらにスタートボタンが押されると「setNo」フレームへジャンプします。

 そしてタイムラインには、下記のように成功と失敗をカウントするための変数を用意しています。

countOK = 0; //成功カウント
countNG = 0; //失敗カウント

 また、スタートボタンの背景部分の色を変えるため、矩形(くけい)ツールで四角い図形を配置しているのですが、見て分かるようにステージサイズをはみ出して配置されています。

 その理由としては、機種によって画面サイズが異なるためswfファイルは自動的に拡大縮小されて表示されてします。必ずしも縦横比がステージサイズと一致するとは限りませんので、横か高さかどちらかが途中で途切れる状態で表示されてしまいます(ほとんどは高さが途中で途切れる)。この状態でも背景の色が途切れないよう、このようにわざと図形をはみ出させて配置している結果、ステージサイズが途中で途切れてもきちんと背景が表示されます。

 次に、ゲームのメインとなる部分を解説していきます。 次のページ



株式会社24-7 古本 光司
著者プロフィール
株式会社24-7 古本 光司
Webディレクター/Flashクリエイター
1995年に初めてインターネットの世界に触れ、1999年に独学で個人サイトの運営を始める。その後、本格的にWeb業界へと転身し、クリエイター、ディレクター、プランナー、講師業務、セミナーなど幅広く従事。また、個人的にもパブリッシャーとして活動中。より効果の高いWebの活用術を日々勉強中。『いざ高みへ!』
1ka2ka.com:http://1ka2ka.com/
株式会社24-7:http://www.24-7.co.jp/

この記事の評価をお聞かせください
ボタンをクリックしますとウインドウが開きます。
ご意見、ご要望にお応えします! インプレスIT INSIDE

INDEX
第4回:Flash Liteでゲームを作ろう!
-> ゲームの概要
  ゲームの仕組みと構成
  ゲーム全体を監視するもの
【モバイル向けサイト制作】出遅れるな!Flash Lite入門
第1回 Flash Liteの基本を学ぼう!
第2回 Flash Lite 1.1の基本的なスクリプト制御
第3回 時計待ち受けを作ろう!
第4回 Flash Liteでゲームを作ろう!
第5回 Flash Liteのまとめと今後
関連記事
モバイル向けサイト制作
使いやすさと見やすさ
Webデザインワークフロー
使える!Webデザインアプリ
現場で使える!Flash
これならわかる!JavaScript/Ajax
即実践!HTML+CSS
Webデザイナは知っていた

Think IT 過去人気記事

注目おすすめ情報

Think IT人気ライター BEST 5