技術
初めてspineで制作したアニメーションを久々に見返したところメッシュや変形アニメーションで改善できる部分が見つかったので過去の自分の作品から、どう改善した方がよいか?という事を記事にしていきたいと思います。初期作品(2016年11月)▽▽▽ まずは、素材…
spineのメッシュ変更に新しい項目ができたので、それについて書きたいと思います!(ver 3.7) 新しく追加された項目は「三角形」「減光」「分離」の3個です。 ◆三角形内部のエッジをみやすくするために、三角形の線を非表示、表示します。 丸いものなど立体…
このスクリプト PhotoshopToSpine は、Photoshopでレイヤーを画像として書き出し、Spineで同じ位置、同じレイヤー順で取り込むJSONを書き出すことができます。spineの制作準備段階、時間短縮で必須となってくるので是非参考にしてください! 同じ機能ような…
以下の動画のように、キャラが持っている武器や装備を切り替えることのできる機能を紹介します。 ①SETUPのツリー「スキン」→「新規スキン」から作ります ②名前を付けます ③武器分の数を作ります(今回は2個) ④武器を置きたいボーンに、「スキンプレースホルダ…
この水の入ったボウル水部分を動かそうとすると、 ボウル前面、水、その奥と3枚の画像が必要になるかと思うのですが陰も使用してないし、めんどくさいのでこの1枚だけで済ませたいと思います。 上記のようにメッシュを打ちます。線画がくっきりしているので…
制作環境:Windows10 Spine 3.6.47下の餅つきアニメですが、画像切り替え、メッシュ変形を使用して作っています。それについて解説記事を書いたらつなげていきたいと思います!◆このアニメのtips!まとめ◆ ・スロットに画像複数入れて切り替える(予定) ・ボー…
メッシュを編集しているときに、重なっている部分が見えなくて打ちづらい場合[Tab]を押すとメッシュ編集中のオブジェクトのみ表示されます。 追記(2019/05/21)新しいバージョン(3.7)にてメッシュが打ちやすくなったのでご参考ください! officemove.hate…
揺れ物の簡単な作り方紹介します。即席サンプルで作ったハムスター。 Before ↓↓↓↓↓↓↓↓After 揺れ方が自然に見える調整のしかたです。 ------------------------------------------------------------------------------------------------マフラーをとりあえ…
犬(四足歩行)モーションです!ボーンは、実際の犬に合わせて入れました。作り方としては、四足歩行は前後でずれている歩き方なので同時に動くモーションをつけ、そのあとずらせば作りやすいと思います。 下っ腹と、足の付け根が動くように太ももの骨にウェイ…
上記の記事の続きです。書き出したJSONファイルをSpineのデータインポートで読み込みます。※注意:Photoshopでレイヤー名に日本語名を入れていると読み込めません。New Projectにチェックを入れなければ、既存ファイルにスケルトンを追加して製作することが…
「Spine Layer ToPNG」というスクリプトがあります。このスクリプトを使えば、いちいちSpine上で素材を読み込んで、ガイドを置き、位置を合わせる…といった工程が無くなり便利です。2019.1.29 追記。書き出すだけなら「Spine Layer ToPNG」もできますが「Photo…
炎エフェクト実験中です。 この2枚使用しました
今まで記事に使用したキャラクターのスプライトシート一覧です。 忍者 カッパ 妖精 SD女の子
いつもは1枚絵にモーションを付けていましたが今回は2枚使い、絵を切り替えて攻撃モーションを作りました ゲームで使用する前提で制作したのでボタンを押したとき瞬時に攻撃できるよう予備動作は短めです。 歩く、走る編 待機編 officemove.hatenablog.com
以下記事では待機アニメを制作しましたが、 今回は走り、歩きといったアクティブなモーションを付けました。 歩く、走る 上半身のひねりなどは、メッシュで調整しています。
今回はこのキャラを使ってアニメさせたいと思います。 髪の毛やスカートなど、揺れものが多いキャラなのでその部分の構造を… 原理的には下の2つの記事と同じで、ボーンにウェイトを仕込み動かしています。 spine アルパカ - ムーぶろ spineはじめました4(…
officemove.hatenablog.com 前回の記事からの続きです。絵の分割に限界を感じたので下記に細かく別けてみました。 違和感まあまあ抑えられる感じになりました。360度回転+上下回転でランダムな動きに
Spineでどこまで3Dのように動かせるのか?と思いとりあえずサイコロ(キューブ)を回転させてみることに。 裏、表の2種類の絵を用意 メッシュ打てばどうにかなるだろ!と、とりあえずやってみろ精神の結果 ゆがんでいる…遠近感を出すためにメッシュがよれてい…
spineバージョン3.6.01で[Split]ボタンがTreeビューの下に追加されました。 ボーンを指定した数に分割する機能でたとえば、このヒレのボーンを分割したいときはボーンを選択し[Split]ボタンを押します ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 設定ウィンドウが…
今まで、イラストのみでアニメしていましたが今回は写真を素材にアニメさせました。↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ 素材は、私が以前飼ってたピンポンパールちゃんです!(左) ビチビチ
スパインだけでの長尺アニメ物はなかなか使いにくいのでスパインでPNG画像を書き出しFLASHで画像入れ子でアニメをつなげてみました。 spineはループ単体ものだといいんですけどほかのシーンとの組み合わせ安さは、FLASH使いやすいですね
spineはじめました3(メッシュ編)の、作業過程を録画してみました。手際が悪いところはカットしてあります~www.youtube.comofficemove.hatenablog.com 1、メッシュでZ軸回転させる ↑↑↑ここまでブログ参照↑↑↑↓↓↓ここから動画↓↓↓2、回転させる(回転)3…
spineはじめました2 - ムーぶろ spineはじめました3(メッシュ編) - ムーぶろ spineはじめました4(ボーン、ウェイトアニメ編) - ムーぶろ spineはじめました5(IK編) - ムーぶろ 上記記事で紹介しましたがいかがでしたでしょうか?基礎を組み合わせ…
作業分担紹介編こちらでちらっと登場した「IK」を紹介しますIKとは、インバースキネマティクスの略です。難しい単語の解説はとりあえず飛ばします。目標のポイントを決めると、そのポイントに合わせて関節部分が動きます。オレンジ色のポイントに向かって関…
作業分担紹介編こちらでちらっと登場した「ボーン機能」を紹介しますまずは、パーツをバラバラに用意し、スパイン上で合体します。 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ここの「Tools」の「作成」から、キャラクターの骨組みを想像しながら、合体し…
作業分担紹介編こちらでちらっと登場した「メッシュ機能」を紹介します わかりやすいようにこちらの一枚絵を使用して 「メッシュ編集」から、まずは輪郭をなぞって形を縁取るようにポイントを打ちます。↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ もしこの…
officemove.hatenablog.com 以前こちらの記事で紹介したアニメーションについてどういう風に作られているのか、機能を限定して書きたいと思います!回転、トランスレート、スケール、Shear機能を組み合わせて作ってます。 youtu.be でもこれだけだと、ただの…
意外とあっても気づかない機能紹介ツリーの右から3番めのアイコンをクリックするとオブジェクトの名前を検索できます。 これですねコレ。↓↓ ファイル名に「_」とか、組み込むときに邪魔な場合があるのでその時に使うと便利かもしれないですね。
tranceformに限った事じゃないんですがマウスマーソル合わせてるとホットキー教えてくれるんですね。意外に気づかないかも。 tranceform一番使う気がするので、ホットキーメモ。C:回転 V:トランスレート X:スケール Z:Shear
2Dアニメから3Dぽくアニメできるソフト「spine」でアニメ作ってみました。 スパイン(spine)とは……この1枚絵が……… ↓↓↓↓↓↓↓↓↓↓ なんか3Dっぽく動く!!!!2Dが3Dに!?えっなんかすごい! そんなカンジのを作れるソフトです。大分ざっくり書きましたが…