【エスカドラ】 SpriteStudio Friendshipバナー キャラクターアニメーション制作工程
この資料は、 2016年3月12日、ヒューマンアカデミー大阪心斎橋校にて開催されました、 OPTPiX SpriteStudio勉強会＠関西にて、弊社が発表いたしましたスライド資料となります。 （※狠狠撸Shareへの公開に伴い一部改変を加えております） ◆OPTPiX SpriteStudio 勉強会＠関西 https://atnd.org/events/74715 ◆スライド内の動画 【エスカドラ】 SpriteStudio Friendship動画（高画質版） https://youtu.be/gUMBcL0ViQw 【エスカドラ】 SpriteStudio 斬撃モーションA_1 《前半部分》 https://youtu.be/flqxQ6px7SI 【エスカドラ】 SpriteStudio 斬撃モーションA_2 《後半部分》 https://youtu.be/mdBucTCeIBw 【エスカドラ】 SpriteStudio 斬撃モーションA_3 《前半と後半を繋げて完成》 https://youtu.be/M32zbTGIwdw 【エスカドラ】 SpriteStudio 斬撃モーションB_1 《前半部分》 https://youtu.be/jW15AAUBk38 【エスカドラ】 SpriteStudio 斬撃モーションB_2 《後半部分》 https://youtu.be/oqnelwM2kh4 【エスカドラ】 SpriteStudio 斬撃モーションB_3 《前半と後半を繋げて完成》 https://youtu.be/qyus-uh8Ctk 【エスカドラ】 SpriteStudio 斬撃モーションC_1 《前半部分》 https://youtu.be/cbzKrvEUCEM 【エスカドラ】 SpriteStudio 斬撃モーションC_2 《後半部分》 https://youtu.be/mVSzBYYXFy4 【エスカドラ】 SpriteStudio 斬撃モーションC_3 《前半と後半を繋げて完成》 https://youtu.be/grbhQV93HuA ※質問タイム用 【エスカドラ】 SpriteStudio Friendship動画 《カメラワーク参考動画》 https://youtu.be/h_avJ6urMUc ●株式会社エスカドラ http://esquadra.co.jp/ facebook https://www.facebook.com/studioesquadra?ref=aymt_homepage_panel ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ※追記 55ページの、 「Rキーによる移動モードのOn/Off状態」は、 2016/01/22にリリースされましたVersion 5.6.1にて、 レイアウトのinformation タブにある Parental Relation の行に、On/Off状態が表示されるようになりました。 恐れ入りますがこの場をお借りして追記させていただきます。 ご指摘ありがとうございました。 ●facebook OPTPiX SpriteStudio ユーザー助け合い所 https://www.facebook.com/groups/ssuserj/permalink/612802892201498/?comment_id=614226655392455&ref=notif¬if_t=group_comment¬if_id=1461550478478052
【エスカドラ】 SpriteStudio Friendshipバナー キャラクターアニメーション制作工程
- 1. Esquadra @ 2016 株式会社エスカドラ SpriteStudio Friendshipバナー キャラクターアニメーション制作工程 1 （狠狠撸Share版）
- 4. Esquadra @ 2016 発表者の自己紹介 4 池田 真也（いけだ しんや） アートディレクター ■ 紆余曲折ありゲームを作る仕事に ■ 昔は3Dもやっていましたが、いろいろあって今はほぼ2D専門 ■ 仕事内容はゲームグラフィックに関すること何でも ■ ゲームの企画制作、仕様設計、シナリオ、世界観設定など、 プランナーっぽいこともいろいろやります。
- 5. Esquadra @ 2016 そもそもSpriteStudio Friendshipとは 5 ?スプライトスタジオの制作会社やクリエイターの紹介 ?クリエイターとクライアントを結びつけるプログラム http://www.webtech.co.jp/spritestudio/friendship/index.html
- 9. Esquadra @ 2016 9 「スプライトスタジオ経験者向け」 また、 「デザイナー向け」の 専門的な話がちょっと多いかもしれません… 質問等ございましたら後ほどいただければ～ 内容ですが、
- 11. Esquadra @ 2016 11 制作工程 「キャラクターデザイン」 ■ キャラクターデザインの制作に向けての心構え ? とりあえず気張らず、気楽に描こう。 ? 動かしやすそうなキャラにしておこう（凝ると多分後がツライ） ? オリジナルでのキャラデザインは楽しいね！！
- 13. Esquadra @ 2016 13 意識したポイント ? どシンプル。動かしやすそうなデザインにする。 ? デザインはあんまり凝らないでおく（凝ると多分後がツライ） ? 手甲や足甲は表裏無しのデザインにしておいた ? 髪は短く、ヒラヒラ要素は無し（3Dとかと同じ感覚で） ? 簡単にアニメ塗りで。 ? あとは趣味と手癖で楽に仕上げる。 ? あわよくばゲームに実装できればいいな（妄想）
- 14. Esquadra @ 2016 14 まあ… 作っているうちに いろいろ変更しちゃったんですが… アニメ塗り 頭身 ゲームへ実装 ↓ 厚塗り気味 （自分の画風で楽） ↓ 高くなる… （途中からキャラデザ無視） ↓ うん… とりあえず忘れよう(汗)
- 15. Esquadra @ 2016 15 制作工程 「絵コンテ制作」 ■ 絵コンテ（みたいなもの）の制作 ? アニメーションのイメージを固めるためのラフを描く
- 17. Esquadra @ 2016 17 制作工程 「モーションの設計」 ■ 必要ポーズの設計と分解 ? 各モーションにおいて、必要ポーズの設計と分解 ? クオリティを高くしたければ、複数のポーズ絵が必要となる どのモーションが、 どういう絵が必要になるかを割り出す 設計作業。 要するに
- 18. Esquadra @ 2016 18 と言う感じで、 具体的にアニメーション制作を考慮し 考えていきます。 ■ 待機モーションの場合 ? 正面の１ポーズがあれば足りそう ■ 走りモーションの場合 ? 横で走っている感じの１ポーズがあれば足りそう ■ 斬撃１のモーションの場合 ? 「構えっぽい予備動作のポーズ」と 「攻撃ポーズ」の２ポーズは必要かな 例えば…
- 20. Esquadra @ 2016 20 制作工程 「キャラクターグラフィック制作」 ■ 必要ポーズに応じたキャラクターの絵を描く
- 22. Esquadra @ 2016 22 制作工程 「パーツ分け」 ■ 完成したキャラクター絵を分解する作業 ? ポーズ絵ごとにパーツを分解。 ? 重なる部分は加筆して自然な繋がりに
- 24. Esquadra @ 2016 24 ポイント１ ■ 細かいレイヤーは統合してしまおう ? 線描や陰影レイヤーを維持したまま、分解したり 接合部分を調整するのは、けっこう手間がかかる… ※ただ、 絵柄によっては適さない大雑把な手段なので、 ご利用は計画的に… ? パーツ単位でレイヤ統合してしまうと描くのが楽です （もちろんバックアップはとっておく）
- 25. Esquadra @ 2016 25 ■ パーツ分けは細かく ? 可動部分をよく考慮してパーツを分ける ? ポーズによっては分け方を臨機応変に変える つま先や首なんかは、忘れがちな部分ですが、 分けた効果は大きいです！ 胸や髪など、揺れモノは重要！ 髪の毛は細かく分けておくと、 いろいろ動きが作れて便利 ポイント２
- 28. Esquadra @ 2016 28 さらにひと手間！ ■ セルパーツの回転調整 ポイント３ 例） ※傾けて描かれた いろんなパーツ があります。
- 29. Esquadra @ 2016 29 バウンディング ボックス 直 角 に な る よ う に 回転 完了！
- 32. Esquadra @ 2016 32 ■ パーツ単位で無駄な透明部分が省ける！ ○× ■ テクスチャアトラス（後述）が、 敷き詰めやすくなりテクスチャサイズ軽減！ ゲーム開発では地味に効きます。 更なるメリットとして
- 33. Esquadra @ 2016 33 制作工程 「テクスチャアトラスの準備」 ■ テクスチャアトラスの制作と取り込み ? スプライトスタジオで使用するテクスチャの制作工程と なります。
- 35. Esquadra @ 2016 35 TexturePacker （テクスチャパッカー） というツールを使っています。 https://www.codeandweb.com/texturepacker
- 36. Esquadra @ 2016 36 PSD to SS https://github.com/SpriteStudio/PSDtoSS/wiki は？ .png あれ？
- 40. Esquadra @ 2016 40 .ssce セルマップデータ ↓スプライトスタジオ用のプラグインを使うと これも一緒に書き出されます。
- 42. Esquadra @ 2016 42 ■スプライトスタジオに .ssceと.pngを取り込み .png .ssce セルマップデータ 参照元の画像データ
- 45. Esquadra @ 2016 45 制作工程 「アニメーション下準備１ パーツの調整」 ■ セルに登録されたパーツの原点調整の作業 ? 起点としたい座標に原点を設定する作業となります
- 46. Esquadra @ 2016 46 セル編集のウインドウ １個１個のパーツの、原点を調整します。 （原点を起点に回転することになります） このパーツでは原点を この座標に 設定したことになります。
- 47. Esquadra @ 2016 47 制作工程 「アニメーション下準備２ 描画優先順の設定」 ■ パーツの優先度を設定する ? どのパーツが前に見えて、どのパーツが後ろにいくか、 それぞれの描画順を設定します。
- 50. Esquadra @ 2016 50 制作工程 「アニメーション下準備３ 階層構造の作成」 ■ パーツの階層構造を設計する ? モーションを作りやすくするための骨組み ここの こういう構造の ことです ? NULLオブジェクトをうまく使用する
- 52. Esquadra @ 2016 52 先にしっかりやっておきましょう。 アニメーション制作への下準備まとめ ■ パーツの原点の調整 ■ パーツの描画優先度の設定 ■ パーツの階層構造の設定 しっかり設計しておかないと… …後ですごい苦労します（泣）
- 53. Esquadra @ 2016 53 制作工程 「キャラパーツの組み立て」 ■ キャラクター画像を組み立てる ? セルリストのパーツをキャラの形に組み立てる ※PSD to SSを使っていたらここは行う必要の無い作業になります
- 58. Esquadra @ 2016 58 制作工程 「モーションの制作」 ■ 各モーションの制作 ? それぞれのモーションを制作していきます。 ようやく楽しい作業！
- 65. Esquadra @ 2016 65 ■ 複数のモーションが途中で差し替わり 繋がっているように見せている。 ■ 一番親のNULLパーツの 透明度を1→0にして瞬時に切り替えて、 複数のモーションを繋げます。 要点
- 79. Esquadra @ 2016 79 制作工程 「その他」 ■ まだまだいろいろ必要… ?背景、小物、ロゴ、エフェクト、etc ?カメラワーク、演出、etc ?なんだかんだでまだまだいろいろ作る必要が… ?楽しい作業だけでは無い（作るのが苦手なものも…） ?ブラッシュアップが果てしない それらを… とにかく作っていきます。
- 83. Esquadra @ 2016 83 まとめ１ 「作ってわかったこと」 ■ こういうのを作るには半端無く時間がかかる。 ■ アニメーターの人たちはやっぱりすごい！ ■ 絵を描けばなんとかなる！ ■ 日本語サポートはとてもありがたい！
- 84. Esquadra @ 2016 84 まとめ２ 「作って良かったこと」 ■ 制作ノウハウがすごいたまった。 ■ さすがに初心者では無くなった（と信じたい…） ■ 開発現場へのフィードバック！
- 86. Esquadra @ 2016 86 ３つめの ■ 開発現場へのフィードバック！ ゲームへのアニメーション実装が 得意になりました！ これが非常に重要でした！ これによって ╭( ???)??? ???
- 87. Esquadra @ 2016 87 まとめ３ 「出して良かったこと」 フレンドシップに掲載して頂いて良かった事 すごいたくさんの問い合わせが 来るようになりました…！ Σ(?Д??)?
- 90. Esquadra @ 2016 アップデート！ 90 私たちユーザーやゲーム開発者が SpriteStudioを使用 ウェブテクノロジさんの SpriteStudio開発者の方々 付属ツール！ フィードバック 開発 開発 ここはこうしてほしい バグみつけたー こんなん作りましたー こんな機能が欲しい ネットで 作品を発表！ フレンドシップに 掲載！ まれに 野生のプロの 方も…