From one character to reusable game assets: a reference-first workflow

What the documentation establishes

Underbloom’s maker describes deriving creature variants from approved references and fitting separate image parts to a procedural rig. Source ↗

The public Underbloom page identifies the project and its creator; reading the page does not verify gameplay quality. Source ↗

FLUX.3 Klein documents reference editing and normalized top/left/bottom/right boxes. The card warns that boxes are not hard masks; surrounding image content can change. Source ↗

The walkthrough below is an original worked exercise. We have not independently tested this product’s performance.

1. Define the one action the asset must support

Build a front-facing paper courier that raises its right arm to wave. Limit the initial character to a body, a head, a left arm and a right arm. Avoid fingers, cloth and perspective changes for this first pass. The goal is a usable four-part puppet, not a gallery of concepts.

Set a 512 by 512 pixel working canvas. Draw the character at rest, leaving margin around the arm’s full travel. Choose a common pixel scale and keep it for every export. Save a flattened reference called courier-reference-v1.png and retain the layered source. Review silhouette, palette and joint locations now; changing them later will invalidate the assembled motion.

Create an original paper courier robot, front view, flat graphic shapes.
Four visible parts: body, head, left arm, right arm.
Palette: cream paper, rust-red body mark, charcoal outlines.
Neutral lighting; no cast shadow baked across separate parts.
Keep shoulders visible and leave room for a small wave.
Do not include text, logos, scenery or extra limbs.
Return one candidate for review, not a sheet of unrelated designs.
If editing: preserve the approved silhouette and joint locations.

2. Cut parts from the same approved reference

In your image editor, duplicate the reference layer and isolate each part onto its own transparent layer. Where an arm overlaps the body, extend a small hidden area beneath the shoulder so rotating the arm will not expose a hole. Keep the reference layer locked and visible while checking alignment.

Export four PNG files with transparent backgrounds: body.png, head.png, arm-left.png and arm-right.png. Use the full 512 by 512 canvas for every file in this first exercise rather than trimming each one to a different box. This costs texture space but removes a source of coordinate mistakes while learning the workflow. Record this as a prototype tradeoff, not an optimal shipping format.

Reassemble the exported files on a blank canvas at exactly the same origin. Toggle the original reference above them. The resting character should align. If it does not, fix export bounds and offsets now. Do not ask the generator for four independent replacement images: you would lose the consistency you just approved.

3. Write down coordinates before animating

Use normalized canvas coordinates for the design record: zero is the left/top edge, one is the right/bottom edge. The coordinates below are illustrative for this original courier. Move them to match your approved drawing. They are not measurements of an existing game asset.

For each image, mark its rotation pivot and the desired rest position in the shared canvas. A full-canvas export can use identical pivot and rest coordinates to reproduce the reference at rest. Your engine may use centered origins, world units or an upward Y axis; convert the record explicitly instead of pasting these numbers into unrelated UI fields.

{
  "design": "paper-courier-v1",
  "canvas": [512, 512],
  "coordinates": "normalized; origin top-left; x right; y down",
  "parts": [
    {"file":"body.png", "pivot":[0.50,0.56], "rest":[0.50,0.56], "layer":1},
    {"file":"head.png", "pivot":[0.50,0.33], "rest":[0.50,0.33], "layer":2},
    {"file":"arm-left.png", "pivot":[0.35,0.46], "rest":[0.35,0.46], "layer":0},
    {"file":"arm-right.png", "pivot":[0.65,0.46], "rest":[0.65,0.46], "layer":3}
  ],
  "test": {"right_arm_degrees":[0,-10,-20,0], "duration_seconds":2}
}

The portable transform is world point = rest position + rotation(angle) × (image point − pivot). In this record, image points, pivot and rest position all use the same normalized units. Multiply by 512 if your editor needs pixels. Negative angles in a downward-Y coordinate system may behave differently from your engine; test a small angle first and reverse the sign if needed.

4. Test the exported files with a tiny motion

Import the four images into a blank scene, with one transform per part. Apply the recorded layer order, then compare the resting pose with the approved reference. Animate only the right arm through the four angles over two seconds. Keep the camera and body still so you can see whether the pivot is correct.

Pause at both extremes. Look for a shoulder gap, an elbow that appears detached, unwanted background pixels and a shadow that rotates with the arm. View the scene at the size it will appear in the game, not only zoomed in. A detailed outline that looks lovely at 400 percent may become unreadable on a phone.

Record each failure as one issue with a reproduction pose. For example: at minus twenty degrees, the shoulder exposes a triangle of empty background. Repair the hidden overlap in the arm image, export only that part, then rerun the same motion. This makes iteration measurable without requiring a subjective score for overall beauty.

5. Make one variant and preserve a usable handoff

After the wave passes, make a raincoat-color variant by changing only the body’s surface color. Keep the body silhouette, shoulders and head attachment unchanged. You can paint that edit directly or request a constrained image edit. Reassemble and repeat the original motion; a variant is accepted only if it works with the same manifest.

Keep approved and experimental assets in separate folders. Save the design reference, layered source, manifest, exported PNGs, generator/model notes if used, and the two-second review capture. A teammate should know which image is authoritative and which changes require a new rig review. Do not replace approved files merely because a fresh generation looks more dramatic.

This process is deliberately modest. Full-canvas images waste space; a production pipeline may later crop and pack textures with corresponding offset changes. Procedural motion does not replace rig design, collision testing or gameplay work. The documented case illustrates a repeatable approach, while this unexecuted exercise gives you a small task to evaluate it on your own tools.

Reference version: paper-courier-v1
Approved parts: body / head / arm-left / arm-right
Canvas and units: 512 × 512; normalized top-left coordinates
Rest-pose overlay: [pass/fail + evidence]
Wave extreme checks: [pass/fail + evidence]
Small-screen readability: [observation]
Variant compatibility: [observation]
Generation/painting provenance: [tool, model, permission, edit notes]
Known limitations: [texture size, missing directions, untested gameplay]
Owner of next geometry change: [name]

6. Make a controlled reference edit with FLUX.3 Klein

FLUX.3 Klein is one optional implementation for the color-variant step. Its model card documents reference images and structured box editing, with full captions expected. Access to weights is gated and the published hardware examples are not evidence it fits your laptop. Review current model terms and your available environment before selecting it. This addition is documentation-based; we have not generated or assembled a Klein output.

Use the approved full-canvas paper courier as reference image zero. Save its hash and the existing placement manifest before editing. Choose one change: recolor the coat from amber to teal. Keep the head, hands, feet, face and silhouette unchanged in the intended design. Request a complete description of the final image, not just “make it teal”; the rest of the caption gives the model context for the whole composition.

The original payload below illustrates the documented edit-box format. It is a caption and box description, not a complete HTTP request or an assertion that a particular app exposes these controls. Wire it into the interface documented for your chosen model implementation. The general FLUX.3 hosted examples and the Klein local model are different integration surfaces.

{
  "caption": "A front-facing paper courier character on a plain background. The character has a rounded cream head, two dark dot eyes, short separate arms and compact boots. The coat <coat> is teal with a centered seam. The character fills the same canvas as <ref_image_0>, with the same pose and attachment points.",
  "bounding_boxes": [
    {
      "id": "coat",
      "desc": "Teal coat, preserving the original visible outline and shoulder attachments",
      "from": "ref_image_0",
      "src_bbox": [
        250,
        200,
        800,
        800
      ],
      "tgt_bbox": [
        250,
        200,
        800,
        800
      ]
    }
  ]
}

Replace these invented boxes with measurements from your approved reference. They use top, left, bottom, right on a 0–1000 scale. The earlier rig manifest uses normalized x/y coordinates on a 0–1 scale; those conventions are not interchangeable. A square image can conceal a swapped-axis bug, so check one non-square test image before using an automated adapter.

7. Check coordinates and reject visual drift

def to_flux_box(left, top, right, bottom, width, height):
    if not (0 <= left < right <= width and 0 <= top < bottom <= height):
        raise ValueError("Box lies outside the source image")
    return [round(1000 * top / height), round(1000 * left / width),
            round(1000 * bottom / height), round(1000 * right / width)]

assert to_flux_box(200, 50, 600, 350, 800, 400) == [125, 250, 875, 750]
print("Coordinate convention check passed")

Do not treat the requested box as a protected mask. The model card explicitly allows changes outside it. Put the candidate above the approved reference in your image editor at half opacity, aligned at the original canvas origin. Inspect the shoulders, bottom edge of the coat, head outline and arm lengths. Reject a color variant if it changes the silhouette or moves an attachment point, even when the new picture is attractive.

When the rest pose passes, reassemble the four original parts and repeat the same arm-wave extremes from section four. Use the existing pivots unchanged. A candidate that only works after moving the shoulder pivot has changed geometry and needs a separate rig revision. Record it as a redesign candidate, not a compatible texture update.

If the edit misses the coat, check coordinate order and the selected reference index first. If the whole pose changes, return to the original reference and tighten the complete caption. If the coat is correct but nearby pixels drift, consider a manual masked color edit in your image editor; this small task may not need another generation. Keep the rejected output and a brief failure reason so the next attempt is informed by evidence.

Deliver the approved base, candidate, edit specification, coordinates, model revision and comparison capture together. Record which checks you actually performed. The coordinate helper above was tested locally; generation, overlay inspection and motion review remain tasks for your chosen environment. A successful format conversion does not prove visual consistency.

Guide history

Revisions preserve the original instructions. A source recheck alone does not create a new revision.

Revision 3 · Corrected keep versus recolor box semantics and prompt format; preserved the original four-part palette; replaced the ineffective original-assets test with a candidate-body assembly check.

Revision 2 · Added FLUX.3 Klein reference-edit example, explicit coordinate conversion, silhouette and motion regression checks, and practical drift recovery. Generation remains untested.

Revision 1 · New original four-part asset exercise informed by Underbloom’s maker account: coordinates, manifest, transform, wave test, repairs and variant handoff.

Continue learning