BIT/O

ツクールやゲーム・WEB・デザインなど

ツクールMV、マップを1枚絵(Parallax Mapping)で作る

ツクールMVはマップチップや遠景画像を組み合わせるなどして、主人公パーティー達が歩くマップ<舞台>を作成することが可能ですが、凝りだすと「もう少し自然な形の草むらにしたい」とか「この廃墟は雰囲気を高めたい」など、ツクール的なマップデザインの一歩先にいきたいと思うことがあります。

 

ツクールMVの公式サイトでも紹介されていますが、ツクールMVではそんな方々のためにマップを自作の1枚絵として取り込むことがカンタンにできるよう機能がついています。「遠景」の画像ファイル名の先頭に「!」を付けることで、視差0(パーティーが移動しても遠景がついて来ない)ように設定できるようになったのです。

こういうのを Parallax Mapping と言うそうです。

 

今回は、自身のメモ的な意味もこめて具体的な作成手順をご紹介したいと思います。

マップを1枚絵(Parallax Mapping)で作る手順

マップの1枚絵を作成・・・といっても、ツクールMV本来のマップデザインから逸脱すると違和感があるので、ツクールMVで作成したマップを元に作成を進めます。

1. いつもどおりマップを作成する。

f:id:bitorchard:20160123200324g:plain

まずは通常のマップの作成を行うため、マップリストで右クリックからコンテキストメニューを開き、「新規...」を選択。マップの設定を行い「OK」をクリックします。

 

f:id:bitorchard:20160123203023g:plain

そして通常通り、マップチップを組み合わせてマップを作り上げます。

 

2. スクリーンキャプチャを行う

編集画面もしくはプレイ画面からキーボードの「Print Screen」ボタン等を押して、スクリーンキャプチャを行います・・・・・・が、

実際には、主人公やイベントの表示などが邪魔してなかなか難しい場合があります。

そこで今回は「プラグイン」を導入してマップのみをスクリーンキャプチャする方法をご説明します。

 

使用するプラグインは「Orange Mapshot」というもので、マップ全体を画像として保存することができる機能が備わっています。プラグインは、次のサイトよりダウンロードできます。

ダウンロード保存したプラグインを、
C:\Users\<ユーザ名>\Documents\Games\<プロジェクト名>\js\plugins のフォルダ内に設置。

そして、ツクールMVの編集画面から [1]プラグインボタン(パズルピースのマーク)」をクリック、[2] プラグイン画面のリストで右クリックからコンテキストメニューを開き、[3]「編集...」を選びます。[4] 出てきたプラグインのウィンドウの中にある「名前」をクリックし、[5] プラグインOrangeMapshot」を選びます。

f:id:bitorchard:20160123205905g:plain

 

そのままでも使えるプラグインなのですが、画像形式や品質、保存先を変更する場合などは、次のように設定することもできます。

f:id:bitorchard:20160123212446g:plain

 

設定がし終わったら「OK」をクリックしプラグイン管理画面を閉じます。

テストプレイを実行し、キャプチャを行いたい場所で、キーボードの「Print Screen」ボタン(初期設定)をクリックすると・・・

f:id:bitorchard:20160123213158g:plain

Mapshot saved to <保存先のフォルダパス名>」が表示され、保存先のフォルダが自動で開きます。これでスクリーンキャプチャが完了しました。

 

Macで動作しない場合は、設定でKeycodeを49(スペースキー)とし、imagePath(保存先フォルダ名)を変更すると動作する場合があるようです。

※実は、ツクールMVには作成したマップを画像として保存する機能がデフォルトで備わっているのですが、保存される画像のサイズがなぜか半分に縮小されるという謎仕様となっています(マップリストの対象マップで、右クリックからコンテキストメニューを出し「画像として保存...」)。

 

3. スクリーンキャプチャ画像を元にマップを改造する。

キャプチャした画像を Photoshop などの画像編集ソフトで開き、改造を施します。この時に注意すべき点は、パーティが歩けるかどうかがわかり辛い「あいまいな箇所」を、なるべく作らないようにしてください

基本的にツクールMVで作成したゲームでパーティは1マス1マスでしか移動できないので、そのような箇所を作るとプレイヤーが混乱するおそれがあります。 

またパーティーやイベントより高い場所に位置するオブジェクト(樹木の上部など)を「歩けるように見える範囲」に描きこまないようしてください。今回の1枚絵(Parallax Mapping)は遠景として設定されるためです。

 

▼改造前
f:id:bitorchard:20160123215711g:plain

▼改造後
f:id:bitorchard:20160123224649g:plain

 

今回の改造前後の違いはおわかりになるでしょうか?

井戸周辺の床を底上げし、石畳と草むらの境をゆるやかに変化させ、レンガの壁を薄くし、木を植え、影をつけ・・・などを行ってみました。

 

4. マップ画像をゲームに設置する。

作成した画像を C:\Users\<ユーザ名>\Documents\Games\<プロジェクト名>\img\parallaxes に設置します。保存ファイル名の頭に必ず「!」をつけてください。

そしてツクールMVのマップリストの対象マップで、右クリックからコンテキストメニューを開き「編集...」をクリックしてください。

[1] 開いたマップの設定の「遠景」の「画像」から画像の選択ウィンドウを表示します。[2] 画像の一覧から表示する画像を選択します。[3] OKをクリックします。

f:id:bitorchard:20160123231137g:plain

※キャプチャ用に作成したマップは透明チップなどで消してください。

 

この状態で、テストプレイを行うと、きちんと背景に改造した画像が表示されているのがわかります・・・が、

この状態では、パーティを動かせません!いくら動かそうとも壁に当たる音がむなしく響くだけです。

 

5. 通行設定を行う。

パーティーを移動させる方法のひとつに、透明な画像をマップチップとして用意して、データベースのタイルセットから画像の追加と通行設定を行い、それを貼り付ける方法があります。この方法だとプラグインは不要ですが、見た目にどこに通行可能なタイルをセットしたかが、わかり辛くなってしまいます。

 

そこで、今回は移動機能を拡張する「TMMoveExプラグインを用いたもうひとつの方法を紹介します。 

TMMoveExプラグインは次のサイトよりダウンロードできます。

RPGMakerMV プラグイン素材 マップ系 - ひきも記は閉鎖しました。

 

まずは先ほどの同じく、
C:\Users\<ユーザ名>\Documents\Games\<プロジェクト名>\js\pluginsのフォルダ内にプラグインを設置し、プラグインを有効化させます。

f:id:bitorchard:20160123233440g:plain

TMMoveExは、リージョンによる通行の可否の設定を行うことのできるプラグインです。なお「リージョン」とは日本語で「範囲、領域」を意味します。

 

プラグインの設定は次の通りです。
リージョンに関するの設定のほかに、壁の衝突音の設定も行えます。

f:id:bitorchard:20160123235157g:plain

 

対象のマップを開き、[1] マップチップの「R(リージョン)」のタブを開きます。[2] 251と252のリージョンを選択し、[3] マップ上の通行設定を行います。

f:id:bitorchard:20160124000347g:plain

※今回の場合252は使わなくてもいいんですけど念のため。

 

これでテストプレイを再度行うと・・・

f:id:bitorchard:20160124001309g:plain

成功です! 遠景として設定された画像の上を歩くことができました。

 

なお、リージョンによる通行設定については、準公式プラグインの「YEP_RegionRestrictions」でも可能です。

 

6. 背景がボケる件

しかし実際プレイをしてみると遠景画像に違和感を覚えます。
実は背景が(意図的)にボケているのが原因のようです。そちらを回避する「視差ゼロ遠景のぼかし除去プラグイン」もあるようなので、ご紹介します。

https://raw.githubusercontent.com/triacontane/RPGMakerMV/master/ParallaxesNonBlur.js

これで背景がクッキリです。

 

これにて、「マップを1枚絵(Parallax Mapping)で作る手順」については、終了となります。ありがとうございました。

 

おまけ. さらに雰囲気を良くする。

今回は遠景に自作のマップ画像を表示しましたが、プラグインを用いて「近景」にも自作の画像を表示する方法も紹介します。

今回使用するのは、マップの機能を拡張して近景画像を設定できる「Foreground」というプラグインです。ただ、このプラグイン準公式プラグインなのですが、どこから入手をできるのかが不明です。英語体験版の中にあるという話があるようですが、現在もあるかどうかは確認しておりません。

サンプルゲーム「DiableCaprice」の中に入ってました(\DiableCaprice\js\plugins)。

 

プラグインをなんとか入手できましたら、プラグインを有効にします。なお、プラグイン画面においては設定は不要ですが、個々のマップには設定を記述する必要があります。

まず、近景に設定する画像を
C:\Users\<ユーザ名>\Documents\Games\<プロジェクト名>\img\parallaxes に入れます。
ファイル名は、視差0とする場合は必ず頭に「!」を付けてください。

今回は「光と影」をテーマにした近景画像を作成しました。

f:id:bitorchard:20160124011122g:plain

 

そして [1] マップリストで右クリックをしコンテキストメニューを開きます。[2]「編集...」を選択肢、マップの設定ウィンドウを開きます。[3]「メモ」の項目にある、テキストエリア内に、次のような記述を行います。

<fgName:!●●●●●><fgLoopX:0><fgLoopY:0>

fgNameには、拡張子を除くファイル名を。fgLoopXは横方向へのループの有無、fgLoopYは縦方向へのループの有無をそれぞれ、0(無効)か 1(有効)を入れます。

また近景は、縦横にアニメーションさせることもできます。
アニメーションさせる場合には次のように記述してください。

<fgName:!●●●●●><fgLoopX:1><fgLoopY:1><fgSx:1><fgSy:1>

fgSxは横方向へのアニメーションの有無、fgLoopYは縦方向へのアニメーションの有無をそれぞれ、0(無効)か 1(有効)を入れます。なお、fgLoopが 0(無効)の場合はアニメーションも無効になります。

f:id:bitorchard:20160124010548g:plain

 

そして、テストプレイを実行すると・・・・

 

f:id:bitorchard:20160124012633p:plain

マップに木陰と光の射しこみが!

デフォルトの雰囲気とはずいぶんと変わりました!もっと工夫をすると、さらにさまざまなものを生み出すことができるんじゃないかと感じます。

 

完成動画

今回使用したプラグイン

プラグインを導入する際は使用上の注意をよく読み、自己責任で使用してください。プラグインの使用よって生じた損害は当方が負うものではありません。

 

このほかにもこんな方法があるよ、という方がいらっしゃれば
コメントいただければと思います。

 

※2016/3/5 1:25 YEP_RegionRestrictions(リージョンによる通行設定)プラグイン、視差ゼロ遠景のぼかし除去プラグインについて、Foregroundプラグインの在り処 について追記しました。

※2016/9/24 0:23 ツクール開発部さん公式アカウントにて紹介されました。