add beetle resource

Author: eonarheim

package-lock.json

@@ -33,9 +33,10 @@
     "serve": "14.2.4"
   },
   "dependencies": {
-    "excalibur": "0.30.0-alpha.1295"
+    "excalibur": "0.30.3",
+    "@excaliburjs/plugin-aseprite": "0.30.2"
   },
   "homepage": "",
   "repository": {},
   "bugs": {}
-}
+}

package.json

@@ -1,4 +1,10 @@
 declare module "*.png" {
     const val: string;
     export default val;
-}
+}
+
+
+declare module "*.aseprite" {
+    const val: string;
+    export default val;
+}

src/files.d.ts

@@ -28,7 +28,7 @@ export class Player extends Actor {
       // anchor: vec(0, 0), // Actors default center colliders and graphics with anchor (0.5, 0.5)
       // collisionType: CollisionType.Active, // Collision Type Active means this participates in collisions read more https://excaliburjs.com/docs/collisiontypes
     });
-    
+
   }
 
   override onInitialize() {
@@ -39,15 +39,15 @@ export class Player extends Actor {
     // 2. You need excalibur to be initialized & started 
     // 3. Deferring logic to run time instead of constructor time
     // 4. Lazy instantiation
-    this.graphics.add(Resources.Sword.toSprite());
+    this.graphics.add(Resources.BeetleAseprite.getAnimation('Loop'));
 
     // Actions are useful for scripting common behavior, for example patrolling enemies
     this.actions.delay(2000);
     this.actions.repeatForever(ctx => {
-      ctx.moveBy({offset: vec(100, 0), durationMs: 1000});
-      ctx.moveBy({offset: vec(0, 100), durationMs: 1000});
-      ctx.moveBy({offset: vec(-100, 0), durationMs: 1000});
-      ctx.moveBy({offset: vec(0, -100), durationMs: 1000});
+      ctx.moveBy({ offset: vec(100, 0), duration: 1000 });
+      ctx.moveBy({ offset: vec(0, 100), duration: 1000 });
+      ctx.moveBy({ offset: vec(-100, 0), duration: 1000 });
+      ctx.moveBy({ offset: vec(0, -100), duration: 1000 });
     });
 
     // Sometimes you want to click on an actor!

src/images/beetle.aseprite

@@ -1,9 +1,12 @@
 import { ImageSource, Loader } from "excalibur";
+import { AsepriteResource } from "@excaliburjs/plugin-aseprite";
 import swordPath from './images/sword.png'; // Webpack asset/resource loader will find the image path
+import beetlePath from './images/beetle.aseprite';
 
 // It is convenient to put your resources in one place
 export const Resources = {
-  Sword: new ImageSource(swordPath)
+  Sword: new ImageSource(swordPath),
+  BeetleAseprite: new AsepriteResource(beetlePath)
 } as const; // the 'as const' is a neat typescript trick to get strong typing on your resources. 
 // So when you type Resources.Sword -> ImageSource
 

src/player.ts

@@ -14,7 +14,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(png|svg|jpg|jpeg|gif)$/i,
+        test: /\.(png|svg|jpg|jpeg|gif|aseprite)$/i,
         type: "asset/resource",
       },
       {