串焼きほるもん

ゲーム制作サークルSMGほるもんXのブログです。製作状況やくだらない話などがメインになります。

カテゴリ: Spriter

夏イベもなんとか丙クリアして瑞穂も手に入れて一安心のSです。
暑さも落ち着いてきてエアコン無しでも過ごせるようになってきました。
秋にかけて食欲も復活したのですががんばっておかわりしないダイエットをつづけています。

今回Spriterの使い方メモ その4ということで作成したアニメーションの出力にいってみたいと思います。

本当はGIF出力でブログにも載せたいのですが、なぜか私の環境ではエラーでSpriterが落ちてしまうのでPNG出力のみのメモになります。

spriter035

 リカバリすればなおるとおもうのですがそんなめんどうなことはしない!
というわけでさくさく進めていきましょう。

Spriterに対応したツールなら変換出力しなくても良いみたいですがやっぱりPNGなりなんなりになっているとツールを選ばずつかえるので便利ですね。

変換出力の手順ですが非常に簡単です。
まずはFileタブから Export Animation To PNG/GIF を選択します。

spriter026

すると新たにウインドウが開きます。

spriter027-A
 
 このウインドウで出力方法の詳細を決めます。

(1)ではアニメーションの出力枚数やフレーム数を決めます。 
いろいろありますがいまいち組み合わせたときの効果が理解できないのでimagesの部分のアニメーションパターンの数だけ決めています。
どっちみちゲームの作成ツールの方でもアニメーション速度などはいじるのでPNG出力の場合はそれほど気にしなくてよいかと思います。

(2)では画像の切り抜き、つまりトリミングですね。
初期状態のままで現状問題ありません。

(3)では出力する画像の形式を決めます。
separate numbered image filesは一コマ毎作成。
sprite strip or sprite sheetはスプライトシートの作成。
animated gif アニメーションGIFを作成。

(4)では出力する画像のサイズの変更です。
100%で元画像と同じスケールで出力します。

最初は初期設定のままExportをクリックして適当なフォルダに出力してしまいましょう。
その際ファイル保存のウインドウが開くので適当にファイル名を入力して保存すれば連番等必要な情報を勝手に付け加えて保存してくれます。
1コマ毎の保存にした場合は選択したフォルダにたくさんのファイルが生成されるので気をつけましょう。
これで出力の基本は終了です。
簡単ですね。

 で、ここからは私がいろいろと試行錯誤した結果これが良いんじゃないかと思う出力方法です。

Spriterはドット絵が単純になればなるほど画像を回転させたときにガタガタに崩れてしまいます。
かと言ってスムースサンプリングをするとせっかくのドット感がうしなわれてピンぼけ状態になります。

 spriter033

↑奥側の足を見れば分かる通りPixcel Art Modeだと斜めの時の処理が綺麗にいかずガタガタになる。

spriter032

↑Smooth Samplingだと一見綺麗になったように感じるが拡大してみると分かる通りドット感が失われてピンぼけ状態。

walktest

試しにPixcel Art Modeでアニメーションを組んでみるとみごとにガタガタです。
わかりにくい人はこのサンプルGIFを拡大表示すればよくわかると思います。

 ドット絵をやめるかSpriterをやめて手描きにするか以外に解決方法がないのかなと思っていたところで意外なことがわかりました。
 どちらかにチェックが入ってないといけないという先入観があったのでなかなか気づかなかったのですがSpriterでPixcel Art ModeもSmooth Samplingにもチェックを入れずに表示するとドット感を保ったまま崩れずに表示されるのです。

spriter034

奥の足を見てもらえばわかるように綺麗な形を保ったまま斜めになっています。

やったーこのまま出力すればバッチリじゃん

100-P-S_000

バッチリじゃありませんでした。
結局出力時にPixcel Art Modeと同じになってしまいます。

けれど画面で表示した時は綺麗に斜めになっていました。
この表示画面そのままで出力したらいけるんじゃないかとおもって拡大出力をしてみました。

spriter027-A

拡大は保存時の詳細設定ウインドウの(4)に入力してください。
サンプルは5倍の大きさで500%を入力しました。

exporttest500_000

やたーっ!綺麗にドット感を保ったまま出力できたよ。

ただし元のドット絵よりサイズがかなり大きくなるのでゲームで使う分にはもう一工夫いるのですがそこはまだうまい着地点が見つかっていません。

現状ではこの馬鹿でかくなったドットアニメをゲームの制作ツールで取り込んで縮小表示と言うのが一番よさげです。
ただそれだと大きめのキャラがさらに大きくなるのでゲームによっては重くなる可能性もあります。

フォトショップなどで透過PNGにしてやるのもそれなりなんですがスプライトシートとして出力したものを縮小したときは微妙なズレが生じたりするので1コマずつの出力にして個別に縮小して…となると余計な作業ばかりが増えてしまいます。

そんな感じでまだ試行錯誤中ですがこれで一通りSpriterの使い方がマスターできました。
他にも使っていくうちにわかったこととかがあればメモ代わりに書いていこうと思いますがひとまずはこれでSpriterの使い方メモは終わりです。

この記事を読んで興味の出た人はぜひSpriterを使ってみて習得したコツなんかあればコメントにでも書き込んでくれるとありがたいです。

それではまた。


なんだか急に涼しくなってきて明け方寒くて目をさますSです。
新しいツールに手を出してみたりして作業が進んでいるようで進んでいない今日このごろ。
Spriterの使い方メモ3はじまるよ。

今回はいよいよアニメーションの作成です。
おおまかな流れとしては

1)時間を指定する。
2)配置したボーンをドラッグやなんやでいろいろいじってポーズを決める。
3)キーフレームに登録する、と言うか勝手にキーフレームができる。
4)上記を繰り返しアニメーションの最後までキーフレームをつくる。
5)間のコマは勝手に保管されるので再生スピードや再生時間の調整をして出力。

という流れになります。
ここまできたらやっと感覚的にいじってもなんとかなるのでVideoHelpを見ましょう。
それで勘の良い人なら十分わかると思います。

私は実際にいじってみると動画のように上手く行かないことが結構ありました。
なのでそのあたりに気をつけながら書いていこうと思います。

まずは画面下部にあるタイムラインを確認します。

spriter023

ここですね。
ここに、現在の位置をしめすカーソル、キーフレームを示すカーソルがあります。

spriter023-A

こんな感じです。

まずは現在の位置を示すカーソルを適当な位置に移動します。
タイムライン上のキーフレームのない場所をクリックすればその位置に移動するのでここだと思う場所に移動させましょう。
その後に配置したパーツのボーンをいじってポーズを決めます。
動かし方は前回の記事を参考にして下さい。

このときパーツを少しでも動かしたらタイムラインの現在の位置に自動でキーフレームが生成されます。
そのキーフレームにいま決めたポーズが記録されています。
キーフレームの自動生成は便利なのですが動作を確認しようと思って再生をしたりすると現在位置のカーソルが移動してしまうので気をつけないといけません。
カーソルが少しでもずれていると編集したいキーフレームではなく新しいキーフレームが生成されてしまうのでアニメーションがとんでもないことになってしまいます。
カーソルを移動させた場合は編集したいキーフレームをダブルクリックしてから位置をあわせてからパーツを動かします。

後は動作に合わせてどんどんキーフレームを増やしていきます。

ポーズは繰り返し歩行などの繰り返し再生されるものと攻撃のように一度だけ再生されるものがありますが後者のほうが簡単だと思います。
まずは最後のポーズを決めて動作確認をしておかしければ間のポーズを補完するといったやり方がおすすめです。

動作の確認はタイムラインの左にある再生ボタンをつかいます。
再生と修正を納得できるまで繰り返します。
現在位置のカーソルをドラッグして手動再生もできるので、じっくり確認したいときはおすすめです。

spriter031-A


キーフレームはドラッグできるのでタイミングの調整はそれを利用するとやりやすいです。
またコピー&ペーストできるみたいなのですがうまくいくときとうまくいかないときがあるのでまだ使いこなせていません。

出来上がったアニメーションは状況によってはタイムラインの途中で終わっていると思うので全体の時間の調整をします。
繰り返し再生するアニメーションは作成途中で変更するのが良いと思います。

やり方は全体の時間が表示されているボタンをクリックして数値を入力しApply Lengthボタンを押すだけです。

spriter023-B

spriter024-A

 これでアニメーションは完成です。

最後に消えてしまわないようにFileタブからSave Projectを選択して保存します。
Save New Versionがおそらく名前をつけて保存、Save Project Asはよくわかりません。
これで最初に選択したパーツ保存フォルダにプロジェクトが保存されます。
また初期設定のままならAuto Save機能があるのである程度の時間ごとにAuto Saveファイルも保存されているとおもいます。

spriter025

これでおおまかな使い方メモは終了です。

次回はPNGファイルへのエクスポートをメモしようと思います。
ゲームなどの作成ツールによって必要なエクスポート方法がかわってくるのですが、私が必要とする出力方法しか試していないので過度な期待は禁物ですよ。

ではまたノシ
 

こんにちはSです。
現在我が艦隊はE-6で四苦八苦しております。

今日はSpriterの使い方メモの続きです。
ちなみに使用しているCGは次回作のプレイヤーになるかもしれない子です。
アニメーションはSpriterに任せる前提で描いているので美人警察よりも大きめです。

spriter013

パーツをひと通り配置したところからですね。
記事を書く時点ではCGは完成していないので毛髪はありません。

配置するときにパーツが前後するので左の「Z-order」のウインドウで調整します。
お絵かきソフトでいうところのレイヤーウィンドウみたいなものですね。
ドラッグ・アンド・ドロップで位置を変更できます。
ちょっとクセがあるのでやりにくい人はCtrl+↑などでやるといいかもしれません。
パーツの前後はこの後の作業でも多用するのでそれほど深く考えなくても良いと思います。

spriter013-A

これで配置完了です。
これからすぐにアニメーションの作成にも取り掛かれますが、単純なものでなければ非常にややこしいことになるので先にボーンをつくります。
ボーンはその名の通り骨にあたるもので、先ほど置いたパーツCGが肉といったところです。
ボーンをつくって各パーツと紐付けしておくことによって各パーツが骨組みのルールに従って連動して動いてくれるので非常に扱いやすくなります。

まず中心になるパーツの上でAltキーを押しながらドラッグします。
今回は動きの中心ということで腰にしました。
パーツを置くときに決めた支点(赤いポイント)の辺りからドラッグするのが良いみたいです。
パーツの上でなくても良いみたいなのですがチュートリアル動画がそうしてたのでそうしてます。
パーツが完全に重なってしまっている場合などはずらす必要があるかもしれませんが、そういう時のための機能もありそうです。
ドラッグしてもボーンができないときは一旦なにもないところをクリックしてから再挑戦してみてください。
パーツCGなどの他のオブジェクトが選択されていたら出来ないみたいです。

spriter014

これで一つボーンができました。
腕が邪魔だったので手前の腕を後ろにしています。
この調子でどんどん作っていけば良いのですがボーンには親子関係がありますので必ず親にあたるものから先に作っていって下さい。
子の作り方は、親になるボーンを選択してから普通にボーンを作るだけです。
ボーンは選択された状態ならオレンジ色で表示されて、そうでないときは枠線だけが表示されます。

spriter015

こんな感じですね。
新たに作ったボーンが選択された状態になるので次に作るボーンの親子関係には気をつけて下さい。

spriter016

親ボーンをドラッグすると子も一緒についてきます。

spriter017

子をドラッグすると子のみが動きます。
離れても親と線でつながっているのでつながりがわからなくなることはありません。

spriter021

親子のつながりはZ-orderのウインドウの下のHierarchy(ヒエラルキー)タブをクリックしても見れるので確認しつつ作業しましょう。
このウインドウで親子のつながりの変更もできるのですが親の特性に引きずられて配置が崩れたりするのでやはりボーンの作成時にきっちりとしておくのが良いでしょう。

今回は腰を中心に両足と上半身、上半身から両腕と頭といった感じで紐付けしました。
一つのボーンから複数の子をつなげることも出来ますし、子から孫~ひ孫とつなげることもできるのでいろいろ試行錯誤しました。

spriter022


ボーンの作成がひと通り終わったら次はボーンとパーツの紐付けを行います。
この作業の前に親ボーンをドラッグして仲間はずれがいないかどうか確認しておくとよいでしょう。

紐付けは簡単です。
最初に紐付けしたいボーンを選択します。
おもむろにキーボードの「B」を押します。
するとパーツCGが半透明になるので「B」を押したまま紐付けしたいパーツCGをクリックします。
クリックされたパーツが半透明から通常表示になったら紐付け完了です。

spriter018 → spriter019

ボーンにマウスカーソルを合わせると位置によって矢印や四角印がでたりするので適当にドラッグすれば回転や拡大縮小もできます。
適当に動かして確認します。

spriter017-A spriter017-Bspriter020

ここで個人的なポイントなのですが紐付けする前にボーンの角度をわかりやすい角度にしてから紐付けするのが良いと思います。
後のアニメーション作成のところで初期角度に戻そうと思っても微妙な角度とかだとわすれてしまって戻せなくなることがあるからです。
→ 0
↑  90
← 180
↓  270
あたりがおすすめです。

子は親に引きずられるのでかならず親→子の順に決めて行って下さい。
左下のプロパティウインドウで数値の確認変更ができます。
位置などの変更もできるので全く同じ位置や角度にしたいときなどはボーンをドラッグするのではなくこちらで数値を入力すると良いです。

spriter013-B

後ろに隠れているパーツはZ-orderで手前に表示してから紐付けしましょう。

紐付けがおわったらいよいよアニメーションの作成なのですが説明しようとおもうと非常にややこしいので今回はここまで。
ここまでできたらVideoHelpを何回も見たほうがわかるかもしれませんね。
ボーンの紐付けのところで「B、B」とBを連呼していたのは聞き取れました(;´Д`)

spriter029


自己流の使い方メモなのでもっと良い機能や効率のよいやり方とかあるとおもうのでわかる方いたら教えて下さい。
それではまたその3で会いましょう。
正式な使い方ではなく自分で試行錯誤したことのメモなので過度な期待は禁物ですよ。












こんにちは健康診断でギリ肥満といわれてショックを受けているSです。


Spriterをさわってみてなんとなく使い方もわかってきたので自分用に使い方をまとめてみたいと思います。

まず最初にここからSpriterをダウンロードしてインストールします。
 
最初に立ち上げたら初期設定画面らしきものがでてくるので適当に設定します。
私は英語はさっぱりなのでおすすめのまま先にすすめました。読める単語を拾っていくと自動アップデートとかそのあたりのようなのですが他にもあるかもしれません。

そしてつぎにVideo helpのリンクウインドウがひらくので英語(と思われる)がわかる方はみるとよいでしょう。
英語ができないかたはひと通りかるくさわってからみるとなんとなくわかるのでおすすめです。
こんなの要らねーよって方は閉じて下さい。

これで準備完了です。

spriter001

最初に左上のFILEからNew Project...をクリックします。

spriter002

するとこういうウインドウがでてくるのでOKをクリックします。

spriter003

どうやら作業&保存するためのフォルダを決めろといってきているので適当なフォルダを指定します。

spriter004

とりあえず「test」フォルダをデスクトップにつくってそこを指定しました。
中にはアニメーションさせたいCGをおいています。
このとき別にフォルダ分けする必要はないのですがパーツの数によっては分けておいたほうが作業がスムースに出来ると思います。

spriter008


画面の両側にいろいろな情報が表示されました。
左上に表示されているのはオブジェクトの重なり順を示すウインドウです。
左下は現在のパーツの位置や角度などが表示されます。
右上に先ほどしていした作業用フォルダのツリーが表示されています。
右下が作業しているアニメーションパターンのツリーですね。複数のアニメーションを1つのプロジェクトで管理できるようなのですがまだ私は使ったことがありません。

ではいよいよアニメーションの作成開始です。

まずは使いたいパーツを右上のフォルダツリーからドラッグ・アンド・ドロップで中央の作業画面に置きます。
置いたらパーツCGの左上にある赤い点をドラッグして、動作の支点になるところに移動させます。

spriter009 → spriter010

赤い点から伸びているバーをドラッグして角度を変えることができるので変な位置においておくと思った通り動かないので注意して下さい。
これは頭なので首のあたりにしました。

spriter011

この調子でひと通りパーツを置いていきます。

spriter005


位置もきっちりと合わせましょう。

ちなみにマウスのスクロールホイールで拡大縮小、中央ボタン(スクロールホイールを押しこむ)を押したままドラッグで表示位置を変更できます。

自動でアンチエイリアスがかかるのでドット絵のまま処理したいときはメニューバーのModesの中のPixel Art Modeにチェックを入れます。
ただ角度が変わった時の処理があまりよろしくなく斜めにするとすごいことになるのでよほど大きなCGじゃないかぎり使えないような気がします。

spriter006

spriter007こんな感じにドットがくっきりと表示されます。

私はこのモードで位置合わせをした後にチェックを外して作業しています。

これでひととおりパーツを置いたら最初の作業は終了です。

時間がなくなってきたので今回はここまで

つづく





このページのトップヘ