投稿記事

[講座]マップをエフェクト・パーティクルで盛って見映えさせよう!

追記<1/20>

記事内で紹介しているブレンドモード「オーバーレイ」を使用した演出がツクールMZでは動作負荷が高く、特にスマートフォンや低スペックPCではFPSを落とす原因となるため非推奨とさせて頂きました。

オーバーレイに関する検証や、対応方法を別記事にまとめてますのでご一読ください。



ハロー、プレミアムツクールデー!

先月のマップ制作RTA動画に引き続き、今月は出来上がったマップに2分20秒のTwitter動画の尺でエフェクトを盛っていく動画を作ってみました!

RPGを作り始めてから長らく、

「神マップが作れずとも、手軽に映えさせたい!」

という目標をゆるく追いかけてきましたが、


パーティクルプラグインのプリセットを充実させたり、自動装飾プラグインのクラファン開発にかこつけてポストエフェクト系プラグインを開発し、

クオリティ手軽さの両面において、

ひとまずの自分で納得できる水準を超えることができました!


ポストエフェクトはマップを手軽に盛れるだけでなく、



同じマップでもガラッとイメージを変えることができます!




いくら神クオリティのFSM系タイルとはいえ私みたいな凡マップスキルで組むと、

どうしても代わり映えしないマップに陥りがちです…

(上手い人が組むと、色彩が統一されて美しかったり、構図がダイナミックだったり、細かな遊び心が詰め込められたりとすごいですよね👀)


マップ自体はセオリーに従って組み、パーティクルやポストエフェクトで個性やバリエーションをつけられるのは私向きですごいお得感です!


この記事では自作プラグインの宣伝もとい紹介をしつつ、他所様のプラグインも含めて

マップ画面にどんなエフェクト・演出を活用できるか広く紹介していこうと思います!

(記事内で他サイト様の素材ページを紹介してますが、必ず素材の利用規約を確認した上で利用させてもらいましょう!)


ちなみに、最近はプラグインを自作してばかりで他プラグイン作者様の新しいプラグインなどは存じておりません…!

何か使いやすいプラグインなどあればコメントで教えてもらえると嬉しいです!



フィルター系プラグイン

画面作りの本丸!

マップ全体に色補正・ブルームなどのフィルターをかけて雰囲気を大胆に変えます。
(※負荷が重めのフィルターもあるので安易な重ねすぎにはご注意を!)

FilterControllerプラグイン<ツキミ様>

フィルタープラグインといえばツキミ様のFilterControllerプラグイン。

PIXi用のフィルターライブラリpixi-filter.jsに含まれるほとんどのフィルター機能をこれ1つで呼び出し&操作することが可能です!

ただし、マップごとにフィルターのパラメータ設定をするのは少し大変です。

マップの色味など補正するには後述のプラグインがおすすめですが、リッチな日差しエフェクトを簡単につけられるGodrayフィルターやその他のグリッチやノイズなど特殊なフィルターを使うにはこのプラグインの出番です!

他にも用途は広いのでとりあえず入れておいて間違いなし!


ジオラマ風の撮影効果プラグイン<lriki様>

マップの画面作りのためのフィルターエフェクトを盛り込んだ革命児!


* GitHub:lriki/LN_FilmicFilter

「色の補正」
「ブルーム(明るい部分をぼんやり輝かせる補正)」
「チルトシフト(画面上下をぼかす)」
「ビネット(画面のフチを暗くする)」

の4つのフィルターをまとめて設定・適応することができ、
これ1つで画面クオリティをグッと上げることができる神プラグインですね!

統合された1つのフィルターで処理を行っているため動作も軽量です!


私も当初はこのプラグインのお世話になる予定だったのですが、若干用途が合わなかったため単純に4つのフィルターを適用・編集可能なプラグインを自作しました↓


TRP_MapFilter

上述のジオラマ風プラグインに触発され、自分用に使いやすいよう自作したプラグイン。

準公式ライブラリ「pixi-filter.js」に含まれる「色補正」「ブルーム」「チルトシフト」に加えて自作の「ビネット」をまとめて編集・適用できます。

色補正

彩度・コントラストの調整やRGB補正など行えます。
全体の色彩を揃えたい場合は、彩度を抑えつつRGBを調整するといい感じです…たぶん!

ブルーム

明るい部分をさらに明るく&ぼかして輝かせます。

  • しきい値:ブルームを適用する明るさの範囲。0.1だと明るさ10%~100%部分、0.9だと90%~100%の部分まで適用、といったイメージ
  • スケール:明るくさせる強さ
  • ぼかし:ぼかす強さ

わりと負荷が重めのフィルターかも。必要なければCtrl+DでOFFにしましょう。

チルトシフト

画面上下に行くほど強まるグラデーション状のぼかしをつけます。

  • ぼかし:ぼかす強さ
  • グラデ幅:だんだんぼかせる幅。基本は画面高さの半分
  • Y座標:ぼかしグラデーションの中央となるY座標。高さ固定の横スクロールマップなどではキャラ位置に合わせるといいでしょう。

これも負荷が重めのフィルター。必要なければCtrl+DでOFFにしましょう。

ビネット

画面四隅を暗くします。

  • サイズ:ビネットの大きさ。大きいほど暗くなる範囲が大きくなります。
  • アルファ:ビネットの透明度
  • ぼかし:ビネットの境界をぼかす強さ。

ツクールの見下ろしマップは画面の上下左右が均質でメリハリがつけづらいです。

チルトシフトもそうですが、画面の上下や四隅を制限することで画面にメリハリがつき、また、自キャラがいる画面中央に視線を誘導することで没入感が高まる……気がします!


ビネットは負荷も低いので、薄っすらでもかけておくと雰囲気が出るかも?

ただし、かけすぎると画面全体が暗い雰囲気になるので注意。
(洞窟などでの視界制限に使っても○)

プラグイン販売ページ

TRP_MapFilterは「マップ自動装飾プラグイン」クラウドファンディングのブースト用プラン「限定プラグインセットプラン」に含まれています。


ビネットに関しては、後述のパーティクルプラグインでリング状に黒いもやもやパーティクルを出すことでそれっぽい使い方も可能です。

過去の回想・夢の中・闇系のダンジョンなどで使うと面白いかも?
(↓街背景が表示された際に、四隅に黒いもやもやを表示)
https://twitter.com/thiropGames/status/1605534465807175680




フォグ・テクスチャ系プラグイン

フォグプラグイン

霧・雲・日差しなどの画像を上から重ねることで情報量を増やしてクオリティアップ!


(↑ぴぽや倉庫様のフォグ画像素材ページ)

MVではgentlawk様のマップフォグプラグインをお借りしてました。


…MZではどれが主流かは不明です🙇‍♂️

ググってみた感じ、Victor Sant様のFog and Overlayプラグインなどいくつか同様とのプラグインがありそうです。


フォグ画像素材

フォグプラグインにはフォグ画像が必須です!

ぴぽや様が質・量ともに豊富なフォグ画像素材を配布されてるので、手持ちの素材がない場合は利用規約を確認した上でお借りしてみるといいでしょう!


フォグテクスチャプラグイン

追記)ブレンドオード「オーバーレイ」がMZの低スペック・スマホ向けで非推奨としました。その関係でここで紹介している旧フロアテクスチャプラグインは、フォグ全般を扱うフォグプラグインに新生しました。負荷高めとなりますがここで紹介しているテクスチャ用途のオーバーレイ表示も可能です。


フォグプラグインを使ってると、雑に重ねるだけで画面に濃淡ができてそれっぽく見えるので手放せなくなるでしょう。

ただ、画像を調整するのが面倒で、結局アルファを上下させるくらいでワンパターンに陥りがち…。

そして思いました。

「濃淡で情報量を増やしたいだけなら重ねる画像はフォトショのあれでいいんじゃ?」

「ガンマやコントラストを調整すれば濃淡の分布を調整できるし」

「拡大率を変えれば濃淡の密度も調整できる!」

「おまけに縦に潰せば霧っぽくもなりそう」

というわけで作ってみたのが「フロアテクスチャプラグイン」です。


テクスチャ画像の表示・パラメータ設定を一体的に行うことができます!

加算で霧っぽく重ねたりオーバーレイで雑にマップに濃淡をつけるのが強力です!
(※オーバーレイはMZの場合は要コアスクリプトver1.6.0以上)


このプラグインも「マップ自動装飾プラグイン」クラウドファンディングのブースト用プラン「限定プラグインセットプラン」に含まれています。

また、使い方の解説ページもあるので気になる方はご覧ください!

追記:フォグ機能

同プラグインで、フォグ全般を扱えるようになりました!

スクロール関連のフォグ用パラメータが追加され、また複数のフォグを切り替えながら設定できるようになりました。

オリジナルな機能として、スクロール付随率を変更したり独自のTilingスプライトを使用可能です。
https://twitter.com/thiropGames/status/1616407301849776130



パーティクルプラグインの併用

後述のパーティクルプラグインでも"フォグっぽい"使い方ができます。

ゆっくりしたスピードで長く画面にとどまるパーティクルでフォグっぽく使えるのですが、「画面端で使い回すループ設定」が必要だったり画面をうまるのに時間がかかるため「時間を先送りするコマンド」が必要で少し上級者向けです。



天候・パーティクル系プラグイン

天候プラグイン:MOG_ExWeather

言わずと知れたMoghuter様の神プラグイン!
バリエーション豊かな天候系のパーティクルを表示できます。

https://twitter.com/moghunter1/status/1299410052986613760

天候エフェクトプラグイン:AO

さきほど調べて見つけたAO様の天候エフェクトプラグイン。
雷がライティングと連動してたりと、かなりユニーク!

https://twitter.com/AoNbti/status/1239882809847599106


パーティクルプラグイン「TRP_ParticleMZ」

ここまでも何度か名前を上げてる自作のパーティクルプラグイン。Boothなどで販売中!

  • すぐに使える豊富なプリセットデータと画像素材
  • イベント・画面固定・天候・リージョンなどなど豊富な表示対象
  • テストプレイで見ながら編集できるエディタ

などなど、今では自分の代表的なプラグインとなってます!
追加プリセットデータ集も販売しているので、本体内臓のプリセットだけじゃ物足りなくなったら見てみてください!

↓プリセットなどを紹介。もちろんパーティクルの動きを自作したり細かく調整もできるので、操作に慣れてきたらいろいろいじってみてください!

漂う光系プリセット

「どんなマップだろうと光パーティクルを漂わせればそれっぽく見えるのでは?」

という実に安易なアイデアで11テーマ32種のプリセットを用意してます!
https://twitter.com/thiropGames/status/1557572682363072512

実際には何も考えずに表示させちゃうと、くどくなりがちなので注意!
(動画映え意識してることもあって、パーティクルがまだ大きい感じがあるので小さめに編集&調整するといいかも)

天候系プリセット

霧や雲といったフォグっぽい使い方は紹介済みなので、それ以外のプリセット例を紹介!

雨・雷

日差し

その他プリセット

  • 星空・流星・花火など遠景への表示
  • 炎・煙といったイベントへの表示
  • 土煙・水しぶきなど地形に合わせた歩行エフェクト

などなど、凝りだしたらわりと何でもできてしまうので、プリセットをうまく活用して程よく手抜きしてみてください!


オブジェクト・イベント画像

ポストエフェクトではありませんがイベントなどで光や影の画像を配置したり、マップ上に動く物体・動物を配置することでマップのクオリティや情報量を増やすことができます。

ボリュームライト/木の葉っぱの影

薄暗いマップに差し込むボリュームライト(目に見える光・光線など)はそのコントラストから間違いなく目を引くアクセントになるはず!

ボリュームライトを入れるためにあえて少し暗めの色調にしてみたり暗い物陰を確保してみたりするのも全然ありでしょう!

追記)↑はブレンドモード「オーバーレイ」を使用しています。前述の通りツクールMZかつスマホ・低スペックでは非推奨です。代わりに加算表示をすれば、雰囲気は変わりますが温かみのある日差しのように表示できると思います。


また、屋外の木が生えてるマップでは「木の葉っぱの影画像」がおすすめ!

というより、影を配置するために街路樹でもなんでも木を生やそう!(本末転倒)

(ボリューム光もですが、こういう配置するだけで見映えがよくなるっぽい画像って他になにか無いですかね?🤔)


キャラクターグラフィック表示拡張プラグイン<トリアコンタン様>

イベントに画像を設定してそのまま表示させるより、角度や拡大率を大雑把にでも調整したほうがより違和感なくとけこませるられます。

トリアコンタン様のキャラクターグラフィック表示拡張プラグインではイベントのメモ欄で簡単に設定できるのでおすすめ!

自動装飾プラグインxマップオブジェクトプラグイン

マップ自動装飾プラグインとマップオブジェクトプラグインを組み合わせて使用すると、テストプレイの編集モードで表示を確認しながら

  • 不透明度
  • 角度
  • 拡大率

など調整して配置することができて簡単です。

↓の記事で詳しい使い方など解説してます。


両プラグインとも現在は「マップ自動装飾プラグイン」のクラウドファンディングで入手可能です。

クラファン終了後(~1/31)はBoothにて販売予定ですが時期は未定です。
(クラファンの各プランは先行販売価格のためBoothでは若干の値上げになります。)


揺れる草木

揺れる草木は植物が生えてるある外観マップならどこでも配置できるので使い勝手が良いです!

揺れる草花のキャラ画像素材<白黒洋菓子店>

揺れる草花のキャラ画像素材が白黒洋菓子店様にて配布されてます。
非暗号化での利用などできませんが、利用規約を確認してお借りしてみましょう!

マップオブジェクトプラグイン

前述のマップオブジェクトプラグインには、オブジェクトをアニメーションさせる機能がついてます。

Skew回転させることで揺れてるように見せることもできるので、アニメーション画像を用意できない場合におすすめ!

https://twitter.com/thiropGames/status/1576903608175841287

ちなみに自動装飾プラグインと組み合わせてオブジェクトをドット単位で配置できます。
木を密集配置でき、通行判定もそれっぽく自動設定してくれますよ!


虫や小動物

「マップ上の動くものを増やす」という意味では、虫や小動物をイベントで配置するのも効果的でしょう!

(こういった汎用的に使えるイベントは空のマップにまとめておくとパッとコピペで配置できておすすめ!)


通行人

街であれば移動中の通行人を配置することでマップに動きがつき、住民の生活感も出ておすすめです!

拙作めませかではPCキャラ達がランダムに現れては走り去っていきます。

マップ端にキャラをセットしておいて下のような移動ルートで通行人のモブを作れます!
(邪魔になりそうなら常時すりぬけONでもOK)

  1. 透明ON&すりぬけONで待機
  2. キャラ画像をランダムに変更
  3. 透明OFF&すりぬけOFFで移動開始
  4. マップ端まで移動させる
  5. 元の座標に戻す

2.のキャラ画像をランダムに変えるにはスクリプトで「var images=["People1","People2","People3"];this.setImage(images[Math.randomInt(images.length)], Math.randomInt(8))」など。

5.の元の座標に戻すにはスクリプトで「this._x=this._realX=this.event().x;this._y=this._realY=this.event().y;」など。



ライティング系プラグイン

代用方法は数多くあれど、最も没入感ある自然な光・暗闇の明暗を表現できるのがライティング(光源)プラグインです!

……なのですが、これも私はMZの主流のプラグインを知らないので紹介できないです🤸‍♂

ざっと探してみた感じ

など、他にもいくつかありそうです。


ライティング系プラグインは動作負荷が高めです。
また、プラグインや用途によっても重い・軽いの差が出やすいプラグインです。

いろいろなプラグインを試して自分の用途に合うものを探してみるとよいでしょう!



明かりアニメプラグイン

動作負荷などを考えライティングプラグインの使用を控えたい場合などは、明かりの画像を炎やランプになどの上に重ねて表示する明かりプラグインが代替としてとても優秀です。

MVではtomoaky様のアニメ付き明かりプラグインがありましたが、
MZではそれをmunokura様が移植したプラグインが公開されているようです。

パーティクルプラグインでの代用

前述のパーティクルプラグインでもイベント状に光パーティクルを重ねることで光源っぽく見せることができます。(Z値をspritesetにして色調変化の上に重ねるのがポイント)




自分の手持ちの「マップを盛るためのアイデアストック」をざっと紹介してみました!
詳しく紹介しませんが、他にもマップクオリティやマップ体験を盛るアイデアはいろいろあるでしょう。

  • 近景・遠景
  • 環境音/BGS
  • 歩行時のステップ音

マップはゲームの作風にも関わってくる重要な要素です。

動作負荷の問題もありますので、どのエフェクトをメインに使い、
どのエフェクトをここぞの場面で使うか。

などなど、実際に試してみながら組み合わせをよく吟味してみてください!

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

クラファン開発の今後の方針/機能拡張タスクの解説紹介

「マップ自動装飾プラグイン」のクラウドファンディングが今月末(1/31)でクローズとなります。

無事に目標金額も達成し、目玉となるメイン機能も実装できました。
たくさんのご支援ありがとうございました!


本記事では、クラウドファンディングのクローズにあたって

  • クラファン終了後のリクエストPtの扱いの再説明
  • リクエスト用の機能拡張タスクの簡単な紹介

を行っていきます。

特に「競合対応のためリクエストPtを残してる方」は前半部分を必ずご一読お願いします。



今後のリクエストPtの扱い

細かなルールはスプレッドシート<開発方針とルール>にまとまっています。

ここでは今後のリクエストPtの扱いについて解説します。

リクエストPtの期限

クラファン達成時に付与されたおまかせポイント100Ptが無事に消化されたため、クラファン終了1ヶ月後の3/1で未使用のリクエストPtはすべて全体共有のおまかせPtに変換されます。


競合対応への使用を考えている方には、早めに各種プラグインを導入してゲーム全体の動作テストを行うことを推奨します。

競合があった場合は来月中に競合対応のリクエストをお願いします。
(※リクエスト時期が重なった場合は、リクエスト順に着手していくため対応に時間がかかる場合があるためご了承ください)


おまかせPtの割り振り方針

共有されたおまかせPtは

シロップが実装したい機能
需要がありそうな機能

を中心にタスク着手に割り振られます。


たとえば「この機能拡張が欲しいけど着手Ptに届かない…」という場合にもタスクにリクエストPtが入っていれば、機能拡張への需要の目安として参考にさせてもらいます。

また、最終的に着手されなかったタスクへのリクエストPtは、おすすめPtに還元されます。

スプレッドシートで但し書きさせて頂いる通り、おまかせPtは必ずすべて消化されるわけではありませんが、めぼしい機能やシロップが思いついたアイデアの試作・実装などに割り振っていくつもりです。



リクエスト用の機能拡張タスクの簡単な紹介

リクエストする際は、リクエストフォーム(クラファンDMにてURLを案内してます)より各タスクのタスクID(左端の列)をコピペして応募してください。



ツール基本機能

自動装飾エディタの基本機能を強化する機能拡張です。

簡易アンドゥ/リドゥ

Ctrl+Zでのアンドゥ。Ctrl+Shift+Zでのリドゥ機能を実装します。

工数削減のため、エディタの全状態を操作の都度バックアップする方式を採用予定です。
メモリを食うので数回分の作業のアンドゥ・リドゥまで対応予定。
操作ミスをしたときのための保険的な機能となります。


バックアップ強化

現在はセーブ1回分のデータバックアップに対応しています。
機能を拡張して以下の仕様を追加します。

  • ユーザーが設定した最大数までのマップデータのバックアップ機能の追加
  • バックアップファイルを選択して復元

別プロジェクトへコピー

ツクールのプロジェクトを跨いだ複数マップの一括コピー&ペースト機能プラグインを実装します。

MV<=>MZ間のコピーにも対応し、マップ制作用のプロジェクトを分離するような使い方ができるようになります。


パラメータ変更ウィンドウ

自動装飾エディタ起動中に、関連するパラメータ設定を変更するパラメータ変更エディタを呼び出す。

オブジェクトの抽選を行いつつ配置確率を調整、といったことができるようになります。




床装飾機能

床装飾の抽選モードに関連した機能拡張です。

部屋間の装飾連結

部屋を跨いだ床装飾オートタイルの連結を行えるようにします。地味!

通路を塞ぐ水場・穴の配置回避

移動判定を加味し、通路や部屋内の横断を塞ぐような床装飾の配置を回避します。


パレットから装飾種類ロック

パレットから床装飾の抽選に使用するタイル種類を一時的にロック・アンロックできるようになります。




オブジェクト配置機能

オブジェクトの配置機能に関連した機能拡張です。
「拡張:マップオブジェクトプラグイン」が必要となる機能が多めです。(@MapObjが印)

ドット単位自動配置@MapObj

マップオブジェクト形式でオブジェクトを抽選配置する際に、ドットをわずかにずらすことで同じ列・行に同じオブジェクトを配置した際の不自然さを緩和します。

タイルセットパレット

オブジェクト手動配置モードで、タイルセット画像から配置するオブジェクトを直接選択できるようになります。


壁際の配置率調整

歩きやすいマップに仕上がるよう、オブジェクト抽選時の配置を壁側に多く配置されるよう調整できるようになります。


通路を塞ぐオブジェクト配置回避

移動判定を加味し、通路や部屋内の横断を塞ぐようなオブジェクトの配置を回避します。


オブジェクトグループ@MapObj

複数のオブジェクトを1つのグループとして配置・編集できるオブジェクトグループ機能を追加します。(SAK○Nみたいなイメージ)

また、工数が余れば「テンプレート単位でのオブジェクトグループデータの使いまわし」「1枚の画像にまとめて負荷の軽減」といった機能も追加予定です。



自動プロセス

各種自動プロセスに関する機能拡張です。

自動プロセスの個別適用メニュー

自動実行される各種プロセスを手動で制御するためのウィンドウメニューを実装します。
(現状でも開始イベントのパラメータ設定で制御可能。)

坂地形への対応

現状の壁・崖処理は床の途中で高さが変わっているとみなす坂道の自動処理ができません。柔軟性をもって床の高さを推定して坂道地形に対応します。



個別タイル対応

特定のタイル種類に対する自動処理や、個別のタイルセットのテンプレートサンプル制作に関するタスクです。

家・内装マッピングの自動化研究

  • 研究:内装家具の配置
  • 研究:屋根の自動整形
  • 研究:家外観の装飾

現状の自動装飾エディタの機能では応用が効きづらい家外観や内装のマッピング作業を自動化・効率化させるための研究。

実用的なアイデアが出れば、工数が残っていればそのまま実装、残っていない場合は新規タスクとして登録します。


タイルセットのテンプレートサンプル制作

リクエストを受けて特定のタイルセットへのテンプレートサンプルを用意する際のタスク例です。

基本的にツクール形式のタイルセット画像が用意されているものが対象です。
ツクール形式のタイルセット画像がないものは競合対応と同じく個別対応形式となり優先度評価もBとさせていただきます。

  • ツクール形式タイルA:シンプルなタイルセットのテンプレートサンプルの作成
  • ツクール形式タイルB:複雑なタイルセットのテンプレートサンプルの作成
  • ツクール形式タイルC:複雑かつシロップが習熟していないタイルセットのテンプレートサンプルの作成
  • その他形式タイルA:ツクール形式でないシンプルなタイルセットのテンプレートサンプルの作成
  • その他形式タイルB:ツクール形式でない複雑なタイルセットのテンプレートサンプルの作成

実際にはDiscordの「#拡張機能の提案」チャンネルにて「タイルセット素材配布元へのリンク」「手組みしたサンプルマップのスクショ」を載せてご提案の書き込みをお願いします。



マニュアル整備

マニュアル・チュートリアル記事の制作に関するタスクです。
詳しく解説して欲しい機能などがあればDiscordサーバーにてどしどしご提案ください!

自動置換ルール解説

置換機能の基本的な機能の解説はすでに行ってますが、複雑な置換を行うには複数のルールを組み合わせたテクニカルなルール設定が必要になります。

ユーザー自らで複雑な手順の作業を自動化できるように、サンプルとして用意しているテンプレートマップデータの置換ルールを細かく解説します。



その他

タイルセットエディタの実装

かなり大型のツール実装タスクです。

複数のタイルセット画像のパーツを組み合わせ、新しいタイルセット画像を構築するサポートを行います。

タイルセット画像を手作業で編集することなく、いろいろなタイルの組み合わせを試し、新しいタイルセット画像を自動で書き出すことができます。


機能の提案について

ここで挙げられていない機能についてもご提案があればDiscordチャンネルの「#拡張機能の提案」より機能の提案が可能です。

提案してもらった機能について「作業工数」「優先度」を見積もって新規タスクといて着手Ptが決定されます。

提案してもらった機能について必ずリクエストして頂く必要などはありませんのでアイデアがあれば気軽にご提案ください!

限定プラグインセットのプラグインの機能拡張提案も歓迎です!

1件のチップが贈られています

チップを贈るにはユーザー登録が必要です。チップについてはこちら

テクスチャプラグイン【クラファン・限定プラグインセット】

マップ自動装飾プラグインのクラウドファンディング「限定プラグインセット」プランに、フロアテクスチャプラグインを追加しました。


マップにテクスチャを重ねて濃淡の質感をつける力技なプラグインです。
(本来は「床」のみにテクスチャをつけたくてこのプラグイン名なのですが、現状ではマップ全体に重ねるフォグっぽい用途がメインです……)


(現在のところ限定プラグインセットはクラウドファンディング終了後の販売予定がないのでご注意)


追記<1/20>フォグテクスチャプラグインに新生

フロアテクスチャプラグインの要のブレンドモード「オーバーレイ」がMZでは特に動作が重く、検証を行いましがスマートフォンや低スペックPCでは使用非推奨とさせていただきました。(MVでは実用範囲かと思いますが、想定環境で動作テストなどお願いいたします。)

テクスチャ目的のプラグインとしては不完全と判断し、旧来機能に加えてフォグ表示機能を強化し 新たに「フォグプラグイン+サブ機能としてオーバーレイでのテクスチャとしての表示」というコンセプトの新規プラグインに改修させて頂きました。

以下の記事に新機能オーバーレイ表示のON/OFF設定などについて解説してますのでご一読お願いします。


以下、元の記事内容。

導入方法

  • プラグインファイル「ExPluginSet/materials/plugins/TRP_FloorTexture.js」を導入
  • 「ExPluginSet/materials/img/floor_textures」フォルダをプロジェクトの「img」フォルダ内にコピペ

使い方

マップにイベントを配置してプラグインコマンド「編集開始」を実行します。
MV形式コマンドでは「floorTexture edit」

(※スクリプトでは「TRP_CORE.FloorTextureSprite.edit()」でもOK。
DevToolsPluginをお持ちの方はショートカットキーに登録しておくと○)

テストプレイでコマンドを実行すると、編集画面が起動します。
ここでテクスチャ画像を調整できます。

テクスチャは上下左右のループ画像で、拡大率・コントラスト・不透明度などを調整して質感を変化できます。

マップへの設定

「Ctrl(MacはCmd)+Wキー」で 編集画面を終えるとクリップボードに設定パラメータがコピーされます。

マップ設定を開いてメモ欄に貼り付ければOKです。




パラメータの動画解説

それぞれのパラメータについて簡単に解説してきます。
(パラメータによる画像変化は、ブレンドモードを0にすると分かりやすいです。)

画像番号

テクスチャ画像を切り替えます。

プリセットの画像素材では1~9番まで有効です。
(6~9番は倍の細かさの解像度)

また、「img/floor_textures」フォルダ内に「floor_texture10.png」のような画像名形式で自由に画像を追加可能です。

ブレンドモード

画像の合成モード。

  • 0:通常
  • 1:加算
  • 2:乗算
  • 3:スクリーン
  • 4:オーバーレイ

デフォルトはオーバーレイ<4>ですが、ツクールMZではそのままではオーバーレイが使用できません。

コアスクリプトがver1.6.0以降であり、かつ「pixi-picture_for_MZ_160.js」を導入することでオーバーレイを使えるようになります。

ただ、オーバーレイは他のブレンドモードと比べて処理が重いと思うので動作には注意です。想定スペックの環境でテストしてみることをおすすめします。

拡大率

テクスチャの拡大率。

縮小する場合は、テクスチャの画像番号6~9番にするのも○

アスペクト(縦/横比率)

画像の縦横比率。

Z値

画像の重なり順。

ガンマ

画像のガンマ値。

コントラスト

画像のコントラスト。

明るさ

画像の明るさ。

アルファ

画像の透明度。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

自動装飾プラグインでのマップオブジェクトの操作

クラファン駆動で開発中の「マップ自動装飾プラグイン」の解説記事です。

本記事の内容を実行するには、「マップ自動装飾プラグイン」に加えて拡張用の「マップオブジェクトプラグイン」が必要です。

また、まだスタートアップ記事を読んでいない場合は先にそちらの内容に挑戦してみてください!
本記事内容は、テンプレートマップへのオブジェクト登録や自動装飾エディタの基本的な使い方については解説を省いております。



Ver1.14にてマップオブジェクトプラグインを使用したオブジェクト表示が以下のパラメータに対応しました。
(詳しい設定方法はTRP_MapObject.jsプラグインのヘルプを参照。イベントを使ったオブジェクトの表示設定はマップオブジェクトプラグインのみでも動作○)

  • 角度の設定
  • 不透明度の設定
  • 反転(ミラー)表示設定
  • ブレンドモードの設定
  • ティント(色合い)の設定

それに合わせ、「マップ自動装飾プラグイン」のオブジェクトの手動配置モードにおいて、「マップオブジェクトプラグイン」を使用したオブジェクト表示の細かな調整ができるようになりました!

多岐にわたる機能が追加されたので、森マップに「木をドット単位で配置」し「影と光で装飾」していく作業を例に機能の解説をしていきます。


マップオブジェクト形式で木を配置

自動装飾プラグインのオブジェクト抽選モードでオブジェクトを配置すると、全てマス目単位で配置されます。

この時、テンプレートに「タイル形式」で登録したものはタイルとして配置され、「マップオブジェクト(以下、マップオブジェ)」形式で登録したものはマップオブジェとして配置されます。

(↓左がイベントを使った「マップオブジェ形式」、右が通常の「タイル形式」でのオブジェクト登録)

オブジェクトの手動配置

まずは従来機能の復習から!

オブジェクトはランダムな抽選配置のほかに手動で配置することもできます。

配置されたオブジェクト上で「Ctrl+左クリック」を押すと、そのオブジェクトのコピーを配置する「手動配置モード」に入ります。

適当な場所をクリックすることで、好きな場所に配置することができます!

さて、次に「Shiftキー」を押しながらマップ上をクリックしてみましょう。


今度はマップ上に「ドット単位」で配置されます

このとき、「タイル形式」で登録されたオブジェクトも自動で「マップオブジェクト形式」に変換されます!

Shiftキーを押しながら木を好きなだけ配置してみましょう!


座標のドラッグ移動調整

Shiftキーを押しながら左クリックでオブジェクトを配置できますが、このときマウス左ボタンを押しっぱなしにすることでドラッグしながら配置位置を調整できます。

さらに一度配置したオブジェクトの位置を調整したい場合には、オブジェクト上でShiftキーではなくCtrlキーを押しながら左ボタンでドラッグすることで移動させることができます!

オブジェクト選択のタッチ判定

スポイト中のオブジェクトを消去するときもですが、対象のオブジェクトをうまく選択できないときは、オブジェクトのアンカー位置(デフォルトではX=0.5,Y=1でちょうど木の幹の根本の中心)に近い部分をクリック・ドラッグしましょう。

パラメータの調整

Shiftキーを押しながらマップオブジェクト形式で配置した直後に、キーを追加入力することで角度・拡大率・不透明度などの各種パラメータの設定が可能です。

いろいろと試してみましょう。

  • Shift+左右キー:回転
  • Shift+上下キー:拡大
  • Alt(MacはOpt)+左右キー:X方向の拡大
  • Alt(MacはOpt)+上下キー:Y方向の拡大
  • Mキー:左右の反転(ミラー)
  • Q/Wキー:不透明度の反転

また、不透明度は数字キーでも設定が可能です。

  • 1:10%
  • 2:20%
  • 9:90%
  • 0:100%

……木を回転させたり半透明にする必要はないので、いったん元に戻しましょう。

「Rキー」でパラメータをリセットできます。


ティント(色合い)の調整

さて、ここでは「Tキー」を押してティント(色合い)を調整してみます。

Tキーを押すと、左上にカラーパレットが表示されるので、好きな色を選べばOK。

注意点として、ここでのティントは「デフォルトの状態がRGB=255,255,255の最も明るい状態(=白)」でここから赤・緑・青の色を抜くことで色合いの変更が可能です。

たとえば、赤を選んだときはRGB=255,0,0となり、緑と青の色味が抜かれて赤くなると同時に暗くなります。


ティントのランダム設定

ティントを細かく設定するのが面倒なときは、「0~9の数字キー」を使用してランダムに設定することができます。


デフォルトの状態(RGB=255,255,255)を基準として、「1キー」を押すと10%の範囲でランダムに変化(各数値は255 x 90%~100%の間で変化)し、「2キー」を押すと20%…と変化幅が大きくなります。(「0キー」は5%で最小の変化幅)


さらに、「Shiftキー+0~9キー」を押すことで、配置している同種のオブジェクトすべてのティントをランダム抽選することができます。

木などの自然物の色味を微妙にずらしたい場合に便利なのでご活用ください!



影・太陽光の配置

続いて、装飾として影・太陽光のキャラ画像を配置してみましょう!

プリセット画像として「MapObjects/materials/img/characters」フォルダ内に画像を用意しているのでお試しにご利用ください。
(※毎度ながらのなんちゃってクオリティなので、ちゃんとした素材サイトのものや自作推奨です…!)


さて、テンプレートにマップオブジェ形式で登録したいところですが、これらの画像はランダム配置でなく1つ1つ調整しつつ配置したいところです。

オブジェクトパレットに登録して、パレットから画像を選択して手動配置してみましょう!



オブジェクトパレットの登録

テンプレートマップ上でイベント画像「オブジェパレット設定」を配置すると、そのすぐ右が1マスサイズのオブジェクト、1マスあけて2マス以上のサイズのオブジェクトの登録スペースとなります。


影画像(leaf1_PIC.png)は

  • メモ欄に<anchorY:0.5>として変形の中心を画像中心にセット
  • プライオリティは「通常キャラの下」

太陽光画像(lightRay1_PIC.png)は

  • メモ欄に<blend:4>としてブレンド(合成)モードをオーバーレイ
  • プライオリティは「通常キャラの上」

に設定しています。

ブレンドモードについては後述します。先にパレット機能を使ってみましょう。


1枚絵形式のキャラ画像

画像名の最後に「_PIC」 をつけると、マップオブジェ表示時にパターン・方向を持たない1枚絵形式で表示されます。

不要な余白を減らして使用メモリを節約しましょう。


オブジェクトパレットの呼び出し

オブジェクト抽選モード、またはオブジェクトの手動配置モードで「Ctrl+右クリック」で登録したパレットを呼び出せます。

(※ブザー音がなりパレットが表示されない場合は、パレット登録が失敗していると思われます。上の項を参考に、テンプレートマップへのオブジェクト登録が正しい箇所で行われているか、また、マップオブジェクトプラグインがちゃんとONになってるかご確認ください)

パレットには登録されたオブジェクトが順に並んでいるので、左クリックで選んでからマップ上をクリックして配置しましょう。



共有パレットの登録

先ほどテンプレートマップ内でパレットを登録しましたが、共有パレットに登録することも可能です。

共有パレットに登録したオブジェクトは、(森や洞窟などの)テンプレートマップによらず呼び出すことが可能です。

適当なマップを作成してイベント画像「オブジェパレット設定」を配置し、また同じように右側にオブジェクトを配置して登録します。

(↓のようにタイル画像をオブジェクトに登録してもマップのタイルセットによって表示が崩れるので、共有パレットはイベント画像用に使用してください。)

つぎに「TRP_MapDecorator_Template.js」プラグインのプラグイン設定を開き、「共有パレットマップID」の項目にいま作成したマップのIDを登録すればOKです。


影の配置

Ctrl+右クリック」でパレットを呼び出して「影画像」を選び配置していきます。
……特に解説することは無いので、今まで紹介した機能を試してみましょう!

  • Shift+上下で拡大
  • Shift+左右で回転

大きさと角度を決めたら、「Ctrlキー」を押しながらドラッグして位置を微調整。

不透明度の設定

また、少し影が濃いので不透明度も調整すると良いでしょう。

Q/Wキーで+ーの調整が可能ですが、数字キーで設定するのが楽です。

ここでは「7キー」を押して70%に設定しています。

反転設定

この要領で影をいくつか配置してみましょう。

影画像はプリセットで3種用意してますが、同じ画像を配置する場合も「Mキー」で反転させてみてもバリエーションとして使えるでしょう。


太陽光の配置

続いて「Ctrl+右クリック」でパレットを呼び出し、太陽光を選んで配置してみましょう。

……ただし、このまま配置してもツクールMZでは綺麗に表示されません。

ブレンドモード「オーバーレイ(4)」が正しく表示されないためです。

ブレンドモード「オーバーレイ」の対応

※1/20追記:MZではブレンドモード:オーバーレイでの描画負荷がかなり高く、スマホ向けや低スペックPCではFPSを落とす原因となります。対応方法について記事にまとめましたのでご利用の方はご一読お願いします。


ブレンドモードの0~3(0:通常、1:加算、2:乗算、3:スクリーン)はデフォルトで表示可能ですが、オーバーレイ(4)には「pixi-picture.js」というPIXI.jsの拡張ライブラリが必要です。

RPGツクールMVはデフォルトで「pixi-picture.js」が導入されていますが、ツクールMZではそのままでは使えません。


ツクールMZでオーバーレイモードを使用するには

  • コアスクリプトv1.6.0以降であり
  • かつ、pixi-picture.jsの導入

が必要です。
(※コアスクリプトv1.6.0ではpixi.jsがv5.3.12にアップデートされており、pixi-picture.jsの導入にはpixi.jsのv5.3以降が必要となります。)


コアスクリプトをv1.6.0以降にアップデートした上で、プラグイン化したライブラリ「pixi-picture_for_MZ_160.js」が「MapObject/materials/plugins」フォルダ内にあるので、プロジェクトに導入しましょう。(プラグイン設定のなるべく上側に配置)



これでオーバーレイモードで表示されるはずです!

ただし、オーバーレイモードは他のブレンドモードと比べて負荷が高めです。

多用する際には想定動作スペックでのテストを行うと良いでしょう。



パラメータ調整

さて、太陽光を配置していきましょう。

パレットから筋1つのものを選んで配置します。
(後で移動させるのは若干面倒なので、ある程度完成像をイメージして配置しましょう)

Shift+左キーで角度を調整し、

Alt(MacはAlt)+左右キーで太さを調整し、
Alt(MacはAlt)+上キーで上方向の高さを調整しましょう。


「Cキー」を押すと現在の状態のオブジェクトをスポイトし、左クリックでそのまま配置することができます。

太さを変えたり、「0~9キー」で不透明度を変更していい感じに束ねましょう。


画像バリエーション

プリセット画像に、いくつか光を束ねた画像も用意しています。
1つずつ配置するのは手間なので、これらを使って時短してもよいでしょう。

ただし、角度をつけると下端も傾いてしまいます。

使用する角度のパターンが決まってる場合は、画像編集ソフトを使って束ねた画像を自分で用意するのも良いでしょう。(マップオブジェの数を減らせばオーバーレイの使用数も減って負荷も減る…はずです!)



以上が、自動装飾プラグインの「手動配置モード」で「マップオブジェクト」を細かく調整配置する方法となります。

操作がかなり細かいですが、ガイドにも操作方法を表示されているので徐々に慣れていってくださいませ!

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

自動置換機能の応用例【マップ自動装飾プラグイン】

前回の記事では「自動置換機能の基本的な使い方」を解説しましたが、
本記事では、応用例として様々な置換プロセスの活用例を紹介していきます!
(※現在は1例のみですが、のちのち他の例も紹介予定)



トロッコ線路のオートタイル設置

タイルの中には

「オートタイル形式で設置できたら絶対楽なのに!」

というものがありますよね!

デフォタイルだと、内装の「手すり」であったり、


もう少し複雑なのが、ダンジョンの「トロッコ線路」タイル!


ここではトロッコの線路タイルをオートタイルっぽく設置する方法を解説します!

最終的には「適当な床オートタイル」で設置し…

線路タイルに一発で置換できます!


早速ルールの設定を行っていきましょう!


ここでは適当な使わない床オートタイルに対してシェイプごとにルールを割り当てていきます。シェイプがわかりやすいタイルだとベストです。

今回は、フチに模様がついた絨毯タイルを使用していきます。


さて、↓のタイルに対応する置換ルールを設定していくわけですが、効率よくルールを考えるにはコツがあります。


まずは、関係しそうなタイルをまとめてテンプレートマップに貼り付けます。

その上で、1タイルごとにどのようなルールで置換していくかを考えていけばOKです。

  • 絨毯タイルで線路に対応するシェイプを作る
  • Shift押しながらシェイプを保って上段に貼り付け
  • 対応する線路を下段に登録し、わかりやすいように一覧エリアから消去
  • 使わなそうなタイルは削除
  • 床タイルを補完するためイベント画像「裏タイル補完」を配置

基本はこれだけです!

オートタイル1種で配置できれば手間が大きく減るので、活用できる場所はどんどんルール化してみましょう!


リージョン条件

…少しだけ補足です!

最後に残ったこれらのタイル、右側の4タイルは今回は未使用で消去しました。

これらは「丁字路の分岐点」にあたるタイルなのですが、絨毯のパターンでみると同じ丁字路でも線路にすると左右方向のどちらに曲がるかで2パターン用意されています。


これらを絨毯シェイプだけでどちらに置換するか区別させることはできません。

とりあえず片方に置換して最終的にエディタで手直しするのが簡単ですが、リージョンを使って置換先を分岐させることも可能です。


ここでは、分岐先が下ならリージョンID2、上ならリージョンID8(左なら4、右は6)と設定することにします。


ルールの対象タイルに対して

といったようにリージョンを設定したいところですが、これではそれぞれ「2~8%の確率で置換実行される」だけです…!


対象のマス上にイベントを配置し、メモ欄に「<region:リージョンID>」の形式で条件を設定します。

ちなみに、左の4つにリージョンIDを設定すればOKです。

右の4つは残った方のリージョンが置換されます。
反対の右の4つにだけ設定してもだめなので注意。

  • 置換ルールは複雑な条件を先に!

という順序のセオリーです!


実際にマッピングする際は、分岐点にリージョンを設定すればOKです!

これで、分岐点は上方向(8)に接続します。

この記事が良かったらチップを贈って支援しましょう!

チップを贈るにはユーザー登録が必要です。チップについてはこちら

1 2 3 4 5 6 7

月別アーカイブ

記事を検索