JS.3D.MESH — Canvas Pixel Engine & 360° Game Object Studio

Status: Loading 36-Angle Pixel Buffers...

Angle: 0° | Frame: 0/36 | Score: 0 | FPS: 60

WASD / ArrowsMove 360° ClickMove / Slash SpaceJump / Shatter ShiftPixel Dash E360° Spin Attack RRun 1-9Moves

🎨 Pixel Buffer Shader (`ImageData`)

Active Pixel Filter

Pixel / Particle Step Size 4 px

Sprite Scale 0.62x

Manual 360° Rotation 0°

🦴 19-Joint Rig & Physics

Show 19-Joint Bone Skeleton Overlay Walk-in-Place Demo (Inspect Foot Stride) Show Pixel-Perfect Alpha Hitbox Grid Face Mouse Cursor (360° Turret Aim) Auto-Rotate 360° Turnaround

📂 Load Your Character (character.json + sheet .png + atlas .json)

💃 Animations

Keys 1-9: wave · cheer · clap · dab · sit · kick · hip-sway · step-touch · victory. R toggles running. Moves play over walking.

🔍 12× Pixel Buffer Loupe

Coord: (110, 165)

RGBA: [142, 138, 129, 255]

Hex: #8E8A81

Collision: SOLID PIXEL

📦 Drop-In JS Game Usage

import { GameCharacter } from './pixel_knight.js';

// any character made with editor.html
const player = await GameCharacter.load(
  './characters/knight/character.json', { x: 400, y: 300 }
);

function gameLoop(dt) {
  player.update(dt, { right: keys.KeyD, up: keys.KeyW });
  player.draw(ctx, { showSkeleton: true });
  if (player.hitTestPixel(bullet.x, bullet.y)) {
    player.hitFlashTimer = 0.25; // Pixel-accurate hit!
  }
}