コンテンツにスキップ
プログラミング教材

10. いろいろ調整

ほとんど完成していますが、完成度をあげるためにもうちょっと調整しましょう。

そのまえに

前回までのプログラムコード

float x = 100;
float y = 200;
float speed = 0;
float dx = 400;
float dy = 200;
int shibou = 0;
int score = 0;
int title = 1;
void setup() {
  size(600, 400);
  textFont(createFont("Arial", 48));
}
void draw() {
  background(0);
  if (title == 1) {
    fill(255);
    textSize(48);
    textAlign(CENTER);
    text("キュービックバード", width/2, height/2);
    return;
  }
  // 死亡フラグがたっていなければ
  if (shibou == 0) {
    // 土管のプログラム
    dokan();
    // プレイヤーのプログラム
    player();
  }
  // 死亡フラグがたっていれば
  if (shibou == 1) {
    fill(255, 0, 0);
    textAlign(CENTER);
    text("GAME OVER", 300, 200);
  }
  fill(255);
  textAlign(CENTER);
  textSize(48);
  text(score, width/2, 100);
}
void mousePressed() {
  speed = -10;
}
void dokan() {
  // 土管のdraw
  dx = dx - 5;
  if (dx + 50 < 0) {
    dx = 600;
    dy = random(200, 300);
    score = score + 1;
  }
  fill(255, 255, 255);
  rect(dx, dy, 50, 400 - dy);


  // 上の土管
  fill(255);
  rect(dx, 0, 50, dy - 150);
}
void player() {
  speed = speed + 1;
  y = y + speed;
  fill(255, 255, 255);


  // 下の土管と衝突しているか調べる
  int hit = isHit(x, y, 50, 50, dx, dy, 50, 400 - dy);
  if (hit == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }
  // 上の土管と衝突しているか調べる
  int hit02 = isHit(x, y, 50, 50, dx, 0, 50, dy - 150);
  if (hit02 == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }
  rect(x, y, 50, 50);
}
int isHit(float px, float py, float pw, float ph, float ex, float ey, float ew, float eh) {
  if (px < ex + ew && px + pw > ex) {
    if (py < ey + eh && py + ph > ey) {
      return 1;
    }
  }
  return 0;
}
void init() {
  x = 100;
  y = 200;
  speed = 0;
  dx = 400;
  dy = 200;
  shibou = 0;
  score = 0;
  title = 1;
}


void keyPressed() {
  // スペースが押されたら
  if (key == ' ') {
    if (title == 1) {
      title = 0;
    }
    if (shibou == 1) {
      init();
    }
  }
}

10-1 画面からはみ出した時はゲームオーバーにしよう

気づいた人もいるかもしれませんが、画面をはみ出して飛び回るといくらでもスコアを伸ばせます。チート状態です。 チートができないように、画面から完全に消えてしまったら死亡フラグを立てましょう。

void player() {
  speed = speed + 1;
  y = y + speed;
  fill(255, 255, 255);


  // 下の土管と衝突しているか調べる
  int hit = isHit(x, y, 50, 50, dx, dy, 50, 400 - dy);
  if (hit == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }
  // 上の土管と衝突しているか調べる
  int hit02 = isHit(x, y, 50, 50, dx, 0, 50, dy - 150);
  if (hit02 == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }


  // 画面からはみ出してないか
  if(y < -50 || y > height){
    shibou = 1;
  }
  rect(x, y, 50, 50);
}

画面の上部の判定を「-50」としています。 これはプレイヤー（四角形）の大きさ分マイナスにしているものです。

もし「y < 0」としてしまうと、頭が画面からはみ出しただけで死亡フラグが立ってしまうので、足元まですっぽりはみ出したら、という判定にするために大きさ分マイナスにしています。

10-2 画像を使ってみよう

画像の準備と読み込み

これも好みですが、ただの四角形では嫌だと言う人もいるでしょう。 プレイヤーを画像に変更してみましょう。

画像をダウンロードしたり、自分で作ったりして「bird.png」という名前に変更しましょう。

変更したら、Processingのエディタへドラッグ&ドロップします。

画像を読み込む

画像を表示するには、

  1. 画像を読み込んで、
  2. 読み込んだ画像を表示する

という二つの命令が必要です。

まずは画像を読み込みましょう。

float x = 100;
float y = 200;
float speed = 0;
float dx = 400;
float dy = 200;
int shibou = 0;
int score = 0;
int title = 1;
// PImage型の変数gazoを用意
PImage gazo;
void setup() {
  size(600, 400);
  textFont(createFont("Arial", 48));
  // loadImageで画像を読み込み、gazo変数へ保存
  gazo = loadImage("bird.png");
}

setup関数の中で、loadImageでファイル名を指定します。PImage型のオブジェクトと呼ばれるものが返ってくるので、PImage型のgazo変数に代入して保存しておきます。

画像の読み込みは一度だけで良いのでsetupの中で実行しています。

読み込んだ画像を表示する

loadImageで読み込んだ画像を、実際に表示します。 表示するには、imageという命令を使います。

void player() {
  speed = speed + 1;
  y = y + speed;
  fill(255, 255, 255);


  // 下の土管と衝突しているか調べる
  int hit = isHit(x, y, 50, 50, dx, dy, 50, 400 - dy);
  if (hit == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }
  // 上の土管と衝突しているか調べる
  int hit02 = isHit(x, y, 50, 50, dx, 0, 50, dy - 150);
  if (hit02 == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }


  // 画面からはみ出してないか
  if(y < -50 || y > height){
    shibou = 1;
  }
  // rect(x, y, 50, 50);
  image(gazo, x-25, y, 100, 50);
}

player関数の最後で、画像を表示します。 1番目にPImage型の変数gazoを、続いて表示するx座標とy座標、そして横幅と縦幅です。

以前から使っていたrectと合わせた引数で表示してみます。

画像の表示を調整する

しかし、画像の比率が違うため、引き伸ばされて表示されてしまう場合があります。 その場合は、当たり判定は変えずに、表示の位置、大きさだけ変えてあげましょう。

rectは当たり判定の基準ですので、コメントアウトしておいて残しておくと良いでしょう。

void player() {
  speed = speed + 1;
  y = y + speed;
  fill(255, 255, 255);


  // 下の土管と衝突しているか調べる
  int hit = isHit(x, y, 50, 50, dx, dy, 50, 400 - dy);
  if (hit == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }
  // 上の土管と衝突しているか調べる
  int hit02 = isHit(x, y, 50, 50, dx, 0, 50, dy - 150);
  if (hit02 == 1) {
    fill(255, 0, 0);
    shibou = 1;
  }


  // 画面からはみ出してないか
  if(y < -50 || y > height){
    shibou = 1;
  }
  // rect(x, y, 50, 50);
  image(gazo, x-25, y, 100, 50);
}