ビルダーで作るミニゲーム「カード当て」-パート1.正答づくり-

         
  • 投稿日:2022年5月8日
  •      
  • 最終更新日:2022年09月11日
 

※今回の記事は、スクリーンショットが多くあります。スマートフォンなどからアクセスする場合はご注意ください。

この記事には…

  • ミニゲーム「カード当て」の作り方
  • ティラノビルダーで「ランダムで〇〇する」仕組みの作り方
  • 変数を変数管理以外のコンポーネントで使うコツ

    が載っています。

どんなゲーム?

今回作るのは、10種類のカードから答えとなる4種類のカードを当てるゲームです。
プレイヤーがカードを選ぶと、答えの組み合わせと合っていた枚数が表示されます。
これを繰り返して正解の組み合わせにたどり着く、というちょっとした推理要素のあるゲームです。

全体の作り方

今回は、ビルダーにある機能(コンポーネント+変数)で作成していきます。
ビルダーはバージョン2.0.2を使っています。過去のバージョンでも大丈夫ですが、変数設定コンポーネントの乱数機能を使っているのでそれだけ気を付けてください。

まずは大きく3つのパートに分けてみました。今回はその1つ目になります。

  1. 正答準備:正答のセット(ランダムの4枚の組み合わせ)を作る処理づくり
  2. プレイヤー操作:プレイヤーがカードを4枚選べる画面の画面作り
  3. 回答判定:正答とプレイヤー選択のカードを比べて判定する処理づくり

今回の内容と目次

まずは、「正答のセットを作る」処理を作ります。
ゲームの中の「10種類のカードから答えとなる4枚をランダムで選ぶ」部分です。

  • カードと最終の画面を準備する
  • 変数を準備して、1枚目をランダムで決める(2ページ目
  • 2枚目、3枚目、4枚目を同様に決める(3ページ目
  • 結果を画面に表示させる(4ページ目

今回のポイントーーちょっとした発想の転換

こういったギミックを作る時に、作り方は1つではありません。プログラミングが分かるなら配列とループ処理、ティラノスクリプトの範囲なら変数とifタグなど。
他のやり方についてはまたの機会にご紹介したいと思いますが、今回はビルダーで作るためにちょっとした発想の転換をします。

「ランダムでカードを選ぶ」というと、カードのファイル名などを選ぶイメージかもしれません。
今回は「ランダムで決まったカードを、正解の場所に表示する」ことで代わりにします。
この段階では意味が分からなくても構いません。頭の片隅にでも置いておいてください。

カードと最終の画面を準備する

ビルダーを起動して、まずは「アドベンチャー形式の新規プロジェクト」を作成しました。
サイズは1280×720を選択しています、他のチェックは必要ありません。
最初のダイアログが終わった段階で、一度「保存」ボタンを押しておきましょう。

メインとなるシナリオファイルは「scene1」のまま使っていきます。
このステップの完成イメージをつかむために、「正解のカードが4枚表示された画面」を試しに作ってみましょう。

「背景イメージ」コンポーネントのあとに、「イメージ表示」コンポーネントを置きます。
「ファイル選択」のボタンを押して、あらかじめ準備しておいたカード画像を10枚、追加します。

(画面が切れてしまったので残り(^^;)

画像を準備するのが面倒、という人は同じ画像セットが下のボタンからダウンロードできます。

ちょっと見苦しいかもしれませんが、カードは管理人のゆるいマウス絵でお送りします。ご了承ください(笑)
一応書いておくと、「バナナ、ぶどう、いちご、メロン、みかん、もも、なし、パイン、りんご、すいか」の10種類を用意しました。処理も基本的にこの並び順(ファイル名アルファベット順)で作っていきます。

並び順は自由ですが、漏れたり入れ違ったりしないようにルールを決めておくといいですよ。

「イメージ表示」コンポーネントを4つ使って、カードの画像を横に4枚並べました。
ランダムの仕組みなどはまだ作っていないので画像は適当に選んだだけです。
配置などの数字もこの段階ではざっくりで構いません。
演出の必要はないので、時間だけ「1」秒にしておきましょう。

今回は「ランダムで決まったカードを、正解の場所に表示する」ことで代わりにします。

と、先ほどお伝えしました。
正解の場所に表示する=固定の(決まった)場所に表示するためには、座標をはっきりさせておく必要があります。
今回は「イメージ表示コンポーネント」の「横位置」を、左から順に「300、500、700、900」に設定しています。
この数字はまた後で使います。