パズルのピースを置いて絵を完成させるギミック

探索や謎解きで集めたパズルのピース、それを正しい位置に置き、絵を完成させるというギミックを作ってみましょう！

実際どんな感じなのかはこの動画をご覧ください

画像素材を提供します

今回はこの記事に使用した画像を掲載しておきますので、是非この記事からダウンロードして脱出ゲームメーカーでのゲーム制作にお使いください。
（詳しい利用規約はこちらのページをご参照ください。）

欲しい画像をスマホなら長押しするとダウンロード（画像保存）できると思います。

シーン部品画像に名前をつける

今回は似たような画像をたくさん扱うので、イベントを入力しているうちに訳が分からなくなってしまう可能性があります。

なので、脱出ゲームメーカーに取り込んだシーン部品画像にしっかり名前をつけておきましょう。

画像管理＞シーン部品画像を開き、画像サムネイルの右上の「≡」をタップすると、画像の名前を自由に設定することができます。

この記事ではこのように名前をつけました。

画像にいちいち名前をつけるのは手間に感じるかもしれませんが、最初にこのひと手間を行うことで複雑な画像変更イベントでも入力しやすく、ミスを拾いやすくなります。

画像の配置の仕方

パズルのピースを置くシーンの画像配置はこのようになります。

画像を綺麗にぴったり配置するには、画像の追加編集モードで置きたい画像を長押しすると、画像の大きさや位置を数値で設定することができます。

参考として、このチュートリアル記事の実際の画像位置の数値をここに貼っておきます

画像を綺麗に配置できたら、画像の準備とシーンの作り方はこれで完了です.

アイテムを用意する

タップイベントを入力する前に先にアイテムも作っておきましょう。
今回はパズルのピースが4つなのでアイテムを4つ作ります。
アイテムもそっくりなものが多いので、それぞれ名前をつけておきましょう。

アイテムの名前は画像と同じように、サムネイル右上の「≡」をタップすると変更できます。

タップイベントの内容

このシーンのパズル部分のタップイベントはこのように配置されています

パズルのピースが4つなので、タップイベントも左上、左下、右上、右下と4つありますね。

はじめに左上の部分のタップイベントを入力していきましょう。

入力の詳細は割愛させていただき、まずは完成形をご覧ください。

それでは、このイベント内容について詳しい解説をしていきます。

まず、このイベントの構成を色分けしたものが下のとおりです

赤い枠がこのイベントの本体なので、ここから説明していきます。

赤枠のイベントについて

最初に一番上の赤い枠の内容を丁寧に見ていきましょう。

ここは、プレイヤーが「左上のピース」を使っている時にタップした時だけ起こるイベントです。

「アイテム削除:左上のピース」の意味
アイテムを置いたことにしたいので、アイテム欄から「左上のピース」を削除している。

「画像変更:グレーの溝＞左上用の画像」に意味
タップした場所にピースを置いたように見せるため、グレーの溝の画像をピースの画像にしている。

この「アイテム削除」「画像変更」の2行のイベントでプレイヤー側からは、手持ちのアイテムを壁に置いたように見えます。

これは、すでにピースが置かれている上に重ねて別のピースを置いてしまうことを防ぐために必要なフラグ操作です。
これについては、のちほど黄色い枠のイベント説明で触れますね。

さて、今入力しているのは「左上のタップイベント」です。つまり、「左上の位置」に「左上のピース」を置いたことになるので、正解ですね！
左上正解のフラグをONにしておきましょう。

赤枠最後に処理終了を入れて「左上のピースを使っている時」のイベントは完成です。

このような感じで、左下のピースを使っている時、右上のピースを使っている時、右下のピースを使っている時、も入力していきます。

黄色枠のイベントについて

黄色枠は、プレイヤーがタップした時に一番初めに実行されるイベントです。

赤枠のイベントで「左上の位置にピースを置いた>ON」を入力していましたね。
もし、このフラグがONの時、つまり、すでに何かピースが置かれている状態、であれば黄色枠が実行され、すぐに処理終了となります。赤枠以降のイベントは実行されません。
プレイヤー目線ではタップしてもなにも起こらない、という状態です。

ちなみに、「左上にピースを置いた＞OFF」の時は黄色枠はスキップされて赤枠または青枠が実行されます。

青枠のイベントについて

青枠のイベントは、ピースがなにも置かれていない状態（黄色枠イベントがスキップされる時）、かつ、どのピースも使っていない時（赤枠イベントがスキップされる時）に実行されます。
プレイヤー目線だと、グレーの溝をタップで調べた時に説明文が表示される、という挙動ですね。

イベントコピー&ペースト

左上だけでなく、左下、右上、右下と残り3つのタップイベントを作るのですが、形式は同じなので、イベントのコピペ機能を利用してみましょう！

①コピーしたいタップイベントを長押し→イベントコピー
②次にペーストしたい場所のタップイベントを長押し→イベントペースト

さて、コピペを少しずつ手直しして、4つ分のタップイベントを完成させるわけですが、
それぞれの完成形はこのとおりです。

「やり直し」ボタンのタップイベント

さあ、あとはそれほど難しくありません。
プレイヤーがピースの置く位置を間違ってしまっても、やり直せるようにしましょう。

「やり直し」ボタンのタップイベントに入力するイベントはこのとおりです。

「画像変更」の意味
壁の画像を初期画像の「グレーの溝」へ戻す

「アイテム取得」の意味
手元になくなってしまったピースを手元に戻す

そして、全てのフラグをOFFに戻す

グレーの溝画像からグレーの溝画像へ戻す、という部分が一見無駄な作業に見えるかもしれませんが、詳しい解説はダイヤル錠の過去記事が参考になるので読んでみてください。

また、手元にピースが残っている状態でアイテム取得しても、同じピースを2つ取得してしまうことはありません。
これについても気になる時は、アイテムに関する過去記事を読んでみてください。

「解答する」ボタンのタップイベント

「解答する」ボタンのタップイベントはもっとシンプルです。

IF分岐（AND）を使い
左上正解ON
左下正解ON
右上正解ON
右下正解ON
この4つの条件がすべて揃った時だけ、「絵が完成した！！」と正解のメッセージが表示されます。

それ以外でタップした時は「違うようだ…」とのメッセージが表示されます。

IF分岐詳細については↓こちらの記事で詳しく解説しています。

いろいろ応用もできる

画像を綺麗にピッタリ並べたり、似たような画像、似たようなイベント、意外と種類が多いフラグ…少し難しく感じたかもしれません。

絵が完成するパズルだけでなく、文字やカラーパネル、謎解き暗号などにも応用できるので、脱出ゲームメーカーのゲーム制作に少し慣れてきたら是非チャレンジしてみてください！

今、脱出ゲーム作ってるトコ – LINE スタンプ | LINE STORE

自分の作ったゲームを友達や家族にシェアしたい！でも、なかなかきっかけがない。そんなあなたの背中を押してくれるスタンプ出来ました！

store.line.me