Nodes/comfyui-grid-cutscene/Grid Cutscene System (Interactive)
ComfyUI Node

Grid Cutscene System (Interactive)

Click four points, get a comic panel mask

By Hyunsigikim·Created 6 months ago·Updated 6 months ago· 0
Grid Cutscene System (Interactive)
  • image
  • MASK
  • IMAGE
grid_size12
panel_index0
all_panels_data
width512
height512

If you've ever tried to lay out a comic or manhwa page in ComfyUI, you know the pain: you want each panel to be a separate, oddly-shaped region you can generate into, but the mask tools you have want you to either hand-paint polygons or wrestle with coordinates in a text field. Grid Cutscene System (Interactive) is a tiny fix for exactly that. It gives you a grid drawn over your page, you click four points to outline a panel, and it hands you back a proper MASK plus a preview image. The name oversells it slightly - it's a mask-drawing gadget, not a full scene system - but for panel-by-panel comic work it's genuinely the fastest way I've found to get clean polygonal regions.

How it works

The interesting part is that all the interactivity lives in the front-end. A JavaScript widget (web/js/grid_cutscene_widget.js) draws the grid over your image, snaps each click to the nearest grid cell, and stores the points as text in a hidden widget. When you've clicked four times it writes a line like P1: 3,2;8,2;8,7;3,7 into all_panels_data. The Python side just parses that string, scales the grid coordinates up to real pixels, and calls OpenCV's fillPoly to rasterize the polygon into a mask. No API calls, no model files, no hidden ML - it's numpy and opencv doing honest work.

One detail worth knowing: all_panels_data is deliberately hidden (the JS hides the widget). Don't go looking for a text box to type coordinates into - the node itself is the input. That's also why it can hold up to 8 panels' worth of points in one string, keyed by panel_index.

The inputs that matter

Only three are worth your attention:

  • grid_size (default 12) - how fine the snap grid is. Higher is more precise, lower is easier to click. 12 is a decent starting point; drop it to 8 if you're cursing at small panels.
  • panel_index (0–7) - which of the 8 panels you're drawing right now. The node remembers all of them, so you draw panel 1, switch the index, draw panel 2, and each one outputs its own mask.
  • image (optional) - wire in your page/layout image and the grid draws over it and the output matches its resolution. Skip it and width/height (both default 512) define a blank canvas you can drop an image onto instead.

It outputs MASK - the thing you wire into any mask-based inpaint or compose workflow - and IMAGE, a 3-channel preview of the same mask so you can see what you drew without squinting at a black-and-white tensor. Run it through a Set/Preview Mask, feed the mask to an inpaint node or a masked VAE Encode, and you're generating inside panel boundaries instead of the whole page. Classic masked-inpainting territory, where the mask still uniquely owns "leave everything outside this region untouched."

Installing it

Either search "comfyui-grid-cutscene" in ComfyUI Manager, or the manual route:

cd ComfyUI/custom_nodes
git clone https://github.com/Hyunsigikim/comfyui-grid-cutscene

Then install the dependencies. They're light - just numpy and opencv-python - but on the portable build you must use its own Python from the ComfyUI root:

python_embeded\python.exe -m pip install -r ComfyUI\custom_nodes\comfyui-grid-cutscene\requirements.txt

Restart ComfyUI and it shows up as Grid Cutscene System (Interactive) under LayoutTools.

Gotchas

The README's troubleshooting is short, and in practice that's about right. If the node doesn't appear, check the folder is exactly custom_nodes/comfyui-grid-cutscene (not a nested copy) and restart - the JS widget won't load otherwise, and without it the node is just a dead text parser. And if dependency install errors, you ran the pip command from the wrong directory; run it from the ComfyUI root. Beyond that: remember the node generates on click - if nothing changes, you're not on the panel index you think you are.

Fair warning: this is an obscure, small-pack tool with zero community chatter to speak of (I checked). If it breaks in a weird way, you're likely the first person to hit it - but it's MIT-licensed and only ~40 lines of Python, so the source is a short read if you need to fix something yourself.

CategoryLayoutTools

Inputs (6)

NameTypeDefaultDescription
grid_sizeINT122–64
panel_indexINT00–7
all_panels_dataSTRING
imageoptIMAGE
widthoptINT512
heightoptINT512

Outputs (2)

NameTypeDescription
MASKMASK
IMAGEIMAGE