竜太です,ども.
前回は壁画像の基本的な部分だけPhotoShopで作ったわけですが,今回はより突っ込んだところまでやりたいと思います.
そのためにまず最初に「プレイヤーキャラが立っている位置から周りの景色はどう見えるべきなのか」という根本的な部分から考えてみたいと思います.
プレイヤーキャラは当然後方は見えません.ということは作る必要があるのは左側と右側と前方の風景になります.より詳しく言うと左側,右側と前方左側,前方中央,前方右側・・・となります・・・の部分は前前方などの部分です.勘の良い方はお気づきでしょうがこれだと実は無限のパターンの風景を作る必要が出てきてしまいます.
困りましたね.
そこで次の仮定を導入します.ずっと前方は暗くて見えないことにして黒く塗りつぶし,左右と前方,前方左右中央のみ描くというものです.これで用意する画像が大幅に減らせそうです.次に大事なのがそれらの画像のファイル名です.例えば左側と前方左側にのみ壁がある場合はどういうファイル名にしたらよいでしょうか?合理的で一貫性のあるファイル名としては例えば左をL,右をR,中央をCとして,さっきの場合,wallL_L.pngなどとすることです.ここで左に最初に現れるLは手前の左側に壁があることを示し,アンダースコアの右側のLは前方左側に壁があることを示します.つまりアンダースコアは前方を表すものとします.さて,この流儀でwallLR_Cはどんな風景でしょうか?答えは左右に壁があり,前方にも壁があってふさがっている状態ですね.
図で書くとこんな感じです:
pの位置にプレイヤーキャラが居て,周りを壁が取り囲んでいます.
ここでもしかしたらおや?っと思った方がいらっしゃるかもしれません.
wallLR_Cは前方左側と前方右側には壁がなかったんじゃないのか?と.
実は上から見ればwallLR_CとwallLR_LCRは区別がつくのですが,プレイヤーキャラの視点では壁でふさがっているので両者は区別できないのです.つまり,wallLR_LCRとwallLR_LCとwallLR_CRはみんなプレイヤーキャラの視点ではwallLR_Cで書いてしまって良いということになります.これでさらに用意するべき壁画像ファイルが減らせました.あとはこれを全パターン用意するだけです.
さて,前回のPhotoShopの画面を開きましょう:
これがwallLR_Cになりますのでこれをpng形式でwallLR_C.pngとして保存します.
次に各レイヤーの名前が分かりづらいのでリネームします.例えば左壁のレイヤーは左壁などとします.また,一番下の壁の元画像は壁マスターとでもしときましょう.
そして壁マスター以外をまとめてグループ化してグループ名を「手前」としておきます.こんな感じになります:
次にグループ「手前」を複製して「奥」という名前を付けておきます.
このとき天井と床は大きく引き伸ばして作ってありますのでキャンバスの外側にも余計な画像がありますので,切り抜きツールで画面の内部だけを切り抜いておきます.
それからグループ「奥」を選択し,自動選択をグループにします.
ctrl + Tで選択して奥の風景になるように小さくします.このとき画面中央の正方形領域にぴったりはまるようにします:
これで長いトンネルみたいな通路ができましたね!
ただし,壁を全部取ってしまうと下の図のように変なことが起きてしまいます:
これを改善するには中央奥のグループを左奥と右奥にコピペすればよさそうですね.
そこで試してみると
となり,さっきよりはだいぶ改善しましたが,なんか床の模様が変です.
これは何故かというと漫画を描かれる方ならご存知でしょうが,床の集中線が左右それぞれが中央に向いていないというのも大きな理由です.そこで苦し紛れではありますが,手前の床と天井を延長した先の床と天井の位置まで引き延ばしてみます.
そして左奥,奥,右奥の天井と床を全部削除します:
大分いい感じになってきました.
しかしここでまだ問題が残ってます.
グループ手前に入っている奥の壁を表示するとおかしなことに右壁と左壁があるのに天井と床の模様は正面の壁の模様になってしまい正しく表示されません.これを解決するには正面の壁を左から右に3等分することです:
これで上のような画像が作れるようになりました.
最後に奥の奥の壁は暗くてよく見えないことにして黒で全面塗りつぶしたレイヤーを表示させるとこんな感じになります:
お疲れさまでした^^
後はこれらのうち必要な画像を壁を出したり消したりしながらwall**_***.pngの形式でどんどん保存してゆくだけです.大量な量になりますので最初にご説明したように同じ見え方になるのは全部一本化して保存するようにしてください.
次回はいよいよC#でコードを書いてゆきます.