Guide HubCentro de guías
Add Your Own Animations · Godot guidesAñade tus propias animaciones · Guías de Godot

Godot · AnimationGodot · Animación

Add Your Own AnimationsAñade tus propias animaciones

Have animation artwork you want to use in Threadbare? This guide shows you how to bring your sprite-sheet PNGs into Godot, organize them into a new resource, and use them on an existing character or animated object.¿Tienes arte de animación que quieres usar en Threadbare? Esta guía te muestra cómo traer tus PNG de hojas de sprites a Godot, organizarlos en un nuevo recurso y usarlos en un personaje u objeto animado existente.

This lets you change the animation artwork without rebuilding how the character or object already works.Esto te permite cambiar el arte de animación sin reconstruir cómo funciona ya el personaje u objeto.

In this guideEn esta guía

  1. Look at an existing animation setupMira una configuración de animación existente
  2. Create your animation artworkCrea tu arte de animación
  3. Bring your sprite sheets into GodotTrae tus hojas de sprites a Godot
  4. Make your own SpriteFrames resourceCrea tu propio recurso SpriteFrames
  5. Use and test your new animationsUsa y prueba tus nuevas animaciones
  6. Quick referenceReferencia rápida

Look at an existing animation setupMira una configuración de animación existente

Start by looking at a character or animated object whose artwork you might want to change. Its SpriteFrames resource lets you see which animations it uses and how they are set up.Empieza mirando un personaje u objeto animado cuyo arte quizá quieras cambiar. Su recurso SpriteFrames te permite ver qué animaciones usa y cómo están configuradas.

Steps 1–2Pasos 1–2

click when doneclic al terminar

Find the SpriteFrames resourceEncuentra el recurso SpriteFrames

Select a character or animated object in a Playable Area and find the Sprite Frames property it uses.Selecciona un personaje u objeto animado en una zona jugable y busca la propiedad Sprite Frames que usa.

Sprite Frames may appear directly on the character or object, or you may need to open its own scene and select its . Watch the clips to see both possibilities.Sprite Frames puede aparecer directamente en el personaje u objeto, o quizá tengas que abrir su propia escena y seleccionar su . Mira los clips para ver ambas posibilidades.

Look through the animations it usesMira las animaciones que usa

Open the SpriteFrames resource and look through how its animations are set up. For now, you're only exploring, not changing anything.Abre el recurso SpriteFrames y revisa cómo están configuradas sus animaciones. Por ahora solo estás explorando, sin cambiar nada.

Pay attention to:Fíjate en:

  • the animation names, such as idle, walk, and attacklos nombres de las animaciones, como idle, walk y attack
  • how many are used and their ordercuántos se usan y su orden
  • whether each animation loops and how fast it playssi cada animación se repite y a qué velocidad se reproduce

This SpriteFrames resource can be a useful starting point later, or you can choose another one that already has the animations your artwork needs.Este recurso SpriteFrames puede ser un punto de partida útil más adelante, o puedes elegir otro que ya tenga las animaciones que tu arte necesita.

Create your animation artworkCrea tu arte de animación

Create the frames you want using the drawing or animation tool of your choice.Crea los cuadros que quieras con la herramienta de dibujo o animación que prefieras.

If you need a tool, here are a couple simple pixel-art options:Si necesitas una herramienta, aquí tienes un par de opciones sencillas de pixel art:

PixelStitch Piskel

When your frames are ready, export each animation as a PNG, with all of its frames together in one image. Most animation tools include a sprite sheet option when you export.Cuando tus cuadros estén listos, exporta cada animación como un PNG de , con todos sus cuadros juntos en una imagen. La mayoría de las herramientas de animación incluyen una opción de hoja de sprites al exportar.

Then come back to Godot with your sprite sheets ready.Luego vuelve a Godot con tus hojas de sprites listas.

Bring your sprite sheets into GodotTrae tus hojas de sprites a Godot

Add your finished sprite sheets to your Godot project and keep the related animation files together.Añade tus hojas de sprites terminadas a tu proyecto de Godot y mantén juntos los archivos de animación relacionados.

Step 3Paso 3

click when doneclic al terminar

Add your sprite sheets to the projectAñade tus hojas de sprites al proyecto

Create a folder for your new animation files, then place your finished sprite-sheet PNGs inside it. You can name the folder whatever makes sense for your project. We'll use new_hero as an example.Crea una carpeta para tus nuevos archivos de animación y coloca dentro tus PNG de hojas de sprites terminados. Puedes ponerle a la carpeta el nombre que tenga sentido para tu proyecto. Usaremos new_hero como ejemplo.

new_hero/
idle.png
walk.png
attack.png
new_hero_frames.tres

Godot should import the PNGs automatically and show them in the FileSystem. Once they appear there, they're ready to use.Godot debería importar los PNG automáticamente y mostrarlos en el FileSystem. Una vez que aparezcan ahí, están listos para usar.

Make your own SpriteFrames resourceCrea tu propio recurso SpriteFrames

You don't need to rebuild the animation setup from scratch. Start with a SpriteFrames that already has the animations your artwork needs, save your own copy, and replace its artwork with yours.No necesitas reconstruir la configuración de animación desde cero. Empieza con un SpriteFrames que ya tenga las animaciones que tu arte necesita, guarda tu propia copia y reemplaza su arte por el tuyo.

Steps 4–6Pasos 4–6

click when doneclic al terminar

Save your own copy of the SpriteFramesGuarda tu propia copia del SpriteFrames

Open the SpriteFrames resource you want to use as your starting point. It should already have the animations your artwork needs. For example, if you made walk and run animations, this SpriteFrames should already have walk and run.Abre el recurso SpriteFrames que quieras usar como punto de partida. Ya debería tener las animaciones que tu arte necesita. Por ejemplo, si hiciste animaciones de walk y run, este SpriteFrames ya debería tener walk y run.

Before changing anything:Antes de cambiar nada:

  • Choose Save As....Elige Guardar como....
  • Save it as a new .tres file in the folder with your animation artwork.Guárdalo como un nuevo archivo .tres en la carpeta con tu arte de animación.
  • Give the copy a name that makes sense for your artwork, such as new_hero_frames.tres.Ponle a la copia un nombre que tenga sentido para tu arte, como new_hero_frames.tres.

Check that the new resource name is showing before you change any frames. This makes sure you're editing your copy, not the original.Comprueba que el nombre del recurso nuevo aparece antes de cambiar cualquier cuadro. Así te aseguras de que estás editando tu copia, no el original.

Replace the old frames with your ownReemplaza los cuadros viejos por los tuyos

In your new SpriteFrames copy, choose an animation you want to change, such as walk. Remove the old image frames, but keep the animation itself and its name.En tu nueva copia de SpriteFrames, elige una animación que quieras cambiar, como walk. Quita los cuadros de imagen viejos, pero conserva la animación y su nombre.

Then add your own frames:Luego añade tus propios cuadros:

  • Select Add Frames from a Sprite Sheet.Selecciona Añadir cuadros desde una hoja de sprites.
  • Open the matching PNG, such as walk.png.Abre el PNG correspondiente, como walk.png.
  • Set the rows and columns so each selection contains one complete drawing. You can also try Auto Slice.Ajusta las filas y columnas para que cada selección contenga un dibujo completo. También puedes probar Auto Slice.
  • Select the frames in the order they should play.Selecciona los cuadros en el orden en que deben reproducirse.

Add the selected frames and preview the animation. The existing animation name, looping, and playback-speed settings stay in place unless you decide to change them.Añade los cuadros seleccionados y previsualiza la animación. El nombre de la animación, el bucle y la velocidad de reproducción existentes se mantienen a menos que decidas cambiarlos.

Repeat and preview your animationsRepite y previsualiza tus animaciones

Repeat the same process for every animation the character or object will use in your scene. Preview each one and check the frame order, alignment, looping, and playback speed.Repite el mismo proceso con cada animación que el personaje u objeto vaya a usar en tu escena. Previsualiza cada una y revisa el orden de los cuadros, la alineación, el bucle y la velocidad de reproducción.

Use and test your new animationsUsa y prueba tus nuevas animaciones

The SpriteFrames preview lets you check each animation, but the real test is seeing your artwork work in the game.La vista previa de SpriteFrames te deja revisar cada animación, pero la prueba real es ver tu arte funcionando en el juego.

Steps 7–8Pasos 7–8

click when doneclic al terminar

Use your SpriteFrames on a character or objectUsa tu SpriteFrames en un personaje u objeto

If you created your SpriteFrames copy directly on the character or object you want to change, it may already be in place. To use your saved SpriteFrames somewhere else, find that character or object's Sprite Frames property.Si creaste tu copia de SpriteFrames directamente en el personaje u objeto que quieres cambiar, puede que ya esté en su lugar. Para usar tu SpriteFrames guardado en otro sitio, busca la propiedad Sprite Frames de ese personaje u objeto.

You can reuse your SpriteFrames in two simple ways: use Quick Load from the Sprite Frames property, or drag the .tres file from the FileSystem onto that property.Puedes reutilizar tu SpriteFrames de dos formas sencillas: usa Quick Load desde la propiedad Sprite Frames, o arrastra el archivo .tres desde el FileSystem a esa propiedad.

Once it is loaded, the character or object should display the animation artwork from your SpriteFrames resource.Una vez cargado, el personaje u objeto debería mostrar el arte de animación de tu recurso SpriteFrames.

Test it in the Playable AreaPruébalo en la zona jugable

Run the Playable Area and trigger the animations you changed. For example, a Player might show idle while standing still, walk while moving, and attack when attacking.Ejecuta la zona jugable y activa las animaciones que cambiaste. Por ejemplo, un Player podría mostrar idle al estar quieto, walk al moverse y attack al atacar.

Check that the correct artwork appears, the frames stay aligned and play in order, and the looping and speed look right. If something is off, return to the SpriteFrames resource and adjust it.Comprueba que aparezca el arte correcto, que los cuadros queden alineados y se reproduzcan en orden, y que el bucle y la velocidad se vean bien. Si algo falla, vuelve al recurso SpriteFrames y ajústalo.

You should now be able to…Ahora deberías poder…

create your own animation artwork and use it for a character in your game.crear tu propio arte de animación y usarlo para un personaje de tu juego.

Quick referenceReferencia rápida

What stays the sameLo que no cambia

You're keeping the existing scene, animation names, settings, and the behavior or logic that decides when those animations play.Conservas la escena existente, los nombres de animación, los ajustes, y el comportamiento o la lógica que decide cuándo se reproducen esas animaciones.

What you createLo que creas

Your own animation artwork, plus a new .tres copy of a SpriteFrames resource that already has the animations you need.Tu propio arte de animación, más una nueva copia .tres de un recurso SpriteFrames que ya tiene las animaciones que necesitas.

What you swapLo que intercambias

Inside your SpriteFrames copy, you replace the old image frames with your own. The character or object can keep using the same animation setup.Dentro de tu copia de SpriteFrames, reemplazas los cuadros de imagen viejos por los tuyos. El personaje u objeto puede seguir usando la misma configuración de animación.

If an animation doesn't work, check…Si una animación no funciona, revisa…

When a SpriteFrames resource is open, controls like looping and playback speed appear in the toolbar above the animation frames.Cuando un recurso SpriteFrames está abierto, controles como el bucle y la velocidad de reproducción aparecen en la barra de herramientas encima de los cuadros de animación.

  1. Right SpriteFrames copy — are you editing and using your new SpriteFrames copy rather than the original?La copia correcta de SpriteFrames — ¿estás editando y usando tu nueva copia de SpriteFrames en vez del original?
  2. Right frames — did you add the artwork you meant to use to the correct animation?Los cuadros correctos — ¿añadiste el arte que querías usar a la animación correcta?
  3. Frame order — are the drawings playing in the order you intended?Orden de los cuadros — ¿los dibujos se reproducen en el orden que querías?
  4. Sprite sheet slicing — does each selected cell contain one complete drawing?Corte de la hoja de sprites — ¿cada celda seleccionada contiene un dibujo completo?
  5. Looping — should this animation repeat? Check the looping control in the toolbar above the frames.Bucle — ¿esta animación debería repetirse? Revisa el control de bucle en la barra de herramientas encima de los cuadros.
  6. Playback speed — if the animation looks too fast or too slow, adjust its playback speed in the toolbar above the frames.Velocidad de reproducción — si la animación se ve demasiado rápida o lenta, ajusta su velocidad de reproducción en la barra de herramientas encima de los cuadros.
  7. Artwork position — does the character or object stay in a similar place inside each frame?Posición del arte — ¿el personaje u objeto se mantiene en un lugar similar dentro de cada cuadro?