spritestudioの初期設定について

1. Spritestudio演習
辻田幸廣

2. あなたは誰？
関西人のアニメーターの辻田です。
学生時代にずっと英国に住んでいたので、
アニメーターですがマンガ・アニメと違った仕事をしています。
フリーランスで、普段はゲーム会社でアニメーションを作ったり、プログラマー
とゲームのための仕組みづくりをしています。
https://www.youtube.com/watch?v=jCR2pZMijQo
https://www.youtube.com/watch?v=WLa0ZwGOAhs
https://www.youtube.com/watch?v=LC_BuqIQpAs

3. 元々はこんな絵を描いています

4. 静止画はこんな感じ

5. 課題
Spritestudio（略してSS）を用いての
アイキャッチ
アニメーション制作

6. アイキャッチってなに？
アニメのCMの前後に流れる数秒～10秒ぐらいの番組のタイ
トルの付いた絵です。
アニメーションになっているものも多く、今回は、皆さんに
ホームページにのせるためのアイキャッチを作って頂きます。

7. アイキャッチの例

8. 大きな流れ
1.Spritestudioのチュートリアル。
2.キャラクター制作＆ストーリーボード（絵コンテ）
セットで作成
3.一人ひとり辻田と方法を検討。（実際に出来る事を整
理）
4.素材づくり
5.アニメーション制作

9. 1.Spritestudioのチュートリアル
1. Spritestudioの使い方
2. Spritestudioで出来る事

10. プロジェクトファイルを作ります。
アニメーションプロジェクト作成は、新規プロジェクト
の保存から開始
1. ファイル>新規プロジェクト をクリック。
2. 保存先のフォルダを指定。
（デスクトップに、SS_自分の名前のフォルダ作
ってください。）
3. SS_自分の名前のプロジェクトファイルを新規作
成。

11. 初期設定をします：基準フォルダの設定
WINDOWSの場合 Macの場合
ファイル>プロジェクトの設定 を開きます。
基本的に、MacもPCも操作は同じです。

12. 基準フォルダを全部設定します。
アニメーション:anim
セルマップデータ:cell
画像データ:image
エフェクトデータ:effect
エクスポート: export
初期設定をします：基準フォルダの設定
リンク名が絶対パスにならないよう
に！
（animの左側に、場所の情報が長く
つかないように。）

13. 設定したら一旦保存
警告が出ますが、OKを押してください。
ファイル>すべてを保存 を押したあと、
ファイル>最近開いたプロジェクト
から、ファイルを開き直してください。

14. さらに、設定します：互換性
一般>互換性
1. エフェクト機能を使用するにチェック。
2. 再生対象のプラットフォームはカスタム
で。
3. 内容の有効/向こうは下記参照。原点xオフ
セット以下は、最後のインスタンス以外
全部無効で。
設定が終わったら保存を。

15. 画像を取り込む
1. ①プロジェクトウインドウにtemp.pngをドラッグしてください。
2. 基準フォルダの設定があっていれば、セルマップと参照イメージの下は、
図３の様になります。
3. もし図４の様になるなら、基準フォルダの設定が間違っている可能性があ
ります。
図３ 図４
図1
図２
長かったら
間違い。

16. セルマップの設定
1. ①プロジェクトウインドウで、セルマップの
下のtemp.ssceを選択すると、③セルマップ
にセルマップからリンクしているイメージが
表示されます。（ここでは参照イメージに表
示されているtemp.pngの事）
2. ③セルマップ上で、画像を選択。【図１参
照】
3. ダブルクリックすると、②セルリストに、選
択した画像が表示されます。【図２参照】
図１
図２

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

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

19. レイアウト設定
1. ①プロジェクトのアニメーション上で右クリッ
クして、新規作成を選択します。
2. ファイル名は、doll.ssaeで。
3. ⑥レイアウト情報の数字を、640x640に変更。
図１
図２

20. レイアウト設定（とうとうキャラを配置します）
図１
図２
1. ②セルリストから、④レイアウトに
head bodyのパーツをドラッグしてくだ
さい。
2. ドラッグすると、パーツが④レイアウト
に表記され、⑤フレームコントロールに
もレイヤーとして表示されます。

21. レイアウト設定（レイヤーの親子関係)
1. ⑤フレームコントロールのキャラのパーツの繋げ方を設定します。
2. N root>body>head と、階段上に繋がる。
3. 関節は、それぞれがきっちり重なるように繋ぎます。
4. 間接を繋ぐ時は、ギズモを利用しましょう。【図３】
図１
図２
bodyの子として繋
がったheadは、列
が一段下がる。
図２
ギズモ

22. ギズモ＆フォーカス枠の使い方
フォーカス枠を表示ってのもある
赤い円を掴んで、
絵を回転
フォーカス枠を掴
んで拡縮

23. 階層による、動くものの違い
bodyを選択して動かすと、bodyと、そ
の下にくっついたheadの両方が動く。
headを選択した場合は、headしか動
かない。
動かした時のフレームの箇所に
印が出来る。

24. 残りのパーツも配置してください
腕と足を２つづつ＆目を一つ配置してください。
レイヤー上の配置順序は、【図１】を参照に。
組み上がると、図２の様になるはずです。
注意！：作業はフレーム0で行うこと。図１
図２
タイムラインの0フレーム目で作
業すること！
右肩の位置は、ギズモ
のこの位置あたりで。

25. やっと、アニメーション始めます
1. ①プロジェクト上で、プロジェクトを複製します。
2. アニメーションをつくるときには、必ず複製して使うこと。最
初に使ったものはバックアップとして使ってください。
3. 基本的には、アニメーションデータを複製してください。
図１
アニメションファイルといいます
アニメションデータといいます

26. やっと、アニメーション始めます
1. ①プロジェクト上で、プロジェクトを複製します。
2. アニメーションをつくるときには、必ず複製して使うこと。最
初に使ったものはバックアップとして使ってください。
図１
1. 後で説明しますが、タイムライン
の並びを変更する時には、アニメ
ーションファイルを粛清してくだ
さい。

27. 絵の重ね順を変える
⑦パーツ情報の、優先度を
修正すると、レイヤーの上下
関係も修正することが出来ま
す。

28. では、実際にちょっと動かしてみるので、観ててく
ださいね

29. メモ
WebtechnologyにあるSpritestudioのチュートリアル
http://www.webtech.co.jp/help/ja/spritestudio/manual_document/
http://www.webtech.co.jp/help/ja/spritestudio/movie/tutorial/
ウインドウの解説

30. 企画書 以下のことを出来るだけ、言葉にしてみよう
1. 目的：ただ動かすのは難しいので、動かす理由を決めましょう。
例:キャラクター紹介 ストーリー紹介
2. テーマ：どんな雰囲気を作りたいのか簡潔な言葉で！
例：勇気 愛 さみしさ ドキドキ感 期待感
3. 内容：登場人物は？ストーリーは？見せたいのは？