KLabGames Creative Blog

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

はじめに

お疲れ様です、atsuです。

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

半年ほど前からデジタルイラスト制作の際に左手デバイスを導入してみたので、感想などを簡単にまとめてみました。



左手デバイスとは

普通のキーボードよりもコンパクトで、片手で扱えるキーボードです。

通常キーボードで行う「コピー/Ctrl+C」や「貼り付け/Ctrl+V」などのキーコンビネーションによるショートカットを、ワンクリックで行うことができる入力補助ツールです。

種類や用途、機能も様々ですが私がデジタルイラストを制作するうえで使用しているのは

ゲーミングパッドとも呼ばれており、PCゲームに活用している方が多いものです。

これから紹介する左手デバイスもゲーミングパッドになります。

左手デバイスを使い始めたキッカケ

デジタルイラストを描く際には、ツールの切り替えや画面の拡大縮小などを頻繁に行わなくてはいけません。

そのためショートカットを登録しておくのは必須なのですが、簡単なショートカットキーならまだしも、複雑なキーになると覚えるのも大変ですし、キー入力も大変になります。

どうしてもキーボードではムリが出てくることが多くなります。

またPC、モニター、液タブを使用しているので机の上の作業スペースが少なくなっていました。

そこでオススメされたのがこの左手デバイスです。

こんな方は是非参考にしていただきたいです!



キーボードと左手デバイスのメリット・デメリット

キーボードと左手デバイスのメリットデメリットを簡単にまとめてみました


キーボード

メリット
  • 最初からついてくるものなので初期費用がほとんどかからない。

デメリット
  • 場所をとる。指を頻繁に動かさなけれないけないので腕や指が疲れやすい。
  • キーの組み合わせを覚えるのが大変。

左手デバイス

メリット 
  • 自分の好きな位置に好きなキーを登録出来る。
  • 手の位置が固定されているため、疲れにくく入力も早いため作業効率も上がる。

デメリット 
  • 右利きのものが多く左利き向けのものが少ない。
  • 初期費用がかかる。

おススメ左手デバイスのご紹介

左手デバイスはゲーミングパッド以外にもテンキー、ゲームコントローラーなどがあります。

それぞれボタンの数や形状が違いますが、イラスト制作で使用する左手デバイスはボタンの数が多いものが多いので、個人的にゲーミングパッドがオススメかなと思いました。

ただ、ゲーミングパッドは他のデバイスと比べ価格が高いためお財布と相談が必要になります。

実際にどんな製品があるのかをいくつか紹介したいと思います。


LOGICOOL G13r

まず、私も現在使用している左手デバイスで、 LOGICOOL G13r という製品です。

こちらは生産終了しているため価格が非常に高騰している製品ですが、使用している方は多く人気も高いようです。

サイドについているスティックボタンが個人的に好きなところで、ショートカットを登録しておくとブラシや消しゴムのサイズを簡単に変えられたり出来るのでとても便利です。

また、他の製品にあまりないところでいうとペイントソフトによってショートカットを登録することが出来るので、ソフトを起動するとそのソフト用のショートカットに自動で切り替わってくれます。


Tartarus V2

次に、Razer から出ているものも有名です。私は Tartarus V2 という製品をG13の前に使用していました。

メンブレムキーという押し心地のあるキーが搭載されているため、G13よりもボタンが固めで打鍵音がしっかりしていました。操作性等はG13とほとんど変わりません。

クッションがついていて手にフィットしたり、ピカピカ光るのがカッコイイのでゲームをする時に使用するとテンションが上がりそうです。


CLIP STUDIO TABMATE

他にも、CLIP STUDIO PAINT からも CLIP STUDIO TABMATE という左手デバイスが出ていて、こちらは上の2つよりもすごくコンパクトでいながらもショートカットが200件以上も登録ができる製品のようです。

価格も手が出しやすくなっています。

CLIP STUDIO PAINT専用というところがネックですが、イラスト制作用で作られているのでこちらも少し気になっています。

※こちらは実物がないためイラストで失礼します。

好みに合ったものを実際に触ってみて決めてみるのがいいと思います。


左手デバイスを使い始めてみた感想

最初は設定したキーを覚えるのに苦戦しそうでしたが、意外と一枚絵を完成させるころには覚えられていました。

液タブを使用してもキーボードは無くせないので、スペース的にもこうした左手デバイスはすごく便利だと思います。

個人的に置いてあるだけでもカッコイイので気分が上がります。

実際に腕や指の疲れも以前より少なくなり作業効率も上がりました!今では左手デバイス無しではイラストが描けないといっても過言ではないです・・!



宣伝

そんな左手デバイスを使用して描いたイラストが表紙になっている
KLab Tech Book の電子版がなんと無料で配布されています!是非ダウンロードしてみてください!



おわりに

以上、左手デバイスのススメでした。 

イラストを描く人もそうでない人も、是非左手デバイスの導入を検討してみてはいかがでしょうか。

KLab Creative Advent Calendar 2018 の 12日目は、Hi-emon-tryさんです。

よろしくお願いします。

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

こんにちは、KLabGames 3Dデザイナー兼R&Dグループのnaoieです。

私はテクスチャなどを製作するうえで利用するPhotoshopの保存に関するアプローチを

新卒の頃から、割と最近までスクリプトで対応していたので、そのお話をさせて頂きます。

概要

表題の通り、ワンボタンで所定の画像ファイルを保存するアプローチをまとめてみました。

アクションを作る

学生の時にはあまり利用していませんでしたが、仕事で扱うテクスチャ画像が多いため

少しでも楽をしたいと思い、アクションによる保存の履歴を作成から着手しました。

保存の工程を録画

アクション1.png

アクションを作り、実行

しかし、保存された画像名に”のコピー”がついてしまう…

のコピーの原因.png

一部の拡張子は保存時、複数のレイヤーが存在すると

画像データの上書き保存を防ぐため、”のコピー”がつくようになります。

※保存オプションの”複製を保存”のチェックを消すことができず、マスクされる。

回避するには…

のコピーの対策.png

保存する画像のレイヤーすべてを統合すると

保存オプションのチェックボックスが解除でき

この状態でアクションを録画すると”のコピー”が付きません

記録したアクションを実行すると…

アクション完了.png

これでpsdと同名の画像データをアクションの自動操作で保存することができました。

しかし、アクションの場合、保存先が絶対パスで記録されてしまうので

アクションの共有が難しいと判断しました。

絶対パス.png

そこで次のアクションに移りました">そこで次のアクションに移りました。

スクリプトを作る

職場の先輩からJavaScriptを薦められたのがきっかけに

勉強するようになりました。

”Adobe Photoshop CC自動化作戦”という、JavaScriptのリファレンスサイトを教えてもらい

どのように利用できるのか調べてみました

機能ごとにリファレンスがまとめられ

▼記載例)

説明とコードが簡潔にまとめられています

▼記載例)

このコードをアクションのように並べれば自動処理ができるのではと思い

スクリプトに着手しました。

Photoshopでスクリプトを作るには?

Adobe Extend Script Toolkitというエディタがあり

そこでスクリプトの作成、実行を行います。

ExtendScript.png

起動すると下図のような画面が表示され

スクリプトを入力後、左上のプルダウンメニューで実行するアプリケーションを選択

再生ボタンを押すと、入力されたスクリプトが実行されます。

スクリプトを作る ~コピペしてみる~

1.処理の流れを考える

 下図のような処理を行えば、保存することが可能になるかと思います。

 基本はアクションを製作する流れとほぼ同じです。

 これらの流れを参考にソースコードを先ほど紹介した”Adobe Photoshop CC

 自動化作戦”を参考に作成してみます。

  ▼処理の流れ 

コピペしたスクリプトと流れは以下のようになります。

//現在のドキュメントの上書き保存
activeDocument.save()
//現在のドキュメントの保存階層取得
var fPath = (app.activeDocument.path);
//PNGファイル作成 ~PNGを保存する設定を宣言~
pngOpt = new PNGSaveOptions();
//↓以下内容=============================
//1.インターレースを有効にするのか true:する false:しない
pngOpt.interlaced = false;
//2.圧縮設定。0~9の数値? デフォルトは0 9になるほど圧縮される
pngOpt.compression = 0;
//3.上記の設定で現在のドキュメントを保存する
activeDocument.saveAs(fPath, pngOpt, true, Extension.LOWERCASE);
// ※fPathにpngOptの設定で同名で保存。拡張子は小文字で。
// ※trueの部分をfalseにすると、別名保存になる。
//  ⇒実行すると保存ポップアップが表れます。

保存結果

 作成したスクリプトで保存した画像がPSDファイルのある同一フォルダだと

 ”のコピー”が付きます…

 保存名を変えれば防げますが、ほかの方法で回避してみようと思います。

方法はざっと考えて以下の2つがあります。

1. WEB用に保存

2. 保存フォルダを分ける

WEBように保存形式で保存するスクリプト

WEB用に保存すると画像が圧縮されるため

同一データとみなされず”のコピー”が付加されなくなります。

先ほどの保存スクリプトにWEB用に保存する処理を追加してみます。

//現在のドキュメントの上書き保存
activeDocument.save()
//現在のドキュメントの保存階層取得
var fPath = (app.activeDocument.path);
//PNGファイル作成 ~PNGを保存する設定を宣言~
pngOpt = new PNGSaveOptions();
//==================================
// 「Web用に保存」のためのオプション Web保存
var options = new ExportOptionsSaveForWeb();
// PNGで保存
options.format = SaveDocumentType.PNG;
//==================================
// 最適化有効
options.optimized = false;
// インターレース無効
options.interlaced = false;
// 保存の実行
activeDocument.exportDocument(fPath, ExportType.SAVEFORWEB, options);

WEB用に保存の処理を通せばデータ名を変えることなく保存が可能です。

でも、この方法だと画像データが圧縮されてしまいます。

圧縮したくない!という方はPSDファイルとは別フォルダに保存するようにしましょう

保存フォルダに分けて保存するスクリプト

pngフォルダを作成し、そのフォルダ内にpngデータが保存されるようにします。

混同してしまうと、データが散らかってしまう為とても便利です。

保存するスクリプトにフォルダを作成するスクリプトを追加する

//現在のドキュメントの上書き保存
activeDocument.save()
//現在のドキュメントの保存階層取得
var fPath = (app.activeDocument.path +"");
//ドキュメントの名前を求める
var dName = activeDocument.name;
//==================================
//PNG保存フォルダ生成
foldername = (fPath + "/png");
folderObj = new Folder(foldername);
folderObj.create();
//==================================
//PNGファイル作成
fileObj = new File( foldername + "/" +dName);
pngOpt = new PNGSaveOptions();
pngOpt.interlaced = false;
activeDocument.saveAs(fileObj, pngOpt, true, Extension.LOWERCASE);

psdファイルと画像データを分別できるのでこちらをお勧めしています。

レイヤー毎にファイルを分けて保存するスクリプト

グループレイヤ毎に画像データを保存したいときに利用します。

保存するのも面倒だし、要素ごとにPSDが増えるのも嫌なので

一つのPSDから複数の画像を保存してくれるスクリプトです。

同一PSDで編集するため、作業効率も上がります。

//現在のドキュメントの上書き保存
activeDocument.save()
//レイヤー名を宣言
var color,spe;
//アクティブなドキュメントを調べる
var docRef = activeDocument;
//アクティブなドキュメントの名前を調べる
var dName = activeDocument.name;
//アクティブなドキュメントがどの階層にあるか調べる
var fPath = activeDocument.path;
//アクティブなドキュメントの階層に率PNGを追加
sPath = fPath + "/png";
//sPathで設定した階層にpngという名前でフォルダを作る
folderObj = new Folder(sPath);
folderObj.create();

//拡張子を覗いた名前の取得
var a = docRef.name.lastIndexOf(".");
var fNameStr = docRef.name.slice(0,a);

//レイヤーセットを1つずつ調べる
//colorespeがあったらフラグ立てて、レイヤーセットを非表示にする
n = docRef.layerSets.length;
for (i=0;i<=n-1;i++){
layerSetName = docRef.layerSets[i].name;
if(layerSetName=="color") {
color=docRef.layerSets[i];
color.visible = false;
}
if(layerSetName=="spe"){
spe=docRef.layerSets[i];
spe.visible = false;
}
}
//pngの保存設定 インターレースしない
pngOpt = new PNGSaveOptions();
pngOpt.interlaced = false;
//括弧に入ったレイヤーセット名があったら、以下の保存設定で保存する
if(color){
color.visible = true;
fileObj = new File(sPath + "/" + fNameStr + "_color.png");
docRef.saveAs(fileObj, pngOpt, true, Extension.LOWERCASE);
pngOpt.alphaChannels = false;
}
if(spe) {
spe.visible = true;
fileObj = new File(sPath + "/" +fNameStr +"_spe.png");
docRef.saveAs(fileObj, pngOpt, true,Extension.LOWERCASE);
spe.visible = false;
}

PSDファイル名+レイヤー名で保存されるようになりました。


禍つヴァールハイトでの利用方法

弊社で開発中のモバイルオンラインRPG"禍つヴァールハイト"というタイトルがあります。

ユーザーは広大なフィールドを巡り、光によって覚醒した敵と戦い、世界の終焉を食い止めるという内容です。

このゲームでは前述したように広大なフィールドを作る必要があり、特に自然をモチーフにしたフィールドでは、地形、材質の変化を多用したいという要望がありました。

それを実現するために、1つのオブジェクトに複数のテクスチャをアサインすることが出来る"5レイヤーシェーダ"というシェーダが利用されています。

5枚もテクスチャを利用するということで、このシェーダで利用するテクスチャを一括りで保存することができるスクリプトを作成しました。

ちなみにこちらのシェーダを作成されたのはAdvent Calendar 2日目を担当されたfo-taさんが作製したシェーダです。

頂点カラー(黒/R/G/B/A)の5チャンネルを割り当てると、それに該当するテクスチャが割り当てられるというものになります。

広大なフィールドを表現するゲームならではのシェーダです。

▼頂点カラー表示

▼テクスチャ表示

グループレイヤー名に割り当てる頂点カラーを入力

それらの名前を識別して自動保存を行っています。先ほどの保存スクリプトを拡張するだけで簡単に作成できます。

▼保存結果

まとめ

スクリプトって本から勉強してもなかなかゲーム制作に合わせた解釈で説明されていないことが多くて、取っ掛かりで挫折してしまうことが多いと思います。

作例を見ても「こうじゃないんだよな」とか「自分が欲しい処理と少し違うんだよな」という風に思うこともあります。

私の場合は、前記で紹介させて頂いた”Adobe Photoshop CC自動化作戦”

他の人が作ったスクリプトからどんなことができるのかを探ることで処理でできることの

流れや手法を知ることから始めていきました。

スクリプトは慣用句のようなもので、今は使わないことかもしれませんが、いつかそれを役立ることがあるくらいのスタンスで勉強をつづけたほうが良いのかなと思っています。

このページを見て頂いた方が、スクリプトや自動化処理に興味を持ってもらえ

少しでもクリエイティブな事に日々の時間を費やせるようになれば幸いです。

はじめに

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

こんにちは。クリエイティブ部の2Dイラストレーターのdaibleです。

新規オリジナルタイトルの開発チームの中で、2D部分の背景とキャラクター、装備デザインをやらせていただきました。

絵を描くことが好きで、特にコンセプト的なものは一番好きです、それを勉強した時、学んだことを共有いたします。

内容

「点」のこと

点とはフォーカス、つまり集中の意味です。

例えば真っ白の一枚の図の中、点を置くと、人の視線がその点に集中されます。

漢字も同じです、丸、犬等漢字の点だけではなく、本の漢字中の小さい「一」も点に見えます。

もっと複雑な点は、連続の点です。

一つの点の力が小さいですけど、数が増えましたら力も増えます、この力も点の配列方法によって、いろいろな形で表される。実はブラシの種類によって、連続の点に認識しても問題ないと思います。

配列リズム感を変化させると、自分なりの美感も出ます。イメージすると、漫画の表現をよく見ると、連続の点はたくさん使われています。

「点」の使い方について

デザイン設定を作る時、点はよく大事な決めどころで使います。

よく見ましたら、上のデザインの中、点は一杯あります。

飾りをデザインしたとき、いろいろやり方があります。複雑な模様でなければ、点と線をそのまま使っても、デザインのクオリティも悪くないです。点の形を複雑にすれば、情報量も増えます。

この子をデザインするときは、点の場所と形を意識して完成させました。

服装の点以外、エフェクトやハイライトも形によって点に見えます。

これをうまく利用すれば、画面の完成度とデティールはかなり上がります。

どこに「点」を置くか

点の位置と形や数等、人によって違います。基本的には黄金分割点の付近なら、視覚的には安全だと思います。



左はバランスを意識して面を分割しました。








でも実際使うとき、線のように明確な場所は見つかりつらいですね。絵のサイズと比例、作者の習慣と認識によって、大きく差がでます。どこで何を使うか、完璧な正解はありません。でも今の世の中の流れに合うタイプがあります、流行している構成を勉強すれば、そのような雰囲気も出ます。

潰すと埋める

点の使い道は大体二種類です、潰すことと、埋めることです

背景を描くとき、よくこのように、遠くにお城がある構図があります。単一の点は人の目にとまりやすいし、前景で人を配置したい時も「点」で人を表現すれば、壮大な感じと距離感を表現します。

まず地面の線をつぶして、大体な場所で建物や木等、点として使います。

メインとなるお城は、上の黄金分割点に大体あってます。

そして分割した画面を一つの画面として、中でデザインを埋める

この作業を繰り返して、自分が好きな画面密度を探して、パズルのような旅が始まり。失敗もよくあることです。

こちらは現在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さんとコラボすることができたのが非常に挑戦的で素晴らしい体験でした。誠にありがとうございました。

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

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