TITLE:マップ機能の導入方法
公式ガイドは[[こちら>https://docs.google.com/document/d/17orkWCk2DAll6uFnELs_E-OeNX8V19HeaOgCOXChbIo]]
#contents
~

*マップ機能の概要[#about]
Ver12.6.0でマップ機能が実装されました。
マップ機能とは、「マップ」と呼ばれる2D領域を設定し、その領域を移動する個体をプレイヤーが操作できるようにする機能です。
-マップは「Tiled」という外部ツールを用いて作成します。
作成したマップをLight.vnで読み込み、各種設定を行うことでマップを利用することができます。
-マップには「タイル」という単位があります。
一定の大きさの矩形（方形が一般的）を1単位とし、整列させてマップを形成します。
~

*ツール導入方法[#install]
「Tiled」はこちらの[[公式サイト>https://thorbjorn.itch.io/tiled]]からダウンロードできます。
無料で利用できますが、余裕があれば支援も検討してください。
ダウンロードのみの場合には「No thanks, just take me to the downloads」をクリックします。
インストールはすべて「Next」を押しても基本的には問題ありません。
#ref(map_1.png,nolink,ダウンロードはここから)
#ref(map_2.png,nolink,支援をするか訊かれます)
~

*ツール使用方法[#how2use]

**マップ新規作成[#create]
エディターを起動して、まずはマップを新規作成します。
メニューバーを「ファイル」→「新規」→「新しいマップ」と進みましょう。
#ref(map_3.png,nolink,エディター)
~
マップの設定では、以下のように指定しましょう。
-マップ
--種類：□型タイル（長方形マップ）
--タイルの出力形式：CSV
--タイルの描画順序：左から右、上から下
-マップの大きさ
--固定（幅と高さは任意）
-タイルの大きさ（幅と高さは任意）
#ref(map_4.png,nolink,マップ新規作成)
~

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

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

タイルセットの設定では、以下のように指定しましょう。
その後、タイルセット追加後に右下のツールにある''「埋め込みタイルセット」を選択します''。
-タイルセット
--名前：任意
--種類：均等にタイルが並んだ画像を使用
--マップに埋め込み：チェック解除
-画像
--パス：タイルセットを指定（「参照」で該当の素材を指定）
--透過色を設定する：不要（素材側で調整できる）
--タイルの幅・高さ：任意（タイルのサイズに合わせる）
--上左・タイル間の余白：任意（タイルセットでチップを隙間なく配列するなら0px）
#ref(map_6.png,nolink,新しいタイルセット)
~

**アニメーションタイル[#animation]
タイルチップにアニメーションを設定することができます（Ver12.8.0以降で使用可能）。
まずメニューバー直下のタブ、または右下のツールバーの「タイルセットを編集」を選択してタイル編集を開きます。
#ref(map_9.png,nolink,タイル編集)
~
タイル編集のツールバーにあるカメラボタンでアニメーションエディターを開きましょう。
#ref(map_10.png,nolink,アニメーション設定)
~

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

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

**マップ編集[#edit]
タイルチップをレイヤーに配置することがマップ編集の主部です。
配置したいタイルチップとレイヤーを選択したうえで、ツールを選択してタイルに配置します。
#ref(map_8.png,nolink,マップ編集)
~

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

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

*解説動画[#movie_nafumi]
**動画：「マップ表示できた記念解説動画」 [#c82f9d05]
なふみ氏によるマップ機能導入の解説動画を提供いただきました。
[[VOICEVOX>https://voicevox.hiroshiba.jp/]]（読み上げソフト及びそのキャラクター）を使用し、丁寧で分かりやすい解説動画となっております。
#flex_container(flex-start){{{
#flex_box(350px){{
#nicovideo(sm41265967)
}}
}}}

**画像：「キャラチップドットの並べ方」 [#b758b76c]
キャラクター停止時・移動時の配置画像です。提供者：なふみ
Lightvn用ということでぜひ参考にしてみてください。&br;
&attachref(./lvn_mapchara.png,nolink,キャラチップドットの並べ方);

~
~
~