マップ機能の導入方法

公式ガイドはこちら

マップ機能の概要

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用ということでぜひ参考にしてみてください。