開発日記 – ピスと不思議な絵本　WEBサイト

こんにちは！ こんにちは、星屑べーかりーの麦星すばるです。 あっという間に2021年が終わり、あっという間に2022年が始まりました。 今年もよろしくお願い致します。 マップ制作に関するお話をしていくよ！ 手書きマップを作っては没の繰り返しになっています。 正直言うと、こだわって作っているから、没を繰り返しているのではありません。 イラストを描き終えて、ツクールに持って行ったら 歩きづらかったり殺風景等の事情でゲームに使えない！と問題が出てきてしまい 修正も出来ないし、1から書き直そう・・と没になった作品がたくさん出ました。 小物類を別に書き込んだことにより角張っている感じがする ※キャンバスサイズが広すぎて、広場みたいになっているため没 手書きマップの作り方は、いわゆる遠景マップと呼ばれるマップの作り方と一緒です。 それ故に、1つ1つを作るには、とても手間がかかります。 私の作り方ではありますが、手書きマップをどうやって作っているかお話しさせて下さいね。 もっと効率が良いやり方もあるかもしれませんが、そのあたりは必要な部分だけ聞いて下さい。 麦星流手書きマップの作り方 まず、手書きマップを作るにあたり、私が使っているものを紹介します。 Photoshop(画像サイズと解像度の変更を行うために使っています)CLIP STUDIO PAINT PRO（イラストを描きます）パソコンに内蔵されている電卓アプリまたは電卓（キャンバスサイズの計算を行うために使います）Photoshopで作ったツクールMVのエディタに合わせたマス目のパターン用画像（これがないと絵が描けません） PhotoshopとCLIP STUDIO PAINT（以下クリスタ）の移動が手間だし もしかしたら、クリスタ1つで済むかもしれないのですが不安なのでPhotoshopも使っています。 1）電卓でキャンバスサイズの計算 Windowsに内蔵されている電卓より まず、作りたいマップのキャンバスサイズの計算を行います。 RPGツクールMVのマップは ツクールのエディタ：幅17×高13上記の数字をピクセル数に表した数値：幅816px × 高さ624px が初期で設定されているサイズです。 ピクセル数が分かるなら 原寸大の816px × 624px のキャンバスを作って、絵を描き始めればいいじゃあないか～！ と思う方もいらっしゃるかと思いますが・・ 甘いわーーーーー！！！！！（ハリセンをたたきつける音） 原寸大で絵を描くと、キャンバスサイズが、とっても小さくてすごい描きづらいです。 私は、原寸大の816px × 624pxを 3倍にした 幅2448px × 高1872 px のサイズ で手書きマップを描いています。 そして、印刷したい場合も出てくるでしょうから、解像度を350dpiにしています。 話を戻しますが、ツクールMVの17×13という数字はピクセル数の数字ではありません。 ツクールMVのエディタのマスが横17コ、縦13コあるよ、という数字になります。 じゃあ、このマスは1マスどれくらいのサイズなのでしょうか？ 答えは、48pxです。 だから、17×48＝816px 13×48＝624px という数字になります。 今回は、横17、縦13ですが、別のサイズで作りたい場合はその都度計算をし直す必要があります。 ツクールMV上のマップサイズの数字×48 をして 私の場合は、その数字を3倍にした数字でキャンバスサイズも決めます。 ・・・算数で躓いた人間にとっては、何を書いているか自分でも全く分かりません・・ 2)Photoshopで専用のグリッドを作る 予め、Photoshopの方に、48px × 48pxサイズで作ったグリッドのパターン画像をパターン登録します。 このパターン用画像ですが、自作発言がなければ自己責任で、使っていただいてOKです。 そして、3倍にする前の数字でキャンバスを一度作ります。 キャンバスを作ったら、透明なレイヤー上にグリッドのパターン画像を塗りつぶします。 これで、ツクール上で表示されるサイズのマス目が出来ました。 次に、このキャンバスを3倍のサイズに拡大します。 すると、3倍のサイズに対応したグリッドの画像が出来ます。 これを保存orコピーして、クリスタのキャンバスにペーストします。 一度作れば流用出来るのですが、マップサイズが毎回同じとは限らないので何度も繰り返しています。 どうしてこの画像が必要かというと歩行グラフィックの位置確認を行うためです。 この画像は、作ったマップをRPGツクールに持って行った図です。 画像にグリッド線が出ていますが、これはツクールで表示されているものです。 このグリッド線に沿って家や小物類を描いているのが分かるかと思います。 グリッドがなくても、絵は描けますが、ツクールに持って行った際 歩行グラフィックの位置にずれが生じることで、マップとして成立しなくなります。 歩行設定も、48px × 48pxのマスに従って行われるわけですから この設定を無視してマップを作ってしまうと、キャラクターを歩かせたり、配置が出来なくなります。 あと、イベントの作成などもこのマスに従って行います。 位置がずれたことによって、1から描き直しになるのは悲しいので、これはちゃんと守っています。 3)クリスタでマップを描く 下準備が整ったので、やっと描けます。 イラスト制作に長けている方に説明する項目は特にないと思います。 クリスタにPhotoshopで作ったパターン画像をペーストして一番上に配置します。 レイヤー効果は、乗算にして、透明度を下げると作業しやすいと思います。 実際の作業画面 今回は、室外のマップなので、家など大きいサイズで描いていますが 室内で家具や小物を描く場合に注意したい点があります。 1マスがキャラクターのサイズになるため 家具も1～2マスの大きさで描く必要があることです。 高さがある柱時計など例外の家具も存在しますが ソファーなどを大きく描いてしまった場合 キャラクターが小人さんみたいなサイズになってしまい、不自然になるので注意が必要です。 私の場合、家具もそのまま遠景に使う画像の中にまとめて描いています。 Bタイル用の画像で小物を描く方法も試してみたのですが 後から足りないパーツが出た場合、画像を訂正し、ツクールに持って行く手間が出たのでやめました。 それだったら1枚の画像に必要なものを 全部描き込み、調べる必要があるものに関してはイベントで設定するようにしました。 絵を描き終えたら、png画像で保存をします。 ただし、3倍のサイズで絵を描いたので、ツクールの画面サイズに合わせて縮小する必要があります。 クリスタでも画像の縮小は出来ますが、私はPhotoshopを使います。 4)描いたイラストをツクールのサイズに合わせる Photoshopに持ち込み・・ 1）画像解像度をWEB用の72に落とします。（72dpiで描く場合は省略） 2）画像サイズをツクール用のサイズに戻します。 3）png形式で書き出しを行います。 ここまでは通常の操作だと思います。 注意しなければいけないのはファイル名・保存場所です。 まず、ファイル名について。 ファイル名の文頭に !（半角のびっくりマーク）をつけます。 そうしないと、遠景画像を遠景マップで使うための読み込みが出来ません。 次に、保存場所について。 ツクールMVで制作されるゲームにはいくつかフォルダが存在します。 parallaxesフォルダに保存します。 フォルダの場所は・・・ ゲームデータのフォルダ＞img＞parallaxes(遠景画像が保存されているフォルダ) こんな感じに保存しています！ これで画像の保存は終わりです。 5）ツクールで設定を行う RPGツクールMVを起動します。 幅と高さを最初に決めた 17×13にします。 遠景の画像を手書きの画像にします。 この際遠景画像は、エディタに必ず表示させて下さい。非表示だと作業そのものが出来ません。 最後に、タイルセットの設定を遠景マップ用のものにします。 ここで新たに使う2種類の画像について。 ○（通行可能を示すマーク） ×（通行不可能を示すマーク）が描かれている全体に透過処理がされている 以上2種類の、A5タイルの画像です。 どうして必要かというと、遠景マップで歩行設定をするために使います。 こちらは設定用 真っ白で分かりづらいけど設定終わったら使う透過処理がある画像 ※この画像は、ツクールの素材を使っていませんが、規格がMVに沿った画像のため RPGツクールMVのライセンス所持者のみ使用OKです。持っていない方は使わないで下さい。 まず、専用のタイルセットの設定を作ります。 A5があればそれでいいので、A1~4の設定と、B以降の設定はなくてOKです。 最初に、通行設定用の手書きマップ用の設定。 ○×が描かれた画像の○を通行可能にし、×を通行不可の設定にします。 次に同じ歩行設定がされていて、A5サイズの画像を透明な画像に差し替えたタイルセットを作ります。 これで下準備は終了です。 通行設定をします。 目が痛い画像ですが、丸い部分がキャラクターが歩ける部分、×は歩けない部分です。 ここの設定を間違えてしまうと、キャラクターが家を歩いたり、空を飛べる状態になるので注意です。 設定が終わったら、この○と×を消すために、透過処理がある画像で作ったタイルに設定を変えます。 タイルセットを差し替えたら、○と×が消えます。 もし通行設定を確認したい場合は、○と×がある画像のタイルセットに戻すことで再確認・再設定が出来ます。 イベントなどの設定は、通常のマップ制作と同じやり方で行います。 6）動作確認を行う テストプレイモード等で、起動させて動作を確認します。 キャラクターが歩行設定に従って歩いていれば成功！です。 歩いてみて違和感がある場所は訂正したり 装飾が足りない場合はピクチャの表示・イベントの作成を使って増やしたりします。 （※やり過ぎると重たくなって歩きづらいかもしれません） これで1枚のマップ画像が完成となります。 これは、何回も作っては壊してを繰り返した・・・ピスの家です。 7）最後に 手書きマップは自分の絵の上を歩ける感覚がとっても嬉しいし、とっても楽しいです。 ただ、作るまでにとても苦労しますし、これがダンジョンだった場合は作りがより複雑になります。 それ故に、1枚ができあがるまでにすごく時間がかかっています。 数をこなせば、自分のやり方が見えてくるのかなと思っているので、引き続き頑張ります。 マップのサイズについては、歩きやすさも考慮して 小さいサイズで表現できるものは、できるだけ一画面に収めたいと思っています。 ・・最後に一つだけお願いがあります！ こういう記事を投稿すると、制作に関する質問を送って下さる方がいらっしゃいます。 興味をお持ちいただけることは、とてもありがたいと思っているのですが こちらが募集していないタイミングで、質問をすることはお控え下さい。 私自身、答えを見つけるために、Googleで調べたり、エラーの英文は翻訳に入力して日本語に直しています。 それでも分からなければ、人に尋ねますが、大抵は調べたり翻訳することで解決することがほとんどでした。 登場キャラクターの状況も、制作段階で自分でもどうなるか分からないことと ネタバレに繋がる可能性もあるので、あまりお伝えできないのが現状です。ごめんなさい！ 制作に関する質問は、こちらで募集しているとき以外はお控えいただけますと幸いです。 その代わり、募集するときは、ちゃんと募集を行います。 気になる点は、是非そのタイミングでお願い致します。 最後までお読みいただきまして、誠にありがとうございました！！ 繰り返しになりますが、今年もどうぞよろしくお願い致します。

【ピスと不思議な絵本_コラム】1枚の手書きマップ（遠景マップ）が出来るまで