Crea Juegos 2D con Tiniest2D
Sprites y Animación
Lesson 3 of 11 • 10 XP
Keep your place in this quest
Log in or sign up for free to subscribe, follow lesson progress, and access more learning content.
Creando Recursos
Los recursos son las piezas que tu juego utiliza: imágenes, escenas, sonidos y objetos. En Tiniest2D, creas la mayoría de los recursos escribiendo una variable en el script. El editor reconoce constructores como Sprite() y te permite editar el recurso visualmente.
Sprites
Los sprites son imágenes de arte pixelado. Se utilizan para personajes, paredes, monedas, botones, balas, fondos y cualquier otra cosa que necesite ser dibujada. Un sprite puede ser una sola imagen o una pequeña animación hecha de múltiples fotogramas.
Para crear un sprite, declara una variable con el constructor Sprite():
var playerSprite = Sprite(16, 16)
var coin = Sprite(8, 8)
var wall = Sprite(32, 32)
Los números son el ancho y la altura en píxeles. Después de guardar, verás el nombre de la variable envuelto en un cuadro oscuro - esto indica que es un recurso sprite.
Para editar un sprite:
- Ctrl+Click en el nombre de la variable sprite
- Se abrirá el Editor de Sprites
Controles del Editor de Sprites
El Editor de Sprites es donde dibujas la imagen píxel por píxel. Si eres nuevo en el arte pixelado, comienza pequeño: los sprites de 8x8 o 16x16 son más fáciles de leer, editar y animar.
| Control | Acción |
|---|---|
| Clic izquierdo | Pintar píxel con el color actual |
| Clic derecho | Borrar píxel (transparente) |
| Arrastre con el botón del medio | Desplazar la vista |
| Rueda del ratón | Acercar/alejar |
| Paleta de colores | Haz clic para seleccionar color |
| Ancho/Alto +/- | Cambiar el tamaño del sprite |
| Alternar colisionador | Activar/desactivar límites de colisión |
| Desplazamientos del colisionador | Ajustar inserciones de colisión L/T/R/B |
| Mostrar colisionador | Previsualizar límites de colisión |
| Espacio | Alternar vista previa de animación |
| Flechas izquierda/derecha | Navegar entre fotogramas |
| Escape | Regresar al editor de scripts |
Panel de Animación
La animación se crea mostrando varios fotogramas de sprite rápidamente en secuencia. Por ejemplo, un personaje caminando podría tener un fotograma con el pie izquierdo adelante y otro con el pie derecho adelante.
El panel de animación (en la barra lateral izquierda) te permite gestionar fotogramas de sprite:
| Control | Acción |
|---|---|
| FPS +/- | Ajustar la velocidad de animación (fotogramas por segundo) |
| Agregar fotograma | Agregar un nuevo fotograma en blanco al final |
| Copiar fotograma | Duplicar el fotograma actual (insertado después del actual) |
| Eliminar fotograma | Eliminar el fotograma actual (solo si hay más de 1 fotograma) |
| Tira de fotogramas | Haz clic en las miniaturas en la parte inferior para seleccionar fotogramas |
Cuando un sprite tiene múltiples fotogramas, los objetos que lo usan se animarán automáticamente en tiempo de ejecución. Cada objeto rastrea su propio estado de animación de manera independiente.