Flashゲームの作り方

ページ名:Flashゲームの作り方

Flashは、NewgroundsやKongregateなどのサイトで見られる、ブラウザベースのビデオゲームの人気フォーマットです。 Flashフォーマットは、モバイルアプリの成長に直面して徐々に利用されなくなってきていますが、多くの質の高いゲームがまだFlashで作られています。 FlashはActionScriptという学びやすい言語を使っており、画面上のオブジェクトをコントロールすることができます。 このwikiHowでは、基本的なFlashゲームの作り方をご紹介します。

Part 1

Starting the Process

  1. ゲームをデザインしましょう。 コーディングを始める前に、ゲームに何をさせたいか大まかに考えておくとよいでしょう。 Flashはシンプルなゲームに最適なので、プレイヤーが悩むような仕組みが少ないゲームを作ることに集中しましょう。 プロトタイピングを始める前に、基本的なジャンルといくつかの仕組みを考えておくようにしましょう。 ビデオゲーム開発の計画段階については、こちらを参照してください。 一般的なFlashゲームには以下のようなものがある:
    • エンドレスランナー: これらのゲームは自動的にキャラクターを動かし、プレイヤーは障害物を飛び越えるなど、ゲームとのインタラクションを行います。
    • ブロウラー:
    • ブロウラー:一般的に横スクロールで、敵を倒して進んでいきます。
    • パズル: これらのゲームは、プレイヤーが各レベルを倒すためにパズルを解くように要求します。 Bejeweled のようなマッチ 3 スタイルのものから、アドベンチャー ゲームによく見られる複雑な謎解きまで、さまざまな種類があります。
    • RPG:これらのゲームはキャラクターの育成と進行に重点を置いており、プレイヤーはさまざまなタイプの敵がいる複数の環境を移動します。 戦闘の仕組みはRPGによって千差万別だが、ターン制のものが多い。
  2. Flash が得意とするものを学びましょう。 Flash は 2D ゲームに最も適しています。 Flashで3Dゲームを作ることは可能だが、非常に高度で、言語に関するかなりの知識が必要となる。 成功した Flash ゲームのほとんどは 2D でした。
    • また、Flash ゲームは短時間のセッションに最適です。
  3. ActionScript3 (AS3) 言語に慣れましょう。 FlashゲームはAS3でプログラムされており、ゲーム制作を成功させるためには、AS3がどのように動作するかをある程度理解している必要があります。 AS3でのコーディング方法を初歩的に理解していれば、簡単なゲームを作成することができます。
    • アマゾンなどで ActionScript に関する本が何冊か販売されていますし、オンラインにもたくさんのチュートリアルやサンプルがあります。
  4. Flash Professional をダウンロードしてください。 このプログラムはお金がかかりますが、Flashプログラムを素早く作成する最良の方法です。 オープンソースを含む他の選択肢もありますが、互換性に欠けていたり、同じタスクを達成するのに時間がかかったりすることがよくあります。
    • Flash Professional は、ゲーム制作を開始するために必要な唯一のプログラムです。
Part 2

基本的なゲームを書く

  1. AS3 コードの基本的な構成要素を理解してください。 基本的なゲームを作成する場合、いくつかの異なるコード構造を使用することになります。 AS3のコードには3つの主要な部分があります:
    • 変数 - データの格納方法です。 データには数値、単語(文字列)、オブジェクトなどがあります。 変数はvarというコードで定義され、1つの単語でなければなりません。
      var playerHealth:Number = 100; // "var "は変数を定義していることを示します。 // "playerHealth "は変数名です。 // "Number "はデータの型です。 // "100" は変数に代入された値です。 // すべてのアクションスクリプト行は ";" で終わります。
    • イベント ハンドラ - イベント ハンドラは、発生する特定のものを探し、プログラムの残りの部分に伝えます。 これは、プレイヤーの入力やコードの繰り返しに不可欠です。 イベントハンドラは通常、関数を呼び出します。
      addEventListener(MouseEvent.CLICK, swingSword); // "addEventListener()" はイベントハンドラを定義します。 // ".CLICK" は、MouseEvent カテゴリ内の特定のイベントです。 // "swingSword" は、イベントが発生したときに呼び出される関数です。
    • 関数 - キーワードに割り当てられたコードのセクションで、後で呼び出すことができます。 ファンクションはゲームのプログラミングの大部分を処理し、複雑なゲームでは数百のファンクションを持つことができますが、簡単なゲームでは数個しか持たないこともあります。 関数は呼び出されたときだけ動作するので、どのような順番でもかまいません。
      function swingSword (e:MouseEvent):void; { //ここにコードが入ります } // "function "はすべての関数の最初に現れるキーワードです。 // "swingSword "は関数の名前です。 // "e:MouseEvent "は追加されたパラメータで、 // イベントリスナーから関数が呼び出されることを示します。 // ":void "は関数が返す値です。 値が返されない場合は:voidを使用します。
    • オブジェクトを作成します。 Flashでオブジェクトに影響を与えるにはActionScriptを使います。 ゲームを作るには、プレイヤーが操作するオブジェクトを作る必要があります。 読んでいるガイドによっては、オブジェクトはスプライト、アクター、ムービークリップと呼ばれることもあります。 この単純なゲームでは、長方形を作成します。
      • まだならFlash Professionalを開きます。 新しい ActionScript 3 プロジェクトを作成します。
      • [ツール] パネルから [矩形] 描画ツールをクリックします。 このパネルは、Flash Professional の設定によって異なる場所にある場合があります。
      • 選択ツールを使用して長方形を選択します。
    • オブジェクトにプロパティを割り当てます。 新しく作成した矩形を選択した状態で、[修正] メニューを開き、[シンボルに変換] を選択します。 ショートカットとして F8 を押すこともできます。 Convert to Symbol "ウィンドウで、オブジェクトに "enemy "のようなわかりやすい名前をつけます。
      • Propertiesウィンドウを見つけます。 ウィンドウの上部に、カーソルを合わせると「インスタンス名」と書かれた空白のテキストフィールドがあります。 シンボル("enemy")に変換したときと同じ名前を付けてください。 これにより、AS3 コードを通して相互作用できる固有の名前が作成されます。
      • 各「インスタンス」は、コードによって影響を受けることができる個別のオブジェクトです。 すでに作成されたインスタンスは、[Library] タブをクリックしてインスタンスをシーン上にドラッグすることで、複数回コピーできます。 1 つ追加するたびに、名前は別のオブジェクトであることを示すように変更されます ("enemy"、"enemy1"、"enemy2" など)。
      • コード内でオブジェクトを参照するときは、単にインスタンス名 (この場合は "enemy") を使用する必要があります。
    • インスタンスのプロパティを変更する方法を学びます。 インスタンスを作成したら、AS3を通してプロパティを調整することができます。 これにより、オブジェクトを画面上で動かしたり、サイズを変更したりすることができます。 インスタンス、ピリオド"."、プロパティ、値の順に入力することでプロパティを調整できる:
      • enemy.x = 150; これはX軸上の敵オブジェクトの位置に影響します。
      • enemy.y = 150; これはY軸上の敵オブジェクトの位置に影響します。 Y 軸はシーンの上から計算されます。
      • enemy.rotation = 45; 敵オブジェクトを時計回りに 45° 回転させます。
      • enemy.scaleX = 3; 敵オブジェクトの幅を 3 倍に伸ばします。
      • enemy.scaleY = 0.5; オブジェクトの高さを半分にします。
    • trace()コマンドを調べます。 このコマンドは、特定のオブジェクトの現在の値を返し、すべてがその通りに動いているかどうかを判断するのに便利です。 最終的なコードにTraceコマンドを含めたくないかもしれませんが、デバッグには便利です。
    • 上記の情報を使用して基本的なゲームを構築します。 コア関数の基本を理解したところで、クリックするたびに敵の大きさが変わり、体力がなくなるまでのゲームを作ってみましょう。
      var enemyHP:Number = 100; // 開始時に敵のHP(体力)を100に設定する。 var playerAttack:Number = 10; // クリック時にプレイヤーの攻撃力を設定する。 enemy.addEventListener(MouseEvent.CLICK, attackEnemy); // この関数を敵オブジェクトに直接追加することで、 // 画面上のどこをクリックしても発生するのではなく、 // オブジェクト自体がクリックされたときだけ発生するようになる。 setEnemyLocation(); // 以下の関数を呼び出して、 // 敵を画面上に配置する。 function setEnemyLocation ():void { enemy.x = 200; // 敵を画面の左から200ピクセル移動 enemy.y = 150; // 敵を画面の上から150ピクセル下に移動 enemy.rotation = 45; // 敵を時計回りに45度回転 trace("enemy's x-value is", enemy.x, "and enemy's y-value is", enemy.y); // デバッグ用に敵の現在位置を表示する } function attackEnemy (e:MouseEvent):void // 敵がクリックされたときの攻撃関数を作成する { enemyHP = enemyHP - playerAttack; // HP値から攻撃値を引き、 // 新しいHP値を得る。 enemy.scaleX = enemyHP / 100; // 新しいHP値に基づいて幅を変更する。 // 100で割って10進数にする。scaleY = enemyHP / 100; // 新しいHP値に基づいて高さを変更 trace("The enemy has", enemyHP, "HP left"); //敵の残りHPを出力する }
    • 試してみてください。 コードを作成したら、新しいゲームをテストしてみましょう。 コントロールメニューをクリックし、テストムービーを選択します。 ゲームが始まり、敵オブジェクトをクリックしてサイズを変更できます。 トレース出力は Output ウィンドウに表示されます。
Part 3

高度なテクニックを学ぶ

  1. パッケージの仕組みを学びましょう。 ActionScript は Java をベースにしており、よく似たパッケージシステムを使用しています。 パッケージでは、変数、定数、関数、その他の情報を別のファイルに保存し、それらのファイルをプログラムにインポートすることができます。 誰かが開発したパッケージを使用することで、あなたのゲームをより簡単に作成することができるようになります。
    • Javaでパッケージがどのように機能するかについては、こちらを参照してください。
  2. プロジェクト フォルダーを構築します。 複数の画像やサウンドクリップを使用するゲームを作成する場合は、ゲームのフォルダ構造を作成します。 これにより、さまざまな要素を簡単に保存したり、呼び出すためのさまざまなパッケージを保存したりすることができます。
    • プロジェクトのベース フォルダを作成します。 ベース フォルダには、すべてのアート アセットを格納する "img" フォルダ、すべてのサウンド アセットを格納する "snd" フォルダ、すべてのゲーム パッケージとコードを格納する "src" フォルダが必要です。
    • 定数ファイルを格納するために、"src" フォルダ内に "Game" フォルダを作成します。
    • この特定の構造は必須ではありませんが、特に大規模なプロジェクトでは、作業と素材を整理する簡単な方法です。
  3. ゲームにサウンドを追加します。 音や音楽のないゲームは、プレイヤーにとってすぐに退屈なものになってしまいます。 レイヤーツールを使えば、Flashのオブジェクトにサウンドを追加できます。 詳しくは
  4. 定数ファイルを作成します。 ゲーム中に変わらない値がたくさんある場合は、定数ファイルを作成して、すべての値を1つの場所に保存し、簡単に呼び出すことができます。 定数には、重力やプレイヤーのスピードなど、繰り返し呼び出す必要のある値を含めることができます。
    • 定数ファイルを作成した場合、プロジェクト内のフォルダに配置し、パッケージとしてインポートする必要があります。 例えば、Constants.as ファイルを作成し、Game ディレクトリに置くとします。 これをインポートするには、次のコードを使います:
      package { import Game.*; }
  5. 他の人のゲームを見てください。 多くの開発者は自分のゲームのコードを公開しませんが、さまざまなプロジェクトのチュートリアルや他のオープンプロジェクトがあり、コードやゲームオブジェクトとの相互作用を見ることができます。 これは、あなたのゲームを際立たせるのに役立つ高度なテクニックを学ぶのに最適な方法です。
この記事は CC BY-NC-SA で公開されている "How to Make a Flash Game" を改変して作成しました。 特に断りのない限り、CC BY-NC-SAの下で利用可能です。

シェアボタン: このページをSNSに投稿するのに便利です。

コメント

返信元返信をやめる

※ 悪質なユーザーの書き込みは制限します。

最新を表示する

NG表示方式

NGID一覧