Indie dev efficiency4 min read

Animation Frames Play 1, 10, 2? Check Filenames and the Actual Sequence

Separate file-manager display order, the tool frame list, and final playback before changing FPS or declaring a renaming fix complete.

Animation Frames Play 1, 10, 2? Check Filenames and the Actual Sequence

The AI-generated cover shows several poses. It is not a numbered frame sequence, a real split result, or evidence of correct frame timing.

All twelve images are present, yet playback jumps from frame 1 to frame 10 and back to frame 2. Before lowering FPS to disguise the jump, compare filenames, the tool's frame list, and the sequence actually consumed by the target project.

Text order and numeric order are different

For example, frame_1.png, frame_2.png, and frame_10.png have the intended numeric order 1, 2, 10, while a common string comparison produces 1, 10, 2. The MDN Array.sort reference documents JavaScript's default string comparison. This explains one possible mechanism; it does not establish which sorting implementation Tooliva or your engine uses.

A correct-looking file-manager view does not prove that upload, export, and runtime loading use the same order. Confirm natural sorting, text sorting, or a manually maintained list at the actual stage being tested.

Zero padding has limits

For a planned twelve-frame group, a test copy could use one prefix and three-digit numbers: hero_attack_001.png through hero_attack_012.png. Equal-width numbers help this simple same-prefix group retain numeric order under text comparison. Three digits are an example specification, not a requirement for every project.

Padding cannot fix images assigned to the wrong numbers, mixed animations, or a manually different list. Revisit the full naming convention if numbering exceeds its width. Do not rename files already referenced by a live project without preserving an old-to-new mapping and checking the dependent references.

Build an explicit sequence record

  • Intended sequence number and original filename.
  • Recognizable content stage, such as anticipation, strike, or recovery where applicable.
  • Position in the tool's frame list.
  • Position used after export or by the target project.

If 008 is absent, determine whether a file is missing or the design intentionally omits that number. Do not duplicate 007 merely to reach a target count. If both 001.png and 1.png exist, batch padding can also create a name collision. Decide what each file represents before anything is overwritten.

Inspect the list inside the tool

Open the Animation Frame Tool and check this group's actual frames and order. Its public description includes frame-order adjustment and animation preview, but that does not promise a particular numeric sorting rule on upload or identical controls in every workflow.

Keep canvas dimensions, image contents, and playback parameters fixed while correcting a confirmed ordering error. Preview the complete action afterward. If the sequence is right but the character still jitters, investigate canvas and reference points. If the sequence is right but too fast, investigate timing separately.

Verify the order after export too

Retain the record and compare the exported images, actual metadata, or receiver's agreed sequence. Inspect only files that are really provided. A ZIP's internal listing is not automatically the player's order; check the target project's loading convention and final playback.

Observe the transition from last frame to first as well, without deleting intentional holds or blank frames just to hide a jump. For timing, see frame count, FPS, and loop duration. Mark this check complete only when image content, numbering, list order, and actual playback agree.

Recommended tools

Ready to try "Animation Frames Play 1, 10, 2? Check Filenames and the Actual Sequence"?

Use our online tools to apply this tutorial to your indie game project right away.