ムーぶろ

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

【spine】メッシュトレーシング

Spine 3.8がリリースされました!イメージの外枠を自動で生成してくれます。 https://moblogimage.tumblr.com/post/187112413492/spine%E3%83%A1%E3%83%83%E3%82%B7%E3%83%A5%E8%87%AA%E5%8B%95%E7%94%9F%E6%88%90 「メッシュ編集」→トレースから始められま…

【spine】IKコンストレイント設定_ストレッチ

IKの設定、ストレッチ編です!ボーンが伸びきった時、突っかからずに伸びる処理を入れることができます。ミックス編は下記記事を参照してください。↓↓↓↓↓↓IKの使い方はこちら↓↓↓↓↓↓ コンストレイントを設定し、設定画面でストレッチにチェックマークを入れま…

【spine】IKコンストレイント設定_ミックス

IKコンストレイントの設定で、ボーンについて行く影響率(ミックス)を設定できます。なめらかになります。通常のIKの設定についてはこちら↓↓↓コンストレイントを選択し設定ボタンのミックスで数値を設定できます。(0~100) 同じ動きをするターゲットでミック…

【spine】長尺イージングについて

spineは長尺でイージングのあるアニメは苦手なようできれいに再現できず急に加速したり止まったりしてしまいます。参考動画①↓ https://moblogimage.tumblr.com/post/185677239518/httpofficemovehatenablogcom とくに最初と最後のゆっくり部分に違和感が残り…

【spine】PhotoshopToSpine項目日本語化

英語が破滅的にだめなので[PhotoshopToSpine]の設定項目を勝手に日本語化しました。 単純に書き出しまでは確認済みです。やるのは&やったあとは自己責任です! [PhotoshopToSpine.jsx]をテキストエディタで開き、英語部分を検索して日本語に置換するだけで…

【spine】テクスチャアトラス節約の画像分割について

ゲーム開発などでアニメを作る際、クオリティのほかに画質を下げずに容量を小さく抑えるかということも重要になってくると思います。なるべく画質がよく、容量が軽くすむ画像分割の仕方について書きたいと思います今回は髪の毛を例えにしてみたいと思います…

【spine】過去作品手直し②

下記記事の続きになります! 太もも部分のメッシュが気になったので修正です! before ↓↓↓↓↓↓↓after ①の胴体部分ほど不便さは感じないのですが膝部分のメッシュの少なさが気になったので増やしました。太ももは布で隠れるので、もっとシンプルでもよいかもし…

【spine】過去作品手直し①

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

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

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

【Animate】 Animateを使用したmp4書き出し<効果編>

下記ブログの追記で、Adobe Animate CC の効果がAdobe Aftereffectでも適応されるのかを確認しました。Animate でピンクの●に[スクリーン]効果を付けたものSWF書き出しは、このように表示されました。 Aftereffectでflaファイルを読み込みました。効果は反映…

【Animate】 Animateを使用したmp4書き出し

いつもはspineの機能紹介がメインですが 今回は、Adobe Animate CCを使って動画(mp4)を制作する際に気を付けるポイントを説明したいと思います。---------------------------------------------------------------- ◆制作使用ソフト◆Adobe Animate CC (制作) …

【spine】PhotoshopToSpine

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

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]を押すとメッシュ編集中のオブジェクトのみ表示されます。 追記(2019/05/21)新しいバージョン(3.7)にてメッシュが打ちやすくなったのでご参考ください! officemove.hate…

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上で素材を読み込んで、ガイドを置き、位置を合わせる…といった工程が無くなり便利です。2019.1.29 追記。書き出すだけなら「Spine Layer ToPNG」もできますが「Photo…

spine エフェクト2

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