Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minuteTo use an animated GIF in Phaser or Godot, convert it into individual frames or a sprite sheet, then configure frame playback in the engine. Loading the GIF itself is not enough: Phaser’s LoaderPlugin documentation says an animated GIF displays only its first frame. A sheet supplies the image data, but you still need matching frame metadata and an animation definition.
What the conversion produces—and what it doesn’t
A sprite sheet is one image containing multiple frames, commonly arranged in a row, column, or grid. The engine needs to know how those cells are laid out: frame width and height, offsets, padding, and ordering all matter. A numbered PNG sequence instead keeps each frame in a separate file, which can make frame-by-frame inspection straightforward.
As an Amazon Associate I earn from qualifying purchases.
Neither output automatically carries every behavior of the original GIF into a game animation. Conversion gives you image frames and, depending on the export, metadata. Playback rate, looping, and the way frames are composed must be represented or configured for the engine.
Choose a frame format that matches the animation
Use a regular sprite sheet for equal-sized frames
If the GIF’s frames can be represented as equally sized cells, a conventional grid is a practical format. Phaser calls this a spritesheet: frames are extracted from a regular grid and referred to by integer indexes. Godot’s sprite-sheet import workflow likewise relies on horizontal and vertical cell counts. See Phaser’s texture documentation and Godot’s 2D sprite animation documentation.
#1 Best Overall
Use an atlas when frames vary in size or position
If frames are not uniform cells, don’t force a grid that slices them incorrectly. Phaser distinguishes a texture atlas, whose frames can have different sizes and positions and are referenced by names, from a regular grid spritesheet. Choose the loader that matches the actual image and its metadata; Phaser explains the distinction in its texture documentation.
Choose between a sequence and a sheet
A PNG sequence is a set of separate image files; a sheet packs frames into one image and requires the correct slicing information. Aseprite documents export to GIF, numbered PNG files, and a PNG sprite sheet. Its command-line interface can export a sheet with JSON data, which can make a repeatable conversion workflow easier to manage. The documentation describes the export options, not a general performance advantage for either format.
Rank #2
Convert the GIF and validate the exported frames
- Inspect the source. Note the GIF’s dimensions and watch the full animation. Decide whether its frames fit equal-sized cells or need variable frame bounds.
- Export frames or a sheet. In Aseprite, choose a numbered PNG sequence or a sprite sheet through its documented export options. For a command-line workflow, consult the Aseprite CLI documentation for sheet and JSON export options. Keep the native
.asepriteproject when you need its editable project information; Aseprite covers its formats in Basics. - Check the result against the GIF. Inspect transparency, frame timing, disposal behavior, partial-frame offsets, cropping, and alignment. These are validation points, not guaranteed conversion outcomes: the cited documentation does not establish how any particular converter preserves them.
- Record the layout accurately. For a grid, determine the cell width and height, row and column counts, and any spacing or offsets. For an atlas, use the frame names and bounds from its metadata.
- Configure and play it in the engine. Set up the frames and playback, then run the animation at its intended display size. Check ordering, speed, the loop point, and transparent edges.
Aseprite’s sprite-sheet documentation describes sheet import settings including dimensions, offsets, and padding. Those values need to match the actual image; incorrect boundaries can slice through frames or include neighboring cells.
Set up frame playback in Godot
Use AnimatedSprite2D and SpriteFrames
For a frame-based animation, Godot’s documented route is to create an AnimatedSprite2D and configure its SpriteFrames resource. Import the sheet, set the horizontal and vertical cell counts, and select the frames to include in the animation. Confirm that the selected cells follow the intended sequence. The steps are covered in Godot’s 2D sprite animation guide.
Use Sprite2D and AnimationPlayer
Alternatively, use a Sprite2D with an AnimationPlayer. Configure the sprite’s Hframes and Vframes for the grid, then animate its frame property. This route makes the frame index an animation track rather than using an AnimatedSprite2D frame collection; Godot documents both approaches in the same guide.
Set up frame playback in Phaser
Load a regular spritesheet or an atlas
For equal-sized grid cells, load a spritesheet with frame dimensions that match the exported cells. For variably sized frames, load an atlas with its corresponding metadata. Phaser’s texture documentation describes these formats and how grid frames use indexes while atlas frames use names.
Define the animation
After loading the texture, create an animation that selects the required texture frames in sequence, then set its playback rate and repetition behavior for the game. Phaser’s animation documentation covers frame selection and playback configuration. The loaded sheet is not itself a finished animation: the selected frames and playback settings still need to be defined.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Common points of failure
- Loading the animated GIF directly in Phaser: the LoaderPlugin documentation says only its first frame is rendered. Convert the animation to frames or a sheet and configure playback instead. See the LoaderPlugin API documentation.
- Incorrect grid counts or cell size: frames may be cut at the wrong boundaries or include adjacent cells. Match the engine’s horizontal and vertical counts and frame dimensions to the exported sheet.
- Unaccounted padding or offsets: the importer may include empty margins or crop a frame incorrectly. Check spacing and offsets in the sheet metadata or export settings.
- Using Phaser’s spritesheet loader for an atlas: a regular grid and a named, variable-bounds atlas are different layouts. Select the texture loader and frame references to match the asset.
- Assuming GIF timing or composition is preserved: per-frame delays, disposal methods, transparency, and partial-frame updates need to be checked on the actual exported images. There is no basis here to promise that a particular converter preserves them.
- Importing frames but not defining playback: Godot needs a
SpriteFramesanimation or anAnimationPlayertrack; Phaser needs an animation definition selecting texture frames.
Final in-engine checks
Play the configured animation in the target engine, not just in an image viewer. Confirm that frames appear in the intended order, the speed looks right at the actual display size, the loop starts and ends cleanly, and transparent edges do not reveal cropping or alignment problems. If the exported result differs from the source GIF, inspect the frames and metadata before changing engine playback settings.
Quick Recap
Best Value
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
