ムーぶろ

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

技術

spine スキン機能

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

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

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

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

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

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

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

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 スプライトシート

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

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

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

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

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

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

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

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使いやすいですね

くないアニメ制作過程

spineはじめました3(メッシュ編)の、作業過程を録画してみました。手際が悪いところはカットしてあります~www.youtube.comofficemove.hatenablog.com 1、メッシュでZ軸回転させる ↑↑↑ここまでブログ参照↑↑↑↓↓↓ここから動画↓↓↓2、回転させる(回転)3…

spineはじめました6(基礎まとめ)

spineはじめました2 - ムーぶろ spineはじめました3(メッシュ編) - ムーぶろ spineはじめました4(ボーン、ウェイトアニメ編) - ムーぶろ spineはじめました5(IK編) - ムーぶろ 上記記事で紹介しましたがいかがでしたでしょうか?基礎を組み合わせ…

spineはじめました5(IK編)

作業分担紹介編こちらでちらっと登場した「IK」を紹介しますIKとは、インバースキネマティクスの略です。難しい単語の解説はとりあえず飛ばします。目標のポイントを決めると、そのポイントに合わせて関節部分が動きます。オレンジ色のポイントに向かって関…

spineはじめました4(ボーン、ウェイトアニメ編)

作業分担紹介編こちらでちらっと登場した「ボーン機能」を紹介しますまずは、パーツをバラバラに用意し、スパイン上で合体します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ここの「Tools」の「作成」から、キャラクターの骨組みを想像しながら、合体し…

spineはじめました3(メッシュ編)

作業分担紹介編こちらでちらっと登場した「メッシュ機能」を紹介します わかりやすいようにこちらの一枚絵を使用して 「メッシュ編集」から、まずは輪郭をなぞって形を縁取るようにポイントを打ちます。↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ もしこの…

spineはじめました2

officemove.hatenablog.com 以前こちらの記事で紹介したアニメーションについてどういう風に作られているのか、機能を限定して書きたいと思います!回転、トランスレート、スケール、Shear機能を組み合わせて作ってます。 youtu.be でもこれだけだと、ただの…

検索と置換

意外とあっても気づかない機能紹介ツリーの右から3番めのアイコンをクリックするとオブジェクトの名前を検索できます。 これですねコレ。↓↓ ファイル名に「_」とか、組み込むときに邪魔な場合があるのでその時に使うと便利かもしれないですね。

tranceformのショートカットキー(ホットキー)

tranceformに限った事じゃないんですがマウスマーソル合わせてるとホットキー教えてくれるんですね。意外に気づかないかも。 tranceform一番使う気がするので、ホットキーメモ。C:回転 V:トランスレート X:スケール Z:Shear

spineはじめました

2Dアニメから3Dぽくアニメできるソフト「spine」でアニメ作ってみました。 スパイン(spine)とは……この1枚絵が……… ↓↓↓↓↓↓↓↓↓↓ なんか3Dっぽく動く!!!!2Dが3Dに!?えっなんかすごい! そんなカンジのを作れるソフトです。大分ざっくり書きましたが…