generacion-archivos
English

Personalizar videojuegos HTML5 con Cerewro: sprites, sonidos, colores y branding propio

Aprende a personalizar cualquier juego HTML5 generado por Cerewro: cambiar sprites con imágenes propias o generadas por IA (DALL-E), añadir efectos de sonido con Web Audio API, modificar paleta de colores y añadir el logo de tu marca.

Equipo Cerewro
sprites sonido personalizar html5 canvas assets branding

Personalizar videojuegos HTML5 con Cerewro

Aprende a personalizar cualquier juego HTML5 generado por Cerewro: cambiar los sprites por imágenes propias o generadas con DALL-E, añadir efectos de sonido con la Web Audio API, aplicar tu paleta de colores corporativa y añadir el logo de tu marca.

Cambiar sprites con imágenes propias

Cargar y usar imagen propia en Canvas
// Cargar imagen
const playerImg = new Image();
playerImg.src = 'assets/mi-personaje.png';

// Dibujar con sprite sheet (si tienes animaciones)
function drawPlayer(ctx, player, frame) {
  const FRAME_W = 64, FRAME_H = 64;
  ctx.drawImage(
    playerImg,
    frame * FRAME_W, 0,      // origen en el spritesheet
    FRAME_W, FRAME_H,        // tamaño del frame
    player.x, player.y,      // posición en pantalla
    player.w, player.h       // tamaño renderizado
  );
}

Generar sprites con IA (DALL-E desde Cerewro)

Prompt para generar sprite con Cerewro
Genera un sprite de personaje pixel art 64x64 para un juego de plataformas. 
El personaje debe ser un robot cyberpunk con colores neón azul y púrpura, 
fondo transparente, estilo retro 16-bit. 
Haz 4 variantes: idle, correr, saltar, atacar.

Efectos de sonido con Web Audio API

Sonidos 8-bit sin archivos externos
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();

function playSound(freq = 440, type = 'square', duration = 0.1, vol = 0.3) {
  const oscillator = audioCtx.createOscillator();
  const gainNode   = audioCtx.createGain();

  oscillator.connect(gainNode);
  gainNode.connect(audioCtx.destination);

  oscillator.type      = type;     // sine, square, sawtooth, triangle
  oscillator.frequency.value = freq;
  gainNode.gain.setValueAtTime(vol, audioCtx.currentTime);
  gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + duration);

  oscillator.start(audioCtx.currentTime);
  oscillator.stop(audioCtx.currentTime + duration);
}

// Ejemplos de sonidos del juego
const sounds = {
  jump:     () => playSound(300, 'square', 0.15),
  collect:  () => playSound(800, 'sine',   0.1),
  hit:      () => playSound(150, 'sawtooth', 0.2),
  gameOver: () => { playSound(400, 'square', 0.5); setTimeout(()=>playSound(200,'square',0.5),500); }
};

Tema de colores corporativo

Cerewro Chat — Cambiar paleta de colores
Cambia la paleta de colores del juego a los colores de mi marca:
- Color principal: #2563eb (azul corporativo)
- Color secundario: #f59e0b (naranja acento)
- Fondo: #0f172a (azul muy oscuro)
- Texto HUD: #e2e8f0 (gris claro)
- Enemigos: #dc2626 (rojo)
Aplica estos colores a todos los elementos del juego.
Branding completo en 2 pasos: 1) Pide a Cerewro que genere los sprites con tus colores usando DALL-E. 2) Pide que modifique el código para cargar esos assets y ajuste la paleta del HUD y efectos. En menos de 5 minutos tienes un juego con la identidad visual de tu empresa.