まっ茶ゲームCG備忘録

Maya/Unityなどの備忘録!

【Unity/Photoshop】ヒットエフェクト_衝撃テクスチャの作り方(カートゥーン調)

Photoshopのパス機能を使った、ヒットエフェクト用の衝撃テクスチャの作り方を紹介します!
今回はUnityのテクスチャシートアニメーション用に、4コマの連番テクスチャを作ります。

f:id:Shin00118:20200119202034p:plain
f:id:Shin00118:20200119202156g:plain
(左)完成したテクスチャ・(右)テクスチャを使ったヒットエフェクト

 

1.制作手順

①【Photoshop】パスの作成・編集

②【Photoshop】テクスチャシートの作成

2.(手順①)【Photoshop】パスの作成

512×512pixel程度で新規ドキュメントを作成。
ペンツール(P)でパスを引いていきます(左図)。

このとき、ひし形を意識してシルエットを作るときれいに見えます。
また、凹凸の頂点の高さをバラつかせると、ランダム感が出てカッコいいです。

f:id:Shin00118:20200119202759j:plain
f:id:Shin00118:20200119202804j:plain
(左)パス・(右)描き方のコツ

レイヤを複製し、続きのコマを作っていきます。
パスの頂点を、パス選択ツール(A)で動かして変形させます。
尖がりの頂点をさらに上に動かしつつ、下の凹みを大きくし、徐々にシルエットを削っていきます。

f:id:Shin00118:20200119202823j:plain
f:id:Shin00118:20200119204438j:plain
パスを変形して作った連番のコマ

最後に、小さ目のシルエットを1コマ目用に作っておきます。

コマ送りした様子は次のようになります。

f:id:Shin00118:20200119205347g:plain

3.(手順③)テクスチャシートの作成

まずガイドを表示します(Ctrl+R)。次に切り抜きツール(C)を選択します。上と左の目盛から、ガイドをドラッグで真ん中まで引っ張てきます。切り抜きツールを選択していると、ガイドを画面中央に簡単にスナップできます。

ガイドに合わせて、各コマを並べます。左上から順に、各コマを1/4サイズに縮小(変形:Ctrl+T)して並べます。

f:id:Shin00118:20200119210754j:plain
f:id:Shin00118:20200119205523j:plain
(左)ガイドとコマの並び・(右)1/4に縮小した各コマのレイヤ

 

なお、画像を右向きにするのは、UnityのStretched Billboardで使うのに、この向きにする必要があるためです。

これで完成です!