XpaceOS · Documentación técnicaXpaceOS · Technical documentation

Cómo crear elementos para los Xpacios isométricosHow to create elements for the isometric Xpaces

Especificación para diseñar props, mobiliario y superficies a medida que encajen, pixel-perfect, en el motor isométrico de Admira XP (el Digital Twin de XpaceOS).Spec for designing custom props, furniture and surfaces that fit, pixel-perfect, the isometric engine of Admira XP (the XpaceOS Digital Twin).

Documento de referencia · derivado del motor real (game.html) · proyección 80×28Reference document · derived from the real engine (game.html) · 80×28 projection

01 ProyecciónProjection 02 HuellaFootprint 03 AnclajeAnchor 04 IluminaciónLighting 05 Render 06 PantallasScreens 07 EntregablesDeliverables 08 Vía nativaNative path

En una frase: cada elemento vive sobre una rejilla de rombos de 80×28 px; las líneas de suelo van a ±19,3° y las alturas suben verticales en píxeles puros. Si se dibuja con otro ángulo, no encaja. In one sentence: every element lives on a grid of 80×28 px diamonds; floor lines run at ±19.3° and heights rise straight up in pure pixels. Draw it at any other angle and it won't fit.

01Proyección — qué define "nuestro" isométricoProjection — what defines "our" isometric

No es el isométrico clásico 2:1. El tile base es 80 × 28 px:It's not the classic 2:1 isometric. The base tile is 80 × 28 px:

Ratio del rombo: tileW:tileH = 80:28 ≈ 2,86:1Diamond ratio: tileW:tileH = 80:28 ≈ 2.86:1
Ángulo de las líneas de suelo: atan(14/40) ≈ 19,3° sobre la horizontal — un dimétrico "aplanado", más bajo que el 26,57° estándar.Floor-line angle: atan(14/40) ≈ 19.3° from horizontal — a "flattened" dimetric, lower than the standard 26.57°.
Eje vertical (altura): recto hacia arriba, en píxeles puros. Un objeto de altura H sube H px verticales, sin inclinarse.Vertical axis (height): straight up, in pure pixels. An object of height H rises H vertical px, with no tilt.

Un tile de suelo es un rombo de 80 ancho × 28 alto. Vértices respecto al de arriba: derecha (+40,+14), abajo (0,+28), izquierda (−40,+14).A floor tile is a diamond 80 wide × 28 tall. Vertices relative to the top one: right (+40,+14), bottom (0,+28), left (−40,+14).

Tile base 80×28 (izq.) · prisma con 3 caras y anclaje (der.)Base tile 80×28 (left) · prism with 3 faces and anchor (right)

Regla de oro para diseño: verticales = verticales en pantalla; horizontales siguen ±19,3°. Cualquier sprite con otro ángulo NO encaja.Golden design rule: verticals = verticals on screen; horizontals follow ±19.3°. Any sprite at another angle will NOT fit.

02Huella (footprint) — todo va sobre rejillaFootprint — everything sits on the grid

Cada elemento ocupa N×M tiles de suelo. La huella se mide en tiles; la altura, en píxeles.Each element occupies N×M floor tiles. The footprint is measured in tiles; the height, in pixels.

Ancho = nº de tiles en X · Fondo = nº de tiles en Y · Altura = pxWidth = tiles in X · Depth = tiles in Y · Height = px
1 tile = 80×28 px. Ej.: un mostrador de 1×2 tiles = 40 px de frente × 80 px de fondo en planta.1 tile = 80×28 px. E.g. a 1×2 tile counter = 40 px frontage × 80 px depth in plan.

Elemento (motor real)Element (real engine)	HuellaFootprint	AlturaHeight
MostradorCounter	`1×2`	`16 px`
Caja registradoraCash register	`1×2`	`16 px`
AromatizadorAir freshener	`1×1`	`44 px`
Kiosco / tótemKiosk / totem	`~0,64×0,64`	`variablevariable`

03Anclaje (pivot) — para que no "flote"Anchor (pivot) — so it doesn't "float"

El anclaje es la esquina origen del tile de la huella (vértice superior del rombo base, el punto rojo del diagrama). El objeto se apoya ahí, crece hacia arriba (altura) y hacia derecha/abajo (huella).The anchor is the origin corner of the footprint tile (top vertex of the base diamond, the red dot in the diagram). The object rests there, grows upward (height) and toward right/down (footprint).
Entregar cada PNG con su anchor marcado, o mejor en un JSON acompañante.Ship each PNG with its anchor marked, or better, in an accompanying JSON.

{
  "id": "expositor-tabaco",
  "footprint": [1, 2],     // ancho × fondo en tiles// width × depth in tiles
  "heightPx": 90,
  "anchor": [40, 118],     // px del PNG que toca el suelo en la esquina origen// px of the PNG touching the floor at the origin corner
  "screenRect": null,      // o [x,y,w,h] si lleva pantalla// or [x,y,w,h] if it has a screen
  "palette": { "top":"#a88860", "left":"#6a5030", "right":"#8b6b45" }
}

04Iluminación — 3 caras fijasLighting — 3 fixed faces

Todo se modela como prisma con tres tonos del mismo color. Luz implícita desde arriba-izquierda. Mantener este esquema en TODOS los elementos para coherencia visual.Everything is modeled as a prism with three shades of the same color. Implicit light from the top-left. Keep this scheme on ALL elements for visual consistency.

CaraFace	TonoShade	Ejemplo (madera)Example (wood)
Superior (top)Top	la más clarathe lightest	`#a88860`
DerechaRight	media / basemid / base	`#8b6b45`
IzquierdaLeft	la más oscurathe darkest	`#6a5030`

Color de pared del local actual: #e8dcc0.Wall color of the current venue: #e8dcc0.

05Dos modos de renderTwo render modes

Entregar compatible con ambos. Si entregáis PNG, hacedlo en estilo 16-bit (es el de feria).Deliver compatible with both. If you ship PNGs, use the 16-bit style (that's the trade-show one).

flat: color plano por cara (look limpio/retro).flat: solid color per face (clean/retro look).
16-bit: gradiente diagonal en la cara superior, gradiente vertical en laterales, sheen blanco al 12–20% en aristas superiores, líneas de arista negras de 0,6 px.16-bit: diagonal gradient on the top face, vertical gradient on the sides, white sheen at 12–20% on top edges, 0.6 px black edge lines.
Neón (opcional): glow de color en las dos aristas superiores, para acentos/marca.Neon (optional): colored glow on the two top edges, for accents/branding.
Sombra: elipse de contacto en el suelo bajo la huella (la pinta el motor) — dejad hueco transparente, no la queméis.Shadow: contact ellipse on the floor under the footprint (the engine draws it) — leave transparent space, don't bake it in.

06Superficies de pantalla (signage)Screen surfaces (signage)

Si el elemento lleva pantalla, su contenido es una zona 16:9, base 160×90 px, que el motor rellena con vídeo/imagen en vivo.If the element has a screen, its content is a 16:9 area, base 160×90 px, which the engine fills with live video/image.

Importante: dejad la pantalla como hueco/marco transparente. No queméis contenido dentro — el twin lo inyecta en tiempo real.Important: leave the screen as a transparent hole/frame. Don't bake content inside — the twin injects it in real time.

07Entregables técnicosTechnical deliverables

PNG transparentes, preferible @2x (tile lógico 160×56) + versión @1x. Alpha real, sin sombra quemada.Transparent PNGs, preferably @2x (logical tile 160×56) + an @1x version. Real alpha, no baked shadow.
Un archivo por elemento (+ hoja de sprites si hay estados: on/off, día/noche…).One file per element (+ a sprite sheet if there are states: on/off, day/night…).
JSON por elemento: footprint, heightPx, anchor, screenRect, palette.JSON per element: footprint, heightPx, anchor, screenRect, palette.
Paleta limitada y plana (encaja con el look canvas); evitar texturas fotográficas.Limited, flat palette (matches the canvas look); avoid photographic textures.

08Alternativa nativa (opcional, integración más barata)Native alternative (optional, cheaper integration)

El motor dibuja por código, no por imágenes. La primitiva es:The engine draws by code, not by images. The primitive is:

drawIsoBlock(col, row, ancho, fondo, alturaPxwidth, depth, heightPx, topCol, leftCol, rightCol, neonCol)
//            ↑ posición en rejilla   ↑ huella en tiles  ↑ px   ↑ 3 caras + neón opc.//            ↑ grid position         ↑ footprint tiles  ↑ px   ↑ 3 faces + optional neon

Si pixeria entrega el elemento descompuesto en cajas (lista de prismas: huella + altura + 3 colores), lo integramos sin imágenes y pesa 0 KB. Ideal para mobiliario sencillo (mostrador, expositor, peana).If pixeria delivers the element decomposed into boxes (a list of prisms: footprint + height + 3 colors), we integrate it with no images and it weighs 0 KB. Ideal for simple furniture (counter, display, plinth).