Haxe Animation Problem

so i was doing a tutoriel for animations

and when i run it it shows this

here is the code


import flixel.FlxG;
import flixel.FlxSprite;
import flixel.FlxState;
import flixel.animation.FlxAnimation;
import flixel.system.FlxAssets.FlxGraphicAsset;
import flixel.system.FlxSplash;
import flixel.text.FlxText;
import flixel.tweens.FlxTween;
import flixel.util.FlxColor;

class PlayState extends FlxState
	var spritesheet:FlxSprite;
	var text:FlxText;

	override public function create():Void

		text = new FlxText(0, 0, 300);

		spritesheet = new FlxSprite();
		spritesheet.loadGraphic(AssetPaths.picturewalk_thumb_1__png, true, 512, 384);
		spritesheet.animation.add("walk", [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15], 5, true);


	override public function update(elapsed:Float)

and here are the versions i am using, flixel: 4.9.0 openfl: 9.1.0 haxe version is 4.0.2 and lime is 4.9.0

please help i have been trying to fix this for days

I had a quick look at the tutorial linked from the youtube video. I couldn’t find the image for download and the example image shown is a 240x181 thumbnail that wont work with the sizes in the code.

There’s a comment in the yt video that says:

Nice video, although the size of each frame is actually 256 x 192, not 512 x 384.

Try changing the frame size, maybe that will work.

spritesheet.loadGraphic(AssetPaths.picturewalk_thumb_1__png, true, 256, 192);

The main thing to know is the spritesheet image is a 4 x 4 grid of 16 equal size frames and they must match the frame size in loadGraphic().