Reconstruct & View

Step 7 · Harmonize bakes your scene to its final pixels. Step 8 · Reconstruct & View is where you inspect that finished scene and hand it off — nothing here spends a credit or calls the AI. The left pane shows one of three previews: a rotatable 2.5D diorama, a flat 2D composite you can edit by hand, or the untouched original for comparison. The right sidebar holds two panels — the Layers tree, which is the same group structure you built in Step 5 · Mask Sprites reordered here into paint order and depth, and the Export hub. You are done when every approved sprite sits where it belongs across the depth stack and you have downloaded a package for your engine or editor. There is no Continue button: this is the end of the pipeline.

Pick a view: 3D, 2D, or Original

A three-way toggle at the top of the left pane switches the preview; the heading and its one-line subtitle change with it.

• 3D (the default) shows the Occlusion-Restored 3D Diorama — the rotatable depth stack.
• 2D shows the 2D Composite Preview, a flat render of the background plus every sprite with baked shadows, and turns on direct editing, the compare tools, and zoom.
• Original shows the Original Input Image — your working image (your original upload, or the extended canvas if you used Step 2 · Extend Canvas), for a side-by-side check. Flip back to 2D to compare.

Two status pills sit at the right of the bar. Background Inpainted is an always-on confirmation that the seamless backdrop from Step 4 · Background is present under the composite. baked · <filtering> appears only when Step 7's repixelize bake is applied — it reports the export pixel filtering (for example baked · nearest) and any heal note, and its tooltip spells out what the bake did. See Step 7 · Harmonize for the full story.

The 3D diorama

The diorama is a CSS-3D card stack: one backdrop plane at the very back, one billboard per sprite pushed forward in depth, and each sprite's ground shadow kept in its own plane a hair behind it. Left-drag anywhere on the board to orbit — horizontal drag swings the yaw, vertical drag tilts the pitch — so you can see behind a foreground object into the area the AI restored. There are no depth sliders; depth comes from the artwork. Each sprite's front-to-back position is a normalized depth read from its box, but those depth values are re-assigned in the Layers panel's paint order — the top row is farthest, the bottom row nearest — so reordering the tree actually moves things through the stack. The Unity export uses the exact same depth model, so what you rotate here is what ships.

A mono readout in the bottom-left corner shows Pitch: N° / Yaw: N° / Interactive Parallax Deck active — the current rotation angles and a confirmation that the deck is live. It is informational only.

The 2D composite: move, scale, nudge

Switch to 2D and the flat composite gains a click-to-edit overlay. This is layout, not generation — every gesture is free and reversible.

1. Click a sprite to select it: an indigo outline with four corner handles appears, and clicking empty space deselects. Only a plain left-click selects — middle-click, right-click, and Alt-drag are reserved for panning.
2. Drag the body to move the sprite, or drag a corner handle to scale it proportionally around the opposite corner. The outline and handles stay a constant on-screen size at any zoom.
3. Press an arrow key to nudge the selection by one source pixel, or ten with Shift held. Escape deselects. Nudging is active only in 2D, with a sprite selected, and when your cursor is not in a text field.
4. Double-click a sprite — or press Reset in the HUD — to return it to its natural geometry.

Every edit is written to the sprite's box, so the composite, the diorama, the saved project, and all your exports follow the adjusted placement. A pinned HUD in the bottom-left reports the live result: the sprite's name, its Δ dx, dy px displacement from its original position, its scale N%, and a one-line gesture reminder — drag = move · corners = scale · arrows = nudge (Shift ×10) · dbl-click = reset.

Check alignment: solo & onion skin

To confirm a reconstructed sprite lands exactly where the original object sat, solo it over the source image. This per-sprite check replaced an older global onion skin that ghosted the whole scene at once.

• onion skin — the HUD checkbox — or the Focus icon renders only the selected sprite live over the Original image, the alignment check.
• ghost is a 25–100% opacity slider, so you can see the original through the sprite.
• hide BG hides the original beneath the soloed sprite, so you can inspect the cutout alone. The eye still works while soloed, so hiding the sprite reveals what sits under it in the source.
• The amber Solo: {name} × pill at the top of the view exits solo and returns to the full composite.

Compare with the original, and zoom

The flat views share one zoom-and-pan gesture, and 2D adds two ways to hold your result against the source.

• Scroll to zoom; drag with the middle or right mouse button (or Alt-drag) to pan. The {zoom}% button — shown in 2D and Original — prints the current zoom; click it to reset to 100% and recenter.
• 👁 Hold: original (2D only) swaps in the original flat image for as long as you hold it, then releases back to your composite.
• ◧ Compare (2D only) splits the viewport, clipping the original to the left of a draggable divider labeled original | result. A split slider sets where the divider falls.

The Layers panel

The right-sidebar Layers tree is the same group structure as Step 5 · Mask Sprites, but here it drives paint order and depth: the top row paints first (back), the bottom row paints last (front). The header shows a live leaf count and collapses the whole panel.

• Click a group row to expand or collapse it; click a leaf row to select that sprite in the 2D preview.
• Drag a row (the grip handle marks it as draggable) to reorder it within its level, or drop it beside a row inside another group to reparent it there — cycles are guarded and the group composites refreshed. Reordering reflows both the 2D stack and the 3D depth order.
• Focus — the per-row solo icon — solos that layer over the original for the alignment check; on a leaf it also selects it.
• The eye hides a layer everywhere: its name shows a strikethrough, and hidden layers drop out of the composite, the diorama, and the exports (they arrive in the PSD as hidden layers). On a group the eye cascades to every descendant leaf.

Export

The Export panel builds a hand-off package from the current view — paint order, visibility, the approval gate, the baked shadows from Step 6 · Shadow, and the Step 7 repixelize are all respected. It opens showing just the primary layered-PSD button; the rest live in three collapsible subsections, ten formats in total. Every builder runs in your browser and triggers a download — no credits, no server.

• Export PSD (layered Photoshop) is the primary button: a layered file with your groups as folders and every sprite as an editable, positioned layer (shadows baked in), plus the background tree. It switches to .psb automatically past 30,000 px. Unlike the raw PSD from earlier steps, this one is a what-you-see snapshot — approval-gated, with hidden rows exported as hidden layers.
• Game engines (5), Pixel editors (1), and Universal formats (3) are the three subsections, all closed by default. Game engines leads with Export to Unity (.unitypackage), which builds a Unity 6 package that places each layer as a point-filtered sprite in 3D using the same diorama depth model, wired to a PixploderDiorama component.

Each format is one gradient button with a one-line description. For the full per-format breakdown — what each ZIP contains and which tool loads it — see Export formats.