ちょっとしたゲームセンターゲーム制作講座

ゲーム制作講座

制作講座目次 / PREV（タイマーを使いこなせ） / NEXT（配列/evalを使いこなせ） / トップページ / text mode

1.ゲームを作る順序

★何から手をつけるべきか？

さあ、ようやく応用編です。ここまで来るのに、何ヶ月かかったんだろう…（遠い目）。
さて、Basic Course のところでは、技術的なことをいくつかやってきましたが、実際ゲームを作るには、何をすべきかということを書き忘れていました(^^;。
プログラミングに慣れていないと、何からやっていいのか分からず、行き詰まることもあります。そこで、私が一般的に行っているゲーム作りの順序を紹介しますので、参考にしてください。
もちろん、作り方は人によって、ゲームによって異なります。

なお、作る順序については、「命令からゲームを作る」も参考にしてください。

★1.とりあえず考える

まず、どんなゲームを作りたいか考えます。当たり前ですね。ゲームのアイデアの出し方については、「アイデアはどこから出るか？」に詳しく書いています。
しかし、考えるだけでは先に進みません。設定を紙に書いてみることをおすすめします。ここで考えるべき項目は、

画面イメージ
ゲームの流れ
イベントの内容
スコア計算方法
（パズルゲームなら）問題集

などです。
上の写真は、私が今まで作ったゲーム（と、これから作る予定のゲーム）の設定を紙に書いたものです。残念ながら、都合により資料の拡大はできません（笑）。

本邦初公開！設定資料集

★2.絵を書く

私の場合、大体の設定ができたら、まずは画像から作っていきます。絵から書き始めるのは、ゲームのイメージがわきやすくなるからです。この時注意しなければいけないのは、書く前に画像のサイズを決定しておく必要があるのと、作る画像は透過にさせるかさせないかを決めておかなければいけないことです。この作業を何度もしてしまわないためにも、設定を決めるときは念入りに行ってください。

★3.絵を並べる

絵ができたら、HTMLを使って画像を並べます（私の場合は、時によってDHTMLも使います）。この時並べる画像は、タイトル画面ではなく、ゲームプレイ中の画面です。また、画像以外の要素（フォームなど）もこのときに並べます。この時点では、JavaScriptは1行も書いていません。

画像を並べるときにレイアウトが必要となりますが、思い通りの位置に配置するのに<table>タグが便利です。<table border=0 cellspacing=0 cellpadding=0>でテーブルを作って画像を配置すれば、隙間もできずきれいにレイアウトされます。

★4.プログラミング

HTMLが大体できれば、今度はJavaScriptを書いてその画像を動かす作業に入ります。リンクなどを使って、<a href="JavaScript:関数名();">をHTMLに追加し、関数を実行させます。具体的なプログラミング方法については他の章を参照してください。

★5.バグ取り・テストプレイ

プログラムには必ずと言っていいほどバグ（エラー）が発生します。テストプレイをすることでバグを取ります。バグを見つけるために、プログラム中の任意の所に alert(変数名) を入れて、変数がおかしくなっていないかをチェックします。また、タイマーを設定する代わりにタイマー関数を何度もクリックすることでプログラムの流れを順番に見たりします。テストプレイは、好きなパラメータで何度でもプレイできる作者の特権ですが、だんだんプレイしているうちに飽きてきます(^^;。

★6.公開

バグが大体取れれば完成、そして公開です。お疲れ様でした。

…でもバグって、公開してから見つかることが多いんですよね。

制作講座目次 / PREV（タイマーを使いこなせ） / NEXT（配列/evalを使いこなせ）