Splatoonの塗りみたいのを再現したい その１

はじめに

Unity WebGL Player | スプラトゥーンもどきをやってSplatoonやりたい欲が高まってまいりました。

Splatoonしたいけどお金なくてWiiU買えない貧乏苦学生なので、「無ければ作ろう！」という精神でSplatoonの塗りをコンセプトに取り入れたゲームを作ろうかなと思っています。

まだゲームに関しては企画段階ですが。。。

それでも「ものに色を塗っていく」といったギミックは面白いので是非取り入れたい！ ということで、企画そっちのけで塗りの処理を作ってみました。

オブジェクトのテクスチャ(オレンジのやつ)は[Neuro! Image](http://www.neuro-image.com/)様からお借りさせていただきました。

黒いインクみたいのがベチャっとなってるのが塗った部分。ブラシに指定する画像が小さいとブラシサイズを大きくした時にジャギが出ます。アンチエイリアスはまた今度実装する予定です。

ゲーム中では特定の座標(塗る対象のオブジェクトの表面)を指定することでその部分をブラシで塗れるようにしました。 以下ではクリックした位置にレイを飛ばし、ヒットした位置を塗っています。

ブラシのテクスチャや大きさ、色を動的に変化させると捗りそうです。

実装

まだアンチエイリアス等の細かい部分を実装していないので公開は保留にしますが、とりあえず実装方法は簡単にメモしておくことにします。

大まかな流れは

1. オブジェクトに対して「ここ塗れ！」と命令する
2. 塗られるオブジェクトは、塗るべきUV座標値を計算する
3. 算出したUV座標等のデータをシェーダーに渡し、Blit命令
4. シェーダーはUV座標等の情報から塗るべき位置を判断し、色をつけていく

といった感じです。

ただ、オブジェクトに既にセットされているマテリアルのテクスチャに対して直接書き込むのは当然BADです。 これはゲーム開始時にRenderTextureを生成し、既存のTextureをコピーすることで解決します。

この方法なら使い方も簡単で、塗りたいオブジェクトにスクリプトをくっつけるだけでそのオブジェクトが塗れる状態になります。 あとは提供しているAPIから「ここ塗れ！」と命令すればよしなにしてくれます。