KLabGames Creative Blog

KLabは、多くのスマートフォン向けゲームを開発・提供しています。このブログでは、KLabのクリエイターがスマートフォン向けのゲームを制作・運営していく中で培った様々な技術や挑戦とそのノウハウについて紹介していきます。

この記事は KLab Creative Advent Calendar 2019 の 19日目の記事になります。

こんにちは。UIデザイナーをしている、ちいやまです。

今回は、バナー制作コスト削減の取り組みの一環で、バナー生成ツールの開発をした件について紹介します。
実装の詳細についてはエンジニアさんに開発してもらったので書くことができませんが、
デザイナー視点での業務効率化への取り組みについて書いていきます。

どんなツール?

キャラクター用のバナー画像(テキストが多め)のキャラクター等のデータをPhotoshopで手動で入力するのではなく、
マスターとゲーム内辞書からキャラクターの情報を取得し、自動で入力して画像として出力するUnity拡張機能です。

image2

配置などが変動しないテンプレート化できるバナーを作成することができ、
ゲーム内辞書・マスターのキャラクター情報からデータを取得できるので手動ミスが発生しなくなる、再生成するのにも時間がかからないので、パラメータ変更とか文言変更に対応しやすくなるツールです。

なぜツール作ることになったのか

テキストが多く含まれるバナーの制作コストが高く、その上で多言語に制作するコストも高くなっていたので、この作業を効率化できないかということがきっかけでした。

その中で、ゲーム内で使っているデータを直接引用し、出力できたら、
人為的ミスの削減、文言変更などにも対応できるのではということで、
バナー生成ツール(Unityの拡張機能)を作ることになりました。

そもそも、なぜそのままのデザイン構成でゲームのUIに組み込めなかったかと言うと…

UIにそのまま組み込めなかった理由

使用されているバナーが一箇所で使用されているのではなく、複数箇所の画面構造を作り変えるというのはかなり工数がかかる、という点もありましたが、
Photoshopで作られたデザインの中には多分にフチやシャドウ・グラデが含まれます。

そのままの表現でUI化した場合、処理負荷が上がりローディング時間が長くなることが見込まれ、ユーザー体験が下がるため、という点と
反対に処理を優先してテキスト表現をシンプルにしたり、テキストを完全に外に出してしまう場合、
現在の画像の品質から大きく落ち、訴求力が落ちるという点があるためです。

(人は整理された芸術的なデザインよりも、チラシのような非芸術的なデザインを選ぶ傾向があるという研究や、読みづらい文字(角度がついていたり)や見慣れた文字が記憶に残りやすいという研究もある)

という理由があり、
出力する媒体は「画像(png)」という部分は変えず、Unityでテキスト部分・ステータス等を動的に取得し半自動化しようという開発方針になりました。

仕組み・作業の流れ

①画像の作成・Unityに取り込み

汎用的なアイコンやフレーム、背景などを作成します。
新規で登場するキャラクターやバッジ等はここで作成し、更新のたびに追加していきます。

image4

②Unity上でバナー生成ツールの使用

image3

(モザイクが多くてなんのこっちゃという感じですが)画像のようにシーンを実行しながら、ツール画面にキャラクターIDなどの情報入力、テキスト折返しの位置指定します。必要に応じてテキストのグラデーションを調整したりもします。

③画像の生成

画像出力ボタンを押すと画像が保存されます。
最後に、制作したプレハブ・画像をGitで共有して完了です。

image1

改善された点

・実際にゲーム内で使用されているマスターデータを参照して画像を生成できるので、手入力による記入ミスの減少や、多言語に対応する制作コストを下げることができた。
・簡単に画像を出力することができるようになるので、画像制作コストを下げることができた。

運用をしてみて

今回ツールを作成後、実際にテスト的に運用に乗せてみたのですが、機能が不足している点など運用してみて初め気付くことがたくさんあり、仕様出しの難しさを痛感しました。
現在は完成にむけて絶賛修正中という段階です。

今回のバナー生成ツール開発ではデザイナーが泥臭くやっていた作業を、プログラムの力を借りて
効率化をしようという試みでした。忙しい中、開発をしてくれたエンジニアの皆さんにこの場を借りてお礼致します・・!

この記事が、同じような問題を抱えてる方のヒントになったら幸いです。
以上、最後までお読みいただきありがとうございました。

はじめに

この記事は KLab Creative Advent Calendar 2019 の18日目の記事になります。

こんにちは。KLabGames事業本部CGデザイナーのkiyoonです。
映像制作会社での経験を経て、現在はUnityやMaya,AfterEffectsを使用し、エフェクトや演出作成を行う演出チームに所属しています。

AfterEffectsを使っていた人がUnityをはじめて触ると、AfterEffectsなら簡単に出来ていたことが意外と手間がかかったり、基本機能だけでは出来ないこともあるのではないでしょうか。
Unityでは標準機能だけでは難しかった表現も、シェーダーを作ることで解決できることがあります。
Unity2018から、デザイナーでも簡単にシェーダーを作ることができるShaderGraphが搭載されましたので、今回はそんなAfterEffectsでよく使っていた機能をUnityのShaderGraphを使ってシェーダーに置き換える例をいくつかご紹介させて頂きます。

Unityで使いたい機能

使いたい機能はたくさんありますが、その中でもエフェクトを作る際によく使いそうな物だと、

  1. 色合い(Tint)

  2. トライトーン(Tritone)

  3. レベル(Levels)

  4. 色相/彩度(Hue/Saturation)

  5. 白黒(Black & White)

  6. トラックマット

  7. (おまけ)色温度

この辺りが使う機会が多かったので、これらをシェーダーに置き換えて行こうと思います。

色合い(Tint)

画像の各ピクセルの輝度値を見て黒・白を指定した2色で補完するエフェクトです。
モバイル向けのゲームを作る場合、容量を減らす事が大切になりますので、グレースケールのテクスチャを用意して色変更をする際に使い回すことがよくあります。
Unity標準機能のAlphaBlendシェーダーを使い色を変更すると、テクスチャの白色部分を変更することはできるものの、黒色部分は黒のままなので使いにくいと感じる場面もあるのではないでしょうか。

この仕組をShaderGraphで再現したものがこちらとなります。

image12

テクスチャのカラー(今回は赤チャンネルのみ)をLerpノードの「T」の部分に接続し、黒側の入力値をLerpノードの「A」に、白側の入力値をLerpノードの「B」に接続します。Lerpノードの「Out」をMasterの「Color」へ接続すれば完成です。

作成したシェーダーをマテリアルにアサインするとこのように指定した2色で置き換えることができます。

image6

※今回は簡単に作る為、テクスチャの赤チャンネルのみを使用していますので、カラー画像を使った時に正しい輝度値が使われる訳では有りませんが、グレースケールのテクスチャを使う場合はここまで簡略化しても問題ないかと思います。

トライトーン(Tritone)

色合いエフェクトと似ていますが、画像の各ピクセルの輝度値を見て黒・白・中間の色を指定した3色で補完をするエフェクトです。
色合いエフェクトと違い、中間色を指定することも出来ます。

この仕組をShaderGraphで再現したものがこちらとなります。

image5

基本は色合いエフェクトと似ているのですが、黒側の色と中間の色、白側の色と中間の色、この2つをまずLerpノードで計算して、この2つと輝度値を再度Lerpノードで計算することで再現をすることが出来ます。
※今回も簡単に作る為、テクスチャの赤チャンネルのみを使用しています。

作成したシェーダーをマテリアルにアサインするとこのように3色で補完をすることが出来ます。

image8

レベル(Levels)

Photoshopのレベル補正と同じようなエフェクトで、画像のレベル範囲をガンマ値で決めた値に補正するエフェクトです。ただ単に暗くしたり明るくするのではなく、暗い所や明るいところは保持したままコントラストを調整出来ます。

ガンマ関数というのがあるみたいですが、難しいので今回は簡単に似たような表現ができるPowerノード(べき乗を計算するノード)を使った方法をご紹介します。

image11

テクスチャのカラーをPowerノードの「A」に接続し、数値(今回はVector1のスライダー)をPowerノードの「B」に接続します。Powerノードの「Out」をMasterの「Color」へ接続すれば完成です。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image10

Levelsのスライダーを動かすと色を締めたりできます。

色相/彩度(Hue/Saturation)

画像の色相・彩度・明度を調整することができるエフェクトです。
これを再現しようとするとRGBの画像をHSVに変換をする必要がありますが、ShaderGraphには便利なノードがありますので、今回はこちらを使って作っていきます。

image17

テクスチャのカラーをHueノードの「In」に接続し、0~360の範囲を指定したVector1のスライダーをHueノードの「Offset」に接続します。HueノードのRangeはDegreesにすることでAfter Effects等と同じように角度で調整ができます。
Hueノードの「Out」をSaturationノードの「In」に接続し、スライダー設定したVector1をSatuationノードの「Saturation」に接続します。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image7

Hue/Saturationの値を変えることで色相を変更したり彩度を変化させることが出来ます。

白黒(Black & White)

カラー画像を白黒にする事ができるエフェクトです。

単純に白黒にするだけなら、赤・緑・青それぞれのチャンネルを足して3で割れば白黒画像にする事ができますが、人間の目は赤・緑・青の見える感度が違うため、画像そのものの明度で白黒にすると違和感が生まれます。そのため、画像の輝度値を使って白黒に補正することで違和感の無いグレースケール画像を作ることが出来ます。

細かい計算式は難しいので割愛しますが、赤・緑・青それぞれの値に特定の係数をかけて足すことでより自然なグレースケールを作ることが出来ます。

image1

赤・緑・青をそれぞれ足して3で割った例です。これでも白黒画像になりますが、カラーと比べた時に違和感が生まれるかと思います。

image2

こちらが赤に「0.299」、緑に「0.587」、青に「0.144」の係数をかけて足したものです。
同じく白黒画像になりますが自然な白黒画像になります。

image15

この計算式は内積を取る計算式に置き換える事ができますので、今回はDotProductノードという内積を取れるノードを使用してみます。
テクスチャのカラーをDotProductノードの「A」に接続し、Vector3ノード(0.299, 0.587, 0.144)をDotProductノードの「B」に接続します。DotProductノードの「Out」をMasterのColorに接続することで完成です。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image4

違和感の少ないグレースケール画像になるかと思います。

トラックマット(Track Matte)

トラックマットはエフェクトではありませんが、After Effectsを使う上で非常に使用頻度が高いものかと思いますので、同じ様な機能を作ってみます。
Photoshopのクリッピングマスクと似たような機能でマスク用の画像のアルファ値/輝度値を使ってマスクをすることが出来ます。
Unityでマスク機能を使う場合コンポーネントを使用した方法等ありますが、シェーダーを使う方法もありますのでご紹介します。
アルファ値/輝度値を使ったマスクの2種類がありますので、それぞれShaderGraphで作ってみます。

アルファ値を使ったマスク

image13

まずはアルファ値を使ったマスクです。
テクスチャのカラーとマスク用画像のアルファをMultiplyノード(乗算)に接続します。そしてMultiplyノードの「Out」をMasterのAlphaに接続し、MasterのColorにテクスチャのカラーを接続すれば完成です。
今回はAfter Effects同様マスク画像の反転ができるよう、反転ボタンも付けてみます。
マスクテクスチャのアルファをOne Minusノードに接続して反転させ、Branchノードに接続します。画像のようにデフォルトはFalseにつないでTrueの時に反転するようにします。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image3

マスクテクスチャでくり抜かれているのが分かると思います。

image16

反転をするとマスクテクスチャの部分がくり抜かれます。

輝度値を使ったマスク

image19

今回も簡単に作るために輝度値ではなくマスクテクスチャの赤チャンネルを使用していますが、大まかな組み方はアルファ値を使ったときと同じようになります。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image18

マスク用のグレースケール画像でマスクされていることが分かります。

色温度(Color Temperature)

After Effectsの標準には無いかもしれませんが、映像や写真を使う人なら良く目にする色温度もShaderGraphには便利なノードがありましたのでご紹介します。

image14

ShaderGraphに用意されているWhite Balanceノードにテクスチャのカラーと色温度・色かぶりの2つを決める値を設定すれば完成です。

作成したシェーダーをマテリアルにアサインしたものがこちらです。

image9

Temperatureの値を大きくすると色温度が温かい色味へと変わっているのが分かるかと思います。

まとめ

After Effectsで使っていたエフェクトでもっと使いたいものはありますが、まずは簡単に実装できそうな物をご紹介させて頂きました。
やっていることは凄く簡単な事なのに意外と標準機能ではできなかった物が多いと思います。
これをコードで書こうと思うとデザイナーの方には敷居が高いと思いますが、ShaderGraphの様なノードベースのエディタを使えば簡単に作ることが出来ます。
色温度や色相/彩度等、ShaderGraphには使いやすいノードが予め用意されているので、様々な表現を簡単に作ることが出来ますが、実は結構高負荷な物もありますので、実際これらをモバイルで使えるかはエンジニアさんに確認が必要です。
また、ShaderGraphで自動生成されたシェーダーは必要ない部分も多く含みますので、実際にゲームで使う際は最適化が必要になると思います。
しかし、デザイナーこそシェーダーを触れるようになれれば表現の幅が広がると思いますので、まずは分かりやすいShaderGraphを触ってみてはいかがでしょうか。

はじめに

はじめまして。KLabで演出を担当している、まぎーたです。

主にゲーム内の新イベントなどのプロモーション映像制作を担当しています。
Adobe After Effectsを主に使用し、基本的には30秒以内の映像尺で日本語版の制作を行い、
サービスを行っているすべての言語に翻訳され配信されています。

今回は映像内に記述されるテロップを3Dで制作し、なおかつ簡単に他の言語にも
簡易的に対応する手法をご紹介します。

エクスプレッションを使用した3Dテキストの作り方

プロモーション映像にテロップ演出はつきものです。
視聴者に伝えたい情報を目を引く形で記載する必要があります。

フォント選びでしたり、炎や雷などの演出を加えるなど、やりかたは様々です。

私の担当しているプロモーション映像は様々な国で翻訳、配信がされる前提のもので
短い期間で他言語版へのローカライズ制作が可能なテロップデザインが求められます。

今回は、そういったテロップデザインの中からAdobe After Effectsの
エクスプレッション機能を用いた、3Dテキストの作り方をご紹介します。

ポイントとしてはAfter Effectsの基本機能だけで実現でき、
サードパーティプラグインに頼らない点です。

1.テキストを用意する

まずは記載したい文章を用意します。
テキストレイヤーでも、Photoshopでpngの画像として制作しても大丈夫です。
ゴージャス感を出すために金色で。
image7

2.テキストを用意する

①テキストを作業コンポジションに配置し、プリコンポーズしてコピーします。
 コピー元の名前は【全言語対応の3D文字を作ろう!】とし、
 コピー先とコピー元を分かりやすく【_メイン】【_コピー】と
 レイヤー名をリネームしました。

②ヌルオブジェクトを作成し、名前を【control】とします。
 このレイヤーで3Dテキストの管理を行います。

③それぞれのレイヤーの【3Dレイヤー】【モーションブラー】スイッチをオンにします。
image8

3.コントロール項目の作成

①【control】レイヤーに、
 エフェクト⇒エクスプレッション制御⇒スライダー制御を適用し、
 名前を【遠近】にリネームし、数値はとりあえず2としておきます。

②【control】レイヤーに、
 エフェクト⇒エクスプレッション制御⇒カラー制御を適用します。
 色は今回黒系の暗い色に設定しました。

【遠近】が3DテキストのZ軸のふくらみ
【カラー制御】がふくらみ部分の色となります。
image1

4.エクスプレッションの適用

①コピーしたテキストコンポジションに【塗り】を適用
・エフェクト⇒塗り を適用
・カラーのストップウォッチを【Alt+左クリック】しエクスプレッションを開く
・以下のエクスプレッションを記載
 thisComp.layer("control").effect("カラー制御")("カラー")
 ピックウィップで【control】のeffect("カラー制御")("カラー")を参照しても大丈夫です。

②位置パラメータにエクスプレッションを打つ
・位置のストップウォッチを【Alt+左クリック】しエクスプレッションを開く
・以下のエクスプレッションを記載

x= thisComp.layer(thisLayer, -1).transform.position[0];
y= thisComp.layer(thisLayer, -1).transform.position[1];
z=thisComp.layer(thisLayer,-1).transform.position[2]
+thisComp.layer("control").effect("遠近")("スライダー");
[x,y,z]

上位のレイヤーより【遠近】のパラメータの数値の分だけテキストのZ軸が前後するという設定です
image4

5.レイヤーの親子付け設定

テキストコンポジションをそれぞれcontrolに親ピックウィップします。
image8

6.コピーレイヤーを複製

コピーレイヤーを更に複製することによりZ軸の膨らみを増やしていきます。
今回は20回ほどコピーしましょう。
コピーを行った回数 × 【遠近】のパラメータ(今回は2) の分だけZ軸が膨らみます。
image5

7.【control】のパラメータを調整して角度や位置を変更

これで【control】レイヤーの位置、角度のパラメータを調整することにより3D化したテキストを動かすことができます。
image3


8.テキストを他の言語に差し替える

テキストコンポジション内の言語を入れ替えるだけで、
簡単に他の言語のデータも制作が行えます。

9.ここまで見て

ここまでの工程を見て、AfterEffectsの3Dレンダラー機能を使えば良いのでは・・・?
と思った方も多いと思います。
演出の内容や意図、作業環境によってはそれでも良いと思います。
ですが、3Dレンダラーは一部の機能が制限されるため、
用途によって使い分けていきましょう。

■CINEMA 4Dで制限される機能
image6

■レイトレース 3Dで制限される機能
image5

10.使用例

アニメーションやエフェクトを加筆した使用例です。
言語の切り替えは、コンポジションの中のテキストを入れ替えるだけでOKです。

おわりに

今回はサードパーティプラグインを使用しない3Dテキストについて解説しました。
同様の工程を行えば、テロップ演出だけにとどまらず、ロゴアニメーションなどにも応用していけます。

少しでも映像制作における演出の、お役にたてましたら幸いです。
今後も機会があればAfterEffectsの小ネタのような物を紹介できたらと思います。

最後までご覧いただき、ありがとうございました。

はじめに

この記事は KLab Creative Advent Calendar 2019 の16日目の記事になります。

こんにちは、KLabで3D演出制作全般の業務を担当している、やまパンです。

さて今回は、昨年書いた「セルルック調の3D雷エフェクトの作り方~素材編~」の続きとなる、アニメーション編について解説します。

こちらは前回の素材をアニメーションさせて作成した「落雷のエフェクト」です。
このエフェクトの作成方法について順を追って解説していきます。

雷の素材をUnityにインポート

前回記事にて作成した雷の各素材をUnityにインポートします。
インポートする素材は2点のみです。

・雷のテクスチャ

image16

・雷のモデル(fbx)

image7

ここでのアセットの名前は
テクスチャを「tex_thunder.png」、モデルを「mdl_thunder.fbx」と命名します。

image2

エフェクト制作前のデータ準備

さて、素材のインポートが終わったら次にそれらの素材をScene上に配置するためのデータの作成を行います。

データのアセット類は以下になります。

・prefab
・マテリアル
・AnimationClip
・AnimatonController

これらのアセットを作成・準備までの手順を以下に記載します。

1.マテリアルの作成

雷のテクスチャをモデルに張り付けるためのマテリアルを作成します。
雷の質感もこのマテリアルにアサインするShaderで確定します。
ここではAdditiveを使用し、雷の質感を加算に設定しましょう。

image13

2.prefabの作成

エフェクトデータの元となるGameObject(Prefab)を作成します。

Prefabの構造は以下です。

・FX_thunder.prefab(親Prefab)
  ∟root(Animationコンポーネント用)
    ∟mdl_thunder(雷のモデル)※ここにマテリアルをアサインする

image4

上記で作成したマテリアルはこの「mdl_thunder」モデルにアサインしておきましょう。

3.Animationアセットデータの作成

prefabに対してアニメーションを作成するための空のタイムライン(AnimationClip・AnimationController)を作成します。

ここでのアセット名前はAnimationClipを「ani_thunder」、AnimationControllerを「cnt_thunder」と命名します。

image3

この二つのアセットの違いについてですが、

・AnimationClip・・・アニメーションのキーフレームを制御する
・AnimationController・・・AnimationClip含めアニメーションの設定を制御する
といった用途の分類になります。

4.Animationアセットデータの設定

次に、Animationアセットデータの設定を行います。

まず、作成したAnimationClipをAnimationController内に格納して設定をして下さい。
「cnt_thunder」のアセットをダブルクリップすると「Animator」というウィンドウが出てきます。
その中に作成した「ani_thunder」をドラッグして入れて下さい。
そうすると以下の図の形が表示されます。

image12

ここまででAnimationアセットの作成と設定が完了となります。

5.AnimationアセットデータをPrefab側に設定

上記で準備したAnimationアセットデータをPrefab側にアタッチし、実際にアニメーションを行うための設定します。

まず、アニメーションを作成する際の親となるprefabを指定します。
ここでは「root」オブジェクトを親とします。
「root」オブジェクトを選択し、InspectorからAddComponentのボタンをクリックします。
これは対象のPrefabに対し、データを作成する上での様々な設定を行うためのコンポーネントを指定するためのものです。
今回は「root」オブジェクトに対してアニメーション付けを行いたいため、「Animator」コンポーネントを設定します。

image14

「Animator」コンポーネントを設定後、Controllerの項目に先ほど上記で作成した「cnt_thunder」をアタッチします。

image15

以上でアニメーション作成前のデータ準備が完了となります。

雷のアニメーションをつける

アニメーションを作成するためのデータ準備が整いました。
いよいよ実際に雷のアニメーション付けを行っていきます。

と、その前に、一度ここで実際に落雷の現象が起きた時の雷の見た目をイメージしてみてください。
落雷はとても瞬間的で、瞬く間に光って消えてしまいますよね。
エフェクトを作成する際もその原理は同じで、より自然現象に近い形のアニメーションを作成することで説得力が生まれてきます。

とはいえ雷を実際にゲームエフェクトとしてアニメーションの作成をする場合、プレイしているユーザーが認識できる記号としてデフォルメされた見た目や動きにアレンジする必要があります。

エフェクトを見る人が分かりやすく、かつより自然な印象に見せるためにどのようなアニメーションを作成するか意識することが大切になってきます。

・フレームレート:30fps
・尺:10~15f

の尺間でアニメーション付けを行いましょう。

テクスチャのUVスクロールでアニメーションを作成する

前回記事で作成したシームレスループ用のテクスチャに対し、「mdl_thunder」モデルのUVのY座標を動かします。
そうすると、UV制御のみでテクスチャの見た目に変化を入れることが出来ます。

その際に心がける点として、実際の落雷と同じようにパパッと短い尺で雷のシルエットが切り替わっていく見た目になるようなアニメーションを意識して制作すると、より自然な雷の見た目に近づきます。

※分かりやすいようにMayaのUVエディタで説明した図です※

image19

この動きを、実際にUnityのアニメーションに落とし込んでいきます。

まず、Animationウインドウから「Add propety」のボタンを選択します。
これはPrefab内のどのオブジェクトに対し、何の種別のアニメーションを制御するのか項目を選択するものになります。
出てきた項目の中から、「mdl_thunder」以下の「Material._Main_Tex_ST」を選んでください。
この項目がUVスクロールをアニメーション制御するためのものになります。

image11

そうすると、以下の形でUVスクロールの項目が現れます。

image20

上から、
「Material._Main_Tex_ST.x」と「Material._Main_Tex_ST.y」がオフセット制御、
「Material._Main_Tex_ST.z」と「Material._Main_Tex_ST.w」がスクロール制御になります。

今回の雷ではUVのY座標のみスクロールアニメーションを入れるため、
「Material._Main_Tex_ST.z」の項目に対してキーフレームを入れていきます。

image10

このように、15f間でランダムにキーを入れていきます。
上記画像はキーの遷移をグラフで表示したものです。

Y軸方向に動くUVスクロールのキーの補完を「Constant」に設定することで、テクスチャのみで雷のパチパチ感を表現することが出来ます。
(逆に、キーの補完を「Linear」に設定するとシームレスな動きになってしまいます)
「Constant」の補完設定でキーを入れた際の実際の動きが以下です。

UVスクロールアニメーションのみで雷のパチパチ感が出ていることが分かります。

スケールのアニメーションを付け加える

次に、より雷の動きを自然に近づけるためにスケールのアニメーションを追加します。

アニメーションの内容は左右の反転です。
UVスクロールのアニメーション時と同じ形の要領で、モデルの左右を反転させるアニメーションを追加することでよりランダムな見た目に近づけることが出来ます。

まず、先ほどと同じくAnimationウインドウから「Add propety」のボタンを選択します。
出てきた項目の中から、「mdl_thunder」以下の「Scale」を選んでください。
この項目がスケールを アニメーション制御するためのものになります。

image18

そうすると、以下の形でスケールの項目が現れます。

image8

上から、X軸・Y軸・Z軸に対してアニメーション制御を入れる項目になります。
今回の雷ではカメラからの見た目を考慮し、Z軸に対して反転のスケールアニメーションを入れて行きます。

今回の雷ではUVのY座標のみスクロールアニメーションを入れるため
「Material._Main_Tex_ST.z」の項目に対してキーフレームを入れていきます。

image17

UVスクロールアニメーションの時と同じように、15f間でランダムにキーを入れていきます。上記画像はキーの遷移をグラフで表示したものです。
Z軸のスケールにマイナス値のキーをいれることで、モデルのスケールを反転します。
スケールアニメーションも同じくキーの補完を「Constant」に設定することで、スケールの切り替えを瞬間的に表現します。

UVスクロール+スケールのアニメーションを融合した際の実際の動きが以下です。

いかがでしょうか。
UVスクロールとスケールのアニメーションを組み合わせることで、雷らしい動きに近づいてきたと思います。

ここからさらにアレンジとして、雷が落ちる瞬間のインパクトを追加します。
雷の「落雷の瞬間が一番大きく輝く」というイメージをスケールアニメーションで表現します。

落ちる瞬間のスケールを大きく表示させることで、エフェクトにインパクトと余韻が追加されました。

おまけ

落雷のエフェクトに対し、その他の要素のエフェクトを追加してみます。

落雷した瞬間のパーティクルと点滅する光を地面に設置したことで、
より落雷のエフェクトに説得力が生まれました。

まとめ

いかがでしたでしょうか!
ここで一度前回の記事のおさらいの意味もこめて、雷のエフェクトを作成する上でのまとめを記載します。

・雷のテクスチャを作成する際は雷のシルエットに注意しながら描画する
・十字の板モデルを作成する際、片方の板のUVはずらして不規則的な見た目にする
・アニメーションはUVスクロールとスケールのみで制御
・アニメーショングラフを【Constant】にすることで雷のパチパチ感を表現する
※落雷の瞬間のインパクト、その後の余韻を意識しながら作成する

「セルルック調の3D雷エフェクトの作り方」シリーズは今回の記事にて完結となります。

全体を通してやっていることは単純な制作になるので、是非試してみてください!

この記事は KLab Creative Advent Calendar 2019 の 15日目の記事です。
はじめまして、こんにちは。クリエイティブ部のはちみつと申します。

唐突ですが、KLabが提供しているゲームタイトルには日本語で制作されている国内向けのもの以外にも、英語やフランス語ドイツ語など多数の言語で制作された海外向けのものが存在します。
言語によってさまざまな特徴があるため、制作にあたって調査を行う場合があるのですが、筆者のはちみつは本年、タイならびにタイ語に関して調べる機会がありましたので、今回はタイ語についてご紹介いたします。

タイ語ってどういう言語?

タイ語は、タイやカンボジアなどで約2,600万人が使用している言語で、シャム文字(タイ文字)を使用して表記されます。
文字を読む方向は日本語と同じく左から右であり、基本的に文字と文字の間にはスペースが入りません。
また、口語の文章においては男性語尾女性語尾が存在します。
タイ料理のお店などで「サワディー クラッ(プ)」や「サワディー カー」というタイ語を耳にしたことはないでしょうか?
この「サワディー」から始まる2種類の言葉、どちらも「こんにちは」という意味なのですが前者を使用するのは男性、後者を使用するのは女性と使い分けされているのです。

image1

タイ文字(シャム文字)って?

タイ文字は、44種類(内2文字廃字)の子音字に9音の母音、5種類の声調を表す符号を組み合わせて使用されます。
子音字と母音符号、声調符号の種類数の合計は約80種類なので、各文字、符号の形のみであれば日本語よりはるかに少ないのですが、文字と符号を組み合わせて発音、声調を表現することを考えると……1音を表現するにあたっての組み合わせの数がどのくらいになるか、なんとなくお察しいただけるのではでしょうか。
実際にどのような形で組み合わせていくかについては、当然ですがしっかりと決まりがあり、子音字を中心にして前後左右に母音符号、右上に声調符号が配置され1音が表現されます。

image2

必ず子音字に母音符号や声調符号が付加されるわけではなく、発音、声調に合わせて付加されます。
また、母音符号の中には子音字とまったく同じ形のものもあります。

タイ文字のフォント

一般的に、タイの文字として思い浮かべる形状は、これまで本記事内にも登場しているクルクルした○がついているものだと思いますが、実はタイ文字のフォントは大きく分けて2種類あります。

  • フォント・ミー・ファ(セリフ)
    image3

    上品、落ち着きのある印象。
    新聞や説明資料、雑誌など読ませるための長い文章の際に多く使用され、フォントの印象から、ファンタジー物の表現に適しています。


  • フォント・マイミー・ファ(サンセリフ)
    image4

    ポップ、活気がある印象。
    広告、ポスターデザイン、ヘッドラインなどの短い文章の際に多く使用され、フォントの印象からスポーツ物の表現に適しています。


フォント・マイミー・ファの文字を見た際に「英語のアルファベットみたいな文字があるな」と思われた方もいらっしゃるのではないでしょうか。
この「英語のアルファベットに形状が似ている文字」を1文字だけでデザインなどに使用した場合、タイ文字として認識されない可能性が高くなります。

また、タイ文字はフォントによっても文字の形状が大きく異なるうえに、元の形状が類似している文字が多数存在します。
デザイン等にタイ文字を使用する際に、文字の形状に手を加える場合は十分注意が必要です。

image5

タイ文字を使ってみる!

ここまでにタイ語(タイ文字)の基本をざっくりとご紹介させていただきましたが、実際に「タイ語を使って何か作ってみたいな」と思われた方が、もしかするといらっしゃるかもしれないので、フォントとadobe製品での設定方法についてもご紹介しておきます。

フォント

おそらく一番入手しやすいのはGoogle Fontsです。
オーソドックスなミー・ファ、マイミー・ファをはじめ、手書き風のものや丸っこいものなど合わせて26フォント存在します。(2019年11月現在)
Google Fonts:https://fonts.google.com/?subset=thai
※実際に使用する際は、フォントの利用規約を必ずご確認ください。

Adobe photoshopの設定

下記の設定をすることで、きれいにタイ文字の表示がされるかと思います。
※設定をしないままタイ文字を使用すると、付加記号の位置が崩れてしまう可能性があります。

  • 環境設定>テキストエンジンオプションで[中東言語と南アジア言語]を選択

  • 文字パネル>[文字間のカーニング:メトリクス]を選択

  • 文字パネル>[付加記号の水平位置:0]を選択

  • 文字パネル>[付加記号の垂直位置:0]を選択

  • 段落パネル>[テキスト方向の設定:左から右]を選択

※ご使用になるバージョンによって設定箇所が異なる場合があります。

さいごに

いかがでしたでしょうか?
文字を読む方向や、文章にスペースが入らない…など日本語と共通する点もありますが、やはり多くの方はなじみのない言語かと思います。
なじみがないからこそ、扱う際には細心の注意が必要となり、扱うための調査が必要になります。

また、言語だけでなくその言語を使用する国の文化や習慣などを知ることで、その国に適した表現が見つかるかもしれませんし、知ってから目にする場合と知らないで目にする場合では、違った見え方をするかもしれません。

ことタイ語に関してのみで言ってしまうと、日常生活の中で触れる機会は少ないかもしれませんが、本記事をきっかけに少しでもタイ語について興味を持っていただけたら幸いです!

ここまでお読みいただきありがとうございました。
image6

この記事はKLab Creative Advent Calendar 2019 の14日目の記事になります。

こんにちは、KLabGames エフェクトデザイナーの丸Qです。

この記事では最近話題になっているSubstance Designerについて語っていきたいと思います。

Substance Designerはテクスチャ制作でお世話になるツールで、元々背景モデルで使用されている印象がありました。
しかし、3Dエフェクトのテクスチャ制作等でも使用されており、実際私が所属している案件でも導入されております。

そんな「Substance Designer」を使用して簡単なエフェクト用テクスチャを制作してみようかと思います。

細かくツールの使い方を理解するというより、とにかく「Substance Designerを使ってテクスチャを作る!」ことを目的に記事を書いておりますので、その点だけご了承ください。

作ってみるテクスチャ

今回は下画像のようなオーラや炎の表現で使用でき、かつ比較的簡単に作れるテクスチャを制作してみようかと思います。

image

ちなみにこんな感じに使用出来たりします。

ツールを起動して新規グラフを追加する

まずはツールを起動してみます。
すると下記のような画面になります。

image24

最初に新規グラフを作成してみましょう。
まずは下の画像のように操作を行ってみてください。

image17

「New Package」を選択すると「未保存のパッケージ」がエクスプローラに追加される。

image19

「未保存のパッケージ」を右クリックして、「New」→「Substance Graph」を選択する

image12

下のような画面が出てくるので、GRAPH TEMPLATEに「Empty」を選んでOKをクリックする

image6

「新規グラフ」が追加される

image15

ノードとは?

まずノードというのは下画像のようなものになります。
ノードには様々なエフェクト効果があります。
このノードを繋ぎ合わせていくことで最終的に欲しいテクスチャを出力していくのです。

image16

ベースとなるテクスチャの制作

それでは早速やってみましょう。

まず最初に「Shape」ノードをグラフエリアに追加して、基盤となる画像を作りましょう。
ここでノードの追加には2通りあります。
お好みの方法でノードを追加してみてください

ノード説明

Shape

ベースとなる形状を選択、入力できるノード
円や四角など、様々な形状がある

【その1】
ライブラリエリアでノードを選択、追加する方法です。
下記の画像の箇所でノードを検索、または選択して追加していくことが出来ます。

image7

image14

【その2】
もう一つの方法で、「Tab」キーを使用してノードを検索、選択する方法があります。
下記の画像を参考に追加してみてください。

image11

画像のような画面が出ますので、そこの検索エリアに「shape」と入力して、目的のノード「Shape」を選択してください。

image2

【結果
さて、これら二つの方法で
グラフエリアに「Shape」ノードが追加してください。

image21

ノードのパラメータを変更してみる

次に呼び出したノードのパラメータを調整みましょう
パラメータエリアは下画像の赤いエリアになります。

image9

それでは先ほど呼び出した「Shape」ノードを選択してみてください。
するとパラメータエリアに選択したノードのパラメータが出てくるかと思います。
そこの中に「INSTANCE PARAMETERS」という項目がありますので、そこのパターンを「放物面」に変更してみてください。

image4

Shapeノードの画像をランダムにタイリングする

次に同じ方法で「Tile Random」ノードを追加して、先ほど作った画像をランダムにタイリングしていきましょう。
「Shape」ノードと「Tile Random」ノードを画像を参考にドラッグ&ドロップで線を接続してみてください。

ノード説明

Tile Random 入力されたノード内容をサイズ、配置場所をランダムにタイリングする

image20

続いて「Tile Random」ノードのパラメータを調整してみます。
下画像の赤枠を参考にパラメータを調整してみてください。

image10

下記画像のような形になったかと思います。

image23

ベーステクスチャを完成させる

さて、どんどんノードを呼び出して接続していきましょう。
画像を参考に追加、接続してみてください。

  • 「Invert Grayscale」ノードで画像を反転させる

  • 「Blur HQ Grayscale」ノードで少し画像をボカす

ノード説明

Invert Grayscale 画像を反転させる
Blur HQ Grayscale 画像をボカす

image8

質感となるテクスチャの制作

さて、次に質感となるノード群を制作してみます。
画像を参考に、次の通りにノードを接続してみてください。

  • ベースとなるテクスチャ画像として「Clouds 2」ノードを追加する

  • 画像の明暗をパッキリさせる「Auto Levels」ノードを追加、「Clouds 2」ノードから接続する
  • ボケと歪みを付ける「Slope Blur Grayscale」ノードを追加、画像を参考に「Auto Levels」ノードから接続する
  • 画像を反転させる「Invert Grayscale」ノードを追加、「Slope Blur Grayscale」ノードから接続する
  • 画像をボケさせる「Blur HQ Grayscale」ノードを追加、「Invert Grayscale」ノードから接続する

ノード説明

Clouds 2 ノイズ系のデフォルト画像の1つ
Auto Levels

レベル補正のこと
階調をコントロールすることで画像の明るさや色を調整できる

Slope Blur Grayscale ブラーの1つで、ボケを足しつつ歪みを入れることができる

image5

制作した2つのノードをブレンドして色味をつける

さて、今皆さんのグラフエリアには2つのノード群が出来ているかと思います。
それらの結果同士をブレンドしてみましょう。

  • 「ブレンド」ノードを呼び出す

  • 1つ目のノード群の「Blur HQ Grayscale」ノードをブレンド端子の真ん中に接続する
  • 2つ目のノード群の「Blur HQ Grayscale」ノードをブレンド端子の一番上に接続する
  • 「ブレンド」パラメータの画像を参考に、二つの画像を加算させる

ノード説明

ブレンド 二つのノードの入力に対して、加算、減算、オーバレイなど様々な効果を掛けることが出来る

image3

ここまでくればもう一息です!

最後に「Gradient Map」ノードを接続して画像のパラメータを参考に色味を付けてみてください。

ノード説明

Gradient Map グレースケールのテクスチャに明度の高いところから低いところにかけて色を付けることが出来る

image13

これにてテクスチャは完成になります!

画像を出力してみる

それではこのテクスチャを出力してみましょう。
まず「出力」ノードを追加し、先ほどの「Gradient Map」ノードと接続します。

※「Tab」キーで出すウィンドウは日本語検索が出来ません。ですのでライブラリエリアで検索するか、「Tab」キーでウィンドウを出した後、下の方にスクロールして「出力」ノードを選択してみてください。

image25

次に下画像のように選択してみてください。

image18

次に出力設定を選択します。
今回は出力先だけ指定してテクスチャを出力してみましょう。
「Export outputs」ボタンで出力したら、「閉じる」ボタンで画面を閉じましょう

image22

これにて無事出力されました!

image1

最後に

如何でしたでしょうか?

とにかく「Substance Designerを使ってテクスチャを作る!」ことを目的に書いてみた形になります。
このツールは上手く使うことで様々なテクスチャを作ることが可能です。
今回の記事がSubstance Designerへのきっかけとなっていただけると幸いです。

最後まで読んでいただきありがとうございました。