Spine アーカイブ

[Spine] キャラクターの目を細める（目パチ前後）の作り方

目パチの閉じる部分は閉じた目の素材を別で用意して切り替えますが、その前後の半目状態の作り方をいくつか記載します。見本ではSpineを使用していますが2Dイラストアニメであれば基本的に同様の作り方になるかと思います。 ①目全体をスケールでつぶす一番簡単で雑な方法です。この方法で半目にしてもあまり気にならないようなイラストの内容だったり、半目状態になる1Fのためだけに丁寧にセットアップするのは割に合わないな、というときに簡易的に使います。眼を閉じる動きの際に目の下部分が

[Spine] 別プロジェクトからデータを移す方法

2つのプロジェクトを1つに合体させたい時の方法です。 ①[事前準備] PNG名が被らないようにリネーム合体させる際にimages内のPNGデータも同じimagesフォルダ内に格納することになります。データ名が被らないように事前にリネームしておくか、もしくは最初からimages内にもう一つフォルダを作成してその中に素材をまとめておくと合体させる際に楽かと思います。 ②images内データの統合どちらでも構いませんが合体させる際にベースにするプロジェクトデータと読み込むプロジ

はじめての2Dエフェクトアニメ制作

ツール問わずエフェクトアニメの基本的な作られ方、クオリティを上げる基本的な方法を記載します。エフェクトアニメの構造SpriteStudio公式サイトの爆発エフェクトのサンプルデータを使用します。エフェクトアニメは複数の要素を組み合わせて作られています。要素を分解して並べました。これを一つずつ作成して最後にタイミングを合わせて重ねて作っていきます。クオリティを上げるヒントグラフでカーブを調整する等間隔だと機械的な動きになるので少しカーブをつけるだけでもなめらかで自

Spine動画書き出し方法 / MediaEncoderを使用したmp4変換

エクスポート(書き出し)Ctrl+E（ショートカット）　or　左上Spineロゴ＞エクスポート動画素材として使用する場合、またはサンプルとして見本データを用意する場合は動画(avi、mov)かpng連番で書き出すことになると思います。エクスポートの主な設定左側からaviやmovの動画形式、png(連番)やgifなど書き出したい形式を選択します。「ビューポート：切り抜く」チェックマークONで自動的にトリミングされる。アニメを調整した後に再度書き出す際はチェックマー

はじめての2Dキャラアニメ制作

Spineを使用して2Dキャラアニメを制作する際の基本的な手順を説明します。細部の仕様はSpine専用な部分もありますがキャラアニメ制作に関する内容はSpineに限らず共通のものになります。 [Spine] アニメ作成の下準備「自動キー」ON 絵を動かした際に自動的にキーが打たれるようになるので必ずON。すべてのボーンにキーを打っておくデフォルトポーズを記憶しておくためにも最初にすべてのボーンにキーを打っておくと作りやすいです。手順①　「ボーン」フィルターON こ

[Spine]便利機能メモ

実際に業務で作業している時によく使用する機能のメモです。表示順序便利機能というより基本として必ず使用する機能になりますが、素材の表示順を変更する際に使用します。表示順序内で上にあるスロットほど上に来ます。ドラッグ＆ドロップで好きな順序に変更できます。アニメ化画面では表示順序を変更することでキーが打たれます。オフセット「ループする動きの周期をズラす」機能です。ループアニメを作成する際には必ず使用します。例として周期をズラしていない状態とズラした状態を比較します。袖の

[Spine]エフェクトの作成

エフェクト素材画像の読み込み＞配置画像素材をフォルダに格納キャラのテクスチャと同様にエフェクトのテクスチャを「Images」フォルダに格納します。キャラ画像のpngと分けておきたい場合は「Images」フォルダ内に「Effects」フォルダを作成してその中に格納しても良いです。 Spine上に配置設定画面のツリーの下の方になる「イメージ」内から追加した素材をrootの下にドラッグ＆ドロップ、スロットが作成されます。エフェクト画像もキャラ画像同様にボーンにセットしない

[Spine]セットアップ④「メッシュとウェイトの作成」

メッシュとウェイトメッシュテクスチャを揺らしたり歪めたり変形させるための下準備をアタッチメントに行うことです。ウェイトメッシュに対してどのボーンを動かしたときによく動くか、もしくは動かないかの比重を設定することです。 Spineで絵をぐにぐに揺らしたりする動きはこの2つの設定によって可能になります。メッシュの作成メッシュの手順 ①メッシュを作成したいアタッチメントを選択 ②下部の「メッシュ編集」を選択メッシュは揺らしたいアタッチメントに対して作成するものなの

[Spine]セットアップ③「ボーンとIKの作成」

生身の人間で考えればアタッチメント（png画像）が肉、ボーンは骨になります。骨が無いと動くことができないので骨組みをしていきます。ボーンの作成画面左下部の「ポーズ」「ウェイト」「作成」ボタンの一番下の「作成」がボーン作成ボタンです。ボーンを絵に合わせて作成して配置します。下の画像は一通り配置し終えた状態です。後から直すこともできますので最初はひとまずアタッチメントに合わせてボーンが必要そうなところに作成していきます。大まかな作成順としてはまず腰あたりに重心となるボーンを作

[Spine]セットアップ②「Spineに絵素材を読み込む」

SpineにインポートSpineを起動して左上のSpineロゴをクリック＞データインポート　ウインドウが開くのでファイル欄で先ほど書き出したjsonを選択。画面の見方ざっとですが各要素の説明です。ボタンにカーソルを数秒置いているとボタンの機能の説明とショートカットキーをポップで教えてくれます。個人的には「回転」「スケール」「トランスレート」と、「再生」「保存」ぐらいしかショートカットは使用していません。フィルター機能ツリーウインドウの上部にあるフィルターボタンで

[Spine]セットアップ①「絵素材の用意」

セットアップの工程①絵素材の用意 ②Spineに絵素材をインポート ③ボーンの作成 ④メッシュの作成、ウェイトの設定 Photoshopを使用した絵素材作成 SpineにはPhotoshop用のスクリプトが用意されているので基本的にPhotoshopを使用します。制作物の都合でPhotoshopを使用できない場合もあると思いますので次の記事でPhotoshopを使用しない方法を記載します。パーツ分けデータの作成キャラの絵素材をパーツごとに分解してレイヤー分けを行いま

フォローしませんか？

#ゲーム