Help us understand the problem. What is going on with this article?

Unityでジグソーパズル・ノベルを作る【その1】

はじめに

自分が制作中のゲーム「水神の末裔」の制作工程(主としてUnity部分)をシェアしていこうと思います。

ゲーム概要

「水神の末裔」は、ジグソーパズルとノベルゲームをくっつけたようなゲームです。
(SFCの「オリビアのミステリー」が元ネタです)
20210117_072407.gif

ストーリーパート、会話パート、ゲームパートに分かれていて、ストーリーパートは地の文のストーリー、会話パートは立ち絵と台詞の会話劇、ゲームパートは絵の動くジグソーパズルという構成です。

詳しくは下記サイトの体験版をご参照ください。

体験版URL:http://nishi835.sub.jp/SuijinSite/index.html

それではまず、ゲームの中心部分である、ジグソーパズル部分から作っていきます。

画面サイズの決定

その前に、画面サイズを決めましょう。
今回は、フルHDのサイズである1920px×1080pxで行きます。

画像の通り、解像度(画面サイズ)を変更します。
スクリーンショット 2021-01-18 173635.png
スクリーンショット 2021-01-18 173728.png

パズルフレームの準備

画面サイズが決まったら、早速パズルの置き場であるパズルフレームを準備します。
フレームの縦横比は、ピースの縦横比と同じにします。
今回は、基本的にピースの縦横比を横3:縦2とします。

パズルを直接置く中心部分のサイズを縦810px×横540pxとします。
外枠(ベゼル)があったほうが、パズルフレームらしさが出るので、縦横100pxずつ外枠を足します。
(全体の比率が変わってしまいますが、実際にパズルを置く中心部分の比率が3:2であればOKです)
フレームブログ用_20210117.jpg
(上画像は縮小版なので、DLされる場合は下記リンクからどうぞ)

DL用サンプル(右クリック > 名前を付けてリンク先を保存)

UnityのProjectビューで、「Textures」という名前のフォルダを作り、その中に先ほど用意したパズルフレームのファイルをドラッグ&ドロップします。
スクリーンショット 2021-01-18 222158.png
これでUnity上でパズルフレームの画像を使えるようになりました。
このパズルフレームの画像を、Hierarchyビューにドラッグ&ドロップします。
スクリーンショット 2021-01-18 222651.png
それから、Hierarchyビューでパズルフレームを選択した状態で、InspectorビューのPositionのZの値を10に変更します。
スクリーンショット 2021-01-18 223921.png

これで、パズルフレームの準備ができました。

パズル制作の流れ

いよいよパズル部分を作り始めるにあたって、今後の流れを確認しておきましょう。

1.絵を用意する
パズルになるイラストを用意します。当記事では動く絵を使いますが、普通の止め絵でも構いません。サイズはフレームの中心部分と同じ、810px×540pxにします。

2.絵を分割する
この工程が、技術的な肝になります。
「絵を分割する」とありますが、イメージ的には、バラバラのピースに一枚絵の部分部分をそれぞれ描くことで一つの絵に見せる、という感じです。
詳しくは後述します。

3.ピースを動かせるようにする
指カーソルなどでピースを掴んで、ドラッグで動かせるようにします。

4.ピースをボードにスナップさせる
ピースを完全に自分できれいに並べることは困難なので、ある程度の位置に置いたらスナップしてきれいに並ぶような仕組みを作ります。

5.クリア判定を作る
ピースが正しい位置に並んでいるかどうか、判定する仕組みを作ります。
一つ正しい位置にはめるごとに、ピースが光るようにし、全部正しくはめたらクリアの表示が出るようにします。

これでパズル部分の骨格は完成です。

最後に

次回は、動く絵の用意からはじめます。

haraken510
趣味のゲーム制作者です。 Unityを使っています。
http://nishi835.sub.jp/SophiaSite/index.html
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away