後からパーツ追加！セルマップの差し替え【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜　part20

2017.12.05

投稿者： 

このエントリーをはてなブックマークに追加

どうも！（・∀・）やじキチです。

イチから学ぶ！【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜の連載ブログです！

前回のpart19では、パーツが前後左右にくるくる回るアニメーションのご説明をいたしました。

今回は！セルマップの差し替えについて、やり方と注意点をご紹介したいと思います。

イチから学ぶ！【アニメ・モーションのつくりかた！】〜スプライトスタジオ編〜のPart20です！

スプライトスタジオ http://www.webtech.co.jp/spritestudio/

夢を描いて、動かそう。
インディーゲーム開発に無料で使える
アニメーション作成ツール



セルマップの差し替えは、「パーツの追加があった」時や「イラストに変更があった」時に使います。

イラストの修正はよく起こるので、ぜひやり方と注意点を覚えていってください！


セクション1：簡単！新しいセルマップの用意！

今回は「パーツ追加」を想定して、作業を進めていきます！

セルマップの差し替えの前に、まずは新しいセルマップを作成する必要があります。



今回は尻尾パーツを追加したいと思います。

1）「foot_L」をコピーします。

2）形状変形で、尻尾のような形を作ります。

新しく追加したパーツは、矩形で囲った際に、他パーツに干渉しないように注意しましょう！



レイヤー名はわかりやすく「tail」にしておきましょう。



pngで書き出して、終了です！

そう、セルマップの作成は、不要パーツを書き足したり、不要なパーツを消したり、イラストを変更するだけ！

ややこしい手順の確認や、レイヤーなどの確認などは必要ありません^^


セクション2：サイズに注意！セルマップの差し替え！


では早速、先ほどのセルマップを読み込んでみましょう。

1）「.ssce」を右クリックします。

2）「参照イメージの変更」を選択します。



新しく作成したセルマップを選択し、読み込みます。



おぉっと…！

警告が出てしまいました…。

それもそのはず、サイズ変更をし忘れていました。

警告にあるように、今までのセルマップは512px四方に対し、新しいセルマップは2048px四方です。

4倍の大きさになっています！

セルマップを新しく作る際は、サイズ合わせに注意しましょう！！

ここは「キャンセル」クリックして戻ります！



ということで、2048pxから512pxに変更します。



再び新しいセルマップを読み込みます。

今度は512pxになっていますね！



今回は正しく読み込まれました！しっかりセルマップ上に尻尾が追加されていますね^^

これでセルマップの差し替えは完了です！


セクション3：再設定が必要…！新しいパーツの追加


早速新しい尻尾パーツを矩形で囲い「tail」としてパーツ追加します。



そして、今回は尻尾のパーツなので、基準点は付け根部分に移動います。



セルリストに追加された「tail」をレイアウトにドラッグ&ドロップします。



1）「X座標」「Y座標」を調整して、尻尾に見える位置に移動します。

2）「優先度」を調整して、体の後ろに尻尾を移動します。



次に親子関係の調整です。

「tail」は「Lower_body」に付随するので、「Lower_body」の子に設定します。

これでパーツ追加は終わりました！

しかしこれではまだ不十分なのです…！

今回パーツ追加が終わったのは、「circle」アニメーションのみです。



「stand」アニメーションを見てみると、尻尾は追加されておりません。

正確には、パーツ追加は出来ているが、アニメーションに反映されていない状態です。

アニメーションに反映させるには、もちろんキー設定が必要なのですが…。



単純にキーを打つと、数値が全てデフォルトのため、レイアウト上のどこにあるかわかりません…！



なので、すでに設定を終えている「circle」のアニメーションを流用しましょう！

「tail」の0フレーム目のキーをコピーします。



そして、「stand」の0,29フレームにペーストします。



これで「stand」へも「tail」が追加されました。！

他のアニメーションへも、同じようにペーストすれば、パーツ追加は完了です。



ただ、ここでも注意しなければならないことが！

今回はパーツ追加をしただけなので、アニメーション設定はまた別で行う必要があります。

例えば「egg」では、最後に色の変更を行っているので、新しく追加したパーツの設定も忘れずに行いましょう！



次回は、ロボットのような動きについて説明いたします！

まとめ

・追加パーツは他のパーツとの干渉に注意！

・セルマップの差し替えはサイズに注意！

・パーツ追加はアニメーションの再設定に注意！
ここまでで何か質問やコメントなどございましたら是非書き込んでください！

私も皆様と一緒に成長していきたいと思います！



次回もテクノブログにご期待くださいm(_ _)m
The following two tabs change content below.
Avatar photo

やじキチ

どうも！(・∀・)やじキチです。 影が薄いのをカバーするためにチャラチャラしております。 常日頃から皆々様に笑顔でいて欲しいと思っております。 皆々様が笑顔で、世界が平和なら最高です！ よろしくお願い申し上げます！
一覧へ

コメントを残す