ウィンドウ画像化のすすめ
ウィンドウ背景の作成と設定
ウィンドウ背景画像作りばかりやっているんですが、
手順にだいぶ慣れて来たのと、結構クオリティが上がって見えるんで、
たまには講座っぽい事もしてみようかなと。素人だけどね。
クリスタ前提です。色域選択と自動選択とグラデーションくらいしか使ってないので、
他のペイントソフトでも出来そうだけど。
https://twitter.com/LF71_S/status/1772414246711627918
まずは素材作り
画像何枚も張るのも面倒なのでタイムラプスを使ってみました。
まず、作りたいウィンドウが表示されているスクショを取ります。
キャンパスサイズはゲーム画面と同じ大きさに指定して、
クリスタ（或いは他のペイントソフト）に取り込みます。
これが動画の１秒目くらい。
２秒目でやっているのは、色域選択でウィンドウ端の白い縁を選択しています。
許容誤差とか選択に追加とかで、上手い事ウィンドウの縁全てを選択します。
で、コピぺなり切り取りでウィンドウの白い部分だけを切り出します。
このままでは見えづらいので、色のついた別レイヤーを作成、
着色をして白部分を見えやすくします。
元がスクショである関係上、例えば文字色等も白い部分として出てしまうので、
そういったゴミがあるばあいは消しゴムや範囲選択からの切り取りで削除します。
これで２秒の終わり位。
次に透過部分となったウィンドウに対して自動選択を行うと、
白との境界線（つまりウィンドウの城枠の内部だけ）を選択可能なので、
ウィンドウとは別レイヤーを用意し、
そのレイヤーに任意の方向からグラデーションを掛けます。
これが４秒目くらい。
グラデーションレイヤーを任意の透過率に設定します。
俺は８５％にしています。
さらに単色パターンテクスチャから好きなテクスチャを持ってきて張ります。
俺は鉛筆の透過率８％にしています。
微妙に質感が追加されます。いまいち違いが分からないかもしれませんが、
グラデーション０の状態であり無しを比べるとちょっと情報量が足されて、
リッチな感じがします。
グラデーションでも分かりやすくのっぺり感を減らしているので、
合わせ技でイイ感じに見せている……という感じです。
ウィンドウの内側レイヤーを指定して切り取ってしまうか、
マスク設定をするかで、
テクスチャもウィンドウの内側にだけ掛かるようにしてください。
（枠にもかからない方が良い気がする）
ここに背景画像を適当に追加します。
レイヤー最下部ですね。
ウィンドウ枠レイヤーの内側を再度指定して、
背景画像もウィンドウ内側にのみ表示されるようにします。
この隙間が個人的なオシャレポイント。
こで良ければこれで良し。
俺は背景の主張を弱める為にこの背景画像に対して、
彩度を０にする事でモノクロ化します。
（雰囲気だけ感じ取って、選択項目の邪魔にならないよう）
更にうちはドット味が強いＲＰＧなので、
背景画像に対し、フィルターから４ブロックのモザイクを掛けています。
で、後はＳＳを取った時にこれなんのゲーム？
ってのが地味に分かるようにタイトルロゴ（これもモノクロにする）を入れて……
（こっちはあえてモザイク化を掛けません）
背景画像とウィンドウの間に入る様に入れます。
ここまで５分くらいで作れます。
勿論、うちのウィンドウがシンプルだから、
切り取りとかが楽である部分はあると思いますが。
プラグインに対応した加工
次にゲームに実装するにあたって、です。
トリアコンタンさんのウィンドウ背景指定プラグインを使っているのですが、
ウィンドウを非表示にして、この画像を代替画像として用いれるので、
内部的にはウィンドウは一つであっても、
区切りを入れれば複数ウィンドウに見せる事も可能です。
（文字などの位置を上手いことやる必要はありますが）
ただ、そういうやりかたも出来るというだけで、
あらかじめ用意されたシーンではウィンドウは一枚一枚に分かれているので、
該当されるウィンドウの名称に対し、
本来描画される大きさのウィンドウをあてがう必要があります。
最初にスクショを取ったのは、描画されたウィンドウから画像を製作するので、
ズレが無い為ですね。
但し注意点として、ウィンドウサイズが変化するウィンドウとは相性が悪いです。
どうしようね？
―――さて、そういう訳でウィンドウを切り分けて保存していきます。
どうせ後々プラグインでウィンドウ名を指定する必要があるので、
先にウィンドウの名前を調べるとしましょう。
今回はAyatamさんの高機能クエストプラグインに対応する画像を作っています。
記事を書いている状況では、
トリアコンタンさんのプラグインで変更が利くのかも試してません。
（プラグインで追加されたシーンには対応していないケースもあると注意書きがある）
あまりにも大規模なプラグイン。
とりあえず Window_ で検索を掛けます。
多分全然違う名前にもできるので、そこは作者さん次第だと思うんですが、
一般的なプラグインではツクールの命名規則に従い、
Window_XXXXX
というウィンドウ名で定義されている事が多いです。
とりあえず目についた Window_XXXXXの名前をコピーして、
背景プラグインで指定、適当な画像に背景を変更するように設定します。
普段はウィンドウは多くて３枚くらいしか追加されないので
こんなやり方はしないんですが、このプラグインは追加ウィンドウが非常に多いので……
置換が出来ていてまずは一安心。
こんな感じにアタリをつけて、該当するウィンドウ名がわかったら、
先程の素材ウィンドウを切り分けて命名
（自由ですが、対応ウィンドウ名を付けておいた方が後々管理が楽だと思います。）
し、適切な画像を紐づけていきます。
うん、元々の透過ウィンドウに比べて、
めちゃくちゃ雰囲気が良くなりましたね！
見栄えが良いとやっぱり自分のモチベにもつながります。
記事書きながらでも１時間半くらいですかね。
実装だけなら３０分かからないかも。
かけた時間に対してクオリティが大分高くなったように見えるのでお勧めです。
ディスコード
実は設定色々ミスしてたんじゃないか疑惑があがりました。
まあ、それにしても来てなかった可能性は十分にあるんですが。
昨日スマホから見たら掲示板が一つも表示されなくて、
……あれぇ？ と。
管理人以外に閲覧権限付与してなかったんですよね。ホント草なんよ。
リンク見てみようかな？と思った方、もしおられたらすみませんでした。
という訳で、改めて１週間有効なリンクが以下となります。
今日の記事やら含めて気になった方は是非おいでませ。