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

▶レイヤー整理その②

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

▶レイヤー整理その③

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

▶終わりに

以上になります。

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

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

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

はじめに

この記事は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収録は事前準備にかかっています。

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

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

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