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

こんにちは!

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

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

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

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

ところで・・・

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

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

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

プログラミング教室で実際に使用している、学習成果のある教材を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;
}

簡略的に完成

これで必要最低限なシューティング機能が整いました。

実にミニマムなプログラミングコードに抑えたつもりです。

ここから先は、みなさんの思う通りにプログラミングしていただく番です。

配列がなくても、変数をたくさん作れば、たくさんの敵を作ることができます。

それはプログラミング的にはあまりイケてないことかもしれませんが、

イケてるプログラミングコードを作ることが目的ではなく、

あなたオリジナルのゲームを作ることが目的なはずです。

あとはコピペでも構いません。よくわからなくても、「ここかな?こうかな?」と試行錯誤していく。

しっかりと基礎から学ぶより、よくわからずともひたすらトライアンドエラーを繰り返す方が、実はよっぽどプログラミングというのは身に付くものなのです。

もっとクオリティの高い作品が作りたくなったら

プログラミング教室kobakoではProcessingを使った作品、シューティングゲームなどのゲーム作品作りをサポートしています。

プログラミングが学びたい方、作りたいゲームがある方、ぜひkobakoに遊びに来てみませんか?

無料体験へのお申し込みはこちらから!

kobakoのゲームプログラミング教材もYouTubeで無料配信中です!

初回の授業料(体験)は無料です。

※現在はオンライン授業でのみ対応しています。通学型ではありません。

Photo by Nathan Duck on Unsplash