よつばゲームズ
ノード一覧に戻る

スプライト積層

sprite_stack

上級者向けの従来型経路で、画像レイヤーを疑似3Dスプライトへ積層します。

確認済み
解説あり

入力ポート

名前型説明
レイヤー一覧
layers
List<Image>
必須
積層する List<Image> です。既定では先頭画像が一番下の層です。

出力ポート

名前型説明
画像
image
Image
積層した疑似3Dスプライト画像です。

パラメータ

名前型既定値範囲説明・選択肢
角度
angle
Angle
45— / step 1

画面上で層をずらす角度です。0は右、90は上です。

層の間隔
layer_step
Float
10–32 / step 0.05

1層ごとにずらすピクセル距離です。

入力順
draw_order
Enum
BottomFirst—

入力リストの順番の解釈です。

  • 先頭が下BottomFirst
    リスト先頭を一番下の層として扱います。
  • 先頭が上TopFirst
    リスト先頭を一番上の層として扱います。
キャンバス
canvas_mode
Enum
Auto—

出力キャンバスの決め方です。

  • 自動Auto
    積層結果が入る最小キャンバスにします。
  • 固定Fixed
    指定した幅と高さのキャンバスに中央配置します。
幅
width
Int
641–4096

固定キャンバス時の出力幅です。

高さ
height
Int
641–4096

固定キャンバス時の出力高さです。

不透明度
opacity
Float
10–1 / step 0.01

全レイヤーに掛ける不透明度です。

不透明度減衰
opacity_decay
Float
10–1 / step 0.01

上の層へ進むごとに掛ける不透明度倍率です。

概要

断面画像を少しずつずらして重ねるスプライトスタッキング(擬似3D)の ノードです。「輪切りの絵を積むと立体に見える」レトロなテクニックで、 車・家具・小物を回転できる擬似3Dスプライトにします。

使い方のポイント

  • 素材は「下から上への輪切り」画像リスト: list_create で束ねるか、 スプライトシートから list 化して入れる
  • angle を📌入力ピン化して回すと、レイヤーのずれ方向が変わって 「回転する立体」に見える(animation_render で回転アニメ化)
  • アニメ・合成に流すなら canvas_mode = Fixed でサイズを固定する
  • Fixedで積層全体が指定幅・高さに収まらない場合は中央から切り取り、 非致命的な警告を表示する。Autoの出力上限は4096×4096

関連ノード

  • list_create — 断面リストの束ね
  • animation_render — 回転アニメのベイク
  • iso_item_builder — 正統派アイソメ素材の作り方(比較対象)

メモ

  • 入力が空リストの場合、Auto では 1x1 の透明画像、Fixed では指定サイズの透明画像を出力します。
  • Auto キャンバスは角度や層数に合わせて出力サイズが変わります。プレビューサイズを固定したい時は Fixed を使います。
  • アルファは通常合成です。各レイヤーの透明部分はそのまま透過します。

使用例

  1. ListCreate などで同サイズの断面画像を List<Image> にまとめる
  2. SpriteStack.layers へつなぐ
  3. angle と layer_step で見え方を調整する
  4. 必要なら canvas_mode = Fixed にして、後段の合成やアニメーションでサイズを固定する

関連ノード

リスト作成list_createアニメーションレンダーanimation_renderアイソアイテムビルダーiso_item_builder
ノード一覧に戻る
スプライト積層 — PixPipeline ノード解説