Xprite - マニュアル

Xpriteとは

Xpriteは、各種ゲームに組み込むアニメーションデータを作成できるツールです。
難しい制御を行わなくても、ポーズを組み立てるだけで簡単にアニメーションを作成することができます。

Xpriteのアニメーション

Xpriteでは、キーフレーム方式のアニメーション編集を採用しています。各パーツ（ノードと呼びます）の座標、回転、拡大縮小を組み合わせてポーズを作り、ポーズ間を自動で補間することでアニメーションを実現します。

出力形式

Xprite上で編集したファイルは、独自形式のXPRファイルとして保存されます。
そのほか、各フレームを画像として出力する連番PNGエクスポート、WOLF RPGエディター向けのウディタエクスポート、吉里吉里/KAG向けの吉里吉里エクスポートをサポートしています。

Xpriteで使用できる画像

Xpriteで使用できるフォーマットは、bmp(Bitmap)、png(Portable Network Graphics)です。
尚、ARGB(255, 255, 0, 255)は、カラーキーとして予約されているので、使用することはできません。

制作の流れ

Xpriteでのアニメーション制作の流れは、以下の通りです。

1.素材を用意する

2.プロジェクトを作成する

3.ノードを設定する

4.基本ポーズを組み立てる

5.総フレーム数を決める

6.中間ポーズを組み立てる

7.再生確認

1.素材を用意する

まず、アニメーションのノード用画像を準備します。
サンプルを参考に、動かしたいノード単位で画像を別々に用意してください。ノード用画像は、幅と高さが等しい（正方形）画像が推奨されます。
ノード用画像が正方形でない場合、Xprite内部で自動的に正方形になります。

ノード用画像として使用できるフォーマットは、bmp(Bitmap)、png(Portable Network Graphics)です。

2.プロジェクトを作成する

Xpriteを起動し、新規作成を選択します。


新規作成すると、まずはキャンバスサイズを設定します。このキャンバスサイズは後で変更可能ですので、適当な大きさを入力してください。


新しいプロジェクトが作成されました。

詳しい画面の見方は、画面の見方を参照してください。

3.ノードを設定する

ノードリストに、あらかじめ用意したノード用画像ファイルをドラッグ＆ドロップして追加します。


ノードの並び替えと、親子関係を設定します。
子ノードに設定されると、親ノードの移動と回転に連動するようになります。
一般的に、体の構造に合わせて親子関係は設定されます。

4.基本ポーズを組み立てる

追加されたノードは全て非表示になっているので、必要であれば、メインウィンドウから全てのノードを表示します。


各ノードを操作し、基本となるポーズを組み立てます。

ノードの操作方法は、キャンバスの操作、またはキーボード操作を参照してください。

ここまでのファイルを別途保存しておくと、同じキャラクタで異なるアニメーションを作成する際に便利です。

5.総フレーム数を決める

フレーム操作ウィンドウで、アニメーションの長さを設定します。
FPS30の場合、30フレームで1秒になります。


総フレーム数を決定した後、基本ポーズを最終フレームにコピーしておくことを推奨します。

キーボード操作のFキーで、現在のフレームを最終フレームにコピーすることができます。

6.中間ポーズを組み立てる

フレーム操作から適当なフレームへ移動し、中間ポーズを組み立てます。

このとき、フレーム操作ウィンドウの「中間キーを取得」ボタンを押すと、補間ポーズを取得できます。
中間キーをベースにポーズを組み立てると簡単です。

7.再生確認

メインウィンドウの再生ボタンを押すと、アニメーションが再生されます。
アニメーションを止めるには、一時停止ボタンを押すか、再生ボタンをもう一度押してください。

メインウィンドウでFPSを変更すると、再生スピードを変更することができます。

各ウィンドウの名称

1.メインウィンドウ

Xpriteのメインウィンドウです。ファイルの操作、各ウィンドウの表示操作などを行います。

2.キャンバスウィンドウ

プレビューを行うウィンドウです。ハンドルUIを表示すると、マウスでノード操作を行うことができます。

3.ノードリストウィンドウ

ノード一覧です。ノードの親子関係を設定することができます。

4.ノード情報ウィンドウ

現在選択しているノードの詳細情報です。各数値を直接入力することで、ノード操作を行うことができます。

5.フレーム操作ウィンドウ

アニメーションのフレームを操作するウィンドウです。現在のフレームの切り替え、キーのコピーなどを行うことができます。

メインウィンドウメニュー

1.新規作成

現在編集中のプロジェクトを破棄し、新しいプロジェクトを作成します。

2.開く

XPRファイルを開きます。

3.上書き保存

編集中のファイルをXPR形式で保存します。

4.バウンディングボックスの表示/非表示

ノードのバウンディングボックス（正方形線）の表示/非表示を切り替えます。

5.ハンドルの表示/非表示

ハンドル操作用UIの表示/非表示を切り替えます。

6.フォーカスエリア

フォーカスエリアです。フォーカスがあると黄色くなり、キーボード操作が有効になります。

7.キャンバスウィンドウ表示/非表示

キャンバスの表示/非表示を切り替えます。

8.ノードリストウィンドウの表示/非表示

ノードリストの表示/非表示を切り替えます。

9.ノード情報ウィンドウの表示/非表示

ノード情報の表示/非表示を切り替えます。

10.フレーム操作ウィンドウの表示/非表示

フレーム操作の表示/非表示を切り替えます。

11.全てのノードを表示ボタン

現在のフレームで、全てのノードを一括して表示状態にします。

12.再生ボタン

アニメーションの再生を開始します。

13.一時停止ボタン

アニメーションの再生を中断します。

14.表示倍率設定

キャンバスの表示倍率を1倍〜8倍の間で設定します。

15.FPS（再生スピード）設定

アニメーションの再生スピードを設定します。
原則として、FPS30での編集が推奨されます。

キャンバスの見方

キャンバスには、現在のフレームのプレビューが表示されます。
バウンディングボックスの表示が有効になっている場合、各ノードのバウンディングボックスが表示されます。
ハンドルUIが有効になっている場合には、現在選択されているノードにハンドルが表示されます。

キャンバス上の操作

ノードの選択

キャンバス内のノード画像をクリックすると、そのノードを選択します。

ノードの平行移動

ハンドルUIを表示中、ハンドルUI中央の矢印上でドラッグすると、ノードを平行移動することができます。

ノードの回転

ハンドルUIを表示中、ハンドルUI外周の円部分でドラッグすると、ノードを回転させることができます。

ノードの拡大縮小

ハンドルUIを表示中、ハンドルUIの四角の線分上でドラッグすると、ノードを拡大縮小させることができます。
ノードの拡大縮小は、X軸方向、Y軸方向を個別に行います。

ノードリストの見方

ノードリストには、作成中のアニメーションで使用する全てのノード画像がリスト表示されます。
また、罫線（└）とインデントによって、各ノードの親子関係が示されます。

ノードリスト上の操作

ノードリストでは、ウィンドウ上部にあるボタンを用いて操作を行います。

ノードの入れ替え

上矢印ボタン、下矢印ボタンで、ノードの順番を入れ替えます。

ノードの子化

Childボタンを押すと、選択中のノードが子化（インデント進む）されます。

ノードの親化

Parentボタンを押すと、選択中のノードが親化（インデント戻る）されます。

ノードの削除

Deleteボタンを押すと、選択中のノードをリストから削除します。
この操作はやり直せず、ノードに割り当てられた全てのキーが削除されます。

親子関係

親子関係とは、各ノードの追従関係のことです。
子ノードは、親ノードの平行移動と回転に追従して動きます。

ひとつの親ノードが複数の子ノードを持つ、子ノードが更に子ノードを持つことも可能です。

各ノードの親子関係は、罫線（└）とインデントによって示されます。

例：pelvisとbreastの表示

pelvis
└breast

このとき、pelvisはbreastの親ノードとなり、（breastはpelvisの子ノード）
breastノードはpelvisノードの動きに追従することになります。

ノード情報の見方

ノード情報ウィンドウには、現在のフレームにおける、選択中のノード情報が表示されます。

ノード名

ノードリストに表示されるノード名が表示されます。
このノード名は、自由に変更することができます。
ノード名下部には、ノード画像のディレクトリが相対パスで表示されます。

Visible

ノードの表示/非表示設定です。

XとY

ノードの座標です。（Pixel単位）

角度

ノードの回転角度です。（0〜359Degree）

倍率

ノードの拡大率です。

描画順

ノードの描画順です。数字が小さいほど、上に表示されます。

RGB

ノードの色です。設定されたRGB値が、ノードの色に乗算されます。

ノード情報の操作

ノード情報ウィンドウで直接数値を入力することで、ノードを操作することができます。

フレーム操作の見方

フレーム操作ウィンドウでは、現在のフレームの変更や、総フレームの変更、
フレームキーへの操作を行うことができます。

キーを削除

現在のフレームにキーが設定されている（ポーズが設定されている）場合、
現在のフレームのノード情報を全て削除します。

中間キーを取得

現在のフレームにキーが設定されていない場合、
前後のフレームキーを線形補間したポーズを取得し、キーを設定します。

コピー

現在のフレームキーをコピーします。

ペースト

コピーしたフレームのフレームキーを、現在のフレームにペーストします。

現在のフレーム

トラックバーを左右させることで、現在のフレームを切り替えることができます。

総フレーム数

アニメーションの総フレーム数を設定できます。
総フレーム数を少なくする際、新たに設定される総フレーム数以降に設定された
フレームキーは削除されます。

ユーザデータ

各フレームに対して、ユーザが自由に値を設定することができます。
主に、エクスポートで使用される値になります。

タイムライングループ

後述

タイムライングループについて

　

バージョン1.14より、ノードごとに編集タイムライングループが指定できるようになりました。
ノードごとにグループを分けることで、別々のキーフレームでアニメーションを編集することができます。

編集タイムラインの変更

キーフレームの削除やコピーは、タイムライングループごとに操作されます。
現在の編集タイムラインを変更するには、フレーム操作ウィンドウの格子部分をクリックします。

キーボード操作の仕方

キーボード操作を行うには、メインウィンドウのフォーカスエリアにフォーカスがある（黄色くなっている）必要があります。



フォーカスのない状態では、キーボード操作は受け付けません。

キーボード操作一覧

テンキー	ノードの移動
テンキー + Alt	ノードの回転
テンキー + Ctrl	ノードの拡大縮小
H	ノードの表示/非表示切り替え
Home/End	描画順の増減
A（+ Shift）	編集ノードの切り替え
U	ノードリストを上に
D	ノードリストを下に
W	ノードを子にする
Q	ノードを親にする
PageUp	フレーム進む
PageDown	フレーム戻る
C	現在のフレームキーをコピー（参照コピー）
V	フレームキーをペースト
F	現在のキーを最終フレームにコピー＆ペースト
I	中間キーを取得

その他のショートカットキー

Ctrl + Z	やり直す
Ctrl + Alt + C	キャンバスサイズの変更
Ctrl + N	プロジェクトの新規作成
Ctrl + O	プロジェクトを開く
Ctrl + S	プロジェクトを保存
Shift + Ctrl + S	プロジェクトを別名で保存

リグとは

リグとは、倍率と画像を持たないノードです。

他のノードと親子関係を設定することで、コントロールポイントとして利用できます。
リグは、ノードリストの「Add Rig」ボタンを押すと、追加することができます。
移動や回転、削除や親子関係の設定など、操作方法はノードと同様です。

リグはキャンバス上で、白い×印で表示されます。

リグの効果的な使い方

リグは、関節を表現する際に使用すると効果的です。

リグを使うことで、回転の中心位置を変更することができます。
回転の中心位置を変更すると、「肘の関節を軸に回転する」、「多関節の動きを制御する」などといった、
より直感的なポーズ設定が容易になります。

左）ノードベースの関節回転

そのままだと、肘が離れてしまっているので、平行移動の調整も必要になります。

右）リグベースの関節回転

肘部分にリグが設定されているので、肘を中心に回転させることができます。

連番PNGエクスポート

保存時に指定した名前に、アンダーバーと数字を加えた連番PNGファイルとして出力します。
PNGファイルは、フレーム数分出力されます。

GIFエクスポート

背景色とループ回数を設定し、GIFアニメーションとして出力します。
GIFアニメーションの再生速度は、現在のFPSを元に決定されます。

ファイルサイズ削減の為、その他の操作のトリミングで、余分なピクセルを削除することをおすすめします。

吉里吉里/KAG向けエクスポート

吉里吉里/KAG内で、Xpriteで作成したアニメーションを再生させる為の画像ファイルとスクリプトを出力します。

PNG画像	全フレームを1枚にまとめた画像です。
ASDスクリプトファイル	アニメーションの再生用スクリプトです。

アニメーションの再生には、別途「吉里吉里」本体と、アニメーション再生プラグインが必要です。

アニメーション再生プラグインは、ゲーム制作サークル「LR」様のホームページより入手できます。

ゲーム制作サークル「LR」

Home > 制作者支援 > 吉里吉里プラグイン　より

WOLF RPGエディター向けエクスポート

WOLF RPGエディター内で、Xpriteで作成したアニメーションを再生させる為のフォルダ、ファイルをまとめて出力します。

Xprite.exeと同じフォルダに、自動的に「Data」フォルダが作られます。
Dataフォルダごと、WOLF RPGエディターにコピーしてください。

アセット名	ノード画像の保存先フォルダ名です。アニメーションするキャラクタ名にしておくと分かりやすいです。
モーション名	モーションの名前です。アセット名が異なれば、同じモーション名を設定することができます。
次モーション名	モーションの再生が終わった際に、次に再生されるモーション名です。 攻撃モーションの次は待機モーション、など、モーションツリーの設定が可能です。
ループ再生する	次モーションに、保存するモーション名を指定します。
ガイド交点を原点にする	ガイドの交点座標を、WOLF RPGエディターで指定する描画原点にします。 この指定を行わなかった場合、キャンバスの左上が描画原点になります。

アニメーションの再生には、別途「WOLF RPGエディター」本体と、アニメーション再生コモンが必要です。

アニメーション再生プラグインは、ポカンくん描く語りき様より入手できます。

ポカンくん描く語りき

ノードの一括拡大縮小

全てのノードの倍率を一括で変更します。
各ノード座標も相対的に変更されるので、アニメーションの解像度を変更したいときに便利です。

フレームの拡大縮小

現在のキーフレームの配置を保ったまま、総フレーム数を変更します。
アニメーションの再生スピードをしたい場合に使用します。

トリミング

トリミングとは、キャンバスサイズを現在編集中のアニメーションの最大幅に設定する機能です。
GIF出力などを行う際、余分なデータを削減することができます。

アセットマッパー

アセットマッパーとは、ノード画像の差し替えを行う機能です。
同じモーションを、違う絵のキャラクタにも適用したい際に使用します。

参照ボタンを押して、他の画像ファイルを読み込みます。
リグに画像を割り当てることはできません。

キャンバスサイズ設定

編集中のアニメーションのキャンバスサイズを変更します。
また、ガイド線の位置も変更することができます。

WOLF RPGエディター向けエクスポートでは、ガイド線の交点を描画原点に設定することができます。

色設定

キャンバスの背景色、ガイド線の色を変更することができます。

その他の設定

キーフレームを表示

キャンバス上のフレームガイドについて、表示/非表示を切り替えます。

ガイドを表示

ガイド線の表示/非表示を切り替えます。

常に補間フレームを表示

キーフレーム間の補間プレビューについて、表示/非表示を切り替えます。

ハンドルUIを表示

ハンドルUIの表示/非表示を切り替えます。

リグを表示

リグの位置に表示される×印の表示/非表示を切り替えます。

ノード矩形を表示

各ノードの描画矩形の表示/非表示を切り替えます。

選択ノード以外を半透明で表示

選択中のノード以外を半透明で表示します。

仕様

ノード最大数（リグ含む）	64
ユーザデータ数	4
アンドゥ回数	無制限（実質）
アンドゥ対象操作	ノード操作（ハンドル、コンソール、キーボード）、ノード順序、ノード親子関係
読み込み可能画像フォーマット	*.bmp, *.png
カラーキー	RGB(255, 0, 255)

既知の問題

親ノード回転時の計算誤差問題

原則、子ノードは親ノードの移動、回転に追従しますが、
浮動小数点の計算誤差が累積し、子ノードは徐々に正しく追従しなくなります。

回転操作は、アニメーション内で±360°を目安に留めてください。

この誤差の累積は、画像サイズが小さいノード間の補間で顕著に発生します。
（基準値が小さいと、桁落ちした実数値が与える影響が大きくなる為）
その際は、全体のノード倍率を上げるなど、十分なノードの大きさを確保してください。

変則拡大と回転の問題

X倍率とY倍率に異なる値を入れた状態で回転を行うと、
ノードが設定倍率と異なる変形を行っているように表示されます。
（グローバル変換順序の問題）

原則として、変則的な倍率と回転を同時に行わないようにしてください。

円周補間の問題

キーフレーム間の補間は、全て直線補間で行われます。
その為、多関節で設定されたノードを回転させても、子の補間が弧を描きません。

大きな角度を回転させる際には、必要に応じて中間フレームで調整を行ってください。

免責事項

本マニュアルに使用されているスクリーンショットは、全て開発中のものです。
実際の画面と一部異なる場合がございますので、あらかじめご了承ください。

本ソフトウェアは個人・法人に限らず、自由に使用することができますが、著作権は全てSTUDIO yu-が保有します。

本ソフトウェアを使用した事によるいかなる損害も、作者及びSTUDIO yu-は一切の責任を負いかねます。
広告のクリック先に関しまして、作者及びSTUDIO yu-は一切の責任を負いかねます。

本ソフトウェアは、アクティブユーザ数の把握、円滑なアップデートを目的として、起動時にネットワーク通信を行います。
あらかじめご了承ください。
尚、IPアドレスを含む利用者様の個人情報は、一切サーバに保存されません。