カテゴリー別アーカイブ: 技術的な話

背景加工

今日Twitterの方に投稿したんですが、ネタ的にブログ向きな内容だったのでまとめときます。

シーン背景は出来れば自前で描きたいと思ってたんですが、制作のための時間とか体力的な面とか、色々考えると全部を自分で描くというのはちょっと難しいな…ということで、市販の背景画像集を見繕って、使える所はそれでひとまず手を打とう、ということにしました。
オンライン販売のゲームの場合、どうしても…となったら後からパッチで差し替えも出来ますしね。

…とはいえ、既にシナリオは出来上がってて音声も殆ど発注&納品済みになっている現在、
既製品の背景画像だとどうしてもストーリーとの間に矛盾が出てくる箇所や、8割方OKなんだけどあとちょっとココ何とかなんない?みたいな画像もあります。

なので既製品をそのまんま使うだけじゃなくて、必要な箇所に手直しを入れたり、トリミングしたり、複数の画像を組み合わせたり、カラー補正を施したり…といった二次加工をやっております。
今回はその幾つかのご紹介。


まずはメイン舞台となる自宅。
間取りの設定は僕の脳内には1,2階ともしっかり出来上がってるんですが、市販品の画像でピッタリと合うものは当たり前ですがありません。
そのへんは適当にお茶を濁すしかないんですが、でも玄関など建物の外観と内観で辻褄が合わなかったり、脚本との整合性でココはコレじゃないんだよな~、て最低限の場面は修正しときたいな、と。

自宅before玄関before自宅の外観、そして玄関の画像は上の2枚を使うことにしたんですが、
コレじゃお互いにドアの向きが合わない。
それに脚本の都合上玄関ドアはソレじゃないんだよなァ…ってんで、それぞれ以下のように修正しました。自宅after玄関after


お次は食事シーン背景用の食卓画像。
テーブルの上に昔使ってた3DCGアプリとその素材集使って適当にお料理並べました。ダイニングbeforeダイニングafter3Dアプリの使い方相当忘れてた~(汗)
でも自前で全部作らなきゃならない背景画像も今後少しずつ出てくると思うので、良いリハビリです。


最後は質素なアパートの女の子の部屋。
アパートの部屋beforeアパートの部屋after同じ構図の別画像からベッドを持ってきて、カーテンには女の子らしくちょっとした柄を追加。
全体の色調も暖色寄りに補正しました。

そんでもって、コレにブルーのベタ塗りの画像レイヤーを2枚ほど、焼き込みモードと乗算モードで乗せると、、、
アパートの部屋-夜夜間シーンの出来上がり。
画像集にも朝、昼、夜(灯り付き)のバリエーションは付いてましたが、照明の消えた後の暗がりシーンは無かったので自分で作りました。

昼の明度・彩度の高い画像があれば、夜のシーンへの転換はこんな感じでものの10分もあれば出来ちゃいます。
市販の画像集のバリエーションも、よく見ると塗り直してるんじゃなくて単にレイヤー加えて色調変えただけ、なんてのもありそうですねぃ。


こんな感じで作成した背景画像を組み込んでテストプレイしてみると、、、2017-02-05_19h06_13

背景画が入ると一気にゲームらしくなってきますね~って、
ひとりニヤけながら引き続き作業中__φ(´∀`)

 

 


吉里吉里のlayerのindexについて

マニュアルには、

標準では、前景レイヤ 0 が 1000、前景レイヤ 1 が 2000 ( 以降 1000 ずつ増える )、 メッセージレイヤ 0 が 1000000、メッセージレイヤ 1 が 1001000 ( 以降 1000 ずつ増える )、  メッセージ履歴を表示するためのレイヤが 2000000 となっています。

となってるのですが、例えばこんな構成になってた時、

レイヤー index
メッセージレイヤー0 1001000
前景レイヤー1 2000
前景レイヤー0 1000
背景レイヤー 0

前景レイヤー0を前景レイヤー1の上に持ってきたくて、
[layopt layer=0 index=3000]
とすると、、、

レイヤー index
メッセージレイヤー0 1001000
前景レイヤー0 3000
前景レイヤー1 2000
背景レイヤー 0

↑こうなるかと思いきや、

レイヤー index
前景レイヤー0 3000
メッセージレイヤー0 1001000
前景レイヤー1 2000
背景レイヤー 0

、、、と、前景レイヤー0がメッセージレイヤーの上まで飛び出してしまいます。

で、吉里吉里のコンソールで、各レイヤーの順番を調べようとすると、、、
kag.fore.messages[0].order = (int)2
kag.fore.layers[1].order = (int)1
kag.fore.layers[0].order = (int)3
kag.fore.base.order = (int)0

、、、となってて、ちなみにだけど、これらのレイヤーにindexっていうメンバー変数は存在しません。

そこで、最初に戻って、
[layopt layer=0 index=2]
[layopt layer=1 index=1]

と指定してやると、

レイヤー order
メッセージレイヤー0 3
前景レイヤー0 2
前景レイヤー1 1
背景レイヤー 0

と、想定していた順序になりました。


htmlのz-indexなんかとは挙動が異なり、マニュアルにあるあのレイヤー番号の記述は、一番最初にレイヤー構成を敷く時にあのデカい数値順に並べられる、というだけで、
一旦レイヤーが並べられた後はそれらの数値は廃棄され、後は各レイヤーはそれぞれのorder属性に基いて重ねられてるだけのように見えますね。
([laycount]タグでレイヤーの数を変更するとレイヤーの重ね順がリセットされる、という理屈もそう考えると腑に落ちます)

従って後からその重ね順を変更する[layopt]のindex数値は、そのorderを上書きするってコトみたいです。

続きを読む 吉里吉里のlayerのindexについて


吉里吉里のクリッカブルマップに使うPhotoshopのスウォッチに「Windows」の使用は避けた方が良いかも

この手の技術的なお話はブログのテーマと若干ズレるので、別ブログかWiki作ってそっちに移管するつもりですが、とりいそぎでココに備忘録的に書いておきます。


表題のとおりで、吉里吉里のクリッカブルマップに使用する「ファイル名_p.png」画像を作っていた時なんですが、

png_8形式で出力する際にカラーテーブルを参照して、その順番にインデックスは割り振られます。
全部で256個のエリア指定が可能ですが、その時に使用するカラーテーブルとして、僕は当初スウォッチの中のWindowsってタイプを、あまり深く考えずに使ってました。
ちょうど256個で構成されてるのでコレに合わせて塗っとけば、インデックス番号の管理がやりやすいや、ということで。

ところが、あまり多い色数を使ってなかった時には別段問題なかったんですが、256全色近い大量のクリックポイントがあるマップを作ったら誤動作が発生して、調べてみたらWindowsスウォッチには0x808080で重複してるボタンがあるじゃないですか。

swatch_windows「Windows」スウォッチ。なぜか1ペアだけ重複(´・ω・`)

で、Mac OSスウォッチに差し替えたらそうした問題はなく、きれいに大量のボタンが並んだクリッカブルマップが作れました。

swatch_MacOS「Mac OS」スウォッチ。こちらには重複はありません

なまじ沢山の色だから、一からチクチク塗り直すのめんどかったです。

CONFIG


なおPhotoshopで吉里吉里のクリッカブルマップを作成する方法については、こちらのブログが非常に分かり易くて参考になりましたm(_ _)m

吉里吉里のクリカブルマップをphotoshopで作ろうか -intro-:腐ったかつおぶしの日記:So-netブログ