マップ機能の導入方法

Last-modified: 2022-10-26 (水) 11:32:10

公式ガイドはこちら


マップ機能の概要

Ver12.6.0でマップ機能が実装されました。
マップ機能とは、「マップ」と呼ばれる2D領域を設定し、その領域を移動する個体をプレイヤーが操作できるようにする機能です。

  • マップは「Tiled」という外部ツールを用いて作成します。
    作成したマップをLight.vnで読み込み、各種設定を行うことでマップを利用することができます。
  • マップには「タイル」という単位があります。
    一定の大きさの矩形(方形が一般的)を1単位とし、整列させてマップを形成します。

ツール導入方法

「Tiled」はこちらの公式サイトからダウンロードできます。
無料で利用できますが、余裕があれば支援も検討してください。
ダウンロードのみの場合には「No thanks, just take me to the downloads」をクリックします。
インストールはすべて「Next」を押しても基本的には問題ありません。

ダウンロードはここから
支援をするか訊かれます


ツール使用方法

マップ新規作成

エディターを起動して、まずはマップを新規作成します。
メニューバーを「ファイル」→「新規」→「新しいマップ」と進みましょう。

エディター



マップの設定では、以下のように指定しましょう。

  • マップ
    • 種類:□型タイル(長方形マップ)
    • タイルの出力形式:CSV
    • タイルの描画順序:左から右、上から下
  • マップの大きさ
    • 固定(幅と高さは任意)
  • タイルの大きさ(幅と高さは任意)
    マップ新規作成

ファイルを保存するディレクトリは任意ですが、ファイルの種類は「JSON マップファイル」で保存する必要があります
既定では「Tiled マップファイル」で保存されるため、注意が必要です。

タイルセット

マップに設置するタイルの素材は「タイルチップ」、タイルチップを規則的に配列した画像素材は「タイルセット」と呼びます。
マップエディターでタイルチップを使うには、タイルセットを用意してそれを読み込む必要があります。
まず、エディターの右下にある「新しいタイルセット」を選択します。

新しいタイルセット


タイルセットの設定では、以下のように指定しましょう。
その後、タイルセット追加後に右下のツールにある「埋め込みタイルセット」を選択します

  • タイルセット
    • 名前:任意
    • 種類:均等にタイルが並んだ画像を使用
    • マップに埋め込み:チェック解除
  • 画像
    • パス:タイルセットを指定(「参照」で該当の素材を指定)
    • 透過色を設定する:不要(素材側で調整できる)
    • タイルの幅・高さ:任意(タイルのサイズに合わせる)
    • 上左・タイル間の余白:任意(タイルセットでチップを隙間なく配列するなら0px)
      新しいタイルセット

アニメーションタイル

タイルチップにアニメーションを設定することができます(Ver12.8.0以降で使用可能)。
まずメニューバー直下のタブ、または右下のツールバーの「タイルセットを編集」を選択してタイル編集を開きます。

タイル編集



タイル編集のツールバーにあるカメラボタンでアニメーションエディターを開きましょう。

アニメーション設定


予め1フレームの時間を設定しておいて、アニメーションフレームにするタイルチップをダブルクリックすると左に追加されます。
左下にプレビューが表示されるので参考にしましょう。
アニメーションが設定されたタイルチップは右下に黒白帯を持ち、これを選択するとアニメーションタイルとして配置できます。

タイルレイヤー

マップにはレイヤーが存在し、Light.vnでは「タイルレイヤー」のみを用いることができます
レイヤーはエディターの右上に一覧が表示され、左下のボタンからレイヤーを追加することができます。
レイヤーの名前はLight.vn側で対象名として指定することになるため、扱いやすい文字列にすることをおすすめします。
(対象のタイルレイヤーをダブルクリックしたり、右クリックから「レイヤーの設定」へ進んだりして変更可能)

レイヤー


マップ編集

タイルチップをレイヤーに配置することがマップ編集の主部です。
配置したいタイルチップとレイヤーを選択したうえで、ツールを選択してタイルに配置します。

マップ編集


歩行領域用レイヤー

マップで移動可能な領域は個別のレイヤーで作成しておき、コマンド「歩行領域」でそのレイヤー名を指定します。
適当なタイルを配置したら、基本的には一覧のレイヤー名の右にある目のボタンを選択して非表示にします。
非表示にしなければならないわけではありませんが、歩行領域を設定する作業がやや複雑になります。

書き出し

マップデータの書き出しは、メニューバーを「ファイル」→「エクスポート」と進んで行います。
必ずファイルの種類を「JSON マップファイル」と指定しましょう
JSONマップファイルとタイルセットの画像ファイルの両方をフォルダ「Maps」以下のディレクトリに配置すれば準備完了です。

解説動画

動画:「マップ表示できた記念解説動画」

なふみ氏によるマップ機能導入の解説動画を提供いただきました。
VOICEVOX(読み上げソフト及びそのキャラクター)を使用し、丁寧で分かりやすい解説動画となっております。

画像:「キャラチップドットの並べ方」

キャラクター停止時・移動時の配置画像です。提供者:なふみ
Lightvn用ということでぜひ参考にしてみてください。

キャラチップドットの並べ方