初心者のためのゲームプログラミング入門

プログラミングとゲームの杜

初心者のためのプログラミング入門 & ゲームプログラムの作り方入門

Processing 入門

9.みどりを救えゲームを作ろう

 

今までの説明で Processing がどんなものか少し分かってきたと思います。
これからはゲームの作り方を題材にやっていきます。
Processing よりもゲーム制作に適した開発環境はたくさんありますが
やはり何か目的をもった方が勉強しやすいので
ゲームの作り方を学んでいきましょう。

 

 

どんなゲーム?

初めてのゲーム制作なので、できるだけシンプルにしました。
演出なども入れません。
落下するみどりの四角を拾うゲームです。

 

みどりを救えゲームの作り方

 

ゲームのルール

・画面下部の自機(白い四角)を左右に動かし、みどりの四角を拾う
・赤い四角と接触するとHPマイナス
・みどりの四角を拾えないとHPマイナス
・みどりの四角を拾うと得点

 

学習方法は、プログラムを入力し実行しながら動作を確認するだけです。
いろいろと試してみたい人は、プログラムをそのまま入力する学習用と
改造して色々と試す実験用の2つにファイルを分けて作るといいかもしれません。

 

 

新規のファイルを保存する

Processing を起動して次のプログラムを入力しましょう。
もう、おなじみのパターンですね。

 

初心者向けのゲーム作成

 

 

ここでプログラムの保存をします。
メニューの「ファイル」をクリック、そして「名前を付けて保存」をクリックします。

 

ファイルの保存方法

 

 

保存するファイル名は好きな名前でかまいません。
ここでは savegreen01 としました。
後ろに番号を付けたのは、作業途中のファイルを保存するためです。
番号を変えて保存することで、作業段階の状態をいくつかに分けられます。

 

 

自機を表示しよう

はじめに自機を表示してみます。
次のようにプログラムを入力してください。

 

自機を表示しよう

 

16行目で白い四角を描いています。
パラメータに5番目を指定すると、角が丸くなります。
数値の大きさにより丸みが変わります。

 

 

1行目から4行目に自機用の変数を作りました。
これらの変数は、あとで移動や当たり判定に使います。
この場所で宣言したのには意味があります。
もし、setup() の中で宣言すると setup() の中でしか使えない変数になります。
関数の外で宣言することにより、どこでも利用できる変数になるのです。
関数については次で説明します。

 

それから 11行目の background (0) や 15行目の fill (255) のように
色を 0から 255 までのグレースケールで指定することもできます。

 

 

関数を使おう

関数(かんすう)って何だ?
と気になる方はネットで検索してみてください。
簡単に言ってしまえば「複数の処理を1つにまとめたもの」です。

使い方については、実はすでに使っています。
そう、setup() も draw() も関数なのです。
{ }のカッコの中に、いくつもの処理を1つにまとめていますよね。

 

関数の種類について

 

今回、絶対に覚えなくてはならないのは、
関数には Processing で使用方法が決められているものがあることです。

setup() ・・・起動後に1度だけ処理される
draw() ・・・ 毎フレームごとに呼び出される

他にも使用方法が決められた関数がありますが、使う時がきたら説明します。

 

 

入力したプログラムにはユーザーが定義した関数もあります。
playerDisp() です。
自機を表示するために作りました。
ユーザー関数の特徴として、定義しただけでは実行されません
つまり、14行から17行までは呼び出さないかぎり実行されないのです。
実行させるには 12行目のように関数を呼ばなくてはなりません。

 

 

自機をマウスで操作しよう

自機をマウスで操作できるように mouseX を使ってカーソルのx座標を取得します。
これは前に使いましたね。
自機を動かすための関数 playerMove() を作りました。
12行目で呼び出しています。

プログラムを次のように変更しましょう。
この画像には1行目から9行目まで表示していないので注意してください。
今後、このように必要な部分だけ表示していきます。

 

マウスカーソル座標を取得する

 

 

実行してみましょう。
マウスカーソルを左右に動かすと、自機も左右に動きます。

 

マウスカーソルで自機を動かす

 

 

ちょっと待ってください。
カーソルを右端へ移動してみましょう。
自機が隠れてしまいます。

 

自機が右端に隠れる

 

 

自機が隠れないようにプログラムを修正します。
自機の右端(px+pw)の座標が、ウィンドウの幅(width)よりも大きければ
隠れていることになります。
その時は、自機の幅(pw)だけ左に戻すようにします。(22行目)
実行して確認しましょう。

 

自機が隠れないように修正する

 

width はウィンドウの幅、height はウィンドウの高さを取得します。
ウィンドウの中央座標が知りたい時には width/2, height/2 で得られます。
便利なので覚えましょう。