Spritestudioの基本的な設定とか、外注とのあるあるとか、デザイナーが先にしておいたほうが良いセッティングとか。 2015/11/14に大阪で行った「関西ゲームデベロッパー勉強会」でのプレゼンスライド。足りない所とか整理できていない所もあるけど、とりあえずアップ。

1. そろそろ統一したい
Spritestudioの設定
田幸廣

2. アニメーターと仕事を
するという事
というのを前回やったんですが…

3. 本日のお題目
• Spritestudioあるある ←もう一回！
• Photoshopの設定
• Spritestudioの設定

4. 自己紹介
• 名前: 田幸広
• マンガ・アニメとCG以外だっ
たら何でもやるアニメーター
• 最近は、ハッカソンによく顔
を出しています。
• よくしゃべります。

5. そもそも…
アニメーターと話が通じない

6. すぐに擬音で
説明しようとする。

7. なんとなく言いたい事はわかる
けど、進 を記録しにくい。も
しくは指示しにくい。

8. なんか、一日中同じ作業を繰
り返しているように見えるし、
何時終わるのかもわからない。

9. 本人に聞いても、擬音で返ってくる。
宇宙人みたいで、一緒に仕事をしてい
る気になれない。超不安。

10. 解決方法
• 要点や仕様や初期設定を、可能な限りガチガチに固
めちゃってください。
自由度の概念が違うので、わりと困りません。
• 無理って言ってもやっちゃってください。
出来ます。

11. あと、アニメーターの職能は
動いているように見える仕様づくり
なので、
むしろ出来るだけ頭に捕まえて、仕様の方向性を
エンジニアと会議したほうが良いです。

12. なので、Spritestudioも最初
に設定をガッチリ固めた方が
みんな幸せになります。

13. Sprite Studioあるある
田幸広

14. 途中からプロジェクトに入った時によ
く見るアニメーション作業での問題
• 絵にあっていない関節を無理や
り使っている。

15. 途中からプロジェクトに入った時によ
く見るアニメーション作業での問題
• 絵にあっていない関節を無理や
り使っている。

16. 途中からプロジェクトに入った時によ
く見るアニメーション作業での問題
• 絵にあっていない関節を無理や
り使っている。
• 外注から上がってきた画像が使
いものにならない。
こうなるはずが、

17. 途中からプロジェクトに入った時によ
く見るアニメーション作業での問題
• 絵にあっていない関節を無理や
り使っている。
• 外注から上がってきた画像が使
いものにならない。
実際に組んでみると
ずれている。

18. 途中からプロジェクトに入った時によ
く見るアニメーション作業での問題
• 絵にあっていない関節を無理や
り使っている。
• 外注から上がってきた画像が使
いものにならない。
• 元データを修正しようとおもっ
たけど、縮小済みのPNGしかな
くって、ドッターじゃないと触
れない。 元データ

19. 手元にあるデータ
途中からプロジェクトに入った時によ
く見るアニメーション作業での問題
• 絵にあっていない関節を無理や
り使っている。
• 外注から上がってきた画像が使
いものにならない。
• 元データを修正しようとおもっ
たけど、縮小済みのPNGしかな
くって、ドッターじゃないと触
れない。
キャラの顔とかだと、
マジ泣ける。

20. 途中からプロジェクトに入った時によ
く見るアニメーション作業での問題
• 絵にあっていない関節を無理や
り使っている。
• 外注から上がってきた画像が使
いものにならない。
• 元データを修正しようとおもっ
たけど、縮小済みのPNGしかな
くって、ドッターじゃないと触
れない。
• ファイルを立ち上げるととりあえ
ず、エラーが吹き出す。

21. 最初に仕様を決めましょう

22. 初期設定を仕様にいれる。

23. 絵に合っていない関節の問題
SSとPSの両方で、
同じサイズのグリッドを活用する。

24. 絵に合っていない関節の問題
グリッドを統一して、基準座標が、
ぶれないようにする。
僕は、8pxで固定してます。
photoshop
spritestudio
誰が組んでも、関節が抜けなくなる。
→アニメーターがいなくても仮組みが
出来る。外注管理時のチェック項目が
明確になる。

25. セルマップの設定
図１

26. セルマップの設定
図１
図２
1. セルリスト【図１】の画像をダブルクリックすると、セル編集とい
うウインドウが開くので、セル名称を「head」に変更して、黄色の
十字線を図２と同じく右下の赤い十字に合わせてください。
2. 合わせたら、『セル編集』のウインドウを閉じてください。

27. セルマップの設定
1. 他のパーツも同様に、設定します。
2. bodyとbarの十字線は、図２を参照
に。
図
１
図２

28. 外注から上がってきた画像が
使いものにならない
モデルの仕様は、アウトラインでなく骨組でやる。

29. 絵の確認方法
1. 関節のトンボがずれていないか。
2. レイヤーの上下の順番は正しいか？
3. 関節を90度回してみて絵が変になら
ないか。

30. 外注から上がってきた画像が使いものにならない
関節を繋ぐ
ジョイント
関節(中心点)
関節(中心点)
PSで作成時に、関節のトンボを別レイヤーで作る。
表示領域

31. 外注から上がってきた画像が使いものにならない
田は、ジョイント接続用に
全部のパーツの関節に、別レイヤーでト
ンボと表示領域を入れています。
レイヤーの階層を変えたり
上のレイヤーを半透明にして、
トンボがピッタリあっているか
確認。

32. グリッドを徹底するメリット
• 仮組みが楽ちん。←アニメー
ター以外も対応できる。
• セルマップ内の配置替えも平
気。←ラフからパーツが増え
たり形状が変わっても簡単に
対応できる。

33. グリッドに何を合わせるの？
• 関節の中心点 • セルの領域も当然ながら、
• グリッドに合わせること

34. 領域をグリッドに合わせる利点
• メリット：セルの配置変更が
お手軽になる。（微調整が要
らなくなる。）
• 注意点：PSD上での移動時に
は、必ず画像を8の倍数ずつ移
動する事。

35. • PSD上での画像の配置を移動
する時にも、8pxごとで。
場所が移動している
領域をグリッドに合わせる利点

36. • そしたらSS上でのセルの座標
の移動も、楽ちん
グリッドに合わせて、
領域をドラッグするだけで、
中心軸もずれない。
領域をグリッドに合わせる利点

37. 最終的なサイズだけでなく、
縮小前のPSDファイルも要回収。
緻密でドッターじゃないと触れない。
手元にあるデータ

38. 最終的なサイズだけでなく、制作時のPSDキャン
バスのサイズも指示。
必ず、x2かそのn乗で。
油断していると、1.3倍とかで作って来る事があり
ます。
外注だとともかく、クライアントだと、絵によっ
てサイズが違うフリーダムぶりで、最初に仕様を
決めておかないと、かなり辛いです。

39. 自分でコントロールできる範囲のエラーを
事前に知っておく。
エラーが吹き出す

40. 途中からプロジェクトに入った時によ
く見るアニメーション作業での問題
• 元データを修正しようとおもったけど、縮小済みのPNGしかな
くって、ドッターじゃないと触れない。
インポート時に、データのリンクが破綻しているかも？

41. 基準フォルダの設定を徹底する。

42. 基準フォルダの設定を徹底する。

43. • すべてを一つのフォルダ内にま
とめる。
• 相対パスで管理する。
• PNGデータと、セルマップデー
タとアニメーションデータはフォ
ルダを分ける。（クオリティ
チェックの担当が違う事もある
ので。）
基準フォルダの設定を徹底する。

44. 基準フォルダの設定を徹底する。
基準フォルダを全部設定します。
アニメーション:anim
セルマップデータ:cell
画像データ:image
エフェクトデータ:effect
エクスポート: export

45. 基準フォルダの設定を徹底する。
リンク名が絶対パスにならない
ように！
（animの左側に、場所の情報が
長くつかないように。）

46. さらに、設定します：互換性
設定で必要ない項目を根こそぎ削る。

47. 途中からプロジェクトに入った時によ
く見るアニメーション作業での問題
キャラクターが の生命体になっている。

48. 倍サイズで作っているので、先方が間違って倍
サイズの参照イメージを送ってきている。
直前にこんなエラーが出ているかも？

49. 落ち着いて以下の事を確認
1. 画像のサイズは正しいか？
2.エラーが出た時に、「いいえ」を選んだか？

50. 倍サイズで作っているので、先方が間違って倍
サイズの参照イメージを送てくる。
そのまま取り込むと、エラーもでるし、
原型がわからないアニメーションになる。

51. 宇宙人になる仕組みはこうです
こうなるはずが こうなった

52. 宇宙人になる仕組みはこうです
倍サイズで作っているので、先方が間違って倍
サイズの参照イメージを送ってきている。
512x512
1024x1024

53. 宇宙人になる仕組みはこうです
サイズが違うので、セルマップの座標が変わる。
512x512
1024x1024

54. 宇宙人になる仕組みはこうです

55. まとめ
• 基準フォルダを設定する。←マスト
• 中心点と領域を8pxのグリッドに合わせる。
• 外注が、仕様にそっているか、常に目を光らせる。

56. 後、外注とのコミュニケーション用に
こういったものを作っていたりもします。

57. 終わり