みなさん、はじめまして。南治(なんじ）といいまして、ビサイドという会社で、PlayStation用やiPhoneのゲームなどを作っています。トロチチとか呼ばれることもあります。
最近、wise9 のサイトには続々とプログラミングの記事がアップロードされているので、審査員に任命してもらった私もなにか書きたい！ということで shi3z さんにお願いして、記事を書かせてもらうことになりました。ただ、すでに enchant.js という強力なゲームライブラリが提供されているので、どういう内容にしようかと迷ったのですけれど、自分はenchant.js でもチョット難しいと感じるくらいの人たち向けに、ゲームプログラム入門の話を進めていこうと思っています。なので、すでに enchant.js でバリバリにゲームを作り始めている人には、ちょっと物足りないかもしれないですが、よろしくお願いします！
とはいえ、ただの入門になっては面白くないし、せっかくなのでコンテストのレギュレーション内に収まる環境でのプログラムはつくれるようにしたい。と思いまして、自分が経験のあるいくつかのプログラミング環境の中から Processing.js を使ったブラウザでのゲームプログラミングのを話にすることにしました。
Processing.js は Processing というプログラミング言語の HTML5＆Javascript での実装にあたります。で、そのProcessing を簡単に紹介するとプログラマではないアーティストの人たちがメデイアアートを簡単に作成できるように考えられた言語なんですね。そのコンセプトおかげで、非常に簡単に絵を書いたり、動かしたり、音楽を鳴らしたりする事ができるように設計されており、また様々な入力（キーボード／マウス／カメラ等）を処理する機能もあります。コチラなどで、その作品を見ることが出来ます。そして、このその特徴はそのまま、ゲームも簡単に作れるということにつながるわけですね。なぜなら、画面に表示されたもの、画面で動くものに対しての入力を受け取り、反応を返すというインストラクションはそのままゲームのプログラムとほとんどおんなじだからです！
前置きはこのくらいにして、早速、Processing.jsのプログラムを書いてみましょう。
これは、line 命令１行だけのプログラムです。どんな動きをするかというと、キャンバスの左上（0,0) の点から、右下 (100,100) へラインを引くという１行のプログラムです。この、たった一行だけでもきちんと動作させて、確認できることが Processing.js の特徴の一つでもあります。8bit 時代のパソコンを使った事がある人は、「BASIC みたいだなー」というような感想を持たれるかもしれないですね。そう、同じくらい、Processing.js は手軽にプログラムを動かすことができるんですよ。
このプログラム、以下ののリンクから簡単に実行して、動作を確認してみましょう。リンクの先の右下、”RUN”ボタンを押してみてください。左側にウィンドが表皮され、プログラムが動きますよ。
また、右側のソースコードの部分は、その場で編集して、なんどもでも再実行することが出来るんです。ちなみに、数学などの座標と異なり、Y座標は下方向が＋（プラス）、上方向がー（マイナス）になっています。X座標の向きは変わりません。そこが数学とは違うので、注意しましょう。
動かしてみましたか？なんだか、ちょっとキャンバス（ウィンドウ）が狭い感じがしませんか？キャンバスの大きさの設定は、下記の様にすると変更できます。
line(0,0,width,height);
今度はプログラムが２行になりました。size 命令をつかうと、キャンバスを好きな大きさに設定でるのです。モチロン、正方形である必要もなくて、縦長でも横長でもOKです。適当に数字を変えてみましょう。また、line 文で新しく使われている width と height という２つの単語ですが、これはキャンバスの横幅、縦幅の値を取るシステムで設定されている変数です。そういう変数を「システム変数」といいます。こういう風に、数値を直接指定せずに、システム変数にしておく事で、size 文でどんな大きさのキャンバスになっても、左上(0,0) から右下に線が引かれるようになるというわけですね。
では、もうちょっと複雑なプログラムを書いてみましょう。これは、シン石丸氏が、新しい開発環境では必ず試すと言っているプログラムです。
for(int x; x < width; x += 2) {
line(x, 0, width - x, height);
}
for(int y; y < height; y += 2) {
line(0, y, width, height - y);
}
どうでしょう？これは、for という繰り返しの命令で、ラインを引く場所をすこしづつ変えながら線を描いてみたサンプルです。なかなか、キレイですね。
ここまでは、絵を書いて終わりだったのですが、いよいよ次のからはユーザーの入力に反応を返すようなプログラムに改造していきたいと思います。
まず、これまでと大きな変更点として、ユーザーからの入力を受け取るためにはプログラムがずっと動いている必要があるのです。これまでの書き方では、線を描き終わったらプログラムが終了してしまいますので、Processing.js に用意してある特別な２つの命令をつかうことで、プログラムを動かし続けるようにしてしまいましょう。
size(250, 250);
frameRate(20);
}
void draw() {
background(0);
stroke(255, 0, 0);
line(0,0, mouseX, mouseY)
}
用意してある２つの特別な命令 setup 命令と draw 命令です。setup はプログラムが動き始めて、最初に一度だけ実行して欲しいものを指定します。そして、draw 命令は、frameRate 命令で指定された回数だけ自動的に呼び出される命令です。なので、ずっと動きつづけたい部分に関しては、この draw 命令の中にかいておけばいいという事になるわけですね！
で、draw 命令の中には３行のプログラムが描かれています。順に解説すると
backgournd 命令これは、キャンバスを指定した色で塗りつぶします。0 なので真っ黒です。
stroke 命令はこれから描画するライン等の色を指定します。Processing では一部の例外を除き、個々の描画命令に色の指定はありません。事前に stroke 命令で描画の際に使用する色を指定しておく必要があり、変更しないかぎり、ずっとその設定が引き継がれます。じっさいの世の中で、ペンを選ぶような動作だと思ってもらえると、わかりやすいと思います。
で、じつは今回の backgournd 命令が一部の例外の命令であり、これは画面を塗りつぶすという特殊な命令であるため、色の指定があり、その色はそのまま storke の色としても引き継がれるため、backgournd 命令の後に storke 命令で色をしていないと、塗りつぶした色と同じ色でびょうがされてしまい、何も描かれてないように見えるという自体が発生してしまうのです。（ぜひ、ここでstorke 命令や、backgournd命令をを消して、実行してみてください。それぞれの挙動の理解がふかまるとおもいます）
そうそう、stroke 命令には、３つの数字を渡していますね。これ、じつは RGB の数値になっていて、最初から順に赤、緑、青 の色の度合いなんですよ。範囲は ０〜 ２５５までです。この数字を色々と変更してみると、色が変わりますので、ゼヒ、試してみてください。また、今回は指定していませんが、４つめのパラメーターを指定すると透明度も指定できますよ。あ、あと忘れていましたが、１つだけ数値を指定した場合には、RGBがすべて同じ値が指定されたとみなされます。なので、０だと、真っ黒。２５５だと、真っ白になるというわけです。
このRGBAでの色の指定や、作り方はコンピュータではとても基本的な考え方で重要です。ゲームでは特に、色を操作することも多いので、よく理解しておいてください。なお、上記の絵に 新しく color 命令が出てきています。これはProcessing 内で、色を扱う場合、このcolor命令で色をつくって渡したりしますので、覚えておきましょう。モチロン、stroke にもcolor を与えてもだいじょぶですよ。（ちなみに、このRGBAの４つの数字を１６進数で表記した ＃RRGGBBAA という形式でも簡単に略記できます。参考まで）
最後の line 命令はもう、おなじみですね。ただし、新しく mouseX と mouseY という単語が出てきました。これは width、height と同じく Processing のシステムが提供しているシステム変数で、マウスのX座標と、Y座標が入っています。なので、この２つの値を line 命令に渡してやると、キャンバスの左上(0,0) から、マウスカーソルの位置にラインがひかれるというわけなんですね。
いかがだったでしょうか？ちょっとした約束事の組み合わせでユーザーの入力に合わせて動作するプログラムを作ることが出来ました。
ゲームになるにはもうひといきですが、なんだかゲームも簡単にできちゃいそうな気がしませんか？最後に、今回出てきた要素を全部入れてみたプログラムを作ってみました。こちらは、解説しませんので、イロイロといじって試して遊んでください。
と、いうわけで最初の入門とも言うべき、第１回はこれでおわりです。興味がある人は、Processing.js のサイトを覗いてみてください。すっごくたくさんのサンプルプログラムがあるので、それらを眺めて、実行してみるだけでも色々と面白いし、ためになると思いますよ！
Processing.js の特徴はこれまで見てきてもらったように、プログラムがかなりシンプルにコンパクトに書けるということと、たくさんのサンプルがある事、などなどが、Processing の特徴でもあります。また、気が向いたら、PC上で直接動作する オリジナルの Processing の方もダウンロドードしてあそんでみるといいかもしれませんね。
では、次回の第２回では、地味でしょうがないこのラインが引かれるだけのプログラムをもっとゲームっぽくしていきたいと思っています。ではでは！
Related posts:
Post a Comment