アセットグラフ

アセットグラフは書き出しを設計する場所、書き出しウィンドウはそれを実行する場所です。アセットステップはスプライトリストをファイルに変え、その方法がグラフです。スプライトリストが入り、シートに配置され、ファイルとして出ていきます。これが3種類のワイヤーで、混同することはありません。リストは配置しないとSheetに接続できず、シートにタグは付けられません。

入力はスプライトノード(外部の画像には画像ファイルノード)で、それぞれがスプライトリストを持ち込みます。カメラが見たアクションを、スタイルで描き、パーツセットを適用し、フレームに切り出し、すべてのレイヤーを付けたものです。スプライトノードはそれらすべてを固定で指定します。ウィンドウヘッダーの選択はノードのものではないので、アセットが書き出す内容が、たまたま表示されているものに左右されることはありません。出力はファイルごとに1つのノードです。シートノードはメモリ上のスプライトシートです。シートを表面に表示するだけで、何も書き出しません。すべてのファイルは、シートから接続されたファイルノードです。シートそのものにはPNG画像、さらにそのJSON、.aseprite、GodotのSpriteFrames、ノーマルマップなどです。スプライトシートを書き出すには、シート → PNGを接続します。グラフには、プロジェクトが書き出すファイルの数だけ、それぞれのノードを置けます。

書き出しに指定できることはすべてノード上にあります。ただし書き出し先のフォルダーは別で、それは書き出しウィンドウが扱います。ウィンドウには、書き出しを押す前に、グラフがそこに書き出すすべてのファイルが名前と種類で一覧表示されます。グラフの変更がファイルにどう影響するかを見る一番の近道です。シートのフレームの名前の付け方はPNG画像ノード(とシートを選んだときのインスペクター)に、レイアウトはそこにつながる配置ノードにあり、そのシートが書き出すほかの各ファイルは、ファイル独自の設定(GIFの拡大率、動画のレート、どの影、どのパレットのバリアント)とともに、シートから接続したファイルノードになります。グラフを一度も接続し直さないプロジェクトは何も保存しません:すべてのスプライトリストを1枚のシートにします。

画像はどのレイヤーでも表示できます。ここでシートの画像の下にあるレイヤーは、描くレイヤーを選びます(指定するまでは、2Dビュー自身のレイヤーが描くもの):スプライト、線、フラットな色、法線、深度、発光、スタイルの追加出力、またはすべてのレイヤーを一度に。フレームなら横に並べ、リストなら1行ずつ表示します。

これが最初のグラフ、アセットパイプラインメインです:

Sprites (every action except Static)  →  Arrange  →  Sheet (sheet)  →  PNG image

ウィンドウのヘッダーの選択肢

アクション、スタイル、アセットは独立したパイプラインです。それぞれが独自のグラフです。ワークスペースのタブの行の右端、再生/一時停止の後に4つの選択(カメラ、アクション、スタイル、アセット)があり、それぞれ1つずつ、すべてのステップに共通で選びます。

ステップ 描くもの
アクション 選んだカメラから見た、選んだアクション
スタイル 選んだカメラから見た、選んだスタイルで描いた、選んだアクション
アセット そのグラフ自身のスプライトノードが指定するもの。ヘッダーの選択ではありません

スタイルリスト(スタイルステップ)とアセットリスト(アセットステップ)は、ヘッダーのスタイルとアセットの選択と同じ選択肢です:どちらでクリックしても同じものが表示されます。書き出しウィンドウは、ヘッダーのアセット選択で選んだアセットパイプラインから始まり、それだけを書き出します。そのファイル名は、すべてのアセットパイプラインを書き出すときと同じです(pxr render --pipeline allですべてを書き出します)。

スプライトリストの出どころ

スプライトリストはここで、スプライトノードによって作られ、ここでしか作られません:どのアクションがシートに入るかは、スプライトノードが取り込むものだけで決まります。スプライトノードは、カメラ、アクション、スタイル、パーツセットを指定し、カット(アクションの動きをどうフレームにするか)を保持します。

そのアクションは次のいずれかです:

  • 静止以外すべて(every-one-except-static。新しいSpritesノード、プロジェクト開始時のアセットパイプライン、新規プロジェクトが使う設定):アクションリストのうち、静止(レストポーズで立っているだけ)以外のすべてのアクション。プロジェクトにほかのアクションがない場合(静止モデル)は静止も含むので、木箱にもスプライトができます。
  • すべて(空、または*):静止を含むすべてのアクション。
  • 名前で指定したアクション(静止も含む):そのアクションだけ、または複数(pxr graph setからのwalk, attack)。Spritesノードが名前を指定したモデルのクリップは、プロジェクトのアクションかどうかにかかわらず描かれます。名前を指定すれば、そのフレームは常にノードの画像、その出力先、書き出しに入ります。

存在しないものを指す名前(別の場所で削除・名前変更されたアクション)は、ノード上にわかりやすい言葉で表示されます:Sway(South)のフレームがありません:Spritesノードで、プロジェクトにあるアクションとカメラを選んでください。

カットはその表面とインスペクターに表示されます:

  • フレーム/秒(fps):何秒ごとに1フレームか。指定するまでは1秒あたり12です。
  • 残すフレーム数(smart):アニメーターが選ぶように選んだ、その数のスマートフレーム:動きが折り返すポーズ、速いところほど多く、それぞれ次のフレームまでホールドします。0でオフ。表面のスマートフレームでオンにし、フレーム/秒を使うで均等な間隔に戻ります。
  • 選択フレーム(picked):手で選んだ秒単位の時刻。Spritesノードを選ぶと、アセットグラフの後ろのタイムラインにそのフレームが表示されます。キーの帯をクリックすると1つ追加または削除し、キーを帯に沿ってドラッグすると動かせます(それぞれ1回の取り消し単位)。ノードの表面にはN frames picked on the timelineと表示されます。

選択フレームがあればそれが優先され、次に保持フレーム、次に毎秒のフレーム数です。グラフに追加したスプライトノードは、グラフの最初のスプライトノードと同じカットで始まります。ノードやキーで作ったアクションは、そのアクション自身のフレームでカットされます。タイムラインのフレームカウンターの横にあるホールド(ms)は、表示中のフレームのホールドを設定します(1フレームを長く保持するを参照)。これはアクションの設定なので、そのクリップを受け取るすべてのスプライトノードがそれを保ちます。アクションステップはこれらの影響を受けません。動き全体を再生し、スプライトのフレームはカットされた時点に置かれます。

SpritesノードとArrangeの間には、リストを切り分けるノードが入ります:

ノード 働き
フレーム範囲 入力のうち、0から数えて開始から終了までのフレームだけを使います。攻撃の予備動作を独立したリストにしたり、待機の1フレームをアイコンにしたり、リストを2枚のシートに分けたりできます。範囲は各フレームが表示していたもの(クリップ内の時間、パーツセット、ルートの移動量)を保ちます。範囲の範囲は入力を基準に数えます。ループの一部はもうループしません。末尾を超える範囲は最後のフレームを保ちます。
ホールド すべてのフレームを指定の倍数だけ長く保持します。2でリストを半分の速さで再生します。
Sprites (South, attack, Pixel Art, smart 6) → Frame range (2 to 5) → Hold (×2) → Arrange → Sheet → PNG image

スプライト、フレーム範囲、ホールドのノードを選ぶと、2Dビューは、そのノードが出力するリストを、書き出されるとおりにカット、スライス、レイヤー化して再生します。どちらのノードもレンダリングのコストはかかりません:ピクセルが生まれる前に、どのフレームをどこに置くかを決めるだけです。

チェーンを再利用するには、Sprites → Frame range → Holdを選んでグループにし(Ctrl+G)、キットを保存…でグループをノードキットとしてマイノードに保存します。またはアセットパイプライン全体をキットとして保存します(アセットパイプラインを参照)。

レンダリングと、そのファイル名

レンダリングは、フレーミング、スタイル、各クリップの切り方からなります。Spritesノードは、これらが一致する限り1回のレンダリングを共有します。同じスタイルで、一緒にフレーミングされ、2通りに切られるクリップがないこと。そのため、毎秒8フレームの歩行と手で選んだ攻撃は、1回のレンダリングで1枚のシートになります。歩行をスマートフレームで切ったり、別のスタイルで描いたりする2つ目のノードは、独自のレンダリングになります。

最初のレンダリングは、グラフが指定する名前でファイルを書き出します。ほかのレンダリングは、最初のものと異なる部分を表す語を付けてその隣に書き出されます:カメラ、スタイルの名前、そして異なるカットをするクリップのカット。8fps(または12_5fps)、smart6、picked4(手で選んだ4フレーム)。つまりout/hero.pngの次にout/hero_smart6.pngとout/hero_Pixel_Art_2_8fps.pngが、それぞれのスタイルのパレットで書き出されます。pxr namesは、各レンダリングのファイルを、フレーム範囲が残すフレームとともに一覧表示します。また、同じクリップの異なる手選び4フレームのカットのように、2つのレンダリングが1つのファイルに書き込む場合は、何もレンダリングする前にwould be written twiceとして拒否します。

スクリプトから:

pxr graph add game.pixor --which asset --node sprites --set action=attack --set smart=6   # node 4, merged in by node 5
pxr graph add game.pixor --which asset --node frame-range --set from=2 --set to=5 --alone --in frames=4   # node 6
pxr graph add game.pixor --which asset --node hold --set times=2 --alone --in frames=6                    # node 7
pxr graph wire game.pixor --which asset --from 7 --to 5 --slot frames2   # the cut attack into the Merge, in place of node 4
pxr graph set game.pixor --which asset --node frame-range --set to=6
pxr project set game.pixor --add-style portrait
pxr graph add game.pixor --which asset --node sprites --set action=walk --set style=portrait --set fps=8
pxr names game.pixor

フレーム範囲とホールドは攻撃のスプライトノードとマージの間に入るので、攻撃だけをカットします。--aloneなしで追加すると、マージの後、配置の前に入り、マージがまとめるすべてのリストをカットします。

pxr render --fps 8、--smart-frames 6、--keys 0,0.25,0.5は、すべてのSpritesノードの切り方を一度に設定します。pxr run game.pixorblueprint --set hold.times=4でブループリントを実行すると、すべてのアセットパイプラインのHoldノードに届き、--set icons/hold.times=4ならパイプラインiconsのものだけに届きます。

パネル

グラフが保存されると、その上の2Dビューに、選んだ出力が書き出す内容(取り出し、ブロック、配置、重ね、オーバーレイ)が、ファイルを書き出すのとまったく同じコードで描かれます。それまでは、アクションと向きごとに1行で表示され、ドラッグで並べ替えられます。

アセットグラフはアセットのステップのパネルで、2Dビューの下、シーングラフと同じキャンバスにあります:ボックス、ワイヤー、各ノードの表面の設定、接続されたチェーンにノードを追加するプラス、ノードを削除するマイナス、全体を表示するフレーム、並べ直す整理、メモを置くメモ、選んだノードを1つのグループにするグループ、選んだグループ(選んでいなければグラフ全体)をキットとして保存するキットを保存…(アセットグラフをキットとして保存)。すべてのグラフにある同じバーと、すべてのグラフに共通のキーです(使ってみる)。左側のノードライブラリには、入力と出力、プロジェクトのパイプラインとマイパイプライン、続いて間と、マイノードの下に自分のキットが並びます。キャンバスを右クリック › シートを1枚に戻すで、元のファイルのまま1枚のシートに戻します。アイコンはインベントリのアイコンを書き出します。下端の行には、グラフが書き出すものが表示されます。バーの先頭にある生成したファイルは、ファイルマネージャーで生成フォルダーを開きます。

アセットステップ:2Dビューのシート、インスペクターのシートノード、下のアセットグラフ

すべてのファイルノードに開くがあります:そのノードのファイルを、システムがその種類のファイルに使うアプリケーションで開きます。シートは画像エディター、.asepriteはAseprite、動画はプレーヤー、アーカイブはアーカイブマネージャーで開きます(ツールチップにどれかが表示されます)。まだ生成されていないファイルや古くなったファイルは先に生成され、その間開くにローダーが表示されます。

アセットノードのすべての設定はプロパティです(ノードを参照):左にポートがある行で、ノード上で設定するか、値から接続します。削除は、マイナスと同じく選んだノードを削除します。書き出す最後のノードは残ります。

リストとファイルの間にあるすべてのノードは、渡すものをシート上に並べて表示します:レイヤーノードはそのレイヤー、フレーム範囲はそのフレーム、反転はその鏡像、配置はそのシート。画像には、Spritesノードが指定するものがすべて表示されます(ウィンドウのヘッダーの表示に関係なく):描かれるすべてのレンダリングの、すべてのカメラ、アクション、スタイル。別々にフレーミングされるカメラ(別のビュー、ピッチ、サイズ)、別のスタイル、別の方法でカットしたクリップは独自のレンダリングで、独自のシートに書き出されます。複数から入力される画像は、シートごとに1ブロックを、書き出し先のファイル名の下に(hero.png、続いてhero_top.png)、そのシートと同じ行の並びで配置します。2Dビューに表示されないレンダリングは、その裏で順番に描かれ、プロジェクトが変わるまで保持されます。あるノードが別のノードの画像を止めることはありません:それぞれ自分への入力だけから配置され、配置できないノード(まだ選ばれていない画像ファイル、何も接続されていないマージ)は、画像の場所に赤字で理由を表示します。その出力先のノードも同様ですが、ほかのノードは自分の画像を保ちます。画像はすべてのリストから、全体を描いて配置されます:選んだフレーム範囲やホールドが2Dビューで1つのリストを再生している間は、最後に全体を描いたリストを保持し、その間に追加されたノードはそこから画像を得ます。その間に描画元の何か(アウトライナーで隠したパーツ、マテリアル、ランプ)が変わると、2Dビューの裏で描き直され、2Dビューは範囲の再生を続けます。すべてのファイルノードは、書き出す前にそのファイルを表示します。書き出しと同じライターで作られ、ノード上にその画像、ノードを選ぶと2Dビューに全体が表示されます:PNGやマップは画像として、GIF、APNG、動画は再生され、JSON、Godotファイル、テキストファイルはテキストとして、ZIPは中身の一覧として表示されます。複数のファイルを書き出すノード(クリップごとのGIF、ファイルごとのレイヤー)には、ビューの上にファイルリストがあります。

高速なファイルと「生成」

すぐに作れるものはグラフの変更に合わせて表示され、時間のかかるものはノードの生成を待ちます(D51)。速いもの:リストとファイルの間のすべて、Sheet、そしてPNG画像、JSON、Godot SpriteFrames、パレット、テキストファイル、エミッションマップ、影のレイヤー、線とフラットのレイヤー。遅いもの:クリップごとのGIF、APNG、動画、Asepriteファイル、ノーマルマップと深度マップ、パレットのバリエーション、ライトキット、PICO-8カートリッジ、レポート、ZIPアーカイブ、アニメーションファイル、アイコン。つまり全フレームをエンコードし直すもの、またはレンダリングするものです。(ペーパードールとパララックスのレイヤーはそれ自体がレンダリングで、書き出しウィンドウが作ります。)

時間のかかるノードは、ファイルの代わりに生成を表示します。押すとファイルは脇で作られ(ボタンがローダーになり、作業は続けられます)、その後ノードに画像が、2Dビューにファイルが表示され、ボタンは再生成になります。入力に関わるものを何か変えると、ノードは作ったものを保ったまま、作り直す代わりに古くなっていますと表示します。再生成を押すか、先に生成する開くを押してください。

生成したファイル

生成と開くが作るのは実際のファイルで、開いているプロジェクトの一時フォルダー(システムの一時フォルダーの下にある、pixor-generated-とプロジェクト名のフォルダー)に、アセットパイプラインごとに1フォルダー、ノードごとに1フォルダー作られます。バーの生成したファイルでそれを開きます。後片付けは自動です:ノードを削除するとそのファイルが、アセットパイプラインを削除するとそのフォルダーが、プロジェクトを閉じるかPixorを終了するとフォルダー全体が削除されます。クラッシュで残ったフォルダーは、次にPixorを起動したときに削除されます。これらが書き出しの結果になることはありません:書き出しウィンドウはすべてのファイルを新しく書き出します。

選んだノードの設定もインスペクターに表示されます。何も選んでいないときは、グラフ自身のシートの設定です。そこのシートの設定の下では、書き出せるすべてのファイルがトグルになっています:JSONやクリップごとの動画にチェックを入れると、シートから接続されたそのファイルノードが追加され、チェックを外すと削除されます。そのため、ワイヤーに触れずに数クリックで書き出しを設定でき、それでもグラフのままです:トグルの1つ1つが、独自の設定を持つ目に見えるノードです。

ノード

N × Nのノード。レイヤー、フレーム範囲、ホールド、反転、タグ、配置(Arrange)、配置(Place)は、接続されたリストの数だけ同じ処理をし、それぞれを入力の向かいにある独自の出力に返します:1つのレイヤーノードで4つのスプライトリストの法線を取り、4つのリストを渡せます。次の入力のための空きが常に1つあります。マージは逆で、任意の数のリストを受け取り、1つを出力します。

ノード 入力 出力 働き
スプライト — フレーム 入力。スプライトリスト。ウィンドウのヘッダーの表示に関係なく、ここで固定されます:複数のシーンがある場合は選んだシーン(またはすべて)、選んだカメラ(またはすべて。カメラは1つの向きです)、選んだアクション(静止以外すべて、すべて、または静止を含む名前で指定した1つ)を、選んだスタイル(指定するまでは、それぞれプロジェクトの最初のもの)で描き、フレーム/秒、残すフレーム数、選択フレームの指定どおりにカットします(スプライトリストの出どころを参照)。カメラとアクションは、pxr graph setから、カンマ区切りのリスト(South, East, North)や、名前の先頭と*でリング(turret*)も受け付けます。プロジェクトのパーツセットを指定すると、すべてのフレームでそのセットをオンにして、すべてのクリップをもう一度レンダリングします(装備、損傷状態)。すべてのレイヤーがリストとともに渡されます。レイヤーノードで1つを選び、なければシートは完成したスプライトになります。
画像ファイル — フレーム 入力:外部の画像を独自のスプライトリストとして:PNG(1フレーム、またはフレームの幅×フレームの高さでフレームに分割する帯やグリッド。各フレームの長さは各フレーム)、またはフレーム、その遅延、ループするかどうかを含むGIF。名前はその行の名前です。画像はシートのパレットを使い(各ピクセルを最も近い色に。半分以上透明な部分は空になります)、セルの中央に置かれます。セルより大きいフレームは、両方のサイズを示して拒否されます。ノードが接続されたシートにだけ入り、ほかのシートには入りません。
マージ フレーム、… フレーム 接続したすべてのリストを1つに:1枚のシートに複数のスプライトリスト。
レイヤー フレーム × N フレーム × N 各リストのレイヤー1つ:final、lines、flat、またはゲームがスプライトを照らすためのマップ(normal、depth、emission。これを置いたシートはパレットのインデックスではなく色の画像になります)、またはshadow(各フレームが落とす影を黒で。プロジェクトの影が指定するもの、なければ接地影)で、オーバーレイがスプライトの下に敷きます。あるいはスタイルグラフの追加出力の名前で、その場合、行はその名前になります(idle_South_rim)。レンダリング自身の画像もレイヤーです。小道具やピースがあれば、ペーパードールのbaseと各ピースの名前(idle_South_helmet)。パララックスレイヤーがあれば、layer0(最も遠い)から最後まで。それぞれ、レイヤーノードが指定したときにだけpxr renderがレンダリングします。アプリの書き出しウィンドウが実行するのもこれです。リストのレイヤーを分けるには、レイヤーごとにレイヤーノードを置き、それぞれ別のシートへ。まとめるには、マージ、スタック、オーバーレイを使います。
フレーム範囲 フレーム × N フレーム × N 各リストの開始から終了までのフレーム(0から数える):静止画やアイコンにはfrom=3 to=3(新しいものはfrom=0 to=0、つまり最初のフレーム)、数フレームならfrom=2 to=5。パーツごとにFrame rangeを使って1つのリストを複数のシートに分けられます。
ホールド フレーム × N フレーム × N 各リストのすべてのフレームを回数倍の長さでホールドします。
反転 フレーム × N フレーム × N 各リストを左右反転し、別のカメラの代わりにします:東のSpritesノードを西として反転したものがwalk_Westで、walk_Eastから描かれます。ピクセル、法線、ヒットボックス、ルートモーションが反転されます。左右対称のモデルなら反対側をレンダリングする必要はありません。
タグ フレーム × N フレーム × N 行がループするか(保持、はい、いいえ)と、別の立ち方をするクリップのための独自のピボット(セル内のピクセルでx,y)。ループしないクリップは、JSONと.asepriteで1回だけ再生されるタグになります。ピボットはJSONのすべてのフレームにあり
配置 フレーム × N シート × N 各リストをシートに配置:グリッドまたは帯、余白、押し出し、2のべき乗、トリミング、重複フレームの1回保存、行を折り返す最大幅、それを超えるとシートがページに分割される最大の高さ(クリップ単位でページに入り、ページごとに独自のファイル一式)、そして1行あたりのフレーム数。後者はコンタクトシートのように、各クリップを前のクリップの後に続けて並べます。
配置 シート × N シート × N 各シートを画像上の位置に移動します。
スタック シート、シート シート 2枚のシートを1枚に。2枚目を1枚目の下または横に、間隔を空けて置きます。
オーバーレイ 下、上 シート エンジンがレイヤーを重ねるのと同じように、1枚のシートを別のシートにぴったり重ねます。上のシートの空のピクセルからは下が見えます。各レイヤーをオフにして、もう一方だけを見ることもできます。2枚はフレーム単位でそろっている必要があり(同じフレームが同じ位置に)、そうでなければ書き出しがどのフレームが合わないかを伝えます。
シート シート ファイル メモリ上のスプライトシート。このノード自体は何も書き出しません。ファイルはここから接続したFileノードです。名前はその名前です。
ファイル シート ファイル 出力:ディスク上の1つのファイル。接続元のSheetから書き出され、ノードの表面に独自の設定、ファイルを開く開く、そして作成に時間がかかるときの生成があります。PNG画像(シートそのものと、そのファイルの名前:ファイルの保存先はPNGを書き出すパスで、ほかのファイルもその名前を使い、書き出しウィンドウに指定したフォルダーの下に置かれます。ファイル名はフレームの名前に使うテンプレートで、最初に作られる名前がその下に表示されます。ファイル内のレシピは、ファイルに作り方を含めるかどうか。独自のファイルはシートに独自のパス、名前、レシピを与え、オフならファイルはプロジェクトの書き出し先に行きます。インスペクターではこれらがSheetと一緒に表示されます)、JSON、Asepriteファイル、Godot SpriteFrames、ノーマルマップ、深度マップ、エミッションマップ、線とフラットのレイヤー、パレット、ライトキット、PICO-8カートリッジ、レポート。クリップごとのGIFとクリップごとのAPNG(スケール)。クリップごとの動画(スケール、毎秒フレーム数、背景)。影のレイヤー(contactまたはdrop)。パレットのバリエーション(その一覧)。ペーパードールのレイヤー(ピース)。パララックスのレイヤー(レイヤー、遠くのレイヤーにかすみ)。Sheetを削除すると、そのFileノードも削除されます。
テキストファイル シート ファイル 出力:フレームに対してテンプレートから作るテキストファイル(下記)。
アニメーションファイル フレーム ファイル 出力:接続した各スプライトリストのアニメーション。間にシートは挟みません。GIF、APNG、または非圧縮の動画(各リストの形式)で、スケール倍の大きさ、動画は毎秒フレーム数で背景の上に。保存先はすべてのファイル名の先頭になります。out/spinならout/spin_walk_South.gifを書き出します。
アイコン — ファイル 出力:モデルのインベントリアイコン。スタジオライトの下、¾の角度から描き、レアリティの色(またはファイル名から)でアウトラインを付け、フレーム内かどうかを選び、サイズごとに作ります。サイズごとにアイコン1つにつきPNG1枚、アトラス1枚、JSONインデックス1つを、保存先のフォルダーへ。アイコンはそれ自体が1つのレンダリングなので、入力は取りません。pxrはシートの後に、書き出し先のフォルダーへアイコンを作ります。インベントリアイコンを参照してください。
ZIPアーカイブ ファイル、… ファイル 接続したファイルノードのファイルをまとめた出力:ZIP(終了は保存先)。Sheetを接続すると、そのシートが書き出すものすべてが入ります。何も接続しなければ、書き出しで作られたすべてのファイルが入ります。ペーパードールとパララックスのレイヤーもほかと一緒に入ります。同じファイルからは、バイト単位で同じアーカイブができます。誰かに渡したり、ストアにアップロードしたりするものです。

アセットグラフ:スプライト、配置、シート、そして書き出されるPNG画像。左にノードライブラリ

レンダリングではなく計画。グラフは、ピクセルが生まれる前に、どのフレームをどこに置くかを決めます。そのため、アセットのステップはスタイルのステップが空でも動き、pxr namesはレンダリングせずに、グラフが書き出すすべての名前とIDを表示します。

フレームは同一性を保ちます。シートを並べ替えても動くのは矩形だけで、各フレームのIDはそのままです(フレームの名前と中身を参照)。

アセットパイプライン

プロジェクトにはアセットパイプラインをいくつでも持てます。それぞれが名前の付いた独自のアセットグラフです(キャラクターのシート、アイコンセット、ストアページの静止画など)。書き出しウィンドウは選んだものを書き出します(pxr render --pipeline allはすべてを書き出します)。アセットのステップ左側のアセットリストとヘッダーのアセット選択で、キャンバスに表示するものを選びます。リストの下の新規アセットパイプラインは、表示中のものをコピーして、その名前にちなんだ名前(メイン 2)を付けます。行の右クリックメニューでは、名前の変更、複製、削除(NAMEを削除…。確認があり、ほかに残っていれば最初のものも削除できます)、そして:

  • キットを保存…(アセットパイプラインをキットとして保存)でパイプラインをキットとして書き出します。パイプラインのライブラリ(ダイアログが開く場所)に保存すると、すべてのプロジェクトのノードライブラリのマイパイプラインに表示されます。
  • キットを使う…(アセットパイプラインのキットを使う)、またはマイパイプラインの項目をクリックすると、別のプロジェクトから保存したパイプラインをこのプロジェクトのものにします。その名前(パイプライン、シート、ファイルの名前)は、ここにあるものと重ならないように作られます。
pxr project set game.pixor --add-pipeline icons
pxr graph set game.pixor --which asset --pipeline icons --node arrange --set layout=strip
pxr graph save game.pixor --which asset --pipeline icons --as-pipeline -o icons.pixorkit
pxr project set other.pixor --use-pipeline icons.pixorkit
pxr project set other.pixor --remove-pipeline icons

外部の画像

画像ファイルノードは、ほかで描いたものをPixorのシートに載せます。タイトルシートのロゴ、手描きのエフェクト、別のツールのフレームなど。追加して、PNGかGIFを選択…すると、Mergeを通してスプライトリストに加わります。分けておくには、独自のシートに接続します。

pxr graph add game.pixor --which asset --node image-file --set name=logo --set file=art/logo.png
pxr graph add game.pixor --which asset --node image-file --set name=spark --set file=art/spark.gif
pxr graph list game.pixor --which asset                                             # every node, numbered
pxr graph set game.pixor --which asset --node logo --set cell_w=16 --set cell_h=16   # a strip of 16 px frames
pxr graph set game.pixor --which asset --node logo --set own_colours=true            # keep its colours

--nodeには、pxr graph listで表示されるノード番号、名前(logo)、またはグラフにその種類のノードが1つしかない場合は種類(frame-range)を指定します。

画像はシートのパレットを使い、各ピクセルはその最も近い色になります。独自の色にチェックを入れると、代わりに自分の色を保ちます。その色はシートのパレットの末尾に追加される(よく使う色から順に、パレットに入る分だけ)ので、シートのすべてのファイル(PNG、.aseprite、GIF、パレットファイル)がその色を持ち、パレットのバリアントもその色はそのままにします。シート自身のフレームは変わりません。

セルより大きい画像は、それが載るすべてのファイルのセルを大きくします。ほかのフレームは大きくなったセルの中央に置かれ、ピボット、ヒットボックス、ソケットも一緒に動きます。

1回のレンダリングから複数のファイル

グラフには複数のSheetノードを置け、それぞれからPNGを接続できます。そうすると1回のレンダリングで、キャラクターシート、アイコンセット、宣伝用の静止画を書き出せます。PNGのないSheetは画像を書き出さず、そこから接続したファイルだけを書き出します。シートのJSONだけを書き出すにはこうします。2つ目のSheetは、独自のリストに接続されるまで、1つ目と同じものを受け取ります。それぞれ独自のパス、名前のテンプレート、レシピを持つか、プロジェクトのものを使います。横に置くファイル(とその影、バリアント、スケール)はそのFileノードです。2つがプロジェクトのものを使う場合、最初のものがプロジェクトのシートを書き出し、次のものはその横に独自の名前で書き出します(iconsという名前ならout/hero_icons.png)。そのため何も二重には書き出されません。2つが独自の同じパスを指定すると、両方の名前を挙げて拒否されます。スクリプトから追加したSheetには、アプリと同じく、ほかの出力にない名前(シート2)が付き、pxr namesはレンダリングで付く名前でファイルを一覧表示します。

ビュー、ピッチ、サイズ、ルックが同じカメラはまとめてフレーミングされ、1行ずつで1枚のシートになります:リングの各向きがそろいます。設定の違うカメラは独自のシートを書き出し、Spritesノードは書き出し中のグループの行を受け取ります。2つのグループのカメラを指定したSpritesノード(South, top)は、それらを1つのファイルにまとめます。すべてのカメラのレンダリングが終わった後に1回書き出され、プロジェクトのシートの横に、そのシートノードの名前で置かれます(out/hero_both.png)。行の名前はカメラ名になります(walk_South、walk_top)。1枚のシートのフレームサイズとパレットは1つなので、異なるサイズでフレーミングされるカメラは、無理に詰め込まずに拒否されます:同じサイズにしてください。

アイコングリッドは3つのノードです。カメラSouthから見たidleアクションのSpritesノード、帯状のArrange、そしてPNGがout/icons.pngに行くSheet。コンタクトシートは、それに余白を付けたものです。これらは機能ではなく、グラフです。

スクリプトから:

pxr graph add game.pixor --which asset --node sprites --set action=idle --set camera=South --alone   # node 11
pxr graph add game.pixor --which asset --node arrange --set layout=strip --alone --in frames=11      # node 12
pxr graph add game.pixor --which asset --node sheet --set name=icons --set path=out/icons.png --set formats=png --alone --in sheet=12
pxr graph set game.pixor --which asset --node icons --set formats=json,godot   # its File nodes
pxr graph wire game.pixor --which asset --from 10 --to 12 --slot frames2       # the spark into the Arrange's spare input
pxr graph add game.pixor --which asset --node sheet --set name=sparks --set path=out/sparks.png --set formats=png --alone --in sheet=12.1   # output 1 of an N x N node
pxr graph list game.pixor --which asset          # every node, and every output's path
pxr graph drop game.pixor --which asset --node logo   # the logo's Image file node
pxr render game.pixor                            # out/game.png, out/icons.png (.json, .tres), out/sparks.png

portraitスタイルで描いた歩きは別にフレーミングされるので、これらの横に独自のシートを書き出します:out/game_portrait_8fps.png。独自のスタイルを持たない火花も、改めてout/sparks_South_portrait_8fps.pngに書き出されます。

数値はこのページの手順で使うものです。pxr graph listはプロジェクト自身の数値を表示します。--aloneは、アイコンのグリッドをメインシートの連なりから外します:idleのリストもそこにマージすると同じフレームが2回入ることになり、名前のテンプレートがそれを拒否します。

pxr graph addは、ノードを接続済みの状態でチェーンに入れます。Frame rangeやHoldはArrangeの前に、シートのノードはその後に、2つ目のSpritesノードはマージを通して1つ目の横に。Sheetの--setはpath、names、recipeを受け付けます。formatsはそのFileノードを追加・削除します(書き出し自身の一覧と同じく、PNGは常に含まれます。何も書き出さないならノードごと外します)。Fileノードが持つ設定の言葉で、そのノードを作って設定します:shadow=drop、variants=hit-flash,hue:120、anim_scale=4、paper_doll=yes、pieces=helmet:Helmet,Visor、parallax=3、haze=none。Fileノード自身の設定は、その番号で指定して設定します:--node 5 --set fps=60。

色と並ぶ線

シートは同じリストのレイヤーを複数持てます。Spritesノードを2回接続し(1回はそのまま、1回はlinesのLayerを通して)、1つのArrangeの前にマージで結合するか、それぞれ配置して2枚のシートをスタックで横に並べます。JSONでは線の行はwalk_South_linesという名前になり、そのIDはレイヤーの違いだけ色のフレームと異なります。実際そういうものだからです。{layer}を含まないテンプレートでも、それらのフレームの名前にはレイヤーが付く(hero_walk_South_00_lines.png)ので、2つのフレームが同じ名前になることはありません。スプライト自身のフレームは名前がそのままです。パーツセットのSpritesノードも{set}で同じことをし(hero_attack_South_00_bare.png)、セットはそれらのフレームのIDの一部になります。または、エンジンが描くのと同じように、オーバーレイで2つをぴったり重ねます。

テンプレートから作るテキストファイル

Pixorが知らないエンジンには記述子が必要で、それはJSONと同じフレームのメタデータから作るテキストファイルです。テキストファイルノードがテンプレートから書き出します:

{sheet} {width}x{height}
{#frames}{name} {x} {y} {w} {h} {duration}{sep}
{/frames}

{#frames} ... {/frames}は、その本文をフレームごとに1回書き出します。その外側の言葉はシートのものです:{project}、{object}、{sheet}(画像のファイル名)、{width}、{height}、{cell_w}、{cell_h}、{pivot_x}、{pivot_y}、{frames}。内側の言葉はフレームのものです:{name}、{id}、{action}、{side}、{row}、{index}、{n}(シート上のフレーム番号)、{layer}、{x}、{y}、{w}、{h}、{source_x}、{source_y}、{duration}(ミリ秒)、{pivot_x}と{pivot_y}(Tagで与えた場合はクリップ自身のもの)、{loop}(trueまたはfalse)、{root_x}、{root_y}、{root_dx}、{root_dy}(JSONと同じルートモーション)、{boxes}と{sockets}(JSONとして)、そして{sep}。これは最後のフレームの後以外はカンマなので、JSONのリストを作るのに十分です。{index:3}は数値をゼロで埋め、{{と}}は波括弧を書き出します。

テンプレートは、プロジェクトの横の独自のファイルに置くこともできます。ノードにテンプレートファイルを与える(スクリプトからは--set file=frames.tpl)と、出力を書き出すたびに読み込まれるので、スタジオはほかのファイルを置いている場所で記述子を編集できます。

条件分岐も、計算も、インクルードもありません。ファイルを書くための書き方であって、言語ではありません。Pixorが知らない語は、ファイルに書き込まれるのではなく、テンプレートを入力した時点で拒否されます。

1つのグループとして使うレイアウト

アイコングリッド、コンタクトシート、スタジオ独自のキャラクターの並べ方。グループを選ばずにバーのキットを保存…を押すと、アセットグラフをキットとして保存します(アセットグラフをキットとして保存)。そのレイアウトとSheetに入るものを、スプライトリストを受け取り(各Spritesノードが入力になります)、シートを出す1つのグループにします。Sheetとそこから下がるファイルはプロジェクトに残ります。+ › キットを使う…(キットをグループとして追加)で、別のプロジェクトのアセットグラフに1つのグループとして入れ、そこのSheetに接続したり、Arrangeの代わりに置いたりします。ダブルクリックするか、タイトルの矢印を押すとその場で開き、矢印でまた折りたたみます。スクリプトからは:

pxr graph save hero.pixor --which asset -o icon-grid.pixorkit --name "Icon grid"
pxr graph add villain.pixor --which asset --kit icon-grid.pixorkit --alone --in 0=0   # fed by node 0
pxr graph swap villain.pixor --which asset --node arrange --kit icon-grid.pixorkit

できないこと

  • バイナリフォーマットはコードのままです。PNG、.aseprite、GIF、APNG、GodotのSpriteFrames、ライトキット、.p8はシートノードとファイルノードで、テンプレートはテキストを書き出します。
  • ほかのグラフと同じく、ここにもプラグインのバイナリもスクリプトノードもありません。

このページで説明している内容は製品版の機能です。無料のブラウザーデモで使えるのは、デフォルトのルックとPNGシートだけです。

ブラウザーで試す Pixorを入手