Back to Node List

Sprite Stack

sprite_stack

Advanced legacy-style route: stack image layers into a pseudo-3D sprite.

Reviewed
Guide available
The node name and summary are available in English. Port, parameter, and article details are currently shown in Japanese.

Input Ports

NameTypeDescription
レイヤー一覧
layers
List<Image>
Required
積層する List<Image> です。既定では先頭画像が一番下の層です。

Output Ports

NameTypeDescription
画像
image
Image
積層した疑似3Dスプライト画像です。

Parameters

NameTypeDefaultRangeDescription / Options
角度
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

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

Overview

Creates sprite stacking, a pseudo-3D effect, by layering cross-section images with small offsets. This retro technique makes cars, furniture, and props look like rotatable 3D sprites by stacking sliced artwork.

Usage tips

  • Supply a list of slices ordered bottom to top. Bundle them with list_create or convert a sprite sheet into a list.
  • Promote angle to an input pin 📌 and rotate it to change the offset direction, creating the appearance of a rotating solid. Bake the rotation animation with animation_render.
  • When feeding animation or composition, use canvas_mode = Fixed to keep dimensions stable.
  • If the stack does not fit a Fixed canvas, it is center-cropped and the node displays a nonfatal warning. Auto output is limited to 4096x4096.

Related nodes

  • list_create — bundles the slice list
  • animation_render — bakes a rotation animation
  • iso_item_builder — the conventional isometric asset workflow for comparison

Notes

  • With an empty input list, Auto outputs a transparent 1x1 image and Fixed outputs a transparent image of the specified dimensions.
  • Auto changes output dimensions with angle and layer count. Use Fixed to keep the preview dimensions stable.
  • Alpha uses normal composition. Transparent areas in each layer remain transparent.

Example

  1. Use ListCreate or another node to bundle equal-sized cross-section images into a List<Image>.
  2. Connect it to SpriteStack.layers.
  3. Adjust the appearance with angle and layer_step.
  4. If needed, set canvas_mode = Fixed to keep dimensions stable for downstream composition or animation.
Back to Node List
Sprite Stack — PixPipeline Node Reference