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 color variant by changing the body's rust-red surface mark to teal. Keep the body silhouette, shoulders and head attachment unchanged. Paint directly or request a constrained image edit. Reassemble the edited body with the other three approved parts and repeat the original motion; accept it only if the existing manifest still fits.

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 an optional implementation for the color variant. Its model card describes reference editing and expects full captions through the documented prompt-upsample path; individual integrations differ. Gated weights and published hardware examples do not establish that it fits your laptop. This is a documentation-based exercise; we have not generated a Klein output.

Use courier-reference-v1.png as reference image zero. Preserve its hash and placement manifest. Change only the body's rust-red mark to teal. Retain the original four parts, pose, cream paper and charcoal outlines. Do not introduce a coat, boots, fingers or a new face that the approved reference did not contain.

BFL distinguishes a keep row from a new region. A row pointing from ref_image_0 to the same source and target box means keep; recoloring uses from:null and src_bbox:null with the desired target region. The prompt format is a caption followed by a JSON array, not a separate bounding_boxes API parameter. The original example below shows that text format; it is not a complete model request. Hosted FLUX.3 and local Klein have different integration surfaces.

A front-facing flat paper courier on the same plain background and canvas as the reference. Preserve the approved four-part design: cream head <head>, body <body>, left arm <left_arm>, and right arm <right_arm>, with charcoal outlines. The body's existing rust-red mark is teal; its other cream areas remain cream. Preserve all part silhouettes, pose, proportions and shoulder attachment positions. Add no new features.
[
  {"id":"body","desc":"Original body geometry; change only its existing rust-red mark to teal","from":null,"src_bbox":null,"tgt_bbox":[350,380,800,620]},
  {"id":"head","desc":"Original cream head, unchanged","from":"ref_image_0","src_bbox":[140,380,350,620],"tgt_bbox":[140,380,350,620]},
  {"id":"left_arm","desc":"Original left arm, unchanged","from":"ref_image_0","src_bbox":[410,180,760,380],"tgt_bbox":[410,180,760,380]},
  {"id":"right_arm","desc":"Original right arm, unchanged","from":"ref_image_0","src_bbox":[410,620,760,820],"tgt_bbox":[410,620,760,820]}
]

These are invented layout boxes, not measurements of your drawing. Replace every box after inspecting the reference. Coordinates are top, left, bottom, right on a 0–1000 scale; the rig manifest uses x/y on a 0–1 scale. Verify both conventions with the non-square example below. Use your integration's documented caption/upsampler path and inspect its resulting full prompt before generation; do not silently discard the edit rows.

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")

Boxes are guidance, not protected masks. Align the candidate over the approved reference at half opacity. Check body edges, shoulder attachments, head outline and arm lengths. Reject a color variant that changes geometry. A request for an unchanged background does not guarantee unchanged pixels or a transparent output.

Extract the candidate body into body-teal.png on the original transparent 512 × 512 canvas, using the approved body mask and checking its edges. Assemble that edited body with the original head and two arms. Repeat the wave extremes with the existing pivots. Testing all four original files would not test the edit. If the new body needs a moved shoulder pivot, treat it as a redesign requiring a new rig review.

If the mark stays rust-red, check that its edit row is new rather than keep, then check the reference index and box order. If the pose changes, compare the upsampled caption with the approved four-part brief. If nearby pixels drift, a masked color adjustment in your image editor may finish this task more reliably. Retain rejected output with one observable failure reason.

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