ムーぶろ

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

spine

【spine】過去作品手直し①

初めてspineで制作したアニメーションを久々に見返したところメッシュや変形アニメーションで改善できる部分が見つかったので過去の自分の作品から、どう改善した方がよいか?という事を記事にしていきたいと思います。初期作品(2016年11月)▽▽▽ まずは、素材…

【spine】メッシュ編集ウィンドウ機能紹介

spineのメッシュ変更に新しい項目ができたので、それについて書きたいと思います!(ver 3.7) 新しく追加された項目は「三角形」「減光」「分離」の3個です。 ◆三角形内部のエッジをみやすくするために、三角形の線を非表示、表示します。 丸いものなど立体…

【spine】PhotoshopToSpine

このスクリプト PhotoshopToSpine は、Photoshopでレイヤーを画像として書き出し、Spineで同じ位置、同じレイヤー順で取り込むJSONを書き出すことができます。spineの制作準備段階、時間短縮で必須となってくるので是非参考にしてください! 同じ機能ような…

spine スキン機能

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

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

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

spine ボーン作り直し

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

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

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

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

メッシュを編集しているときに、重なっている部分が見えなくて打ちづらい場合[Tab]を押すとメッシュ編集中のオブジェクトのみ表示されます。 追記(2019/05/21)新しいバージョン(3.7)にてメッシュが打ちやすくなったのでご参考ください! officemove.hate…

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

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

spine 犬歩行

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

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

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

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

「Spine Layer ToPNG」というスクリプトがあります。このスクリプトを使えば、いちいちSpine上で素材を読み込んで、ガイドを置き、位置を合わせる…といった工程が無くなり便利です。2019.1.29 追記。書き出すだけなら「Spine Layer ToPNG」もできますが「Photo…

spine エフェクト

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

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

spine布のはためきアニメ

今回は布がはためくアニメ制作しました。ボーンやメッシュなど、構成はYouTubeで! 布の端にボーンを入れて、ウエイト調整で動かしているのですが一番手前の波部分はメッシュのみで流れを表現しました。やり方次第ではもっと自然に動かせると思うので随時や…

spine忍者アニメ

上の記事で使用したアニメーションのボーン、メッシュの様子が見れる動画UPしました! www.youtube.com 今は画面キャプチャソフトで録画しています。spineにも、動画書き出しは一応あるんですが上手くいかない…

右クリックで、機能⇔機能切り替え

ホットキーで機能を切り替えられますがマウスの右クリックでも前後に選択した機能を切り替えることができます。例えば、1、回転 2、トランスレートを選択した場合右クリックで回転⇔トランスレートと切り替えることができます!マウスのみの作業で右クリッ…

くないアニメ制作過程

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

スパイン「ストア選択」

ボーンを沢山使うような、髪の毛の束、布などまとめて選択する機会が多いもの、そういう操作は案外時間が掛かりますよね。ストア選択(Store Selection)を使うと時短できます。CTRL+9~0の数字で登録9~0で登録した選択を、再選択できます。 youtu.be

スパイン「Clean Up」

「Clean Up」はご存知ですか?アニメーションを作っていると、動きに影響を与えない余分なフレームキーが増えてくると思いますがその余分なフレームキーを削除してくれる機能が、バージョン 3.5から追加されました。 余分なフレームキーキーとキーの間に線が…

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

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