Skip to content

Latest commit

 

History

History
293 lines (255 loc) · 8.66 KB

File metadata and controls

293 lines (255 loc) · 8.66 KB

Referencia API

Esta página sirve como índice general para todas las llamadas del sistema. Para entender por qué, cuándo y cómo usar cada una, haz clic en el enlace de la documentación completa de su respectivo módulo.

Engine (Canvas)

Engine.init(canvasId, { width, height, scaleMode, bg })
Engine.start(game)
Engine.stop()
Engine.toGame(x, y)
Engine.rect(x, y, w, h, color)
Engine.circle(x, y, r, color)
Engine.text(txt, x, y, color, size, align)

DOMEngine (HTML/CSS)

DOMEngine.init(containerId, { fps })
DOMEngine.start(game)
DOMEngine.stop()
DOMEngine.resume()
DOMEngine.render()
DOMEngine.el(id)
DOMEngine.create(tag, cls, parent)
DOMEngine.clear(el)
DOMEngine.setText(el, text)
DOMEngine.setHTML(el, html)
DOMEngine.addClass(el, ...cls)
DOMEngine.removeClass(el, ...cls)
DOMEngine.toggleClass(el, cls, force)
DOMEngine.setStyle(el, styles)
DOMEngine.on(target, event, handler, opts)
DOMEngine.createGrid(parent, rows, cols, onClick, onCtx)
DOMEngine.showOverlay(message, subMessage, onDismiss)
DOMEngine.hideOverlay()

PIXIEngine (WebGL)

PIXIEngine.init(containerId, { width, height, bg })
PIXIEngine.start(game)
PIXIEngine.stop()
PIXIEngine.toGame(x, y)
PIXIEngine.addChild(child)
PIXIEngine.removeChild(child)

LittleEngine (LittleJS)

LittleEngine.init(containerId, { width, height, tileSize, padding, images })
LittleEngine.start(game)
LittleEngine.stop()
LittleEngine.toGame(x, y)

RenderBridge - puente entre motores

RenderBridge.setActive(engine)   // llamado automáticamente por cada motor
RenderBridge.active()
RenderBridge.type()              // 'canvas' | 'pixi' | 'little'
RenderBridge.W | RenderBridge.H
RenderBridge.toGame(x, y)
RenderBridge.ctx                 // solo Engine (Canvas 2D)
RenderBridge.canvas
RenderBridge.bindInput()
Input.init(canvasElement)
Input.isDown(key)
Input.isPressed(key)
Input.isReleased(key)
Input.getMouse()
Input.isMousePressed()
Input.getTouch(index)
Input.getTouchCount()
Input.isTouchStarted()
Input.endFrame() // IMPORTANTE: Llamar por frame

Audio.init()
Audio.resume()
Audio.load(name, url)
Audio.play(name, volume, loop)
Audio.synth(name, type, freq, duration, volume, slideFreq)
Audio.toggleMute()

Online.genCode()                          // genera código de sala (6 caracteres)
Online.on(eventString, callbackFunction) // 'onHostReady', 'onConnected', 'onData', etc.
Online.host(onRoomCreated)
Online.join(roomCode)
Online.send(data, connectionId)
Online.sendToAll(data)
Online.destroy()

EventBus — eventos centralizados

import { EventBus, Events } from '../../src/index.js';

EventBus.on(Events.INPUT_KEY_PRESSED, ({ code }) => { /* ... */ });
EventBus.emit(Events.AUDIO_PLAY, { name: 'hit', vol: 1 });
EventBus.once(Events.ONLINE_CONNECTED, (role) => { /* ... */ });
EventBus.off(event, handler);

ECS — entidades y componentes

import { World } from '../../src/ecs/World.js';
import { Transform, Velocity, SpriteData, Collider } from '../../src/components/index.js';
import { MovementSystem, PhysicsSystem, RenderSystem } from '../../src/systems/index.js';

const world = new World();
const id = world.createEntity();
world.addComponent(id, Transform, { x: 0, y: 0 });
world.addComponent(id, Velocity, { vx: 100, vy: 0 });
world.addSystem(new MovementSystem(world));
world.update(dt);
world.render(ctx);

SpriteManager

const manager = new SpriteManager(EngineClass, engineType)
manager.load(imagePath, spriteData, options)
manager.getSprite(group, name)
manager.getAnimation(group, animationName)
manager.getGroup(group)
manager.getAllSprites(group)
manager.createAnimation(group, name, frameNames, options)
manager.createAnimationAs(group, animationName, options) // hereda speed/loop/onComplete de la definición
manager.createAnimatedDOM(group, animationName, options)
manager.createDOMElement(group, spriteName, options)
manager.createDOMElements(group, options)
manager.clearGroup(group)
manager.getImagePath(group)
manager.getSpriteAs(group, name, options)
manager.getAllSpritesAs(group, options)
manager.compose(entityName, slotDefs)
manager.getComposition(name)
manager.getEngineType()
manager.detectAndSetEngine()

SpriteProcessor (Estático)

SpriteProcessor.detectEngine()
SpriteProcessor.setEngineType(type)
SpriteProcessor.getEngineType()
SpriteProcessor.loadSpriteSheet(path, data, opts)
SpriteProcessor.processGrid(path, opts)
SpriteProcessor.processJSON(imagePath, jsonData, opts)
SpriteProcessor.processWithNaming(path, data, namingConfig)
SpriteProcessor.createAnimation(sprites, frameNames, opts)
SpriteProcessor.createSpriteGroup(sprites, config)
SpriteProcessor.defineAnimations(sprites, animationDefs)
SpriteProcessor.clearCache()
SpriteProcessor.createDOMElement(sprite, opts)
SpriteProcessor.createCanvasTexture(sprite, context)
SpriteProcessor.toPIXI(sprite)
SpriteProcessor.toCanvas(sprite)
SpriteProcessor.toDOM(sprite)
SpriteProcessor.getFormattedSprite(sprite, opts)
SpriteProcessor.showDebugGrid(manager)   // Alt+D
SpriteProcessor.hideDebugGrid()
SpriteProcessor.toggleDebugGrid(manager)

EntityComposer (composición por capas)

const composer = new EntityComposer(manager, slotDefs)
composer.addSlot(name, def)
composer.setAnimation(slot, anim)
composer.setAnimations({ slot: anim })
composer.getTexture(slot)
composer.getSprite(slot)
composer.getSlotNames()
composer.getSlot(slotName)
composer.getAnimations(slotName)
composer.getCurrentAnimation(slotName)
composer.update(dt)
composer.render(ctx, x, y)
composer.toPIXI()
composer.toDOM()

SpriteState / SpriteStateMachine

const state = new SpriteState({ name, frames, speed, loop, nextState, onEnter, onUpdate, onExit, onComplete })
state.update(dt)
state.getTexture()
state.reset()

const fsm = new SpriteStateMachine(owner, { idle: {...}, walk: {...} }, initialState)
fsm.addState(name, config)
fsm.setState(name)
fsm.update(dt)
fsm.getTexture()

Utilidades compartidas de juegos

Ver CORE_ENGINES.md para la guía completa.

Theme

Theme.colors.bg | .accent | .accent2 | .success | .warning | .info | .muted | .text | .textMuted | .textDim
Theme.font.mono | .ui

UICanvas

UICanvas.drawButton(ctx, label, x, y, w, h, accent, hover, disabled?)
UICanvas.hitTest(gx, gy, btn)
UICanvas.hitFirst(gx, gy, buttons)
UICanvas.getPointer()
UICanvas.layoutButtons(count, opts)

UIMenu

new UIMenu(items, opts)                    // items: [{ id, label, y?, accent?, disabled? }]
menu.draw(ctx, overrides?)
menu.handleClick(gx, gy)                     // → id | null
menu.handleInput({ skipIfLobbyVisible? })    // → id | null (ratón + touch)
menu.updateHover() | .getButton(id) | .getButtons() | .isHovered(id) | .relayout()
UIMenu.modeSelect(opts)                      // preset: vs IA / 1 vs 1 / En línea
UIMenu.onlineSetup(opts)                     // preset: host / join / volver

GameOverlay

GameOverlay.draw(ctx, { title, titleColor?, score?, scoreLabel?, lines?, hint?, cooldown?, panel?, dim? })
GameOverlay.drawDim(ctx, alpha?)
GameOverlay.canContinue(cooldown)
GameOverlay.onlineResult(winner, myId, opts?)  // → { title, color }

OnlineLobby

OnlineLobby.onCancel(cb)
OnlineLobby.show() | .hide() | .isVisible()
OnlineLobby.setStatus(msg) | .setTitle(msg) | .setCode(code)
OnlineLobby.showHostPanel(code) | .showJoinPanel() | .showHostView() | .showJoinView()
OnlineLobby.showStatusOnly(title, status)   // solo mensaje (p. ej. guest esperando)
OnlineLobby.updateLobbyList(items)          // lista de jugadores (domino 4p)
OnlineLobby.setLobbyLabel(text) | .enableStart(enabled, text?) | .onStartClick(cb)
OnlineLobby.getJoinCode() | .enableJoin(enabled) | .setJoinHandler(cb)
OnlineLobby.wireDefaultJoin((code) => Online.join(code))
OnlineLobby.host(handlers, { hideOnConnect: true })
OnlineLobby.prepareJoin(handlers, { hideOnConnect: true })
OnlineLobby.cancel()

MobileControls

MobileControls.bind(game, { 'btn-up': 'btnUp', ... })

GameBoot

GameBoot.start(game, { renderer, canvasId, containerId, width, height, bg, engine, beforeStart })
GameBoot.startCanvas(game, opts)   // Engine (Canvas 2D)
GameBoot.startPIXI(game, opts)
GameBoot.startLittle(game, opts)   // LittleJS
GameBoot.startDOM(game, opts)
// renderer: 'canvas' (default) | 'pixi' | 'little'