ムーぶろ

株式会社オフィスムーブの雑記ブログです。2D アニメーション ソフト[spine]挑戦中。随時ご質問等、お気軽にください(^O^)

spine ゴーストの使い方例

以下の記事でゴーストの使い方を説明しました。アニメーションの流れがおかしくないかどうか(アニメ全体の曲線が綺麗に流れているか)などを見るのに便利ですが始点と終点を見たいときなどにも便利です。 この飛んでいくクナイに こういうエフェクトを付けたい…

spine ゴースト

アニメーションの流れが見たいとき、終着点の位置が解りにくいときに軌跡を表示させるゴーストという機能があります。flashなど他のソフトでは「オニオンスキン」とも言われますね! 前、後、現在のフレームを表示させる事ができます。 ビュー→ゴースト化から表…

spine ショートカットキーを設定する

spineのショートカットキー(ホットキー)を設定する方法です。ショートカットキーは設定されているので確認&設定できる場所を書きます。 spineのメニュー→設定→ホットキー→開くを選択。 テキストファイルが出てくるのでショートカットキー部分を変更すれば自…

spine トランスフォームコンストレイント基本

トランスフォームコンストレイントについて 簡単に言うと。設定したボーン同士が連動して動くようになります! ●設定元が右に行ったら右に行く。左に行ったら左に行く。 ●反対方向にも。左に行ったら右右に行ったら左 …ということができます。(今回は基礎で…

spine メッシュの打ち方

spineの特徴はメッシュが打てる点だと思いますがどうやってどう打ったらいいのか?で最初時間が掛かる気がします。考え方としては、この絵が3D化したらどんなポリゴンになるか。を意識して打つのが基本かと思います。 ※2秒ごとに切り替わります。

spine ボーンの色を変える

キャラクターのボーンは色を変えると管理しやすくなります。例としては、右側がピンク、中心がブルー、左側が赤など。 ボーンを選択し。カラー部分を選択すると変更することができます

spine スキン機能

以下の動画のように、キャラが持っている武器や装備を切り替えることのできる機能を紹介します。 ①SETUPのツリー「スキン」→「新規スキン」から作ります ②名前を付けます ③武器分の数を作ります(今回は2個) ④武器を置きたいボーンに、「スキンプレースホルダ…

spine 画像一枚で一部分だけ動かす

この水の入ったボウル水部分を動かそうとすると、 ボウル前面、水、その奥と3枚の画像が必要になるかと思うのですが陰も使用してないし、めんどくさいのでこの1枚だけで済ませたいと思います。 上記のようにメッシュを打ちます。線画がくっきりしているので…

spine ボーンとウエイトで変形させる~餅編~杵編~

ボーンにウエイト適用し、変形させます。メッシュで手付けは、ボーンに限界を感じた微調整部分のみやっています。 応用としては、杵の向きを変えたりもできます制作環境:Windows10 Spine 3.6.47

spine ボーン作り直し

ボーンを作った後に、長さを変えたくなったり位置を変えたくなった時はボーンツール状態で、変えたいボーンを選択し、[ALT]を押したまま引き直す事ができます 制作環境:Windows10 Spine 3.6.47

spine メッシュ、画像切り替えについて

制作環境:Windows10 Spine 3.6.47下の餅つきアニメですが、画像切り替え、メッシュ変形を使用して作っています。それについて解説記事を書いたらつなげていきたいと思います!◆このアニメのtips!まとめ◆ ・スロットに画像複数入れて切り替える(予定) ・ボー…

spine メッシュが打ちやすくなる小ネタ

メッシュを編集しているときに、重なっている部分が見えなくて打ちづらい場合[Tab]を押すとメッシュ編集中のオブジェクトのみ表示されます。

spine ゆれもののタイミングを簡単にずらす方法

揺れ物の簡単な作り方紹介します。即席サンプルで作ったハムスター。 Before ↓↓↓↓↓↓↓↓After 揺れ方が自然に見える調整のしかたです。 ------------------------------------------------------------------------------------------------マフラーをとりあえ…

spine 犬走る

下の記事で、歩いているアニメを制作したので今回は走っているアニメを制作しました。 地面についている時間は最低限に、ポイントとしては、背骨を波打つように調整するのがよいと思います。背骨のみのタイムラインです。 しなるようなアニメにしたいので髪…

spine 犬歩行

犬(四足歩行)モーションです!ボーンは、実際の犬に合わせて入れました。作り方としては、四足歩行は前後でずれている歩き方なので同時に動くモーションをつけ、そのあとずらせば作りやすいと思います。 下っ腹と、足の付け根が動くように太ももの骨にウェイ…

Photoshopからspineへ書き出すスクリプト「Spine Layer ToPNG」2

上記の記事の続きです。書き出したJSONファイルをSpineのデータインポートで読み込みます。※注意:Photoshopでレイヤー名に日本語名を入れていると読み込めません。New Projectにチェックを入れなければ、既存ファイルにスケルトンを追加して製作することが…

Photoshopからspineへ書き出すスクリプト「Spine Layer ToPNG」

「Spine Layer ToPNG」というスクリプトがあります。このスクリプトを使えば、いちいちSpine上で素材を読み込んで、ガイドを置き、位置を合わせる…といった工程が無くなり便利です。「PhotoshopToSpine」の方が新しいですが、追々また記事を書こうかと思います。…

spine エフェクト2

下記記事で、spineでエフェクトを作った物を軽く紹介しましたが このアニメで剣から出ているエフェクトもメッシュを使用しているので紹介したいと思います! spineはマスク機能が使えないのでジャバラのようにメッシュ機能を使っています。

spine エフェクト

炎エフェクト実験中です。 この2枚使用しました

spine ディフォルメキャラ

こちらで紹介したキャラのモーションを、一つにまとめようとflashでつなげました。 youtu.be やり方は以下です! officemove.hatenablog.com

spine スプライトシート

今まで記事に使用したキャラクターのスプライトシート一覧です。 忍者 カッパ 妖精 SD女の子

spine ディフォルメキャラアニメ攻撃

いつもは1枚絵にモーションを付けていましたが今回は2枚使い、絵を切り替えて攻撃モーションを作りました ゲームで使用する前提で制作したのでボタンを押したとき瞬時に攻撃できるよう予備動作は短めです。 歩く、走る編 待機編 officemove.hatenablog.com

spine ディフォルメキャラアニメ走る、歩く

以下記事では待機アニメを制作しましたが、 今回は走り、歩きといったアクティブなモーションを付けました。 歩く、走る 上半身のひねりなどは、メッシュで調整しています。

spine ディフォルメキャラアニメ待機編

今回はこのキャラを使ってアニメさせたいと思います。 髪の毛やスカートなど、揺れものが多いキャラなのでその部分の構造を… 原理的には下の2つの記事と同じで、ボーンにウェイトを仕込み動かしています。 spine アルパカ - ムーぶろ spineはじめました4(…

spine アルパカ

ボーンにウェイト調整でついてくるようにしてもごもごさせてみました。

spine サイコロを回す(2)

officemove.hatenablog.com 前回の記事からの続きです。絵の分割に限界を感じたので下記に細かく別けてみました。 違和感まあまあ抑えられる感じになりました。360度回転+上下回転でランダムな動きに

spine サイコロを回す(1)

Spineでどこまで3Dのように動かせるのか?と思いとりあえずサイコロ(キューブ)を回転させてみることに。 裏、表の2種類の絵を用意 メッシュ打てばどうにかなるだろ!と、とりあえずやってみろ精神の結果 ゆがんでいる…遠近感を出すためにメッシュがよれてい…

spine[Split]でボーンを分割する

spineバージョン3.6.01で[Split]ボタンがTreeビューの下に追加されました。 ボーンを指定した数に分割する機能でたとえば、このヒレのボーンを分割したいときはボーンを選択し[Split]ボタンを押します ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 設定ウィンドウが…

spine 写真を3Dにする

今まで、イラストのみでアニメしていましたが今回は写真を素材にアニメさせました。↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 素材は、私が以前飼ってたピンポンパールちゃんです!(左) ビチビチ

spine spineとflash組み合わせ

スパインだけでの長尺アニメ物はなかなか使いにくいのでスパインでPNG画像を書き出しFLASHで画像入れ子でアニメをつなげてみました。 spineはループ単体ものだといいんですけどほかのシーンとの組み合わせ安さは、FLASH使いやすいですね