KLabGames Creative Blog

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

はじめに

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

こんにちは。CGデザイナーのkiyoonです。

映像制作会社での経験を経て、現在はUnityやMaya,AfterEffectsを使用し、エフェクトや演出作成を行う演出チームに所属しています。

今回はエフェクトを作る上での基礎となる気持ちの良いアニメーションについてご紹介します。

気持ちの良いアニメーションとは?

アニメーションを付ける時「もっと緩急が欲しい!」とか「動きが気持ち良くない!」と感じたことはありませんか?

自然界に存在する物の動きは、機械のように一定の速度で動くようなものでなければ重力や摩擦によって加速したり減速したりしています。

そのため、例えば文字を出すアニメーションを作る場合、その文字が一定の速度で画面に出てくると機械的で、それを見た人は固い動きに違和感を覚えます。

しかし、このアニメーションに加減速(イージング)をつけることで機械的な動きから自然な動きになり、やり方次第でダイナミックな表現にすることもできるようにもなります。また、こちらの方が見ていて気持ちの良いアニメーションになっていると言えます。

アニメーションを付ける機能を備えたツールの一つとしてAfterEffectsが有りますが、開始点と終了点を設定するキーフレームを使ったアニメーションの補間方法には大きく分けて①一定の速度で動くもの②速度変化があるものの2種類があります。一定の速度で動くものには「リニア補間」が使われ、速度変化があるものには「スプライン補間」や「ベジェ補間」が使われます。

具体的に何をするのか?

加減速(イージング)と言われても分かりにくいかもしれませんが、基本は「イーズイン」「イーズアウト」の2種類が多く使われます。

イーズイン

緩やかに動き始めて徐々に加速をする動きをします。

イーズアウト

高速で動き出し後半にかけて緩やかになる動きをします。

この2つが基本となり、組み合わせたり強さを調整したりすることで理想の動きにして行きます。

AfterEffectsやUnityといったツールでは加減速の数値を手で入力しなくても、グラフを使って直感的に操作することができます。

AfterEffects,Unityでの作成方法

AfterEffects

AfterEffectsはアニメーションがとても付けやすく、細かい調整はグラフエディターで調整をしていきます。ベジェ曲線を使ったカーブを使うので、キーフレームが少なくてもダイナミックな動きを付ける事が可能です。

キーフレームを選択して右クリックメニューを表示し、「キーフレーム補助 > イージーイーズ(F9)」を選択することでイージングが可能です。

デフォルトではグラフエディタ上で位置のカーブを編集できませんが、トランスフォーム内の位置を右クリックし「次元に分割」をすることでX,Yそれぞれ個別に操作が可能となります。

Unity

Unityのアニメーションも非常に使いやすく、キーフレームを打った後アニメーションウィンドウの「Curve」タブ内での操作が可能です。

Unityの場合、デフォルトでイージングがされますが、意図しない動きになるかもしれないので都度確認をします。

Unity2018.1からアニメーションカーブに「Weighted Tangent」というAfterEffectsで例えるとベジェ曲線のようなものが追加されたので、少ないキーフレームでもダイナミックな動きを付けることが可能になりました。それ以前のバージョンの場合、キーフレームを追加して理想のカーブを作ります。

カーブを丁寧に付けて行くことが大切!

こだわったアニメーションを付けていくとキーフレームの数がどんどん増えていきます。当然カーブも複雑になって行きますが、このカーブを丁寧に作っていくことで違和感の無い気持ちの良いアニメーションを作ることができます。

アニメーションは主に「位置」「回転」「スケール」のトランスフォームと言われる3要素を、演出に合わせて設定していきます。

これらの要素以外にもX,Yなどの方向もあり煩雑になりがちですが、要素ごとに分解して丁寧に付けていくことが大切です。

まとめ

映像やエフェクトを作る上で基本的なことではありますが、アニメーションの緩急は非常に重要です。

ちょっとしたイージングを入れるだけでも品質が上がり、グラフ上のカーブを丁寧に作っていくことで、更に品質が高いものを作ることができます。

緩急の組み合わせは沢山あり、まずは引き出しを増やすことが大切なので優れた作品を研究し、実際に作ってみることが重要です。

▶はじめに

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

初めまして、こんにちは。
キャラクターイラストの制作をしています。30です。

箸休め的な記事を書けたらいいなと思い、今回はレイヤー整理のあれこれを狼とメイドの漫画で紹介したいと思います。

*主にCLIP STUDIO PRO Ver1.8.4(以下:クリスタ)の説明になります
 一部Photoshop CC(以下:フォトショ)での説明もあり。

▶概要

メイド:「レイヤー数!!300って!!」狼:「この前500いったから!!許して!!」メイド:「何をですか⁉こうなったら徹底的に綺麗にしますよ!!」狼:「ㇶェ…!」

◆◆◆◆◆◆

当方普段はアニメ塗りのイラスト制作をしています。

「かなりの量になるレイヤーをなるべく脳死して整理したい」をテーマに

自分がやっている方法の覚え書きになります。

今回ご紹介するのは下記3つになります。

1) クリスタとフォトショップで「のコピー」の消し方。

2)楽にリネームするための、クリスタでフォルダ全体削除の方法。

3)クリスタの素材登録。

それでは、次のタイトルからどうぞ。

▶レイヤー整理その①

メイド:「ちなみに実は一番知りたかったSAIのコピーでの語尾の文字は消すのが無理なようで…。力不足申し訳ないです。」狼:「知ってる方いたら教えてほしいね。」

▶レイヤー整理その②

メイド:「クリスタのフォルダ選択で全レイヤー削除は本当に有能です。フォトショでもできたら良いのにと常々思います。」狼:「アドビの方このブログ見てるかな?」

▶レイヤー整理その③

メイド:「レイヤーを作った時にリネームをするのが理想なんですが、正直それも面倒なので素材登録は神ですよ…。」 狼:「あれ実は君の方がめんどくさがりなんじゃ…」

▶終わりに

以上になります。

レイヤー整理はめんどくさいんですが必須の作業でもありますので、なるべくサクッと終わらせて描く時間が増やせたらハッピーですよね。意外とそれの助けになるシステムって合ったりするので今回ご紹介させていただきました。

月並みな内容ですが、少しでも制作のご参考になれば幸いです。

それではご観覧ありがとうございました。

はじめに

お疲れ様です、Clemensです。

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

禍つヴァールハイト・キービジュアルのメイキング

キービジュアルとは?

キービジュアル(またはメインビジュアル)はゲームのフィーリングをユーザーに一目で伝えることが目的のイラストのことです。

コンセプト

禍つヴァールハイトにおけるキービジュアルのコンセプトは「荒廃した世界で、仲間と共に光を討伐する旅」です。
このコンセプトをもとに、ゲームの世界観・ストーリー・キャラクターの魅力をできるだけ分かりやすくまとめ、一枚絵で格好良くアレンジし代表的なワンシーンを作り上げるのが今回の目標でした。

ミッション

今回のキービジュアルを作成するうえで、与えられ時間はたったの10日でした。
この辛口な条件をクリアするために、今回は工程を背景・レイアウト・フィニッシュの3つに分け、作業を分担することでミッション達成を目指しました。

背景は沢田匡広さん ( https://www.artstation.com/masahiro_sawada )、
フィニッシュはThird Echoesさんhttp://thirdechoes.com/ )に担当をお願いし、
自分はレイアウトを担当しました。

自分の担当箇所の作業内容は以下の通りです。

  • ハイディティールキャラ新規作成(2体)
  • ローポリモデルブラッシュアップ(5体)
  • レイアウト
  • ポージング
  • レンダー
  • コンポ
  • ディティールアップ

これらの作業内容を、限られた時間の中でどこまで適切に描画できるのかというチャレンジがありました。
そこで、一つのアングルからしか見れないトリックアートでもいい、データが多少汚くてもいい、とにかく格好良ければそれが正義!というアプローチで行きました。

レイアウトとストーリー性

今回はADの指示により背景の構成が大体決まっていたので、大勢のキャラクターを一つの画面に気持ちよく纏めることがひとまずの目標になりました。

その時の思考過程は以下の通りです。

  1. 読みやすさ
    1.1. キャラクターのシルエットは遠くから見てもわかるのか?
    1.2. キャラクターと背景は喧嘩しないのか?

  2. 視線誘導
    2.1. ユーザーが見て欲しいところを見てくれるのか?
    2.2. 長く見ても飽きないのか?

  3. 物語性
    3.1. 各キャラクターの性格と立場が伝わるのか?
    3.2. キャラクター同士のインタラクション性が出ているのか?

  4. ダイナミックさ
    4.1. キャラクタの配置で自然なオーバーラップができているのか?
    4.2. ナチュラルで気持ちよく不均等になっているのか?

ADによる初期アイディアスケッチ → 全キャラ載せレイアウト → 3ds maxでパースと配置合わせてテストレンダー

この時、一つの大きなポイントに気づきました。それが、

「見ている人は絵の中の世界に対してどういう立場になるのか?」
ということでした。

初期のアイディアでは主人公キャラクターが「一緒に来い!俺達と戦うんだ!」とユーザーを誘っているようなポーズでのレイアウトを考えました。
しかし、禍つヴァールハイトの主人公であるプレイヤーキャラクターはプレイヤー本人そのものです。つまり、別の人の物語ではなく自分自身が感情移入しながら見る、刻んでいく物語です。
なので、「主人公は絵の中のあの子ではなく、この絵を見ているアナタです!」
というストーリー性を伝えたいと思いました。

そこで、主人公のサポーターであるパーシ(此方を見ている女性キャラクター)がプレイヤーを誘い、メタルテクニカ社の隊長たちと光に立ち向かうというストーリー設定が生まれて、現在のレイアウトが完成しました。

モデリングプロセス

ハイディティールモデル制作

キャラクターの作画はスピードアップ&テイストを合わせるためにゲームモデルをベースに使用する予定でした。しかし、カメラを向く二人のキャラクターは当時まだゲーム用モデルが存在しなかったので、ゼロからモデリングする必要がありました。時間があんまりなかったため、Zbrushでハイポリゴンモデルをdynameshしながら定番のベースモデルや球体から作りました。

アニメ調3Dルックを目指していたので、UVアンラップやマテリアル振り分け等せずに直接ポリペイントでキャラクターを仕上げることにしました。

必要な部分だけに集中して、ファイナル画像に映らないパーツを完全に無視した制作プロセスにすることでかなり時間を短縮することができました。

ローポリモデルブラッシュアップ

ゲーム用モデルのあるキャラクターに関しても、カメラに近い部分はハイポリ化する必要がありました。そこもまたZbrushが大活躍でした。

特に役に立ったワークフローはこちらです。

  1. ゲーム用ローポリモデルをobjとしてインポート

  2. テクスチャを当てる(ZbrushはV軸がmayaや3ds maxと逆なので注意)

  3. スムーズ(SMT)をOFFにして、何回かサブディバイドをかける

  4. 最終的にPolyPaint From Textureで色を焼き込む

これで自由にスカルプトしながらUVを気にせずオーバーペイントやdynameshも使えるようになります。

もちろん、ここも必要ない部分は作らない姿勢で進みました。
(キャラクターアーティストとしてはモヤモヤしますが・・・)

ポージング

リトポやリギングをする暇もなかったので、Zbrushで直接ハイポリゴンモデルをマスクとカスタムピボットを使いながらポージングしました。

フォトショップでの背景やレイアウトスケッチに合わせるため、SeeThroughモードを利用して、エキスポートせずに直接ファイナルルックを確認しながらポーズを調整しました。

シワやアシンメトリなディティールはポージングしたあとで追加しました。
こういう時はレイヤーを利用するのがおすすめです。いつでもベースポーズに戻って、別ポーズに変えることが可能になります。

レンダー&オーバーペイント

最終的に3ds maxでパースをあわせたシーンファイルで各キャラクター別々でレンダリングして、フォトショップで合成しました。空気感やブルーム等はここで付け加えました。

仕上げは本編のキャラクターデザイナーのThird Echoesさん( http://thirdechoes.com/ )に協力して頂いて、顔の印象などを似させました。この段階で3Dより2Dで作った方が早いディティールや修正も対応しました。(細かいテクスチャやハイライトなど)

振り返ると...

貴重な経験値をたくさん得たプロジェクトでした。沢田さんとThird Echoesさんとコラボすることができたのが非常に挑戦的で素晴らしい体験でした。誠にありがとうございました。

レイアウトやストーリーを考えるのだけではなく、モデリングプロセスも、ほとんど嘘がつけないリアルタイム用モデルしか作っていない自分にとってはとても面白いチャレンジでした。
あらゆるトリックを使って、一枚絵にコミットするのは自分の今まで身につけたスキルが全て試されるチャンスとなってずっとワクワクしながら制作しました。

今見るともっと作り込みたい!直したい!こうすればよかったのに!というところだらけですが、「禍つヴァールハイト」のこのキービジュアルを見て、一人でも多くの方に「これはやってみたいかも」と思っていただけたなら最高に幸せです。

image1

はじめに

お疲れ様です、kanayaです。

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

今日は「仕事に使えるテクニックや豆知識」ではなく、KLab岡山事業所とその環境についてご紹介させていただこうと思います。

というのも「KLabさんって岡山にも事業所があったんですね」と言われることがとても、とっても多いんです!

そう、実はあるんです!

岡山にも事業所が!

岡山事業所にはデザイナーだけでなくエンジニアもプランナーも多数在籍しており、ゲーム開発業務の一翼を担っています。ですが、岡山事業所の存在自体が知られていないのであれば岡山事業所がどんなところかも皆さんご存じないのではないかと思います。

なので今日は岡山事業所ってこんなところだよという紹介をデザイナーの1日を交えてお伝えさせていただこうと思います!

デザイナーの1日

10:30

デザイナーの朝は早い、なんてことはありません!むしろ朝は遅めで、10時半から11時くらいに出勤する人が多いです。

私も朝は遅めに出勤するほうです。早めに家を出ることもありますが、カフェや本屋に寄り道をした結果、会社に着くのがいつもと同じ時間になってしまっていることもしばしば。

もちろん朝は早めに時間に出勤して夜も早めに帰る人もいます。

11:00

朝会が終われば自分の仕事に集中します。

岡山事業所にはイラストレーター、UI/UXデザイナー、エフェクトデザイナーをはじめとした多様な職種と役割があり、それぞれが担当するプロジェクトで活躍しています。

岡山事業所内の打ち合わせや確認で全てが完結するプロジェクトもありますが、他の事業所と共同で行っているプロジェクトも多いので、制作物の確認や次の企画の打ち合わせなどはオンラインでコミュニケーション取りながら行っています。

KLabではミュニケーションツールにslackを採用しており、東京をはじめとした他の事業所とのやりとりはもちろん、岡山事業所内でのやりとりもslackで行っています。slackでは業務連絡だけでなく、雑談や情報交換も盛んに行われています。

Slackでのコミュニケーションは事業所の所在地に関係なく職種やチーム単位で行われているので、地方にいるから情報が届かない、コミュニケーションがとれないということはありません。「岡山事業所内には求めている知識や情報をもっている人がいない!」という場合でも、他の事業所に専門知識を持つ者がいればすぐにslackで質問することができるのでありがたいです。

slackの他にもポリコムやSkypeなどのビデオ会議システムを日常的に利用し、対面しながら他の事業所と連携して業務を行っています。

コミュニケーション面以外についても、PCなどの機材やソフトウェアは東京本社をはじめとした他の事業所と同じものが揃ってますし、業務で必要なものは申請すればすぐに用意してもらえます。

データの管理体制や共有体制も整備されているので、地方だから足りないものがある、不便なことがある、ということはありません

12:00

昼休憩の時間です。

昼を知らせる鐘の音がフロアが響きますが、12時に昼休憩を取る必要はありません。昼休憩もちょっとした息抜きも好きなタイミングで取ることができるので、仕事のキリが良いタイミングなどで自由に休憩を取っています。

オフィスの最上階フロアは休憩室になっていて、ソファ、カウンターテーブル、大型テレビ、無料のウォーターサーバー、自販機などの設備が揃っています。会社の近所にはコンビニや飲食店も多数あるので休憩の場には困りません。

岡山事業所のメンバーはデザイナー同士も仲が良いですが、エンジニアやプランナーとも仲が良いので休憩室では職種や世代関係なくゲームやお喋りをしている光景が日常的に広がっています

ちなみに私は13時頃にお昼を取ることが多いです。これくらいの時間だと混雑のピークが過ぎているので外食も待たずにできてスムーズです。

13:00

昼食を終えたら仕事に戻ります。

業務は基本的には自席で行いますが、休憩室など別の部屋でも行うことができます。一人で集中したい場合などは別の場所で仕事をされている人もいます。

KLabはやりたいことを挑戦させてくれる社風なので「やってみたい!」と手を上げれば、どこの事業所にいるかは関係なくプロジェクトに参加できたり、新しいことに挑戦するチャンスがあります。

上司からのバックアップもありますし、slackをはじめとしたコミュニケーションツールを全社的に日常的に利用しているおかげで事業所の距離が離れていても手を上げればいつでも一緒に仕事を進めることができます。

私も担当プロジェクトの他に「社内ゲームジャム」という社内イベントを東京本社のチームと一緒に企画していますが、これも担当プロジェクトでは出来ない経験や人との繋がりが出来てとても刺激になっています。

18:30

コーヒー休憩などを挟みつつ、集中して仕事をしているとあっという間に夜になります。18時半になると定時を知らせる鐘の音が鳴り響きますが、KLabは裁量労働制。

各自の都合に合わせて午後からの出勤や15時退社など、自由に勤務時間の調整をすることができるので定時を気にしない人が多いです。

といっても残業が前提というわけではありません。19時過ぎには執務室に誰も残っていないということもよくあります。

残業を防ぐための対策もチームごとに組まれているので、繁忙期でも無茶な勤務体制になることはありません。

私は19時半くらいに帰ることが多いです。帰りはまっすぐ帰路につくこともあれば、モールや地下街で買い物をしたり飲み歩いたりすることも。早く帰れた日ほど寄り道をしてしまうのはなぜでしょうか。

まとめ

いかがでしたでしょうか?

岡山事業所は「以前は東京をはじめとした他の都市で働いていていたが、今は縁があって岡山にいる」という人も多く、岡山出身でないから肩身が狭いなんてこともありません。

また、社内サークル制度を利用してフットサルやアウトドアを楽しんでいたり、業務後に集まってボードゲーム楽しんでいだりと社員間の交流も盛んです。

この記事で岡山事業所のことを少しでも知って頂けたら幸いです。

KLab Creative Advent Calendar 2018 の 5日目は、Clemensさんです。

よろしくお願いします。

はじめに

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

はじめまして。ノベです。

クリエイティブ部におけるSHOTGUNの導入推進・制作ワークフロー整備を担当しています。

SHOTGUNはCG・映像制作における、タスク、スケジュール(進捗状況)などを一元管理できるツールです。

元々は映像業界で多く使われていましたが、近年ではコンシューマ/ソーシャルゲーム開発で用いる企業も増えてきているようです。御多分に漏れず、弊社でも社内の標準ツールとして導入を進めています。

私自身もこれまでRedmine、JIRA、Backlogなど、ゲーム開発において多岐にわたるツールを使ってきましたが、進捗管理/素材管理ツールであるSHOTGUNはカスタマイズ性も高く、非常に奥の深いツールだと感じます。

本日は、弊社での一般的な事例とはすこし異なった設計をした際の、SHOTGUNの画面構築に至るまでの考え方や作業の流れについて書こうと思います。

かなりSHOTGUNの中身に偏った内容になりますが、興味のある方はお目通しいただけると幸いです。

なにをしたのか

Unityのバージョンアップに伴う、3Dまわりの表示差分確認のための動画ライブラリ/チェック機構をSHOTGUNで作成しました。

2019年8月までにAndroidアプリの64bit対応を義務化する方針をGoogleが発表したため、

弊社各タイトルでも、Unity2018へのバージョンアップがマストとなりました。

現在、社内の各タイトルにおいて、順次対応を進めている状況です。

しかしながら、このバージョンアップ対応においてクリティカルな問題となるのが

描画方法が変更されることで起こる「3Dまわりの表示崩れ」です。

今回は、その問題に直面したとあるタイトル担当、12/20の執筆者だーやまさんより、

  • 表示崩れについて、ほぼ全キャラ分確認したい

  • 精査用の全キャラ分の動画書き出しはタイトル側で行う

  • 上記の動画をすべてチェックした後、修正の要不応を判断したうえで、各セクションごとに担当者を決めて修正作業を進める、という流れにおいて、すべての進捗を一元管理したい

以上をSHOTGUN上でうまいこと実現できないか?という相談を受け、それに適した構成を考えました。

結果として、当タイトルだけでなく、弊社の別タイトルでの同一作業においても流用可能な構造になったのではと思います。

(当ブログを書いている間、さっそく別タイトルでもこちらの機構を流用しました・・)

どうやったのか

構成を検討するにあたり、タイトル側へざっとヒアリングを行ったところ

あがってきた要件は以下の3つでした。

  • こんな感じの見た目にしたい、という具体的なオーダーがあった

(スプレッドシートでつくった表をタイトル側からいただきました)

  • 動画精査後、各セクション(エフェクト、モデル、モーション、サウンド、開発)における修正作業の着手順はルール化できない

(先行タスクが完了になったら後続タスクを着手する、としている弊社の既存タスクテンプレートの仕組みを流用するのは無理そう)

  • キャラ数は数百体~。1キャラあたりの動画の種類は最大で7つのバリエーションが存在する。SHOTGUN側に検証動画をアップロードする際のタイトル側の工数も減らしたい

・・と以上の要件が出そろったところで、以降の順で作業を進めていきました。

1. すり合わせ

  • 必要な表示項目などに漏れがないか

  • どのようなフローで作業を行うのか

など、さらに詳細なヒアリングを実施しました。

今回画面を設計するにあたって、もっとも工数をかけた部分がここでした。最初にフローをガチっと定義したうえで、SHOTGUN側の画面の構想を練ります。

2. SHOTGUNの構成について検討

通常のイラスト作成などであれば「ラフ⇒線画⇒着彩・・」といった具合に工程ごとにタスクを生成し、上流工程から順に「完了」としていく手段を取ります。

しかしながら、先述のとおり「修正作業の着手順はルール化できない」と判断したため、修正作業を行うであろう各セクション(エフェクト、モデル、モーション、サウンド、開発)ごとに、動画の最大バリエーション数=7つのタスクを生成することにしました。完成したタスクテンプレートは以下のような形です。

画面デザインについては、「この形式が使いやすいのでは」という観点で数パターンの表示サンプルを作ったうえで、実際にタイトル側から意見をもらいながらすり合わせを行いました。イメージの可視化、大事です。

3. 動画流し込みにあたっての自動化

動画を流し込む枠が準備できても、数百体前後のキャラ×最大で7つの動画バリエーション=数千本前後の動画データを人力でアップロードするのはあまりにも無理ゲーすぎたので、開発さんの手を借りました。急な差し込みだったにもかかわらず、Pythonで自動化の仕組みを作ってくださいました。敏腕・・!

開発さんと連携を取りつつ、タスクテンプレートの調整などを随時行いました。

4. SHOTGUNのレクチャー、ルール決め

タイトル独自で書き換えられない部分(ステータスのフィールドの中身など、全タイトル共通で使用しているもの)を使用せざるを得なかったため

  • ステータスを変更する人

  • ステータスが示す、タスクの実施者

などを定義し、作業者がスムーズに取り掛かれるよう運用ルールを決めました。

やってみてわかったこと

よかった点

  • 動画の確認と精査がとてもスムーズ

プレビュー機能からチェック、進捗管理などが一つのシステム上で実施できるのはとても便利です。

  • データベース構造なので、見た目をあとからカスタマイズできるのが便利

SHOTGUNでは、フィルタリングやグルーピングを駆使することで、抽出条件を変えたりページデザインを容易に変更することが可能です。

作業者の残タスク状況や、ステータスやキャラ、レアリティごとにソートしたりと、見た目をタイトル側の好みに変えられるのは管理者・作業者のどちらにもメリットが大きいと思いました。

検討が必要な点

  • サムネイルを挟んだ場合、スプレッドシートのように行を揃えることが難しい

SHOTGUNの仕様上、サムネイルの入ったパイプラインと隣り合うタスクのセル幅を合わせることができず、若干見た目が気持ち悪い感じになってしまいました。

妥協案として、パイプラインごとにタスク名を表示することで対応しています。

  • 全社共通の仕組みをつかった部分については融通が利かない

前述した部分と重複しますが、タスクに紐づくステータスなどは社内の全タイトルが共通で使用している部分であるため、ルールを定義してそれに合わせるよう対応をお願いしました。

タイトルごとにカスタマイズして作りたいところですが、SHOTGUNを全タイトル分管理する側として、正直なところあまり煩雑化したくない部分です。

まとめ

最初にオーダーをいただいた際はどう構築しようかと悩みましたが、結果としてチェック機構としての使い勝手はもちろん、汎用性の高い形で実現できたのではと思います。

社内のUnity2018アップデートを控えているタイトルの皆さまも、是非この仕組みをお役立ていただければと思います。

以上、お読みいただきありがとうございました!

KLab Creative Advent Calendar 2018 の 4日目は、kanayaさんです。

よろしくお願いいたします。

はじめに

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

こんにちは。テクニカルアーティストグループ(以下:TAG)のfo-taです。
TAGは様々な案件を横断してテクニカルな分野をサポートするグループで、僕はUnityやMayaのシェーダ、各種ツールスクリプト等で各案件のサポートをしています。

概要

今回は、流体っぽい表現を擬似的に平面上で行うシェーダについてご紹介します。

↑のサンプルは各Quad(4角形ポリゴン1枚)+RGBテクスチャ1枚で構成されています。

経緯

このシェーダは、BLEACH Brave Souls(以下:ブレソル) のブレソル3周年記念キャンペーンの際に作成しました。

ブレソルは、ぴえろが大人気コミックをアニメ化した作品 「BLEACH」を題材とした、爽快3Dアクションゲームです。
ブレソル3周年記念キャンペーンでは、原作者・久保帯人先生デザイン監修のもと制作された、ブレソルオリジナルデザインの3周年記念キャラクター「ウルキオラ」を配信しました。

ご覧の通り、頭と尻尾に炎が付いたデザインになっています。

ブレソルは海外にも展開している関係上、推奨端末のスペックがあまり高くないものもあるので、リッチな表現手法をそのまま使うのは現実的ではありません。
それでもこのかっこいいデザインを妥協はしたくない!擬似的にでも軽く表現できないか……!?と考えたことがきっかけです。


最終的には、このような表現を実現できました!

僕も3周年記念ガチャを回しまくってゲットできました!!

内容

流体的な表現には、2枚の白黒画像を重ねる手法を利用しています。

左図のように2枚の白黒画像を重ねて動かすと、グレーが重なる部分にメタボール変形っぽい見た目を得ることができます。
さらに右図のようにキュッとすると、より変形した感じが強くなります。
PhotoShopで2枚の画像を覆い焼き(加算)で重ねて、レベル補正をかけるようなイメージです。

同じことを雲模様で行うと、こんな具合に複雑な変形をしているような結果を得ることができます。
この仕組みをベースにしています。

左から1枚目と2枚目を重ね、さらに3枚目をマスクとして適用(白い範囲だけ表示)すると、一番右のように炎のゆらめきのような結果が得られます。

上で出来た結果を黒い部分を透明とした透過画像にし、更にもう一枚画像を重ねます。

これをキュッとして着彩すると、右画像のような禍々しい炎っぽい効果ができあがります。

使用画像

前項で登場した4つの画像を使用しています。

ただ、せっかく軽くしようとしたのに、4枚もテクスチャを使っていては本末転倒です。なので1枚の画像にまとめます。ちょうど4枚なので、RGBAの4チャンネルにまとめられそうですね。
しかし、せっかくならもっと軽くしたいです。加えて、iOSのPVRTCとアルファ画像の相性が悪いのも気になります。

そこで、1枚目と2枚めの画像を1枚にまとめました。
それぞれ用途的にまとめても問題ないため、半分ずつに潰して1枚にしています。

計3枚の白黒画像を1枚のRGB画像にまとめて、画像は完成です。

バリエーション

パラメータやマスク画像を変えると様々な結果が得られるようになっています。

ウルキオラはこのようなパラメータで、マスク画像は非圧縮RGBの非常に小さいサイズにしています。
非圧縮にすることでブロックノイズを低減しており、やや輪郭などにまだ粗い部分がありますが、画面にあまり大きく映らないことを考慮するとこのぐらいの画像サイズでも全然問題ありません。

水面のような表現をしてみました。
キュッとする」の具合をパラメータで調整できるので、このようにぼやけた表現も可能です。

パラメータはアニメーションさせることもできるので、膨張や明滅と言った表現もできるようになっています。

コードサンプル

ざっくりとですが、計算式は下記のような形になります。

Alpha = saturate((RChannel * 2.0 - 1.0) + GChannel)
Color = Alpha - BChannel

GとBChannelは事前にUVスクロールをしており、ここから更に lerp や smoothstep でキュッとしたり着彩したりしています。

まとめ

中身はUVスクロールと画像合成の合わせ技なので技術的にすごいことはしていませんが、処理の軽い範囲でも工夫次第でこれだけ表現力を上げるパワーがシェーダにはあります!
デザイナーの皆さんもどんどんシェーダに興味を持って貰えればと思います。この記事がその助けになることができれば嬉しいです。

ちなみにこのシェーダはプロトタイプを ShaderForge で作りました。ノードベースなのでコードが書けない人でも簡単に作れます。残念ながら ShaderForge は開発終了してしまいましたが、Unity の ShaderGraph や UnrealEngine の MaterialEditor など、ノードベースでシェーダを作る環境は多くあるので、興味がある方はとりあえず軽く触ってみることをオススメします!シェーダ楽しい!!