skills.rest
vchelaru
vchelaruCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

gum-runtime-animation-chains

Diagnose AnimationChain playback on Gum Sprites and NineSlices across XNA, Raylib, and Skia backends.

614|78|Updated Mar 11, 2015
Search Tags:#playback#sprite#Animation#gum#nineslice#flatredball#achx
One-click install
npx skills add https://github.com/vchelaru/Gum --skill gum-runtime-animation-chains
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: gum-runtime-animation-chains
Source: https://github.com/vchelaru/Gum/tree/main/.claude/skills/gum-runtime-animation-chains
Command: npx skills add https://github.com/vchelaru/Gum --skill gum-runtime-animation-chains

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Runtime sprite animations loaded from .achx/.achj files can misbehave in Gum — frames drift, offsets misalign with FlatRedBall-authored values, or per-frame colors fail to apply — and the cause is buried in the split between frame-change logic and render-time logic. This Skill explains the full AnimationChain pipeline so you can diagnose and fix these playback issues.

Core Features & Use Cases

  • Pipeline Reference: Traces .achx/.achj deserialization through AnimationChainListSave into runtime AnimationChainList objects, including pixel-vs-UV coordinate conversion at load time.
  • Playback Internals: Documents AnimationChainLogic state (CurrentChainName resolution, looping, frame-change callbacks) shared across XNA, Sokol, Raylib, and Skia backends.
  • Known Gotchas: Covers the RelativeX/Y top-left vs center anchor mismatch with FRB-authored animations, NineSlice's lack of RelativeX/Y support, and per-frame color (Alpha/Multiply/Add) application rules.
  • Use Case: A collapse animation authored in the FRB AnimationEditor climbs upward in Gum when HeightUnits is PercentageOfSourceFile — use this Skill to identify the anchor mismatch and apply the (referenceHeight - currentHeight) / 2 correction.

Quick Start

Ask the AI to explain why my Gum Sprite animation drifts vertically when using RelativeY offsets from an FRB-authored .achx file.

Frequently Asked Questions about gum-runtime-animation-chains

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I play .achx animations on a Gum Sprite?▼

Load the .achx file with AnimationChainListSave.FromFile, convert it via ToAnimationChainList, assign it to the Sprite's AnimationChains, and set Animate to true. AnimationChainLogic advances frames each tick through GraphicalUiElement.AnimateSelf.

Why does my FRB animation drift upward in Gum?▼

Gum applies RelativeX/Y offsets around a top-left anchor while FRB authors them around a center anchor. When HeightUnits tracks the source rect, add (referenceHeight - currentHeight) / 2 to Y to compensate for the missing half of the height change.

Does Gum NineSlice support RelativeX/Y animation offsets?▼

No. NineSlice composes the same AnimationChainLogic as Sprite but its ApplyAnimationFrame only distributes the frame texture across the nine slices and copies flip flags. RelativeX/Y would need to be added in NineSlice's render path.

What is the difference between .achx and .achj animation files?▼

Both deserialize into AnimationChainListSave: .achx uses XML serialization while .achj is JSON matching FlatRedBall2's AnimationChain.Common writer. FromFile picks the parser based on the file extension.

Does Gum support per-frame color in animation chains?▼

Yes, AnimationFrame carries nullable Red/Green/Blue/Alpha and a ColorOperation. Alpha and Multiply are applied on XNA, Raylib, and Skia backends; Add parses but is not rendered anywhere yet because it needs a per-backend pixel shader.

Related Skills

Explore More Software Engineering Skills→
phaserjsphaserjs
40.1k

animations

Manage sprite animations with global and per-sprite states in Phaser 4.

Official
Advanced
vchelaruvchelaru
597

gum-service

Initialize and manage the Gum runtime UI lifecycle across MonoGame, Raylib, KNI, and FNA.

Community
Advanced
AGMO-IncAGMO-Inc
4

implement-page

Automate Figma-to-code workflows with frame discovery, per-frame orchestration, and visual verification.

Official
Advanced
imankhaimankha

keyframe-data-model

Manage frame-based keyframes with origin tracking and interpolation rules.

Community
Advanced