最近の生活2021年8月
Added 2021-08-31 09:19:11 +0000 UTC8月も終わりですね。なんだかんだ、またいつの日か8月が来ることを願っています。
hako 生活です。
今月は2つドット絵を描きました。
twitter post: 1426995723376087040
twitter post: 1432318596550586373
このドット絵はそれぞれちょっといつもと違うのアプローチで作られています。
◆昼の絵
こちらはまず、モデリングツールのBlenderでモデリングをして辺りからのラフお越しを初挑戦。これは先月から覚えたての技術です。
▼モデリング
高架下と交差点っぽくしようと思い、せこせこモデルを作りました。
▼マテリアル設定
ざっくりとした塗分けなどを。最初は夜の絵を描こうとしていました。
▼ライティングを変更
夏の空を描きたくなったので影が出るようなライティングに変更。
アイレベルやおおよそのライティング、シルエット等を決めて、レンダリングしたものをラフに使います。
▼べた塗り起こし
お次はドット絵ツールのAsepriteまずはべたに、色面に起こします。この時点で影色などを付けたりして好きなカンジになるか確認。
▼雲やオブジェク等を描きこみ
パースに沿うようにオブジェクトのサイズ感とかを調整します。2020年に散々パースの知識を入れておいたのが活かされている気がします。
▼人を描いてみます。
メインモチーフとなる人を雑多に。パース上、奥に人を描くとかなり小さくなるので手前側においてとりあえず書いてみることに。モチーフは以前描いたドット絵です。顔のディティールが出やすいサイズ感になるように調整。
▼影や服の変更
絵なので、ちょっと現実感のない真っ青なワンピースにしてみようかなとか、暑いのが苦手なので手前まで全部影にして涼しくちゃおうかなあ などと思いながらいろいろ修正…。
夏の青っぽい影が好きです。影に対して青い空に反射が差し込むことによって青くなるみたいですね。
▼色調整等して完成
全体の色味や左右パース等を変更して配置して完成。ただ、いろいろと迷子になってしまっていて、、もっとよくできたなーとか思います。特に、部分的に思いきっている割に結構臆病な色使いをしてたりとか…反省点も多いかも。
でもモデリングからドットを起こすという体験自体は、結構新鮮味があって楽しめました～。
▼おまけ
最近、自分の好きなカンジを思い出してきたので今だったらこのぐらいやってしまうかもとか思います。黄色と肌色の彩度はもうちょっと度落とすなど修正要りそうですが、全体的には思い切りが良くて気持ちいんじゃないかなと。
今日の記事はここまでで半分です。なが～い。
▼夜の絵
▼Blenderの自動生成でごにょごにょごにょして、街を作りました。
twitter post: 1413461166089641984
▼パレット置換プログラムの作成
今回はゲームエンジンのUnityで、モデルをhako 生活が使っているドット絵のカラーパレットに置き換える仕組み（以下）を思いついたので、作ってみました。ちょっと難しい話も入りますので、興味ない方は飛ばしてみてくださいね。
▼パレット置換機能（こまかく）
この機能には、テクスチャ3Dという、画像が3次元になったもの（金太郎飴のような、中にも色が描きこめるキューブ）を使います。
まずデジタル画像で表現可能な1千6百万色（RxGxB=256x256x256）の全色を描き詰めたキューブ（下図：左）を用意しておき、次に最も僕のパレットに近い色(※)を計算し、事前に色を割り当て直したキューブを用意しました（下図：右）。最後に、これらのキューブを使い、与えられた色が僕のパレットに一番近い色に置き換えて描画される機能を作りました。
※少し脱線しますが、僕のパレットに最も近い色の算出方法は、HSV（色相、彩度、明度）を用います。今回は同時にHSVを視覚化するツールも作ったので、以下で説明します。
▼HSV（色相、彩度、明度）の空間視覚化するとこうです。
これらの点々が僕のパレットで使っている色で、それ以外の色は、この空間の点に最も近い色に変換してくれるという感じです。
つまり、H=x,S=y,V=zのように、それぞれを3次元座標にし、距離が最も近い色が、僕のパレットに最も近い色ということになります。
難しい話をしてしまったのですが、これを用いて進めます。
▼変換しやすいように、ライティングを自分の絵に寄せます。
twitter post: 1288726383250640897
今回はこの電車のドット絵のカラーパレットを解析したいと思います。
全部完璧に変換してくれるわけではないので、僕のドット絵に近そうな色相に合わせてざっくりとライティングします。
変換機能とか使わなくてもこの時点でもそれっぽいですね。でもこれをそのまま撮影してしまうと、画面全体の色数が多くなってしまって、べた塗り分けが非常に大変になってしまうのです。
これを撮影します。
僕のドット絵パレットに置き換えられました（キャラ含む）。ドット絵のべた塗りの状態まで起こしてくれます。
▼脱線２：画像の変換の場合
一応画像の変換はこうなります。（下の空の画像が上の色に置き換えられてますね。）
▼ドット絵化
さて、塗り起こしができたところで、ここからはドット絵に起こしていく作業です。
まずはパースラインをとっておいたり、ざっくりと完成のコントラストの感じをチェック。
▼ピクセレーション
このままではとてもドット絵とは言えないので、手描きで背景の窓やラインなどをひたすらピクセレーションしていきます。ここが一番時間がかかっています。
描ききれないのでざっくりですが…
・ボロボロだった線をていねいに整える
・窓の形を整える
・パースに合わせて一部の建物を変更
・階段を付けてみる
・手前のビルは
・パースに合わせて床/天井が見えるのかによって明るさを分ける
・ざっくり三分割構図な配置もチェック
・遠景も描き描き
・色みをAseprite上でさらに調整。
などなど。
▼キャラ書き込み、差し色追加
背景ができてきたので、キャラを意識。
チャイナシャツを描きたかったので、着せてみました。
左右反転しながら破綻チェック。こちらの向きの方が好きだったので採用。
差し色を加えていきます。
▼キャラクター/ストーリー入れ
キョンシーっぽくしたくなってきたので、お札などを描き描き。ただ、この時点だとキャラよりも情報量が多いので、最終的にはもっとおとなしくしています。
▼アニメーション描きこみ
絵ができたところで、アニメーションを描き始めます。
手描きでサイン波の動きを意識しています。揺れモノだいすきhako 生活。
すこしアンニュイにしたかったので、目を隠すフレームを多めにしています。
▼完成はこちら
今回は意欲作的な立ち位置で作ってみたのですが、個人的にかなり好きな絵になりました。夜の風を感じます。
以前の絵と並べるととてもワクワクしてきました。
製作期間だけでみると、下はフル手描きで一か月かかったのですが、上は撮影+手描きで2日だったりと、まだまだ可能性がありそうです。
メインはゲーム開発ですが、合間に画力と技術力をもっともっとなじませて面白いものを作れたらなあと思います～。
おまけ
遠近感を出すためにぼかし処理を入れるとこんな感じになります。たのしい～。
(Twitter)
(Twitter)
(Twitter)
(Twitter)
