docs: Update animation + fix doc build

site/docs/04-graphics/04.2-animation.mdx

@@ -2,6 +2,7 @@
 slug: /animation
 ---
 import AnimationExample from '!!raw-loader!./examples/animation.ts'
+import AnimationExample2 from '!!raw-loader!./examples/animation-coords.ts'
 import playerRun from './examples/player-run.png'
 
 # Animation
@@ -76,7 +77,7 @@ export enum AnimationStrategy {
 }
 ```
 
-Animation frames can be created by hand in the following example
+
 
 
 ```ts twoslash
@@ -85,7 +86,11 @@ Animation frames can be created by hand in the following example
 // @include: animation
 ```
 
-Animations can be constructed quickly from [`ex.SpriteSheets`](#SpriteSheet)
+## Animation From SpriteSheet
+
+Animations can also be constructed quickly from [`ex.SpriteSheets`](#SpriteSheet).
+
+Animation frames can be created by hand in the following example by specifying the sprite sheet indices from the top left, top to bottom (row major order).
 
 ![Character running sprite sheet](player-run.png)
 
@@ -95,6 +100,16 @@ Animations can be constructed quickly from [`ex.SpriteSheets`](#SpriteSheet)
   assets={{'player-run.png': playerRun}} 
 />
 
+Additionally you can specify the (x, y) positions of sprites in the SpriteSheet of each frame, for example (0, 0) is the the top left sprite, (0, 1) is the sprite directly below that, and so on.
+
+<GameCodeBlock 
+  live 
+  code={AnimationExample2} 
+  assets={{'player-run.png': playerRun}} 
+/>
+
+## Events
+
 Animations also emit events per frame, per loop, and per end (if it completes).
 
 ```ts twoslash

site/docs/04-graphics/examples/animation-coords.ts

@@ -0,0 +1,35 @@
+import playerRun from './player-run.png';
+
+const runImage = new ex.ImageSource(playerRun);
+
+const runSheet = ex.SpriteSheet.fromImageSource({
+    image: runImage,
+    grid: {
+        rows: 1,
+        columns: 21,
+        spriteWidth: 96,
+        spriteHeight: 96
+    }
+});
+
+const runAnim = ex.Animation.fromSpriteSheetCoordinates({
+  spriteSheet: runSheet,
+  durationPerFrameMs: 200,
+  frameCoordinates: [
+    {x: 1, y: 0},
+    {x: 2, y: 0},
+    {x: 3, y: 0},
+    {x: 4, y: 0},
+    {x: 5, y: 0}
+  ]
+});
+
+const actor = new ex.Actor({
+    pos: ex.vec(game.halfDrawWidth, game.halfDrawHeight)
+});
+actor.graphics.use(runAnim);
+
+const loader = new ex.Loader([runImage]);
+game.start(loader).then(() => {
+    game.currentScene.add(actor);
+});

site/docusaurus.config.ts

@@ -255,7 +255,7 @@ const config: Config = {
           items: [
             {
               label: 'Tutorial',
-              to: '/docs/intro'
+              to: '/docs/getting-started'
             }
           ]
         },

site/package.json

@@ -42,7 +42,8 @@
     "@types/react": "^18.3.3",
     "micromark-extension-mdxjs": "^3.0.0",
     "patch-package": "^8.0.0",
-    "ts-loader": "^9.5.1",
+    "ts-loader": "9.5.1",
+    "css-loader": "6.8.1",
     "typescript": "~5.2.2",
     "url-loader": "^4.1.1"
   },

src/engine/Graphics/Animation.ts

@@ -251,8 +251,8 @@ export class Animation extends Graphic implements HasTick {
    *  frameCoordinates: [
    *    {x: 0, y: 5, duration: 100, options { flipHorizontal: true }},
    *    {x: 1, y: 5, duration: 200},
-   *    {x: 2, y: 5, duration: 100},
-   *    {x: 3, y: 5, duration: 500}
+   *    {x: 2, y: 5},
+   *    {x: 3, y: 5}
    *  ],
    *  strategy: AnimationStrategy.PingPong
    * });