Back to Node List

Pixel Line

pixel_line

Draws pixel-perfect lines with uniform step patterns (e.g. 2:1 isometric)

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
color
Color
線の色(接続時はパラメータより優先)

Output Ports

NameTypeDescription
画像
output
Image
生成されたピクセルパーフェクトライン画像

Parameters

NameTypeDefaultRangeDescription / Options
width
Int
641–1024

キャンバスの幅(ピクセル)

高さ
height
Int
641–1024

キャンバスの高さ(ピクセル)

始点X
origin_x
Int
00–1024

始点の X 座標

始点Y
origin_y
Int
320–1024

始点の Y 座標

ステップX
step_x
Int
21–8

1ステップの水平ドット数(例: アイソメトリック 2:1 なら 2)

ステップY
step_y
Int
11–8

1ステップの垂直ドット数(例: アイソメトリック 2:1 なら 1)

長さ
length
Int
161–256

ステップの繰り返し回数

方向
direction
Enum
Right-Up

線の方向

  • 右上 ↗Right-Up
  • 右下 ↘Right-Down
  • 左上 ↖Left-Up
  • 左下 ↙Left-Down
  • 右 →Right
  • 左 ←Left
  • 上 ↑Up
  • 下 ↓Down
color
Color
[1,1,1,1]

線の色(入力ポート未接続時に使用)

Overview

Draws a perfect straight line with a constant step, such as two pixels across and one pixel up. For isometric floor edges, roof slopes, 45° diagonals, and other lines where pixel angle is critical, this is more reliably clean than a Bézier path.

Usage tips

  • For 2:1 isometric edges, the golden ratio is step_x=2, step_y=1. Change direction while keeping it to build all four sides of a diamond.
  • length is the number of step repetitions. At 2:1 with length 16, the line travels 32px horizontally.
  • Choose by line: use this node for regular structural angles; use a hand-drawn bezier_path→path_stroke for free curves.
  • To animate a growing line, drive length with time_source → remap (see Examples).

Common pitfalls

  • The line stops midway: anything beyond the canvas is not drawn. Calculate the end from origin and length and keep it inside the canvas.
  • An isometric diamond does not close: origin coordinates for all four sides must agree. Calculate each endpoint as the next side's start using step×length, or consider an iso_block-family node.

Canvas-size binding

As a generator node, new nodes automatically bind width / height to the project canvas dimensions (_canvasWidth / _canvasHeight).

State width/height value
Default (new node) Bound to and automatically follows project canvas dimensions
Manually entered or unbound Local value independent of canvas dimensions

Use the 🔗 button in the inspector to remove or restore the binding.

Step pattern examples

step_x step_y Use
2 1 Isometric line (2:1)
1 1 45-degree diagonal
1 2 Steep slope (1:2)
3 1 Shallow angle
1 1 Horizontal line with direction Right/Left (step_y is ignored)
1 1 Vertical line with direction Up/Down (step_x is ignored)

Direction

Value Symbol Description
Right-Up Up and right
Right-Down Down and right
Left-Up Up and left
Left-Down Down and left
Right Right (horizontal)
Left Left (horizontal)
Up Up (vertical)
Down Down (vertical)

Examples

  • PixelLine(2:1, Right-Up) → Blend — edge of an isometric floor
  • TimeSource → Remap → PixelLine(length) → AnimationRender — animation of a growing line
  • PixelLine(1:1) — clean 45-degree diagonal

Related nodes

  • line_generate — straight line from two coordinates
  • path_stroke — pixel-perfect free-curve line
  • iso_block — build a complete isometric solid
  • rule_polyline — polyline for rule tiles
Back to Node List
Pixel Line — PixPipeline Node Reference