ゲームプログラミングみなさん、はじめまして。南治(なんじ)といいまして、ビサイドという会社で、PlayStation用やiPhoneのゲームなどを作っています。トロチチとか呼ばれることもあります。さんにお願いして、記事を書かせてもらうことになりました。難しいと感じるくらいの人たち向けに、ゲームプログラム入門の話を進めていこうと思っています。ゲームを作り始めている人には、ちょっと物足りないかもしれないですが、よろしくお願いします!とはいえ、ただの入門になっては面白くないし、せっかくなのでコンテストのレギュレーション内に収まる環境でのプログラムはつくれるようにしたい。使ったブラウザでのゲームプログラミングのを話にすることにしました。簡単に紹介するとプログラマではないアーティストの人たちがメデイアアートを簡単に作成できるように考えられた言語なんですね。そのコンセプトおかげで、非常に簡単に絵を書いたり、動かしたり、音楽を鳴らしたりする事ができるように設計されており、また様々な入力(キーボード/マウス/カメラ等)を処理する機能もあります。コチラなどで、その作品を見ることが出来ます。このその特徴はそのまま、ゲームも簡単に作れるということにつながるわけですね。画面に表示されたもの、画面で動くものに対しての入力を受け取り、反応を返すというインストラクションはそのままゲームのプログラムとほとんどおんなじだからです!前置きはこのくらいにして、早速、Processing.jsのプログラムを書いてみましょう。命令1行だけのプログラムです。ラインを引くという1行のプログラムです。特徴の一つでもあります。みたいだなー」というような感想を持たれるかもしれないですね。手軽にプログラムを動かすことができるんですよ。このプログラム、以下ののリンクから簡単に実行して、動作を確認してみましょう。リンクの先の右下、”RUN”ボタンを押してみてください。左側にウィンドが表皮され、プログラムが動きますよ。サンプルプログラム01-1また、右側のソースコードの部分は、その場で編集して、なんどもでも再実行することが出来るんです。ちなみに、数学などの座標と異なり、Y座標は下方向が+(プラス)、上方向がー(マイナス)になっています。X座標の向きは変わりません。そこが数学とは違うので、注意しましょう。動かしてみましたか?なんだか、ちょっとキャンバス(ウィンドウ)が狭い感じがしませんか?キャンバスの大きさの設定は、下記の様にすると変更できます。250);line(0,0,width,height);サンプルプログラム01-2今度はプログラムが2行になりました。命令をつかうと、キャンバスを好きな大きさに設定でるのです。正方形である必要もなくて、縦長でも横長でもOKです。適当に数字を変えてみましょう。いう2つの単語ですが、これはキャンバスの横幅、縦幅の値を取るシステムで設定されている変数です。いう変数を「システム変数」といいます。右下に線が引かれるようになるというわけですね。複雑なプログラムを書いてみましょう。これは、シン石丸氏が、新しい開発環境では必ず試すと言っているプログラムです。いう繰り返しの命令で、ラインを引く場所をすこしづつ変えながら線を描いてみたサンプルです。ここまでは、絵を書いて終わりだったのですが、いよいよ次のからはユーザーの入力に反応を返すようなプログラムに改造していきたいと思います。これまでと大きな変更点として、ユーザーからの入力を受け取るためにはプログラムがずっと動いている必要があるのです。用意してある特別な2つの命令をつかうことで、プログラムを動かし続けるようにしてしまいましょう。プログラムが動き始めて、最初に一度だけ実行して欲しいものを指定します。命令で指定された回数だけ自動的に呼び出される命令です。命令の中には3行のプログラムが描かれています。命令これは、キャンバスを指定した色で塗りつぶします。命令はこれから描画するライン等の色を指定します。一部の例外を除き、個々の描画命令に色の指定はありません。命令で描画の際に使用する色を指定しておく必要があり、変更しないかぎり、ずっとその設定が引き継がれます。じっさいの世の中で、ペンを選ぶような動作だと思ってもらえると、わかりやすいと思います。命令で色をしていないと、塗りつぶした色と同じ色でびょうがされてしまい、何も描かれてないように見えるという自体が発生してしまうのです。命令や、backgournd命令をを消して、実行してみてください。命令には、3つの数字を渡していますね。色の度合いなんですよ。この数字を色々と変更してみると、色が変わりますので、ゼヒ、試してみてください。今回は指定していませんが、4つめのパラメーターを指定すると透明度も指定できますよ。あ、あと忘れていましたが、1つだけ数値を指定した場合には、RGBがすべて同じ値が指定されたとみなされます。255だと、真っ白になるというわけです。このRGBAでの色の指定や、作り方はコンピュータではとても基本的な考え方で重要です。ゲームでは特に、色を操作することも多いので、よく理解しておいてください。命令が出てきています。内で、色を扱う場合、このcolor命令で色をつくって渡したりしますので、覚えておきましょう。与えてもだいじょぶですよ。いう形式でも簡単に略記できます。命令はもう、おなじみですね。いう単語が出てきました。システムが提供しているシステム変数で、マウスのX座標と、Y座標が入っています。マウスカーソルの位置にラインがひかれるというわけなんですね。いかがだったでしょうか?ちょっとした約束事の組み合わせでユーザーの入力に合わせて動作するプログラムを作ることが出来ました。ゲームになるにはもうひといきですが、なんだかゲームも簡単にできちゃいそうな気がしませんか?最後に、今回出てきた要素を全部入れてみたプログラムを作ってみました。こちらは、解説しませんので、イロイロといじって試して遊んでください。5と、いうわけで最初の入門とも言うべき、第1回はこれでおわりです。サイトを覗いてみてください。方もダウンロドードしてあそんでみるといいかもしれませんね。次回の第2回では、地味でしょうがないこのラインが引かれるだけのプログラムをもっとゲームっぽくしていきたいと思っています。