3. プログラムを別々にする

Processingでフラッピーバード風ゲームをつくっていきます。

前回は下の土管の動きを作っていきました。 今回は前々回のプレイヤーの動きとがっちゃんこしていきます。

そのまえに

プレイヤーのプログラムコード

float x = 100;
float y = 200;
float speed = 0;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}
void mousePressed(){
  speed = -10;
}

土管のプログラムコード

float dx = 400;
float dy = 100;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  dx = dx - 5;
  if(dx + 50 < 0){
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}

この二つのプログラムコードが手元にある前提で話をすすめていきます。

3-1 プログラムをいっしょにする

プレイヤーの動きと、土管の動きが一緒になるように、 プログラムコードをがっちゃんこしていきます。

コピペでは動かない

まずはみんながやりそうなこと。

「二つのプログラムコードをそのままコピペする」

これは動きません。

ダメな例

// プレイヤーのプログラムコード
float x = 100;
float y = 200;
float speed = 0;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}
void mousePressed(){
  speed = -10;
}
// 土管のプログラムコード
float dx = 400;
float dy = 100;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  dx = dx - 5;
  if(dx + 50 < 0){
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}

エラーとなって全く動かないと思います。

なぜかというと、

「setupとdrawがそれぞれ二つ存在しているから」です。

setupとdrawは、プログラムコードの中に1つしか存在できません。

なので、setupの中だけ、drawの中だけ合わせると動きます。

setupの中身、drawの中身を一緒にする

// プレイヤーの変数
float x = 100;
float y = 200;
float speed = 0;
// 土管の変数
float dx = 400;
float dy = 100;
void setup() {
  // プレイヤーのsetup
  size(600, 400);
  // 土管のsetup
  size(600, 400);
}
void draw() {
  // プレイヤーのdraw
  background(0);
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);

  // 土管のdraw
  background(0);
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}
void mousePressed() {
  speed = -10;
}

変数部分、setupの中、drawの中を切り出して、 部分部分で一緒にしました。

エラーはなくなり実行はできるようになりましたが、 プレイヤーが表示されません。

原因はいくつかあるのですが、

まずsetupの中身。

void setup() {
  // プレイヤーのsetup
  size(600, 400);
  // 土管のsetup
  size(600, 400);
}

size命令が2つ存在してしまっていておかしいので、1つにします。

次にdrawの中身。

void draw() {
  // プレイヤーのdraw
  background(0);
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);

  // 土管のdraw
  background(0);
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}

drawの途中、 プレイヤーのrect命令が終わったあとに、 background(0); が命令されています。

backgroundは塗りつぶす命令です。 backgroundの前に実行した、rect命令の四角形は塗りつぶされてしまったんですね。

なので、途中のbackground命令は無くします。

また、細かいのですが、

プレイヤーが土管の裏に表示されてしまうのを防ぐために、 プレイヤーのプログラムは、土管の命令の後に実行するようにします。

よって、下のようになります。

float x = 100;
float y = 200;
float speed = 0;
float dx = 400;
float dy = 100;
void setup() {
  size(600, 400);
}
void draw() {
  background(0);
  // 土管のdraw
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);

  // プレイヤーのdraw
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}
void mousePressed() {
  speed = -10;
}

3-2 役割ごとに関数にする

drawの中の行が増えてきましたね。

void dokan(){
  // 土管のdraw
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}
void player(){
  // プレイヤーのdraw
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}

ぱっとみたときに、何をしているのかわかりづらくなってきてしまいました。

drawの中は、きれいにしておきたいので、 役割ごとにプログラムをわけたいと思います。

プログラムをわけるときに使うのが、 関数 です。

まず、下のプログラムを最後に追加します。

void dokan(){
  // 土管のdraw
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}

drawの中にあった土管のプログラムコードに、「dokan」という名前をつけてまとめたものです。

プレイヤーも同じように、名前をつけます。

void player(){
  // プレイヤーのdraw
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}

drawの中にあったプレイヤーのプログラムコードに、「player」という名前をつけてまとめたものです。

これらは「 関数 」と呼ばれ、簡単に言えば、プログラムをまとめて名前にすることができる機能です。

まとめたプログラムを呼び出すときは、

呼び出したい場所で、

「名前()」とすればOKです。

呼び出したい場所はもちろんdrawの中なので、 下のようにします。

void draw() {
  background(0);
  // まとめた土管のプログラムを呼び出す
  dokan();
  // まとめたプレイヤーのプログラムを呼び出す
  player();
}

これでdrawの中がすっきりしましたね。

今後、プレイヤーに関するプログラムは、先ほどのまとめたplayer関数の中に、

土管に関するプログラムは、dokan関数の中に、プログラムしていきます。

ここまでのまとめたプログラムコードをこちらです。

float x = 100;
float y = 200;
float speed = 0;
float dx = 400;
float dy = 100;
void setup() {
  size(600, 400);
}
void draw() {
  background(0);
  // まとめた土管のプログラムを呼び出す
  dokan();
  // まとめたプレイヤーのプログラムを呼び出す
  player();
}
void mousePressed() {
  speed = -10;
}
void dokan(){
  // 土管のdraw
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
  }
  rect(dx, dy, 50, 400 - dy);
}
void player(){
  // プレイヤーのdraw
  speed = speed + 1;
  y = y + speed;
  rect(x, y, 50, 50);
}