見出し画像

チョコ争奪戦？多人数NPCの乱闘ゲームを作ろう！クミタテ式プログラミングドリル(p5JavaScript / Processing)

クミタテ式ゲームプログラミングドリル（Processing / p5js）

-わちゃわちゃ感を楽しもう

今回作るのは1人間 + 9NPCのわちゃわちゃ乱闘ゲームです。チョコを奪い合いましょう。
配列を上手に使うことで短いコードで多プレイヤーを用意することができます。たくさんのNPCがいるだけで笑える展開が生まれやすく、ネタゲーに仕上げても、本格乱闘ゲーム仕上げても良さそうです。

デモアプリはこちらから。https://openprocessing.org/sketch/1834108

- クミタテ式プログラミングドリルとは？

クミタテ式は英語のp5JavaScriptのコードを、日本語で書かれた図解（通称、図解くん）を使って解説し、プラモデルのように図解通りにコードを組み立てていきながら学習するテキスト教材型のプログラミング教材です。

- 動画を見ながら学習する

テキスト教材の補助として動画を作成しています。クミタテ式が初めての方は動画と一緒に学習すると良いでしょう。
動画とこのテキスト教材は期間限定で無料公開しています。たくさんのゲームジャンルのプログラミング方法をお伝えしているのでチャンネル登録もよろしくお願いします。

- 開発環境

OpenProcessingを使ったp5js、Processingを環境を前提としています。

■[ここからスタート！]画面のサイズを決める

画面サイズを600x400の固定サイズにしましょう。

■背景を黄色で塗りつぶし続ける

drawの中で背景を黄色で塗りつぶし続けましょう。drawの中で毎回背景を塗りつぶすことでアニメーションが実現できます。

■プレイヤーとなる四角形を1つ表示する

四角形を固定の位置座標(100, 300)に表示します。

■位置座標を変数で管理する

プレイヤーを動かす前準備として、プレイヤーの位置座標を変数で管理する必要があります。

■変数を操作してプレイヤーを落下させる

位置座標を変数にしたことで、変数を操作することでプレイヤーを動かすことができるようになりました。

■プレイヤーを着地させる

プレイヤーを画面の外まで落っこちないように着地させましょう。

■プレイヤーを自然落下、ジャンプさせる

プレイヤーの縦のDirection、移動量dyを用意し、重力を与え自然な落下をさせます。
また、着地したと同時に上方向へ力を与えてジャンプをさせます。

■横にも移動させる

同じ要領でdxを用意し、横にも移動させます。着地時はランダムな方向へ横移動させます。

■プレイヤー10人を表示する

変数x,y,dx,dyを用意してきましたが、変数の進化版的な配列を使うことでたくさんの情報を扱うことができるようになります。
ここでは配列の数を10個にし、プレイヤーを10人に増やします。まずは10人のプレイヤーたちを表示だけしてみましょう。
また、10個の配列へのアクセスは繰り返し処理forを使い、10回繰り返させることで10個の配列に1つずつアクセスします。
配列は以下をサンプルにお使いください。

// p5.js
let xList = [
  100, 200, 300, 400, 500, 100, 200, 300, 400, 500, 
];
let yList = [
  300, 300, 300, 300, 300, 300, 300, 300, 300, 300,
];
let dxList = [
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
];
let dyList = [
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
];

// Processing Java
float[] xList = new float[]{
  100, 200, 300, 400, 500, 100, 200, 300, 400, 500, 
};
float[] yList = new float[]{
  300, 300, 300, 300, 300, 300, 300, 300, 300, 300,
};
float[] dxList = new float[]{
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
};
float[] dyList = new float[]{
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
};

■プレイヤー10人を一斉に動かす

アルゴリズムはプレイヤーが1人の時と同じです。
変数ではなく配列になっているため混乱するかもしれませんが、少しずつ頭を整理していけばそれほど難しくありません。

■自分だけ色を変える

操作するプレイヤーは1人で、残りの9人はCPUとします。
操作対象がわかりやすいように、他9人の色は赤色にします。
操作対象のプレイヤーは0番目とし、1番目以降のプレイヤーはNPCとして色を変えます。

■プレイヤーを操作する

矢印キーでプレイヤーの横移動をさせましょう。操作対象は0番目のプレイヤーなので、0番目を直接指定します。
（着地時にランダムな方向に飛ばされてしまいますが、後で解決します。）

■アイテムを登場させる

アイテム、ここではチョコっぽいものを落下させていきます。

■当たり判定をするオリジナル命令を用意する

アイテムとプレイヤーたちとの当たり判定をする前に、当たり判定をしやすくする便利なオリジナル命令「isHit関数」を作っておきます。
複雑な処理は関数として切り出しておくと、混乱が少なくなります。

■アイテムとの当たり判定をする

プレイヤー10人とアイテムとの当たり判定をします。
誰かに当たったら、とりあえずアイテムを再度上部から出現させます。

ここから先は図解くんはありません。
自分で頭を整理して課題に取り組んでみてください。

■（★☆☆）課題1. 操作プレイヤーは着地時にランダムに横移動させない

CPUたちと同じように、操作プレイヤーも着地時にランダムな横移動がされてしまいます。操作の邪魔になるので防ぎましょう。

■（★★☆）課題2. 壁ジャンプさせる

各プレイヤーたちは同じタイミングで同じ高さまでジャンプしています。
これではばらつきがありません。
壁ジャンプを導入することで、ばらつきを作ると同時に、テクニックの幅も出せます。

■（★★☆）課題3.スコアを導入する

スコアを表示し、操作プレイヤーがアイテムを取った時にスコアを加算しましょう。

■（★☆☆）課題4.アイテムの再出現をランダムにする

アイテムが同じところから再出現しているのでランダムにしてあげましょう。

■（★★☆）課題5.操作プレイヤーを前面に表示する

操作プレイヤーがNPCの裏に隠れてしまいます。前面に表示してみましょう。
一工夫すると、1行書き換えるだけで簡単に実現できます。ヒントはfor繰り返し処理の条件です。

■（★★☆）課題6.NPCたちにもスコアを持たせましょう

どのNPCがどれくらいのスコアを持っているのかも管理してあげましょう。

■オリジナルゲームに仕上げよう

今回のデモゲームでは、シーズン的に「チョコを奪い合う男たちの奪い合い」みたいな世界観で表現してみました。
多人数のNPCが存在するだけでわちゃわちゃ感を楽しめます。わちゃわちゃさせる大乱闘なゲームに仕上げてみてください。
例えば、プレイヤー同士の当たり判定をしてあげることで、プレイヤーを踏み潰したりタックルしたりなど可能性がいろいろ考えられます。
また、キーボードのキーを割り当てれば、1つのパソコンで複数の友達と遊べる対戦ゲームにもなり得ます。

■完成コード

ここから先は

1,768字

¥ 100

この記事が気に入ったらサポートをしてみませんか？