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

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

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

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行目)
実行して隠れないことを確認しましょう。

自機が隠れないように移動範囲を制限する

 

関数と同じように、変数にも Processing が用意したものがあります。
システム変数と言って、それぞれ役割を持っています。

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