オンラインゲームの作り方

オンラインゲームをプレイしていて、「こんなのが作れたらいいのに、いいアイデアがあるんだけど」と思ったことはないだろうか。以前は、Flashを動かす言語であるActionScript 3のコーディング方法を学ぶ必要がありました。しかし、いくつかのゲーム作成プログラムのおかげで、コーディングの経験は過去のものとなりました。コードに一行も触れることなく、オブジェクトやロジックを操作して、楽しく奥深いゲームを作ることができるのです。

パート1

ゲームをデザインする

1. 基本的な説明を書き出します。特徴やプレイヤーに達成してほしいことを盛り込みましょう。ゲームの基本的なアウトラインを書き出しておくと、それを参照しながら作業を進めることができます。

   • ゲームデザイン文書の書き方については、こちらを参照してください。
2. スケッチを描く。画面の基本的なレイアウトを描きます。あまり詳細である必要はありませんが、少なくとも、画面上のさまざまな要素がどこに配置されるかについてのアイデアは持っておくべきです。これらは、後でゲームのインターフェイスを作り始めるときに、非常に役に立ちます。
3. ゲームを作成する方法を選択します。従来、Flashゲームを作成するには、ActionScript 3のコーディング方法を学ぶ必要がありました。しかし、コーディングの経験を必要とせず、より簡単にゲームを作成できるプログラムもあります。ゲーム制作のための最も人気のあるオプションには、以下のようなものがあります：

   • Stencyl - これは新しいツールで、オブジェクトとロジック・スクリプトを使ってゲームを作ることができます。これらのゲームをFlashプロジェクトに変換し、Flashゲームをサポートしているウェブサイトにアップロードすることができる。
   • Construct 2 - Flashが古くなるにつれ、他のゲーム作成手段に取って代わられ始めている。オンラインゲームを作成する最新の方法のひとつは、HTML5を使用することです。通常、これには多くのコーディング知識が必要ですが、Construct 2では、Stencylのようにオブジェクトとスクリプトを使ってゲームを作成できます。
   • Flash Builder - Flashゲームを作成するための伝統的な方法です。ActionScriptの知識がかなり必要ですが、基本を学ぶには簡単な言語のひとつです。Flash Builderにはお金がかかりますが、オープンソースのFlashDevelopプログラムを使えば、ほとんど同じ機能を得ることができます。

パート2

Stencylを使う

1. Stencylは、コーディングの知識を必要としないゲーム作成プログラムです。そのかわり、さまざまなロジックツールを使ってゲーム内のオブジェクトを操作することができます。

   • ゲームをオンラインで公開するだけなら、Stencylは無料で使えます。無料版では、最初にStencylのロゴが表示されます。有料版を入手すれば、他のプラットフォームにも公開できる。
2. 新しいゲームを作るStencylを起動すると、ゲームのリストが表示されます。そのリストにはいくつかのゲーム例があり、それを見てどのように動くかを確認することができます。自分のゲームを作り始めるには、"Click here to create new Game "と書かれた点線のボックスをクリックします。
3. キットを選択します.ゲームを素早く立ち上げるのに役立つ、あらかじめ用意されたアセットやオブジェクトを含むキットがいくつかあります。お好きなキットを選択するか、自作する場合は "Blank Game "を選択してください。

   • 他のユーザーが作成したキットをオンラインでダウンロードできます。
4. ゲーム情報を入力します。ゲームの作成を始める前に、いくつかの情報を入力する必要があります。

   • 名前 - ゲームの名前です。後で好きな名前に変更できます。
   • 画面サイズ - これはゲーム画面のサイズで、使用するアートに影響するため非常に重要です。ブラウザでプレイすることが多いので、画面サイズはそれほど大きくなくてもかまいません。幅：640px 高さ：480pxを試してみてください。このサイズから始めるのがよいでしょう。
5. レイアウトに慣れる。新しいゲームを最初にロードすると、ダッシュボードに移動します。ここでは、あなたのゲームのすべてのシーンを見ることができ、あらゆるリソースにアクセスすることができます。また、ここからゲーム設定を変更することもできます。あなたはほとんどの時間をダッシュボードで過ごすことになるでしょう。

   • Scenes - ダッシュボードのメインウィンドウで、実際のゲームと全てのアセットを表示します。あなたのゲームはシーンの集合体となります。
   • Resources - ゲーム内の全てのオブジェクトやアセットのリストです。アクター、背景、フォント、シーン、ロジック、サウンド、タイルセットなどが含まれます。リソースは画面左側のツリーで整理されています。
   • Settings - GameとSettingsオプションで、コントロール、重力、コリジョン、ローディングスクリーンなど、ゲームのメカニズムを調整できます。
6. アクタのカスタマイズアクタとは、ゲーム内で動いたり、相互作用できるオブジェクトのことです（プレイヤー、敵、ドアなど）。ゲーム内のオブジェクトごとにアクタを作成する必要があります。アクタを作成するには、Resources メニューの "Actor Types" オプションをクリックします。リストから必要なアクタを選択します (リストは選択したキットによって決まります)。

   • アクタを Group (Player, Enemy) に割り当てます。これにより、アクタのコリジョン プロパティが決定されます。アクタを選択してアクタ エディタを開きます。Properties タブをクリックし、ドロップダウンメニューから適切なグループを選択します。
   • ビヘイビア (ジャンプ、踏みつけ、歩行) を追加します。ビヘイビアは、アクタにアクションを実行させるものです。Behaviors（ビヘイビア）タブをクリックし、左下にある「+ Add Behavior（ビヘイビアの追加）」ボタンをクリックします。リストからビヘイビア（「歩く」など）を選択し、「選択」をクリックします。
   • コントロールを設定します。プレイヤーキャラクターを作成する場合、プレイヤーがキャラクターを動かせるようにしたいでしょう。Walkingビヘイビアを追加すると、Walking属性の画面になります。ドロップダウンメニューを使って、どのキーでアクタを左右に動かすかを選択できます。使用しているキットにアニメーションが含まれていれば、アニメーションを割り当てることもできます。
   • 複数のビヘイビアを追加して、アクタの動作をカスタマイズできます。
7. シーンを作成します。シーンは、プレイヤーがゲームをプレイするときに見るものです。背景や、表示されているオブジェクトやアクターです。新しいシーンを作成するには、ResourcesツリーのScenesオプションをクリックし、破線のボックスをクリックします。新しいシーンに名前を付けて続けます。

   • 背景 - あなたのシーンは自動的にサイズ調整されるので、今は気にする必要はありません。背景として色を選択することができ、その上にタイルが配置されます。無地かグラデーションから選べます。完成したら「Create」をクリックします。シーンデザイナーが開きます。
   • タイルを配置する - キットに含まれるタイルセットがウィンドウの右側に読み込まれます。左メニューの鉛筆ツールをクリックし、使いたいタイルをクリックします。タイルをシーンに配置することができます。マウスでクリックしてドラッグすると、複数のタイルを配置できます。
   • アクタの配置 - タイルセットの上にある Actors タブをクリックすると、使用可能なアクタに切り替わります。このリストに表示させるには、以前にアクタを作成しておく必要があります。配置したいアクタをクリックし、シーンのどこに表示させたいかをクリックします。Shift を押しながらクリックすると、アクタはグリッドにスナップします。
   • 重力の追加 - ウィンドウ上部の "Physics "タブをクリックし、"Gravity (Vertical) "フィールドに値を入力します。85と入力すると、現実世界の重力をシミュレートします。
8. ゲームをテストする。シーンを作成してアクタを配置したら、ゲームをテストできます。画面上部の "Test Game "ボタンをクリックすると、今までのゲームをプレイすることができます。アクター作成時に設定したキーで、プレイヤーキャラクターを操作できます。

   • うまく動かない部分があれば、それを修正してみてください。例えば、敵の挙動は正しいですか？敵を倒すことはできますか？到達できないプラットフォームや越えられない溝はありませんか？ゲームエディタの該当エリアに戻り、見つけた問題を修正してください。少し時間がかかるかもしれませんが、最終的にはもっと楽しく、プレイしやすいゲームになるでしょう。
9. さらに追加する。さて、プレイ可能な最初のシーンができたら、次はゲーム全体を作り始めましょう。レベルやチャレンジを追加し、追加したものが楽しく、正しく動作することを確認するためにテストを続けましょう。
10. ゲームをサイトロックしましょう。Flashゲームをホストしているサイトにゲームをアップロードする場合、または自分のサイトにアップロードする場合は、"サイトロック "を有効にすることをお勧めします。これにより、許可されていないサイトではゲームがプレイできなくなります。

    • Resources "ツリーから "Game Settings "を開きます。Loader" セクションを選択します。Site Lock "フィールドに許可したいサイトをスペースなしのコンマで区切って入力します。たとえば、newgrounds.com、kongregate.com。
    • この画面では、"あなたのホームページ "フィールドにあなたのホームページを入力している場合.これは、あなたのゲームをプレイするプレイヤーがあなたのサイトにリンクされるようになります。
11. ゲームをFlashとしてエクスポートする。ゲームが完成したら、Flash形式にエクスポートします。これにより、Flashゲームをホストしているサイトや、あなた自身のウェブサイトにゲームをアップロードすることができます。Publish select Webをクリックし、Flashをクリックします。ファイルをコンピュータの見やすい場所に保存します。
12. ゲームを公開します。Flash(.SWF)ファイルを入手したら、お好みのホストにアップロードします。オンライン上には、Flashゲームをホストするさまざまなサイトがあり、あなたのゲームで広告収入を得ることができるサイトもあります。また、自分のウェブサイトにゲームをアップロードすることもできますが、ゲームの人気が出た場合にプレイヤーに対応できる帯域幅を確保する必要があります。

    • 自分のウェブサイトにゲームをアップロードする方法を参照してください。
    • あなたはNewgroundsやKongregateのようなサイトにゲームをアップロードしたい場合は、アカウントを作成し、サイトのアップロードプロセスを通過する必要があります。利用規約はサイトによって異なります。
    • Stencyl Arcadeにゲームを公開したい場合は、Stencyl Programからできます。Publish select Stencylをクリックし、Arcadeをクリックします。ゲームは自動的にアップロードされるので、この作業を行う前に名前に満足していることを確認してください。Stencyl Arcadeには8MBのファイルサイズ制限があります。

パート3

Construct 2を使う

1. Construct 2をダウンロードしてインストールします。このプログラムでは、ほとんどコーディングすることなくHTML5ゲームを作成できます。いくつかの変数を割り当てる必要がありますが、これはすべてメニューを通して行われ、実際のコーディングは必要ありません。

   • Construct 2は無料ですが、アップグレードしない限り、いくつかの機能が制限されます。無料版では、HTML5以外のプラットフォームへのパブリッシュはできません。
2. 新規プロジェクトの作成Construct 2を初めて起動すると、ようこそメニューが表示されます。New Project "リンクをクリックすると、新しいゲームが始まります。また、基本的なゲームがどのように作成されるかを確認できるサンプルもいくつか含まれています。

   • 新しいプロジェクトを作成すると、テンプレートのリストが表示されます。最初のプロジェクトは、空のプロジェクトから始めるといいでしょう。そうすることで、テンプレートに邪魔されることなく、基本的な操作のコツをつかむことができます。
3. プロジェクトの設定を調整します。プロジェクトウィンドウの左側のフレームに、プロパティという項目があります。これを使って画面サイズを設定したり、ゲームや会社の情報を入力したりできます。
4. 背景を挿入します。レイアウトをダブルクリックします。Generalセクションから「Tiled background」を選択します。レイアウトをクリックして背景を配置します。背景エディターが開きます。画像編集ソフトを使って自分で作成するか、オンラインのさまざまな場所からテクスチャをダウンロードする必要があります。

   • 背景をレイアウトのサイズに設定します。背景オブジェクトを選択し、プロパティフレームでサイズを変更します。
   • レイヤー名を変更し、ロックします。他のオブジェクトを配置している間に誤ってレイヤーを動かしてしまわないように、レイヤーをロックしておきます。画面右側の "レイヤー "タブをクリックします。レイヤーを選択し、鉛筆アイコンをクリックします。レイヤー名を「背景」とし、「南京錠」ボタンをクリックして背景をロックします。
5. 新しいレイヤーを作成します。レイヤータブで、「+」ボタンをクリックして新しいレイヤーを作成します。名前を「メイン」に変更します。このレイヤーが、ほとんどのゲームオブジェクトが存在するレイヤーとなります。続行する前に、Mainレイヤーが選択されていることを確認してください。
6. ゲームの入力を追加します。Construct 2では、インプットをオブジェクトとしてゲームに追加する必要があります。これらは不可視で、プロジェクト全体でキーボードとマウスを使用できるようにします。

   • レイアウトをダブルクリックし、Inputセクションから "Mouse "を選択します。同じようにして、"Keyboard "オブジェクトを挿入します。
7. オブジェクトを追加します。いよいよ、レイアウトにゲームオブジェクトを追加していきます。レイアウトをダブルクリックし、Generalセクションから "Sprite "を選択します。十字キーでスプライトを配置する場所を選びます。イメージエディターが開き、既存のスプライトを読み込むか、新しいスプライトを作成することができます。

   • レイアウト上でスプライトを選択すると、スプライトのプロパティが左のフレームに読み込まれます。スプライトの名前を変更することで、スプライトを識別したり参照したりしやすくなります。
8. オブジェクトにビヘイビアを追加するビヘイビアを追加するには、ビヘイビアを追加したいオブジェクトをクリックして選択します。プロパティ」フレームの「ビヘイビア」セクションにある「追加／編集」リンクをクリックします。利用可能なビヘイビアのリストが表示されます。

   • ビヘイビアはあらかじめ設定されたロジックで、オブジェクトにすばやく機能を追加することができます。さまざまな機能を実行できる、多種多様なビヘイビアから選択できます。たとえば、床をソリッドにするには、「ソリッド」ビヘイビアを設定します。プレイヤーキャラクターを8方向に動かすには、「8方向移動」ビヘイビアを指定します。
9. ビヘイビアプロパティの変更。既存のビヘイビアを編集して、オブジェクトの動作方法をカスタマイズできます。値を変更することで、スピード、方向、その他のプロパティを変更できます。
10. イベントの仕組みを理解する。イベントは条件のリストで、ゲームを動かすものです。条件が満たされれば、イベントが発生します。条件が満たされなければ、イベントは発生しない。イベント・シートは通常、1秒間に60回ほど実行されます。実行されるたびに "tick "と呼ばれます。
11. イベントを作成する。空白のイベント・シートをダブルクリックします。使用可能なオブジェクトのリストが表示されます。イベントを作成したいオブジェクトを選択するか、システム・イベントを作成します。

    • アクションが発生するタイミングを選択します。オブジェクトを選択した後、イベントが発生するタイミングを選択するよう求められます。これは、他のイベントを基準にすることも、特定の時間にすることもできます。"Every tick "は常にです。
    • アクションを追加します。オブジェクトを1つ選択するよう求められます。アクションのリストから選んでください。例えば、トップダウンシューティングゲームを作っていて、プレイヤーのキャラクターが常にマウスを見ているようにしたい場合、Playerオブジェクトに設定されたティックごとに「Set angle towards position」アクションを作成します。座標を聞かれたら、Xに "Mouse.X"、Yに "Mouse.Y "と入力します。これで、プレイヤーの自機は常にカーソルの方を向いている状態になります。
12. さらにイベントとビヘイビアを追加する。これらはあなたのゲームのバックボーンです。ビヘイビアやイベントを追加したり微調整したりすることで、ユニークで楽しいゲームを作ることができます。さまざまなイベントを試して、思い通りのゲームができるようにしましょう。
13. 変数を追加する。Construct 2には、インスタンス変数とグローバル変数の2種類の変数があります。インスタンス変数とグローバル変数です。インスタンス変数では、オブジェクトやゲームのカスタム値（体力、制限時間、スコアなど）を設定できます。

    • インスタンス変数 - インスタンス変数は、1つのオブジェクトに割り当てられる変数です。敵やプレイヤーのヘルスなどに使われます。オブジェクトを選択した後、PropertiesフレームのVariablesセクションにある "Add / edit "リンクをクリックすることで、インスタンス変数を追加することができます。変数にはイベントで参照できる名前と初期値をつけましょう。
    • グローバル変数 - グローバル変数はゲーム全体に割り当てられる変数です。プレイヤーのスコアなどに使用されます。グローバル変数を作成するには、Eventシートを開き、空白のスペースで右クリックします。Add global variable "をクリックし、イベントで参照できる名前をつけ、初期値を入力します。
14. インターフェイスを作成する。インターフェイスを作成するときは、通常、新しいレイヤーで作成するのがベストです。というのも、インターフェイスが移動したり変更されたりすることはめったにないので、ロックされたレイヤーに作成するのがよいからです。新しいレイヤーのプロパティフレームで、"視差 "を0に設定します。これにより、画面がスクロールしてもレイヤーがスクロールしないようになります。

    • テキストボックスと変数を使用してインターフェイスを作成します。テキストボックスには、残り体力、スコア、弾薬など、プレイヤーが定期的に見る必要のあるものを表示するように設定できます。
15. ゲームのテストと修正イベントとビヘイビアを持ったオブジェクトがいくつか画面に表示されたので、テストとコンテンツの追加を始めましょう。画面上部の "Play "ボタンをクリックして、ゲームを作ってテストしてみましょう。うまくいかなかったところをメモしておき、ゲームがプレイできて楽しいものになるように修正しましょう。
16. ゲームをエクスポートする。ゲームに満足したら、エクスポートしてウェブサイトにアップロードし、誰でもプレイできるようにすることができます。ゲームをエクスポートするには、ファイルメニューをクリックし、エクスポートを選択します。プロジェクトを簡単に見つけられる場所に保存します。
17. ゲームを公開する。HTML5ゲームをアップロードして、他の人にプレイしてもらうことができるサイトがいくつかあります。また、自分のウェブサイトにゲームを追加することもできます。自分のウェブサイトにゲームをアップロードする方法については、こちらを参照してください。

パート4

ゼロからコーディングする

1. Game Maker Studioなど、HTMLをサポートするプログラミングIDE（統合開発環境）をダウンロードする。無料で利用できるものもありますが、多くの優れたIDEは数百ドルします。
2. IDEの使い方を学ぶ。自分の環境でプログラミングを学ぶことは非常に重要だ。一般的なコードのほとんどを暗記し、適切な実装方法を学ぶには、数週間から数ヶ月かかることもある。忍耐強くやれば、必ず報われる！
3. 準備ができたと思ったら、ゲームを作りましょう。デザイン・ドキュメントを作ったり、アイデアを書き留めたりするのは素晴らしいスタートです。ゲームのプログラミングには数ヶ月かかることもあるし、本当に本気でヒット作を作ろうと思えば1～2年かかることもある。
4. ゲームをテストする。クレイジーなことや予想外のことを試してみて、できる限りバグをつぶしてください。また、ゲームプレイが思い通りになっているかどうか、あるいは戻って変更を加える必要があるかどうかも見極めよう。
5. 公開する！Kongregateのようなウェブサイトでオンラインゲームを公開しましょう。建設的な批評を覚悟する必要がありますし、プレイヤーベースの希望に沿うようにゲームをアップデートするのもよいでしょう。

この記事は、CC BY-NC-SAの下で公開された「 オンラインゲームの作り方 」を改変して作成しました。特に断りのない限り、CC BY-NC-SAの下で利用可能です。