Post Details Page

これから幻境を作る人に ゲームロジックの具体的な作成方法について +プレイヤーポインターの実装

Translate

<解説内容>

1.ゲーム開始前のカウントダウンの実装方法

2.計算ゲームの内部ロジックを(動画や画像を交え)解説

3.ゲームリザルト(結果画面)の作り方

2.プレイヤーポインターを常時表示する方法


あなたがゲームを制作しようと考えたとき、まずはフィールドにオブジェクトを置き、ゴールを設定することから始める場合が多いと思います。

それからゴール条件、例えばコインを5個集めるとかを設定したりするでしょう。

あるいはゴールに至るまでの障害物やギミックなども作って、よりゲームプレイを華やかにしようとするかもしれません。スイッチを押したら出現する階段や、敵を倒したら出現する宝箱…

それらの複雑なギミックを制作するために重要になってくるのが、カスタム変数とその計算です。

本稿では、基本的な「計算ゲーム」の実際の作り方を辿り、ノードグラフ上での基本的な計算ロジックの実装の仕方を解説したいと思います。

教育的な計算ゲームのロジックなので、内容も退屈であったり、地味であり、真面目な解説になるかもしれませんが、ご容赦願いたい。


(このようなゲームであればノードグラフ変数にスコアだけプレイヤー変数を使うなどの方法もありますが、今回は汎用性の高いプレイヤーとステージのカスタム変数、そして分岐ノードを使用して、目標となる挙動を実現するためにそれらの変数をどう扱うべきかを確認していきます。この二つの変数があればひとまず大抵のものは実現できるはずです)


まずは、作成例となるゲームの動画を撮影したので、実際に見てみましょう。

ゲームの流れとしては、このように、ボタンを押すとカウントダウンが始まったあとに計算ゲームが始まり、指定された回数だけ問題を解くと結果画面が表示されるというものです。


カウントダウンのノードグラフはこう。これをプレイヤーエンティティに搭載します。

これはそれほど難しいものではありません。

まず、「UIコントロールグループ発動時」「ダブルブランチ」「等しいかどうか」のノードを組み合わせて、UI上のカスタムボタンのインデックスを指定します。

これで、指定したカスタムボタンを押したときにだけ発動するノードグラフが作れます。

それから、カウントダウンをするためのレイアウトに切り替え、カウントダウン用のタイマーを起動します。

補足として、画像上部にあるカスタム変数の「どの授業か」というのは、ゲームに複数のバリエーションを作る時に使います。

計算モードが一つだけなら不要ですが、例えば足し算と引き算の二種類のモードに分けて作りたいとき、プレイヤーにそれぞれ別のカスタム変数を設定し(例えば足し算は1、引き算は2)それにダブルブランチを組み合わせることで別々のノードグラフを起動することができます。


「タイマーを起動」ノードは「組み立てリスト」ノードと組み合わせて使います。

タイマーシーケンスに組み立てリストを繋げることで、タイマーの信号が何秒後に発動するかを決定できます。

この画像の場合は、1秒後、2秒後、3秒後、4秒後、にそれぞれタイマーが起動する設定になっています。(補足として、ループするかどうか を はい に設定した場合は、画像の組み立てリストの最後である3番が終了すると、0番からまた繰り返されるループ処理が開始されます)


あとは、ダブルブランチと等しいかどうかの組み合わせを使用して


・「タイマーを起動」ノードで設定したタイマーの名前

・タイマーシーケンスID(タイマーの何番目か)


を判別し、デフォルトで非表示に設定しておいたカウントダウン用の数字の画像のUIコントロールをオン(表示)にしたりオフ(非表示)にすることで、ゲームプレイ動画冒頭のようなカウントダウンを視覚的に実現できます。


(下の動画は参照するべきインデックスと、レイアウト上のボタンや画像が具体的にどのように配置されているかの参考動画)

カウントダウンの最後には「信号を送る」ノードを使います。

信号は「信号をモニタリング」ノードを組み合わせることで、手軽に他のノードグラフの開始地点とつなげることが可能です。

このノードと組み合わせて使うことが多い


さて、カウントダウンが終われば、いよいよ本体の計算ゲームが始まります。

もちろん、計算のやり方は様々です。

例えば、レイアウトに「1+2」などを書き込んだものを用意し、3のボタンを押したときに正解とするなどの方法も一つでしょう。

しかしそれだと多数のレイアウトを用意することになり、計算のバリエーションを用意することが大変なので、ここでは自動でランダムな計算問題を生成するロジックを作成します。

ノードグラフのロジックとしてはより複雑になりますが、計算はさまざまなギミックに応用できるため、習得しておく価値はあると思います。


実際のノードグラフの全体像がこちらになります。

上部

下部

少々巨大であり、画面に収まらないため二分割しましたが、このノードグラフによって基本的な四則演算のゲームが成立するわけです。

ゲーム本体にはゲームモードごとにノードグラフが存在しますから、これを3つ分(加えて、セーブデータやおまけコンテンツ、BGMを設定するためのノードフラフ)搭載していますが、基本的にはこれのバリエーションですので、この一つさえ作れるようになれば、あとは応用で色々な計算ゲームの実装が可能になるはずです。


分解して説明していきましょう。


まず、先ほどの信号が送られると、「信号をモニタリング」ノードからタイマーが起動します。

(画像右上のカスタムマップなどはキャラクターの表示やセリフに関するものなので、ここでは割愛しますが、そのようなシステムを実装したい方には参考になるかもしれません)

この先のノードグラフに進む前に、ステージエンティティにカスタム変数を実装します。(キャラクターエンティティでも構わないと思いますが、今回は一人用の計算ゲームなので、開発中のわかりやすさを重視してステージエンティティに搭載しています。対戦モードなどを実装する場合はまた違った挙動になるため、目的に応じてカスタム変数を搭載する対象を使い分けましょう。)

このように、整数のカスタム変数 1 2 3 4 5 6 7 をそれぞれ設定しました。これらは計算ロジックと、レイアウト上に数字を表示するために使用します。


まず、タイマーが発動すると、カスタム変数 1 2 にランダムな数字が割り振られます。ここでは乱数ノードを繋げて、1から9の数字がランダムに出現するようにしてあります。

この1と2はUI画面では問題の要素になります。画像をみてみましょう。

この数字は、UIコントロールのテキストボックスからステージのカスタム変数を挿入することでレイアウト上に表示することができます。

Lv.1とは、ステージエンティティの1というカスタム変数に対応している。

問題に使う二つの数字を決定して表示したら、次はそれをどのように計算するかを決定します。

ここでも使うのは乱数、そして「多分岐」ノードです。

ここでは、1から4までの数字がランダムで抽選されるように設定しています。上から順番に、足し算、引き算、掛け算、割り算が対応しています。

次のノードは絡み合っていてわかりにくいですが、オレンジ色に強調されている部分が1番の足し算から派生するノードです。

やっていることは単純で、まず、レイアウト上にはあらかじめ非表示にしてある四則演算の記号が存在します。

多分岐で足し算が選択された場合、この中から「+」の画像だけが表示され、他の「-」「÷」「×」が非表示になるという仕組みです。

さらに、答えに対応するステージエンティティのカスタム変数「3」を非表示のまま内容だけ設定します。

これには足し算ノードを使います。

ターゲットエンティティ、すなわちステージノードのカスタム変数「1」「2」を取得して、足し算ノードに繋げ、その結果をカスタム変数「3」に設定します。

これで足し算の問題の答えが「3」のカスタム変数と等しくなります。

引き算、掛け算も同じ理屈で設定できます。

あとは4つのボタンに正解1つと不正解一つを設定するだけです。

しかし、答えのボタンがいつも同じ場所にあるとよくないので、ボタンの位置をランダムにします。

変数値には先ほどの足し算の結果、ないしカスタム変数3を取得して繋げる。ここではカスタム変数3を取得して繋げている。

これで、4 5 6 7 番のうちのどれかがランダムで正解の数字になりました。

あとは、それ以外のボタンの数字を「不正解」に設定しなくてはなりません。

やり方はたくさんありますが、ここでは最もわかりやすいであろう方法を実践します。

これがまたノードがごちゃついていて見た目がわかりにくい。しかし、やっていることを言葉で説明すれば、それほど厄介というほどではありません。

要するに、先ほどの設定した答えである「3」に、さらに1以上のランダムな数字を足すか、あるいは1以上のランダムな数字を引くか(-1より小さな数字を足すか)をしているわけです。その結果をその他の選択肢のボタンのカスタム変数の数字に設定することで、確実に「3」とイコールではない数字が出力できます。

さらに、このノードグラフの場合では、選択肢が重複しないよう、順番に選択肢の数字を決定するノードを繋げ、それ以前に設定した選択肢の数字と重複する場合は再度ランダム出力(加えてカスタム変数「3」から足したり引いたりする数字の範囲をずらす)工夫を行っています。

これは絶対に必要というわけではありませんが、答えが1つである以上、2つの同じ選択肢があるとそれがハズレであることが露見してしまうので、設定しておいた方がより計算ゲームとして充実するはずです。

答えの選択肢が2つの場合は不要であると思われます。


さて、これにより、計算の問題と、隠された答え、そして正解1不正解3の選択肢が実装できるはずです。

(少々厄介ですが、ロジックを考えながら、画像を参考にしてノードグラフを作成してみてください)


次に必要になってくるのは、プレイヤーがボタンを押した時のノードの動きです。それが下の画像になります。

計算の内部と比べればすっきりしていますね。

内容も比較的簡単です。

「UIコントロールグループ発動時」ノードと「ダブルブランチ」と「等しいかどうか」を使い、選択肢のボタンのインデックスを参照することで、選択肢のボタンが押された時に着火するように設定します。

例えば左上のボタンが押された時には、

カスタム変数「4」が、正解のカスタム変数「3」と一致するかを判定します。

一致すれば正解、不一致であれば不正解です。ここでもダブルブランチを使いましょう。


さらに、ゲーム的要素として、正解と不正解に応じてそれぞれの画面エフェクトを表示しています。

加えて正解であれば、プレイヤーに搭載された整数のカスタム変数「正解数」に1を足しています。これはリザルト画面などに使います。

プレイヤーが答えを押したら、隠されていた答えの数字を有効化して表示します。

さらに、いったんボタンなどのUIは無効化しましょう。(視覚上の理由と、連打で正解数を増やすことができないように)

さらに、「次の問題」タイマーを起動し、ノードグラフの最初に繋げます。

上記のロジックにより、問題の選択肢を選ぶと、正解○か不正解×かが判定され、正解または不正解のエフェクトが表示され、プレイヤーの正解数または不正解数(のカスタム変数)に1が追加され、新しい問題が表示されるという仕組みが成立します。


新しい問題が表示された後は、いったん非表示にしておいたボタンなどを再度表示させましょう。


ちなみに、上記ロジックは引き算と掛け算に適用できるといいましたが、割り算の場合は少々変則的な処理が必要になります。

割り算の場合はまず答えである「3」の数字を設定し、それに「2」を掛けた数字を「1」に設定することで、答えの範囲が難しくなりすぎないよう、かつ割り切れるように限定しつつ、割り算が成立するようにしてあります。


さて、ここまでくれば、あとはリザルト画面です。

このゲームでは、プレイヤーの「正解数」「不正解数」のカスタム変数を足し合わせ、それが30を超えた時に、計算を終了して結果画面に移るように設定します。

リザルト画面では、基本的にはこのように各要素がデフォルトで非表示になっています。

それらの要素をタイマーで順番に表示していく形になります。

全てを表示するとこのような見た目になる。

これもカウントダウンの時と同じように、タイマーと組み立てリストを組み合わせて使用します。

組み立てリストの数字は番号のタイマーシーケンスIDが何秒後に発動するかを決定する。前回のタイマーから何秒後かの相対数値ではなく、発動後からの絶対数値なので注意。たまに間違える。

タイマーシーケンスの各番号が着火すると同時に、UIを表示させていきます。

補足。

さらにその後の要素として、点数の多寡によってキャラクターのセリフや表示される画像を変更しています。デイリー要素(その日初めてのプレイなら3ポイント追加される)や、セーブデータを活用した今までのプレイによる累積ポイント、高得点を取得したときにだけポイントがさらに増える要素なども。これにより、計算問題を達成するためのモチベーションを上げたり、高い得点を狙う理由付けをしています。

頭の体操によく、日常生活に役立つとはいえ、計算問題は退屈になりがちなので、このように何らかの装飾要素を付け加えるのも良いと思います。

最後に下部に表示されるUI。

これらが上手く順番に発動すればこの動画のように表示されるはずです。

結果を見たプレイヤーは、最後に表示されたボタンから、タイトル画面に戻ってまた計算ゲームをやるか、ゲームを終了するかを選択できます。

ボタンについては、何度か扱ったUIコントロールグループ発動時、等しいかどうか、ダブルブランチの組み合わせでボタンのインデックスを指定して、画面レイアウトを切り替えるか、ステージ終了ノードを繋げましょう。

授業終了ボタンをタップしてステージを終了できる


ちなみに、新要素として、ポインター(マウスカーソル)による操作を可能にする要素が実装されています。

これについても少し説明しておきます。

これらを設定してポインター表示をオン(はい)にすることで、ゲームのポインター操作が可能になります。

通常のフィールド探索などのプレイではオフにした方が操作しやすいと思いますが、今回の計算ゲームのようにボタンをクリックする要素があるゲームでは、従来のキーを押す方法に加えて、ポインターでクリックする方法を追加できるため、よりユーザーがゲームに親しみやすくなることでしょう。



これで、基本的な計算ゲームの作り方はおよそ説明できたと思います。

単純な四則演算に限らずカスタム変数を上手く扱うことでクイズやギミックにバリエーションを持たせることができるので、今回説明した内容を応用してさまざまなゲームを作ってみましょう。



実際に動作したゲームを扱って挙動を確認したい方は、この解説の内容を踏まえて実際に動作するゲームをアップロードしましたので、試してみてください。


asia 149449367780

eu 106404442681

us 106336193191

tw 102305998183


低確率で難しい問題が出てくるモードや、前回の答えから足し引きするモードもあります。上記の解説を応用することで、様々な計算モードを実装することができるので、参考にして制作してみるのも良いと思います。

Genshin Impact • Guides & Analyses
Repost allowed
Miliastra Wonderland
6
0
1
6
0
All comments

Loading...

All Tools

Recommended Users