ピクチャ主体のゲーム作成ツール(基礎編3/6)(RPGツクールMZ)

サンプルゲームの簡易版を作ってみる

前回までで、複数のピクチャの生成ができるようになりました。今回はサンプルゲーム「ベイ助のご利益羽根つき」の簡易版を作ってみます。今回の記事ではハネが飛んでくるところまで、次回の記事でハネを打ち返す処理を実装します。

そもそもどうやって考えるかなのですが、まずはゲームを構成するものが何かを、ピクチャ単位で考えてみます。

この図にあるものをすべて抜き出していきなり実装するのはタイヘンですから、もうちょっとシンプルなものを考えてみます。以下の図の構成要素は何でしょうか。ハネは場外から勝手に湧き出るものとします。

「ベイ助」「ハネ」「背景」の3種類のピクチャがまずありますね。そこから集約の関係を作るのですが、個人差があると思います。次のように、「ゲーム進行役」を新たに追加してそれが他３つを集約していると考えるのがラクだと思います。*1

このツールではイベントにはピクチャを割り当てることができますが、別に割り当てないで使うこともできるので、ゲーム進行役にはピクチャを割り当てずに見えないイベントとして実装し、ゲームを進行してもらうことにします。このゲーム進行役をエントリーポイントに指定してあげればいいことになります。

それでは、上記のとおり計4つのイベントを作って、簡易版羽根つきゲームを作ってみましょう。

まずはベイ助のイベントを、前回の記事のものから流用します。前回までは上下左右自由に動けたのですが、左右移動だけになるよう修正します。1ページ目の初期化処理にて、this.yの値を312から450に修正します。2ページ目はもともとのスクリプトを削除して、以下のスクリプトだけを残してください。左右移動だけをするという意味です。

if (TouchInput.isPressed()) {

if (TouchInput.x < this.x) this.x -= 10;

if (TouchInput.x > this.x) this.x += 10;

}

ちなみに、TouchInput.xは、タッチした点のx座標を表します。TouchInput.yはy座標です。TouchInput.isPressed()は、「タッチされたこと」という意味ですので、これはタッチされたら、という条件を表します。内部のifは、タッチした座標よりthis.xが大きかったら10減算、小さかったら10加算、という意味です。-=は減算、+=は加算です。内側のifは、処理が一行だけのときだけ書ける省略表記です。*2

if (【条件】) 【処理1行】;

また、エントリーポイントに指定するイベントがゲーム進行役に変わりますので、イベント名は「★ベイ助」から「ベイ助」に変更してください。

ハネの動きは難しいので、まずは飛ばして背景上でベイ助が動くところまでを確認しましょう。

背景イベントは、以下のとおり初期化します。注釈の()は忘れず挿入してください。初期化は以下の引数だけ変えます。

this.filename ⇒ 「sample/back」

this.origin ⇒ 「0」

背景は動かないので、初期化だけで完了です。

そして、ゲーム進行役イベントを新規作成します。イベント名は「★ゲーム進行役」です。エントリーポイントに指定するイベントなので、先頭に★が付きます。ゲーム進行役はピクチャを設定しないので、初期化命令は挿入しません。その代わり、次のスクリプトを書いておきます。

this.list.push(new 背景());

this.list.push(new ベイ助());

意味は前回の記事で説明したとおりで、背景のピクチャを実体化させて管理対象とする、ベイ助のピクチャを実体化させて管理対象とする、という意味です。どちらも引数を指定しないので、内側のかっこの中身は空です。

ここで、順番は例にあるように、背景、ベイ助、の順にしてください。ピクチャの表示順序は自動で振られるのですが、管理対象とした順番に小さな番号が振られていくので、先に格納したものが背面に表示されるようになります。逆にすると背景の方が前面になるので、ベイ助が見えなくなってしまいます。

そして、できたイベント同士を集約の矢印で繋ぎましょう。管理する側が「★ゲーム進行役」になるようにさえつなげば、あとは特にどんなふうに繋いでも構いません。接点になる部分は、○がついたチップを配置すれば、つながっていることになります。

エントリーポイントにゲーム進行役イベントを指定して完了です。

ゲームオブジェクト = new global.ゲーム進行役();

テストプレイしてみると、背景の上にベイ助が表示されます。タップすると左右移動します。

次にハネイベントを編集していきます。ハネは重力の影響を受けて落下しますので、速度が徐々に変化していく動きをします。計算は複雑ですし、このブログの説明内容ともずれてしまうので、詳しい説明は割愛します。まず、1ページ目に以下のスクリプトを追加します。

// 角度

let angle = 60;

// 速度

let speed = 5;

this.vx = speed * Math.cos(angle * Math.PI / 180);

this.vy = -speed * Math.sin(angle * Math.PI / 180);

ここで、let angle = 60; とは、これ以降「angle」という文字列があったら、60の値に置換するという意味で捉えてまずは大丈夫です。また、//から始まる一行はコメント行といって、メモの行です。この行には何を書いても処理に影響ありません。

this.vx, this.vyは、自分の速度をこう設定するという意味です。ピクチャに速度なんてもともと定義されていないので、ここで即席で定義したものです。このように、

this.【属性名】 = 【値】;

と書くと、そのピクチャの性質を表す新しい属性を定義して、その値をそう設定する、とできます。プラグインコマンドの初期化命令もよく見るとそんなような形をしていることが分かると思います。this.scaleX = 60などと書いてますよね。これは、このピクチャのscaleXは60の値を持つものとして定義する、といった意味です。

ここで定義した速度という値を使ってどのような動きをさせるのかを、2ページ目に記載します。スクリプトは以下です。

this.vy += 0.15;

this.x += this.vx;

this.y += this.vy;

this.angle = -90 - Math.atan2(-this.vy, this.vx) * 180 / Math.PI;

if (this.x < 0 || this.y > 624) {

this.cleared = true;

}