Skip to content

第2回 Processing.js で初めてのゲームプログラミング

第2回目のProcessing.js でゲームプログラミングです!

前回はマウスカーソルの位置にラインを引くというプログラムまで作成しました。今回はそれを発展させていき、ゲームを作っていこうと思いますよ!

と、その前に、ちょっとだけ、用語の再定義をさせてください。第一回では line 命令とか、draw 命令とか言ってましたが、じつはこれ、正しくは「関数」といいます。line 関数とか、draw 関数とかよびます。最初から、関数っていうとちょっとイメージをとらえにくいかな?とおもったので、最初は命令ってよんでみましたが、今後のことも考えて、これからは関数という呼び方に統一したいと思います。また、この関数に渡す数値のことを「引数(ひきすう)」といいます。たとえば、

line(0, 0, 200, 300);

この場合、line 関数には、4つの引数がわたされているわけですね。あと、関数は戻り値という名の値を1つ、戻すことができます。この戻り値こそが、単に命令ではなく関数と言っている所以でもあります。細かくいうと、引数という入力に対し、戻り値を返すのが関数というわけですね。ただ、戻り値も引数もない関数もありますので、必ずそうとは限りませんが。と、この辺は細かい話なので、理解できなくてもOKです。よくわからなくても問題ないので気にしないで、先に進みましょう。

簡単な図を用意しました。細かく言うと微妙な点もありますが、大体こんなかんじです。
関数と引数と戻り値

お待たせしました、いよいよ本題。ゲームを作ってみましょう!

では、どんなゲームをつくりましょうか?入門用のゲームはいろんなモノが考えられるのですけれど、最近の若い人達には、「弾幕シューティング」が人気のようです。マジです。専門学校でのアンケート結果なので、ある程度は正しいと思います。今回、せっかくなら人気のジャンルのプログラムを作ってみるほうが多くの人に興味を持ってもらえる気もするので、まずは弾幕シューティングを目指して作ってみましょう!ただ、本格的な弾幕ゲームはなかなかしんどいので、弾幕「風」シューティングくらいを目指すことにしましょうか。

なんといってもシューティングゲームの場合、なにはともあれ自機を表示して動かする必要があります。これは、前回のプログラムを応用して、ちょいちょいとつくってしまいましょう。自機は、とりあえず三角を表示することにしましょう。三角形の描画には、triangle 関数を使いますよ。

void setup() {
   size(320, 320); // 9leap のレギュレーションのウィンドウサイズ
   frameRate(30);
}
void draw() {
  background(0);
  stroke(255, 255, 0);
  fill(255,255,0);
  triangle(mouseX, mouseY - 7, mouseX - 10, mouseY + 7, mouseX + 10, mouseY + 7);  
}

サンプルプログラム02-1

ここであと出てきた新しい関数はもう一つ。triangle 関数の前にでている fill 関数です。じつはこれまで説明してきませんでしたが、Processing にはstorke によって指定される線の色と、fill によって指定される塗りつぶしの色の2種類があるんですね。line は線だけなので、fill の値は関係ないのですが、traiangle や、四角形の rect など塗りつぶしの領域がある図形の場合は、fill の色で塗りつぶされます。ちなみに、塗りつぶしたくない場合などは、 noFill という関数をよべば、塗りつぶされなくなりますよ。(これは、stroke もいっしょで、noStorke 関数をよべば周りの線がかかれなくなります)なんか、下手に塗りつぶすより、ラインだけの方がカッコイイ気がしなくもないので、noFill で、いこうかな。

簡単に図解を作成してみました。
strokeとfill

それと、ソース中に // から続く部分があると思うのですが、これは「コメント」と呼ばれているもので、プログラムが無視する領域を指定してあげるものです。プログラムなのに、なんで無視する部分を指定するのかっていうと、それは人間のためなんですね。

あとからまたプログラムを読んだ時や、他人がプログラムを見るときの為にメモをのこして置くのです。

チョイチョイと、あっというまに自機が動くようになりましたね。では、シューティングゲームなので自機は攻撃できるようにする必要があります。避けるだけのシューティングゲーム(それはシューティングなの?)というゲームもありましたが、それはそれ。移動がマウスですから、攻撃もマウスで行うようにしたい所です。なので、クリックしたら、自機からレーザーが出るようにしてしまいましょう!

void setup() {
  size(320, 480);
  frameRate(30);
  noCursor();  // clear mouse cursor
}        
void draw() {
  background(0);
  stroke(255,255,255);
  noFill();
  triangle(mouseX, mouseY -7, mouseX -10, mouseY +7, mouseX +10, mouseY +7);
  if (mousePressed) { // check click
    line(mouseX, mouseY - 7, mouseX, 0); // draw beam
  }
}

サンプルプログラム02-2

どうですか?マウスをクリックしたらレーザーがでるようになりました!今回の変更のポイントは2つ。if 文mousePressed システム変数の組み合わせです。if 文は、それにつづく条件式(この場合は mousePressed)が成立していれば、if に続くブロック({} で囲まれた部分)を実行してくれます。どんなプログラムではとても良く使います。また、mousePressed はマウスのボタンが押されていたら(条件式が成立)、そうでなければ(条件式が不成立)の値を自動的にとってくれるシステム変数です。こうすることによってマウスのボタンが押されているかどうかプログラムで調べることが可能になり、と、いうことは、あわせてその際にいつもとは違う振る舞いをさせることができるようになるわけですね。これぞ、if 文とシステム変数の組み合わせの醍醐味です。

あ、あと setup 関数の中にも新しい関数が出現しています。noCursonr 関数で、これは一度この関数をよぶと、キャンバス上にマウスが来た際にマウスカーソルを消してくれます。マウスカーソルが、ちょっとうざったくなってきたので、消しちゃいました。ゲームだと、マウスカーソルはいらない場合が多いから、簡単に消せるのは、便利です。

いよいよ敵を出そうかと思ったのですが、自機がだいたい完成したので、ちょっとはやいかもですが、第2回はここで区切りにして、第3回に続けたいと思います!では、またー

このエントリーをはてなブックマークに追加
はてなブックマーク - 第2回 Processing.js で初めてのゲームプログラミング
Post to Google Buzz
Share on GREE

Related posts:

  1. 第1回 Processing.js で初めてのゲームプログラミング
  2. お絵描きアプリで学ぶHTML5のCanvas超速入門 #1
  3. shi3z式ゲームプログラミング入門 #2 あと48時間でゲームプログラマになる方法
  4. お絵描きアプリで学ぶHTML5のCanvas超速入門 #2 iPhoneで行こう
  5. shi3z式ゲームプログラミング入門 #3 “ゲームらしく”する

Facebook comments:

Post a Comment

Your email is never published nor shared. Required fields are marked *
*
*