TokyTar Stylizer

Overview

The Stylizer opens from the title screen of TokyubeVoxelVerse via the rainbow TOKYTAR STYLIZER button, beneath the rendered avatar. Inside, you can:

• Paint each body part (head, body, left arm, right arm) directly on the 3D mesh.
• Upload textures from disk or use the built-in pixel paint tools.
• Build animated avatars of up to 32 frames per part.
• Save your work to your Tokyube account so it follows you between machines.
• Export a portable folder you can share or reload later.

Camera, Rotation & Zoom

The right-side controls overlay holds three sliders:

• Rotate Y — spin the avatar horizontally (0–360°).
• Rotate X — tilt the avatar up/down (-90 to +90°).
• Zoom — pull in or push out (0.5×–5×).

The view gizmo in the upper-right of the viewport snaps the camera to a canonical view. Buttons: T top, F front, Bk back, L left, R right, Bt bottom.

RESET VIEW (top-left of the viewport) returns rotation and zoom to defaults without losing your skin edits.

You can also click and drag inside the viewport to orbit the character; mouse-wheel scroll dollies in/out.

Part Selection & Visibility

The main menu's part buttons (HEAD, BODY, LEFT ARM, RIGHT ARM) open a per-part submenu. Painting is locked to whichever part's submenu is open, so rotating the camera around the model never sprays paint onto the wrong limb.

Visibility toggles

The Visibility row inside the main menu hides or shows individual parts of the avatar. Useful when you want to paint the body without the arms blocking your view.

• Click a part's visibility button to toggle it on/off.
• Hidden parts retain their textures — toggling back shows them exactly as you left them.
• Hidden parts are still exported in the final zip.

Six-Face Quick Editing

For each part, the editor exposes the six cube faces of the box model (FRONT, BACK, LEFT, RIGHT, TOP, BOTTOM) as quick-jump targets. Click a face to snap the camera to it so your brush hits the correct UV region without guessing.

The face mapping is consistent across all parts, so a back-of-head edit and a back-of-body edit use the same coordinate system.

Uploading & Downloading Textures

Each part's submenu has three texture buttons:

• UPLOAD TEXTURE — replaces the current frame with a PNG/JPEG from disk. The image is rescaled to the part's UV resolution.
• DOWNLOAD TEXTURE — saves the current frame as a PNG so you can edit it externally.
• DOWNLOAD UV GUIDE — exports a labeled UV template for that part. Open the PNG in any pixel editor as a reference layer (more on this in the next section).

UV Guides — Blender / Maya / Pro Workflow

Every part of the Tokyube avatar ships with a labeled UV guide you can download from the part's submenu. The guides are exported from the same UV layout the in-app paint canvas uses, so anything you draw inside the labeled regions lands on the correct face of the cube model in-game.

What the four guides cover

• HeadUVGuide.png — six-face cube layout for the head (front, back, left, right, top, bottom).
• BodyUVGuide.png — six-face cube layout for the torso, including the shoulder and waist seams.
• LeftArmUVGuide.png — six-face cube layout for the left arm (your character's left, viewer's right).
• RightArmUVGuide.png — six-face cube layout for the right arm.

Why pros download them

The DOWNLOAD UV GUIDE button gives serious creators a clean starting point for editing skins outside Tokyube. The 2048×2048 guide PNG ships with crisp face borders and per-face labels so you can build pixel-perfect skins in Photoshop, Aseprite, Krita, or — more importantly — line up your in-app paint with high-res renders done in Blender or Maya.

Blender workflow

1. Click DOWNLOAD UV GUIDE for the part you want to edit. Save it somewhere reachable (e.g. ~/projects/skins/HeadUVGuide.png).
2. Click DOWNLOAD OBJ to grab the avatar mesh with your current textures baked in.
3. In Blender, File → Import → Wavefront (.obj) and select the OBJ. The materials should auto-attach.
4. Open the Shading workspace. Replace the texture node's image with the UV Guide PNG so you can see the face regions while modeling. Tip: use the Image Texture Interpolation: Closest setting so pixel boundaries stay crisp.
5. Switch to the UV Editing workspace and verify the UVs land on the labeled regions. They should — the guide is generated from the same layout — but it's a sanity check.
6. Paint or edit in Blender's Texture Paint mode (or in an external editor like Photoshop using Blender as a preview), save the resulting PNG, and re-import it via the Stylizer's UPLOAD TEXTURE button.

Maya workflow

1. Download the UV guide and the OBJ as above.
2. In Maya, File → Import the OBJ. The mesh comes in with the model named per-part (head, body, left/right arm) so you can isolate one part at a time.
3. Open Window → UV Editor. Set the editor's image to the UV guide PNG to overlay the labeled face regions on the actual UV islands.
4. Use 3D Paint Tool or PSD networks (Hypershade → File node) to author the skin. Maya's PSD network is especially handy for layered animation cycles — you can keep each frame as a separate Photoshop layer and export one PNG per layer for the Stylizer's frames panel.
5. Save each finished frame as a 2048×2048 PNG named head_frame_1.png, head_frame_2.png, etc., then drop the whole folder onto the Stylizer's LOAD FOLDER button to roundtrip the animation back in.

Tips for high-end skins

• Stick to power-of-two textures (1024 or 2048 square). Tokyube uses NEAREST filtering so anti-aliased upscales lose their softness; design at the resolution you'll ship at.
• Keep the labeled face borders visible in your working file but on a separate layer you can hide before flattening — accidentally exporting the labels into the final skin happens more often than you'd think.
• For animated avatars built in Blender/Maya, name your frames with explicit numbers (_frame_1, _frame_2, …) — the loader sorts on those numbers, not file modification time.
• The Stylizer's DOWNLOAD TEXTURE button gives you the current frame back at full resolution so you can roundtrip in-engine paint into your DCC of choice without losing fidelity.

Pixel Painting

Click PAINTBRUSH: ON to enter paint mode. A prompt asks which body part to paint. Once selected, click directly on the model in the viewport to lay down pixels.

• Painting only ever lands on the selected part.
• The brush snaps to the pixel grid for crisp pixel-art alignment.
• Toggling PAINTBRUSH off restores the file/upload controls and unlocks regular camera dragging.

Paint Tools (Brush, Eraser, Fill)

• BRUSH — paints with the current paint color.
• ERASER — removes pixels from the paint layer without affecting the underlying base texture.
• FILL — flood-fills connected tiles of the same color (tile-aligned to the current brush size). Toggle on, click once on the region, then toggle off when you want to brush again.

Brush Sizes

Five sizes are available: S (16px), M (32px), L (64px), XL (128px), and XXL (256px). The grid overlay (when on) updates to match the current size, so painting always lands on a clean tile grid.

Paint Color & Grid

• PAINT COLOR opens the OS color picker. The color is applied to the very next stroke — including the first click after picking.
• GRID overlays a tile grid that matches the current brush size. Useful for aligning patterns and planning symmetry.

Drag Pixel Art & Drag Texture

Two repositioning modes let you slide existing artwork without repainting:

• DRAG PIXEL ART — moves only the paint layer (your brushed pixels) over the underlying base texture.
• DRAG TEXTURE — moves the base texture; the paint layer stays anchored.

Both wrap edge pixels so dragged content reappears on the opposite side.

Undo & Redo

The paint controls include UNDO and REDO buttons. They cover paint strokes, upload/clear, and frame mutations (add/remove/clear), so you can safely experiment with animations and roll back if a frame goes wrong.

Animations & Frames

Each part has its own frame list, capped at 32 frames. The Animation Frames panel inside each part's submenu shows the active frame and lets you build a timeline.

• + adds a new frame, duplicating the current one so you can tween an edit instead of starting from blank.
• − removes the current frame.
• CLEAR wipes only the current frame back to white without affecting siblings.

Frames are independent per part — you can have a 4-frame head loop while the body stays static.

Onion Skinning

The Onion Skin Opacity slider overlays the previous and next frame on top of the current one at a chosen alpha (0–100%). Set it to ~30% to see the previous pose ghosted as you edit, then drop it to 0% when you want a clean view.

Animation Preview & FPS

Click PLAY ANIMATION on the left side of the viewport to preview your animation. The FPS input next to the DOWNLOAD OBJ button accepts any value 1–60.

Playback is GPU-cheap: every frame is pre-decoded into its own texture once at play-time, then the renderer just swaps the bound texture per tick — rotation and zoom stay smooth even on large animations.

Exporting Characters

The EXPORT button opens an export panel where you choose:

• The character's name (becomes {name}.zip).
• An Animated toggle — turn off if you want a static, single-frame avatar.
• The animation FPS recorded inside the zip's manifest.

The exported zip contains:

• One PNG per frame per part: head_frame_1.png, head_frame_2.png, etc.
• {name}.json with an animation manifest (version, animated, fps, parts.<part>.frameFiles[]) for downstream consumers like ChunkWorldGen.
• Legacy {part}_front.png aliases so older loaders still work.

Save to Account

The SAVE TO ACCOUNT button persists your in-progress skin to your Tokyube account. Your Steam ID is captured when you launch the Stylizer from the title screen, so the save is scoped to you. Animated parts are stored as {frames, fps}; static parts are stored as a single dataURL, all using the same database column — no migration required.

Once saved, the character renderer on the title screen reflects the new skin (animated or otherwise), and other players in multiplayer see the same animation.

Loading a Character Folder

Click LOAD FOLDER to import a previously exported character. The loader recognizes both the legacy single-PNG layout (head.png, body.png, …) and the new per-frame layout (head_frame_N.png). The accompanying JSON manifest, if present, sets the FPS for you.

Materials, Lighting & Transparency

Inside the main menu, LIGHTING toggles between a flat unlit look (great for evaluating raw pixel colors) and a physically-shaded preview that approximates the in-world lighting you'll see in ChunkWorldGen.

Three material sliders appear when lighting is on:

• Metallic (0–100) — higher values make the skin more reflective.
• Smoothness (0–100) — higher values tighten specular highlights.
• Transparency (33–100) — lower values fade the avatar toward see-through.

Downloading the OBJ Mesh

The rainbow DOWNLOAD OBJ button (top-left, beside RESET VIEW) saves the current avatar as an .OBJ + .MTL pair with your current textures baked in. Open it in Blender, Maya, or any modeling tool to extend or render outside Tokyube.

Multiplayer & Networked Animations

When you join a multiplayer lobby in ChunkWorldGen, your saved character is broadcast once to peers. The packet includes the per-part frame lists, FPS, and a shared start epoch.

Every client computes the frame index from local time relative to that epoch — so animations stay aligned across machines without any per-frame network traffic. Your animated avatar runs at full smoothness on every other player's screen.

Tips & Common Pitfalls

• Lag while editing? Turn off Onion Skin and the Grid overlay while painting heavy strokes; both add compositing cost.
• Animation feels stuttery? Check the FPS field. The preview honors anything 1–60; 8–12 fps is the classic pixel-anim sweet spot.
• Painted on the wrong part? Painting is locked to the open submenu — back out and reopen the correct part's menu before clicking.
• Saved skin not showing in-world? Sign in via Steam first; account saves are keyed by Steam ID.