こんにちは！ Tuskです！
今回は、ツクールmz / mv 向けプラグイン「ParallaxLayerMap.js（多層レイヤー一枚絵プラグイン）」についてを書かせて頂こうと思います。
「ParallaxLayerMap.js」は、下記のリンク先にて配布されています。
安心・信頼のトリアコンタンさんによるプラグイン！
・トリアコンタン様の「Delusional Field」
また、当サイトの記事は、あくまで僕の初心者な目線からの情報共有です。
当サイトの情報の確認・精査は、自己責任にてお願い致します。
下記の記事を見て頂けますと幸いです。
・今後、書いていきたい記事について
さて、この「（多層レイヤー一枚絵マッププラグイン）」ですが、どの様なプラグインかと言いますと、ツクールでのマップ制作をマップタイルではなく、画像で行うことができるプラグインです。
簡単に言うと、画像で作成した「マップA」をイベントに設定してマップ上に配置すると、マップとして画像「マップA」を表示してくれるというモノ。
そして、プライオリティ（キャラ表示のレイヤー）でマップをレイヤー構造にできるため、実質レイヤーが無限に使えるというモノです。
このため、マップとしての表現力はかなりアップすることができます。
しかし、マップ画像にアニメーションをさせる事は基本的にできないため、動くマップを作成しようとなるとひと工夫が必要になります。
流水や水面などの動く表現をしたい場合は、その部分だけをマップチップにするなど、やり方を考えなくてはなりません。
導入
プラグインの導入は普通のプラグインと同じです。
ツクールのプラグイン管理からプラグインをインポートして、有効にしてください。
他に必要なプラグインなどは特にありませんので、この辺はいつも通りでOKです。
プラグインの設定
このプラグインには、特にパラメーターの設定などはありません。
インポートしたら、マップ表示専用のイベントを作成して、イベントのメモ欄にマップとして表示する画像を指定するタグを記載するだけです。
しかし、当然ながらパララクスマップ用のマップ画像は事前に準備しておく必要があります。
作りたいマップの大きさに合わせたマップ画像（PNG）を準備しておき、
プロジェクトフォルダ＞「img」フォルダ＞「parallaxes」フォルダの中に画像を保存しておきましょう。
画像の作り方に関しましては、次項目にて。
マップ画像の作成
マップ画像の作り方については、人それぞれやり方があると思います。
しかし、基本的な事が分かってないと、どうやって画像を作ったらよいモノか分からないと思います。
そこでこの項目では、同じ初心者様に向けて、僕なりの画像の作り方を書いておきたいと思います。
マップ画像の大きさの決め方
これまでにツクール上でマップタイルを使ったマップ作成しかやった事が無い場合、画像でマップを作成するとなると、画像の大きさがよく分からないかもしれません。
しかし、これは別に難しい事ではありません。
ツクールのマップは、48px ✖ 48px という大きさの「タイル」という単位でマップの大きさを設定します。
マップの作成時に幅と高さを設定する項目があると思いますが、それがマップの大きさです。
つまり、ツクール上で「幅：17タイル、高さ：13タイル」という大きさのマップを作成するとなれば、パララクスマップ用画像は「幅：816px、高さ：624px」という大きさで作成すれば、ぴったり合うサイズとなります。
そうです！
幅＝17タイル ✖ 48px、高さ＝13タイル ✖ 48px という単純な計算です。
そして、キャラクターが通る道や建物の壁などを48px区切りで作成すれば、タイルで作成するのと同様に違和感なく作成する事が出来ます。
Photoshopやクリップスタジオなどでマップ画像を作成する時は、まずツクール上でマップの大きさをタイル単位で決めておき、そこから画像の大きさを割り出して作成していくと作りやすいです。
また、グラフィックソフトのグリッド表示機能を使って、48px単位のグリッドを表示させておけば無理なくマップ画像を作成する事が可能です。
ツクールのタイルでマップ画像を作成して加工する
さて、マップ画像サイズを割り出せたとして、いきなり無の状態から画像を作成するのは難しいですし、何より手間がかかります。
そこで、僕の様な初心者さんにおすすめなつくり方が、ツクール上でタイルを使ってマップを作製した後に画像として出力し、それを加工してマップ画像を作成するというやり方です。
「それ何の意味があるの？」なんて思われるかもしれませんが、ツクールではタイルセットの組み合わせに制限があるのと、影や光の表現には乏しいところがあります。
画像として加工するだけでも、マップ表現のクオリティはかなりアップさせることができますよ！
↑
どうでしょう？ なかなかいい感じではありませんか？（自画自賛）
タイルで作成してから加工するだけでも、かなり雰囲気を変える事が出来ますし、パララクスマップ作成の練習になると思います。
そこで僕の場合は、ツクールMZでマップ作成用のプロジェクトを作成し、持っているマップタイル素材を全てぶち込んであります。
そして、そのプロジェクトでマップを作製した後、ツクールMZの「画像として保存」機能を使ってマップ画像を出力し、それをクリップスタジオで加工するという形でパララクスマップを作成しています。
ちなみに、マップ画像の出力についてですが、MVとMZはそれぞれ以下の様な仕様となっています。
＜ツクールMV＞
デフォルトでマップ画像を出力する機能が無いので、プラグインを使う必要あり。
おすすめのプラグインは、奏ねこま様が作成なされた「MpiGetMapImage.js」です。
また、レイヤー別の編集機能が無いので、 「ParallaxLayerMap.js」でレイヤーを細かく設定した凝ったマップを作ろうとすると、ちょっと工夫してマップを作成する必要があります。
＜ツクールMZ＞
デフォルトでマップ画像を出力する機能あり。（マップ編集画面でマップリストの名前を右クリック→画像として保存）。
ただし、63タイル ✖ 63タイルの大きさまでしか等倍サイズで出力できません。
それ以上のサイズになると、何故か画像の大きさが半分になってしまいます。
また、編集画面に表示された状態のマップをそのまま画像として出力するため、レイヤーごとに別画像として出力したい場合は、レイヤーごとに分けて別マップにする必要があります。
僕の場合は、一度作ってからマップをコピーし、レイヤーごとに分けてから画像出力しています。
上記の仕様を理解しておけば、後はマップ画像を出力してグラフィックソフトで加工！
光や影をグラフィックソフトのエアブラシなどで付けるだけでも、マップ表現がかなり豪華になりますよ！
他にも、３Dモデルを２D画像として加工したり、写真素材を加工して作ったり、やりようによって幅広い表現が可能となるのがパララクスマップの魅力と言えると思います。
マップに画像を設置する
マップ画像を準備したら、あとはマップ表示用のイベントを作成し、そのメモ画面に以下の様なタグを記載するだけで、作成した画像がマップとして表示されます。
<PLM:ファイル名>
作成した画像を一枚絵マップ画像として表示。
<PLM_Blend:1>または<PLM合成:1>
表示する一枚絵マップ画像の初期合成方法を設定。
どうやらパラメーターを1にすると加算の様ですが、僕はこれを設定したことが無いので実際のところ分かりません。（申し訳ない……）
しかし、恐らくはピクチャの設定と同じ（0:通常 1:加算 2:乗算 3:スクリーン）なんじゃないかと思われます。
<PLM_Opacity:数値>または<PLM不透明度:128>
表示する一枚絵マップ画像の不透明度の初期値を設定します。
こちらはピクチャと同じですね。
そして、マップ画像様に作成したイベントでは、イベントの画像とオプションは無視される仕様となっている様です。
その他の項目は通常のイベントと同じように機能し、プライオリティも通常のイベントと同様に設定すれば機能します。
通行許可の設定をする
さて、マップ上に画像を設置する事ができたら、次は通行設定をしなくてはなりません。
これはどうやって設定するのかと言えば、透明のマップタイルを作成して通行設定をして、表示されるマップ画像に合わせて設置するしかありません。
しかしここで問題となるのが、マップの編集画面でパララクス用のマップ画像が表示されないという事です。
そのため、僕の場合はマップタイルを設置する時だけ遠景画像にパララクス用マップ画像を設定し、それに合わせてマップタイルを設置していくという方法をとっています。
また、透明のマップタイルでは間違えた時に分からなくなってしまうという問題もありますが、実際のゲーム上で表示されるマップでは、タイルよりもパララクス用マップ画像が上に表示されますので、分かりやすいマップタイルで設定しても大丈夫です。
ただし、パララクス用マップ画像に通行不可能な透明の部分を作りたい場合（崖の先から遠景が見えるマップなど）は、やはり透明のマップタイルを使う必要は出てきます。
こんな感じ・・？
↓
おすすめの方法としては、トリアコンタンさんのコチラのページからサンプルプロジェクトをダウンロードして、プロジェクトの中のパララクス用マップタイル（どらぴか様作成）を使うのが一番わかりやすいです。
マップ上で動く部分の工夫
流水の表現や水面の表現など、マップ上にも動きを表現したい部分はあると思います。
しかし、この 「ParallaxLayerMap.js」にはマップ画像をアニメーションさせる機能は備わっていません。
はためく旗や水車など一部分となる表現はイベントの設置などでも表現できるとして、問題は流水や水面などのアニメーションタイルで表現される部分。
これはやはり、アニメーションさせたい部分だけをアニメーションタイルで表現するなど、工夫を凝らす必要があります。
そこで僕がやっている一つの方法として、パララクス用マップ画像を合わせて切り抜く必要はありますが、APNGという動く画像で表現する方法です。
これもトリアコンタンさんによるプラグイン「ApngPicture.js」が配布されていますので、これを導入したAPNGによる表現になります。
ツクールMV用はコチラ
ツクールMZ用はコチラ
ただ、APNGを作成するのにも色々と試行錯誤しなくてはなりませんし、プラグインの導入と共にライブラリも導入する必要があるなど、「ApngPicture.js」を使用する上で苦戦した部分が色々とあります。
このプラグインについては、また別記事を書きたいと思います。
まとめ
同プラグインは、イベントに表示画像を設定して設置するだけで画像の表現によるパララクスマップが作成できるという、一見するとシンプルなプラグインです。
しかし、実際に使って見ると、やはり理解すべき点が工夫も必要となってきます。
とはいえ、このプラグインを使いこなせれば、マップタイルの組み合わせで苦戦する部分や、レイヤーの組み方に苦戦する部分を解消するができますし、マップの表現力をグンと高める事ができます。
個人的にはかなりおすすめのプラグインです。
実は、この記事に書ききれなかっただけで、この 「ParallaxLayerMap.js」 を使ってマップのデザインをゲーム内から変えてしまうという荒業も考えたりしました笑
↓
こういう応用的な部分に関しましても、後に記事にできればと思います。（気が向いたらｗ）
・・でもね、能力あるクリエイターさんから言わせると、これは鼻で笑われる奴なのかもしれないです。
ハイｗ
コメント