ゲーム開発奮闘記

Unity・エフェクト・アプリ開発に関係した記事を書いています

Unity shuriken エフェクトデータでモバイル向けに考えるべきこと

アプリやゲーム開発では、データの容量や処理負荷について考える必要が出てくることがあります。
シーンのロードが遅かったり、処理落ちしたり、アプリのデータダウンロードの容量が多くなったりと。
このとき、エフェクトで使用するデータに関して軽量化できる部分をまとめました。
(もし記載内容に誤りなどありましたら、ご教授お願いいたします。)


1.テクスチャーアトラスを使用する

テクスチャーアトラスとは。

図1のような、複数のテクスチャーをグリッド上に並べたテクスチャーの事をさします。

f:id:KTK_kumamoto:20160527125626p:plain

「図1:テクスチャーアトラス画像」

 

テクスチャーアトラスを使用する事により、「1つ」または「少ない枚数」のテクスチャーでエフェクトを作ることが出来ます。
それにより、使用するマテリアルの数を減らすことが出来ます。
そして、使用するマテリアルの数を減らす事により、ドローコールが減り、処理負荷の軽減につながります。

 

今回用意した、図1のアトラステクスチャーを使用してマテリアルを作成する場合、
Effect_mat_add(加算)、Effect_mat_alpha(半透明)の2つで基本的に様々なエフェクトに対応できると思います。


必要であればEffect_mat_multi(乗算)のマテリアルも用意するといいです。(図2)

f:id:KTK_kumamoto:20160527125720p:plain

「図2:使用するマテリアル3種類」


2.マテリアル(シェーダー)は、モバイルシェーダーを使用する

最近のスマホは、処理能力が上がってきていますが、少しでもユーザーさんのストレスにならないよう必要がない限りは、処理の軽いシェーダーを使用した方がパフォーマンスがいいです。

Unityに最初から用意されているmobileシェーダーを使用していきます。(図3.4.5)

加算の場合:Mobile/Particles/Additive

f:id:KTK_kumamoto:20160527125809p:plain

「図3:加算マテリアル」


半透明の場合:Mobile/Particles/Alpha Blended

f:id:KTK_kumamoto:20160527125824p:plain

「図4:半透明マテリアル」


算の場合:Mobile/Particles/Multiply

f:id:KTK_kumamoto:20160527125833p:plain

「図5:乗算マテリアル」


3.テクスチャーのImportSettingについて

TypeをAdovanceに変更する。 → これにより細かいオプション設定が可能になる
mipmapのチェックを外す → 基本的にエフェクトでは必要ないので処理しないようにオフにする
clampに変更する → アトラステクスチャーの場合は、タイリング(テクスチャーの繰り返し表示)が必要ないのでclampに変更

f:id:KTK_kumamoto:20160527125914p:plain

「図6:テクスチャーImport Settings」


■まとめ

・テクスチャーは、可能な限りアトラステクスチャーを使おう
・使用するマテリアルの数を減らすことで処理負荷が減る
・シェーダーは、モバイルシェーダーを使用する
・テクスチャーのImportSettingをしよう
・なるだけテクスチャーを増やさずに流用して、エフェクトを量産しよう

 

★番外編:アトラステクスチャーを使用したエフェクトを作ろう!

ここでは図1で用意したテクスチャーアトラスを、shurikenでどのように使用するか解説をしていきます。
 

完成データは、こちら↓から。
EffectAtlas_Training.unitypackage

 

アトラステクスチャーを使用したマテリアルでエフェクトを作る際に、
ParticleSystemのモジュール設定が必要になりますので、そちらを解説していきます。


1.まずはParticleSystemにマテリアルを割り当てる。

[Renderer]モジュールのMaterialに加算マテリアルを割り当てる。

f:id:KTK_kumamoto:20160527130027p:plain

「図7:RendererモジュールEffect_mat_add」

 

Sceneビューを確認すると図8のような見た目になります。

f:id:KTK_kumamoto:20160527130110p:plain

「図8:マテリアルを割り当てた状態のシーンビュー」 

 

2.[Texture Sheet Animation]モジュールのチェックを入れる。(図8)

f:id:KTK_kumamoto:20160527150937p:plain

「図9:[Texture Sheet Animation]モジュール」

 

このモジュールは、テクスチャーアトラスの分割数と、表示する領域を指定することが出来ます。
プロパティの詳しい説明は、公式を参照してください。(書籍の方にも少し詳しく説明があるのでよかったら見てください。)

 

3.[Texture Sheet Animation] モジュールの設定を行う。(図10)
Tiles:X2,Y2
Frame over Time:Constantに変更して、値を1

f:id:KTK_kumamoto:20160527151034p:plain

「図10:[Texture Sheet Animation] モジュールの設定」

 

上記の設定で、テクスチャーアトラスを縦横2分割ずつに分け(Tiles:X2,Y2)、その中の0番目(分割したものの一番左上)を参照する設定になります。(図11)

f:id:KTK_kumamoto:20160527151111p:plain

「図11:テクスチャーの分割ラインと番号について」

 

f:id:KTK_kumamoto:20160527151124p:plain

「図12:テクスチャーアトラスの0番目を表示したシーン画面」

 

 

4.ここからは、※書籍の「Lesson3」を元に設定を行い、炎のエフェクトを作ります。

完成品は、EffectAtlas_Training.unitypackage内のfire1_add.prefabを確認してください。

※書籍の紹介
「Unity ゲームエフェクト入門 Shurikenで作る!ユーザーを引き込む演出手法」

・fire1_addについて、[Texture Sheet Animation]モジュールの設定 Frame over Timeの値を2にする。(図13)

f:id:KTK_kumamoto:20160527210224p:plain

「図13:[Texture Sheet Animation]モジュールの設定


・par1_addについて、[Texture Sheet Animation]モジュールの設定 Frame over Timeの値を0にする。(図14)

f:id:KTK_kumamoto:20160527210334p:plain

「図14:[Texture Sheet Animation]モジュールの設定


・smoke1_alphaについて、[Texture Sheet Animation]モジュールの設定 Frame over Timeの値を1にする。(図15)

f:id:KTK_kumamoto:20160527210505p:plain

「図15:[Texture Sheet Animation]モジュールの設定

 

上記の3つのParticleSystemは、1つのアトラステクスチャーを使用して炎のエフェクトが作成されています。

 

f:id:KTK_kumamoto:20160527212147g:plain

「完成炎エフェクト」

以上でテクスチャーアトラスを使用してエフェクトを作成する方法の紹介でした。