Getting started with 2D animation

Two short builds: a sprite that cycles through frames, and a square that bounces. Between them they cover everything the animation system does.

You'll need a project you can open in the editor, and — for part 1 — a sprite sheet image: one PNG with several equally sized cells in a row, say four 32×32 cells in a 128×32 image.

Reopen after adding files by hand

Dropping a new file onto disk yourself, rather than through an editor panel's Save, means closing and reopening the project before the editor recognizes it.

Part 1 — A flipbook sprite

1. Add your image. Copy it into Assets/Textures/, then reopen the project.

2. Slice it into frames. Open the Sprite Sheet editor (Windows → Sprite Sheet Editor, or double-click an existing .jsprite) and click New Sprite Sheet. Drag your image onto the Texture slot, set Cell Width/Cell Height to your grid size (32×32 for a 128×32, four-cell strip), and click Slice — the frame list fills in as frame0, frame1, frame2, frame3. Click Save As and save it as Assets/Sprites/Player.jsprite.

3. Author the animation. For now, a clip's frame-by-frame timing is entered directly in its file rather than through a visual tool. Create Assets/Animations/Spin.janim as a looping, half-second clip with one sprite track that shows frame0, frame1, frame2, and frame3 in turn, evenly spaced across that half second, pointing at the Player.jsprite sheet you just saved.

Reopen the project so the editor recognizes the new file. Double-click it to check it in the Timeline panel — it should show a half-second duration with one sprite track.

4. Wrap it in a controller. Open the Animator editor (Windows → Animator Editor) and click New Animator Controller. Under States, click + Add State, rename it to Spin, and drag Spin.janim from the Content Browser onto its Clip column. Set Default State to Spin. Click Save As and save it as Assets/Animators/Player.janimator.

One state playing one clip — all a flipbook needs.

5. Build the entity. In the editor: create an entity, Add Component → Sprite Renderer, and drag your PNG onto its Texture slot — the whole sheet shows for now. Then Add Component → Animator, and drag Player.janimator onto its Controller slot.

6. Press Play. The sprite cycles through its frames.

Want to see it without pressing Play? Turn on Preview In Editor on the Animator component.

Part 2 — A bouncing square

No image needed this time. Create Assets/Animations/Bounce.janim as a looping, one-second clip with a single track that moves the entity's vertical position: up 0.75 units over the first half-second, then back down over the second half.

Reopen the project, wrap it in a controller the same way as step 4 (a new .janimator with one state pointing at Bounce.janim), give a second entity a Sprite Renderer (pick a colour, no texture) and an Animator pointing at the new controller.

Press Play — it bounces.

One thing to know: keyframe values are absolute positions, not offsets. While this clip plays it owns the entity's Y position, so whatever you set in the Inspector is overwritten.

Next

• Asset files — everything you can put in a sprite sheet, clip or controller
• Scripting — drive animation from C#
• Troubleshooting — when nothing moves
• Physics2D — once you're driving an Animator's parameters from code, a ground check is the usual way to decide what a jump/land transition should do
• Session — carries a value (which animation set is equipped, say) across a scene change, so it's still there for the next scene's Animator to read