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のコピーでの語尾の文字は消すのが無理なようで…。力不足申し訳ないです。」狼:「知ってる方いたら教えてほしいね。」

▶レイヤー整理その②

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

▶レイヤー整理その③

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

▶終わりに

以上になります。

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

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

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

はじめに

この記事はKLab Creative Advent Calendar 2018 の 6日目の記事になります。
どうも3ヵ月で体重を7kg減量に成功したハセックです。(キックボクシングで...)

最近ではモーションキャプチャって身近になって個人でも使えて便利ですよね。

ただ、スタジオを借りて、大量のデータ収録するとなると...

そこで、今回の内容は、モーションキャプチャ(以下、Mocap)撮影日までなにを準備すればいいの?

今までの経験から、個人的に必要だと思ったことをまとめました。

Mocapの流れ

~ Mocapの流れ ~

  1. MocapStudioを選ぶ
  2. 相談・見積り
  3. 事前打ち合わせ
  4. 撮影(Mocap)
  5. データ処理、修正
    (CGモデルへの割り当て、ノイズ除去、体格差によるモーション調整、めり込み、接地接着調整、つなぎ調整、ループ作成、etc…)
  6. 納品

だいたいこのような流れで進んでいくと思います。
今回は3.事前打ち合わせまでを書いていきたいと思います。

1.MocapStudioを選ぶ

3ヵ月以上前からプロジェクトにあったMocapStudioを探し予約を入れておく。

なぜ3ヵ月以上前から?って思う方もいると思います。

どしてよ?なんで?

1ヵ月前からでもいいじゃん!

明日すぐとりたい!!とか...

MocapStudioを3ヵ月以上前から探して予約を入れておく理由としては...

  • 直近だと希望日にMocapStudioの予約がとれない
  • MocapStudioの人員が不足してMocapした後のデータ修正処理までできない
  • 希望日にMocapStudioの予約がとれても、広さがたりない
  • アクターさんの日程が合わない

そんなリスクを少しでも無くすために、3ヵ月以上前からMocapStudioを探し予約を入れておくべきといえるでしょう。

では、どんなスタジオを選ぶべきか?

私がMocapStudioを選ぶときに意識していることは、Mocapできる人数と範囲です。

シーンによっては複数人だったり、広範囲での演技が必要な場合があるからです。

もちろん広範囲でとる必要がなく、1人でMocapを撮れればいい時もあります。

その時の理想のスタジオを探しましょう。

理想的なMocapStudioが何社か探せたら、リストアップしてMocapStudioに電話をいれて、アポをとり、MocapStudioの見学をさせて頂くといいでしょう。

見学することで、MocapStudioの雰囲気や、Mocapの相談や質問もできます。

何社か見学しながら、仮予約もしくは予約をしましょう。

仮予約しないと希望日が他社様に抑えられてしまう場合があるからです。

また、仮予約の場合はキャンセルができます。

初めての場合はMocapStudioに見学に行くのをお勧めします。

2.相談・見積り

プロジェクトの概要、期日、モーション量を用意する。

精度の高い予算を見積りたい場合は、絵コンテとモーション数、秒数をだして用意。

ただし、予算が見積れても、Mocap数が増減する場合があり、正式な請求額は納品後、もしくは撮影後になることが多いです。

希望の収録日時が決まったら、データ処理、修正の有無、納期の相談も含めスケジュールを決めて、仮予約ではなく予約しましょう。

3.Mocap打ち合わせ


  • 収録希望のモーションに関する資料を用意
  • 大道具、小道具の有無
  • アクターキャスティング

■キャラクターデータ、キャラ設定、絵コンテ、映像コンテ、参考動画

必要なキャラクターデータをMocapStudioにお渡します。

撮影時にリアルタイムでキャラクターを表示しながら確認することができます。

また各キャラクターの詳細、特徴がわかると、キャラクターのことを考えて撮影することができます。

どんな動きをさせるか、あらかじめ撮影して準備する。

キャラ単体のアクションで絵コンテが必要ない場合は、ダサくても動きがわかればいいので是非用意しましょう。

また、自分では難しいアクションの場合は参考動画を用意しておくと、当日スムーズに進みます。

■Mocapリスト

絵コンテをただ用意しただけで、リスト化していなかったり、リスト化してあるけど、絵コンテなかったりすると、精査の制度がおちるのでできるだけ詳しい情報を提示できるように準備が必要です。

リストはMocapStudioと共有します。

Mocap撮影日は、作成したリストを見ながらアクターさんやスタッフの方に指示をだしたりします。

自分だけがわかるリストではなく、現場にいる人もわかりやすいリストになっているとベストですね!

コンテの内容によっては人間ではできいアクション、撮影が困難な場合があります。

その場合は、MocapStudioのスタッフの方と相談すると、もしかしたら解決案が出てくるかも!

Mocap撮影日に、問題が出ないように、事前に打ち合わせをすることで解決する。

そのために絵コンテの用意、リスト作成は事前に済ますとスムーズに収録できます!

この段階で不備が多いと撮影日に多くのスタッフに迷惑がかかりますので重要です!

リスト化はアニメーターが作成すると確度が高いリストができると思います。

絵コンテの場合どこで切るか、どんなアクターが必要か、何人いるのか、どのうような道具が必要か?

当日必要な上記のリストと収録順番、タイムスケジュールをたてます。

撮影する順番を決める時に注意することは...
アクターさんのキレを維持するために、激しい動きが連続しないように、間に身体能力を使わない演技をいれたり、数を考えてリスト化する。
Mocap収録に4日以上かかる場合は2週に分けて撮影するなどの対策を取りましょう。

アクターさんの疲れもありますが、2週に分けることによって、1週目の反省ができたり、再度撮影するところを洗い出したり、見落としていた所を撮影できる。
1週目で難しいアクションがあった場合、撮影の仕方を対策して2週目にMocap撮影し直すことができる。

Mocapの順番を考えて、アクターさんのキレを維持できる、効率のいいリストを作成しましょう。

参考までに私は、1日平均して60~80個ぐらいの撮影で考えています。

セットの規模が大きい場合や複数人での演出の場合は50カットぐらいで考えています。

もし時間が余るようでしたら、次の日分も収録します。

■大道具、小道具の有無

Mocapで必要な小道具はMocapStudioと事前に相談しましょう。

スカートにボリュームがある衣装の場合は、あらかじめガイドラインになる物を用意して、メリ込みを軽減する。

武器の大きさの寸法を予めリスト化して、そのサイズの物を用意して頂けるか相談できるようにしておきましょう。

ありえないくらい大きい武器や、シチュエーションにあった環境が用意できるのか?

階段、ボルダリング、水中、空中、いろいろありますよね...。

■アクターキャスティング

アクター選びですが、MocapStudioのときに一緒にオーダーできます。

私の場合はStudioさんに紹介して頂いたアクションスタジオを使わせていただきました。

案件にあったキャラの特徴を調べてキャスティングできるように準備もしておきます。

私がアクター選びで重視しているのは...

①キャラクターが複数人いる場合はキャラクターの体格比とアクターの体格比を一致させる

向き合った時の目線が同じか、見上げているのか、見下ろしているのか?

身長をキャラに合わせて揃えることで、より精度の高いMocapデータができます。

対峙して話しているときや、剣を交えた戦闘、などでMocapデータに影響します。

②女性と男性のキャラクターがいる場合は女性と男性のアクターを選ぶ

女性のキャラクターを男性が演じると、男らしい動きになる恐れがあります。

女性の柔らかい演技ができない、女性らしいシルエットがでるポーズができない。

女性キャラクターでも男性顔負けの動きをするなどのキャラクターで意図したものであればいいとおもいます。

それでも私の場合は女性をキャスティングしておくと思います。

③案件に併せてのキャスティング、身体能力、演技力etc..

ダンス案件、格闘案件、演技が多い案件などにあわせてのキャスティング

ダンス案件であれば、ダンスができるアクターをキャスティングする。

女性キャラクターであれば女性で揃える。

男性キャラクターであれば男性で揃える。

格闘案件であれば、格闘技のプロもしくは格闘技ができる役者をキャスティング。

格闘技のプロをキャスティングする場合は、キャラクターがボクサーであれば、プロのボクサーを選ぶ。

ヒーロー物でいろいろな動き、演技が必要な場合は、格闘技ができる役者さんをキャスティングする。なぜかというと、絵コンテの作成段階で二人で戦わせたいけどカッコいい殺陣が考えられない!!役者さんだと、撮影現場で考えて必要な要素を入れて殺陣を考えてくれたりします。

自分たちが思った以上の動きがその場でできちゃう可能性もあります!

Mocapが使われているゲームや、映画でのムービーシーンのメイキング見ると、絵コンテ、スタジオをセット、小物制作するの大変だったんだろうなぁー、面白そうだなーって思って見ています。

精度の高いMocap収録は事前準備にかかっています。

現場もスムーズに収録もできます!

私も収録準備をいつもやっているわけではないので、間違いや不足して記載しているかもしれませんが...。

少しでもお役に立てたものが共有できればと思います。

はじめに

お疲れ様です、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さんです。

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