【初心者向け】Processingで最速でシューティングゲームを作る方法

2022 7/08

2021.07.26 2022.07.08

こんにちは！

子供向けプログラミング教室kobakoスタッフです。

kobakoでも推奨している、初心者向けプログラミング言語「Processing」、最近じわじわと人気が出てきているようです。

Processingでゲームを作ろう！となれば最初に思いつくのがシューティングゲームですよね。

今日はProcessingでシューティングゲームを作る方法をお伝えします。

ところで・・・

この記事を書いている人はだれ？

子供向けプログラミング教室です！

JavaScriptを使ったゲームプログラミング、ゲーム企画が得意な教室です。

プログラミング教室で実際に使用している、学習成果のある教材をYouTube無料配信しています。

YouTubeチャンネルをチェック!

Processingでシューティングゲームを作る難易度

シューティングゲームは難易度はどちらかといえば高いです。

このブログをご覧の方も、シューティングを作ろうと調べてみたものの、サンプルが複雑で難しすぎる！と思った方も多いんじゃないでしょうか？

シューティングゲームが難しい理由

シューティングゲームのサンプルは多くネットに転がってはいますが、多くのサンプルが配列を使っています。

弾をたくさん連射したり、敵をたくさん出現させたりしようとすると、どうしても配列の知識が必要になります。

ですが、この配列というのが実に初心者泣かせなわけです。

僕も長くプログラミングを教えていますが、配列が理解できる生徒は本当にわずかであり、全体の10%もいないような感覚です。

長くプログラミングを経験していけば配列は誰でも理解できるのですが、いきなり配列に出くわしてしまうと自信喪失してしまうというわけです。

なので、初心者は配列を使うのはやめましょう！

Processingでシューティングゲームを作る方法

初心者にありがちなことですが、最初からたくさんの機能を作ろうとしてしまいます。

いろいろなものを簡略化することで、手っ取り早くシューティングゲームを作り、とりあえず形にしてしまうことが大切です。

プレイヤーを表示する

まずはプレイヤーを表示しましょう。

プレイヤーはかっこいい機体などを使いたくなるところですが、ここはぐっと我慢して、シンプルな四角形で対応しましょう。

詳細な説明は省きますが、以下のコードで、とりあえず四角形が画面の隅に出現したはずです。

void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  fill(255);
  rect(0, 0, 30, 30);
}

プレイヤーを動かす

キー操作などで動かそうとすると、キー操作のプログラムが必要になってしまうので、

ここは簡略化して、マウスの位置にプレイヤーを動かすようにしましょう。

void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  fill(255);
  rect(mouseX, mouseY, 30, 30);
}

敵を作る

次にプレイヤーから弾を打ちたくなるところですが、次は敵を出しましょう。

配列を使うと複雑になるので、敵は1体のみを繰り返しリサイクルします。

画面の上部のランダムな位置から、画面下部に向かって突撃してきます。

画面下部まで到達したら、また画面の上部のランダムな位置から出現させます。

この辺りから難しくなってくるので注意してください。

変数、条件分岐、乱数などの要素が一気に流れ込んできます。

慌てずゆっくりと理解していきましょう。

float ex = 0;
float ey = 0;
void setup(){
  size(600, 400);
  ex = random(600);
}
void draw(){
  background(0);
  fill(255);
  rect(mouseX, mouseY, 30, 30);

  // 敵の動きを作ります。
  ey += 5;
  if(ey > 400){
    ex = random(600);
    ey = 0;
  }
  fill(255, 0, 0);
  rect(ex, ey, 30, 30);
}

弾を作る

次に弾を作りましょう。

弾も連射したいところですが、配列が必要になってしまいます。

配列は前述の通り、難易度を爆上げする要因ですので、ここでは簡略化し、

弾は自動的に発射し、画面から消えたら新しい弾を発射するという仕様にします。

float ex = 0;
float ey = 0;
float bx = 0;
float by = 0;
void setup(){
  size(600, 400);
  ex = random(600);
}
void draw(){
  background(0);
  fill(255);
  rect(mouseX, mouseY, 30, 30);

  ey += 5;
  if(ey > 400){
    ex = random(600);
    ey = 0;
  }
  fill(255, 0, 0);
  rect(ex, ey, 30, 30);

  // 弾の動きを作ります。
  by -= 5;
  if(by < 0){
    bx = mouseX;
    by = mouseY;
  }
  fill(0, 0, 255);
  rect(bx, by, 10, 10);
}

弾と敵との当たり判定を作る

当たり判定というのは難所です。

難所なので頑張って乗り越えましょう！

と言いたいところですが、当たり判定は本当に難しいので、簡略化してライブラリを使いましょう。

僕の方でisHitという関数を用意しました。

プレイヤーの情報と敵の情報を渡せば、

当たっていたら1を、当たっていなければ0が返る関数を作りました。

float ex = 0;
float ey = 0;
float bx = 0;
float by = 0;
void setup(){
  size(600, 400);
  ex = random(600);
}
void draw(){
  background(0);
  fill(255);
  rect(mouseX, mouseY, 30, 30);

  ey += 5;
  if(ey > 400){
    ex = random(600);
    ey = 0;
  }
  fill(255, 0, 0);
  rect(ex, ey, 30, 30);

  // 弾の動きを作ります。
  by -= 5;
  if(by < 0){
    bx = mouseX;
    by = mouseY;
  }
  fill(0, 0, 255);
  rect(bx, by, 10, 10);
  
  int hit = isHit(bx, by, 10, 10, ex, ey, 30, 30);
  if(hit == 1){
    // 当たったときの処理
    ex = random(600);
    ey = 0;
  }
}
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;
}