From 74cbf3f2c83ef9cb2f7449b38b785dfedca9ac82 Mon Sep 17 00:00:00 2001
From: Dennis Postma <dennis@directonline.io>
Date: Thu, 31 Oct 2024 12:31:30 +0100
Subject: [PATCH] Animations now load dynamically and are cached
---
package-lock.json | 86 +++++++++++++++----------------
src/composables/gameComposable.ts | 22 ++++----
2 files changed, 56 insertions(+), 52 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 4eac375..f99c517 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -86,9 +86,9 @@
}
},
"node_modules/@babel/code-frame": {
- "version": "7.26.0",
- "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.0.tgz",
- "integrity": "sha512-INCKxTtbXtcNbUZ3YXutwMpEleqttcswhAdee7dhuoVrD2cnuc3PqtERBtxkX5nziX9vnBL8WXmSGwv8CuPV6g==",
+ "version": "7.26.2",
+ "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+ "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -101,9 +101,9 @@
}
},
"node_modules/@babel/compat-data": {
- "version": "7.26.0",
- "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.0.tgz",
- "integrity": "sha512-qETICbZSLe7uXv9VE8T/RWOdIE5qqyTucOt4zLYMafj2MRO271VGgLd4RACJMeBO37UPWhXiKMBk7YlJ0fOzQA==",
+ "version": "7.26.2",
+ "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.26.2.tgz",
+ "integrity": "sha512-Z0WgzSEa+aUcdiJuCIqgujCshpMWgUpgOxXotrYPSA53hA3qopNaqcJpyr0hVb1FeWdnqFA35/fUtXgBK8srQg==",
"dev": true,
"license": "MIT",
"engines": {
@@ -152,13 +152,13 @@
}
},
"node_modules/@babel/generator": {
- "version": "7.26.0",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.0.tgz",
- "integrity": "sha512-/AIkAmInnWwgEAJGQr9vY0c66Mj6kjkE2ZPB1PurTRaRAh3U+J45sAQMjQDJdh4WbR3l0x5xkimXBKyBXXAu2w==",
+ "version": "7.26.2",
+ "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.2.tgz",
+ "integrity": "sha512-zevQbhbau95nkoxSq3f/DC/SC+EEOUZd3DYqfSkMhY2/wfSeaHV1Ew4vk8e+x8lja31IbyuUa2uQ3JONqKbysw==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@babel/parser": "^7.26.0",
+ "@babel/parser": "^7.26.2",
"@babel/types": "^7.26.0",
"@jridgewell/gen-mapping": "^0.3.5",
"@jridgewell/trace-mapping": "^0.3.25",
@@ -394,9 +394,9 @@
}
},
"node_modules/@babel/parser": {
- "version": "7.26.1",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.1.tgz",
- "integrity": "sha512-reoQYNiAJreZNsJzyrDNzFQ+IQ5JFiIzAHJg9bn94S3l+4++J7RsIhNMoB+lgP/9tpmiAQqspv+xfdxTSzREOw==",
+ "version": "7.26.2",
+ "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
+ "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
"license": "MIT",
"dependencies": {
"@babel/types": "^7.26.0"
@@ -1928,9 +1928,9 @@
}
},
"node_modules/@types/node": {
- "version": "20.17.3",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.3.tgz",
- "integrity": "sha512-tSQrmKKatLDGnG92h40GD7FzUt0MjahaHwOME4VAFeeA/Xopayq5qLyQRy7Jg/pjgKIFBXuKcGhJo+UdYG55jQ==",
+ "version": "20.17.4",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.4.tgz",
+ "integrity": "sha512-Fi1Bj8qTJr4f1FDdHFR7oMlOawEYSzkHNdBJK+aRjcDDNHwEV3jPPjuZP2Lh2QNgXeqzM8Y+U6b6urKAog2rZw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2426,14 +2426,14 @@
"license": "MIT"
},
"node_modules/@vue/devtools-core": {
- "version": "7.5.6",
- "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.5.6.tgz",
- "integrity": "sha512-Y/hqXk3sTdqAutWqb2KVisnxUMubzo3fHuSOgmSJ/Ok09yCxYdY7ztCDGWUdgVQQVQKGD84yefYwStutvLOeuA==",
+ "version": "7.6.1",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.6.1.tgz",
+ "integrity": "sha512-wnxvfcz5uGPjG7wIQkIlapmO0TYr+8p2MNFsPfhQFPdpu0miEmQXVxyNetAFrK7GfTrC0suOuq0J1Otez9gz1A==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@vue/devtools-kit": "^7.5.6",
- "@vue/devtools-shared": "^7.5.6",
+ "@vue/devtools-kit": "^7.6.1",
+ "@vue/devtools-shared": "^7.6.1",
"mitt": "^3.0.1",
"nanoid": "^3.3.4",
"pathe": "^1.1.2",
@@ -2444,13 +2444,13 @@
}
},
"node_modules/@vue/devtools-kit": {
- "version": "7.5.6",
- "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.5.6.tgz",
- "integrity": "sha512-44qr4/l9BsNP5hKETucueP8SKkyDZBHEurV4pQnRWs906OG9f2aYWhk4vL+27tsB4ZoWJM2h3RLhygzeeKZzWg==",
+ "version": "7.6.1",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.6.1.tgz",
+ "integrity": "sha512-cCcdskZDLqKwJUHq1+kH9zAfYM+y9OFq8J2NT0xcAUYpu8K5IJd03ydZkvr7ydOd9UKBxrGyZpYe9PpJ0ChrVw==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@vue/devtools-shared": "^7.5.6",
+ "@vue/devtools-shared": "^7.6.1",
"birpc": "^0.2.19",
"hookable": "^5.5.3",
"mitt": "^3.0.1",
@@ -2460,9 +2460,9 @@
}
},
"node_modules/@vue/devtools-shared": {
- "version": "7.5.6",
- "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.5.6.tgz",
- "integrity": "sha512-5iq/BF6f05JTcC7J/1DTUm4CpyVVB4KiyLAo/fDcoyWR7EulharWQVbr6W7ek5lO23f5mbnJ+adA5tfFTJt6Sw==",
+ "version": "7.6.1",
+ "resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.6.1.tgz",
+ "integrity": "sha512-SdIif2YoOWo8/s8c1+NU67jcx8qoSjM9caetQnjl3++Kufo0qa5JRZe95iV6vvupQzVGGo3ACY0LTyAsMfGeCg==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -3122,9 +3122,9 @@
}
},
"node_modules/caniuse-lite": {
- "version": "1.0.30001674",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001674.tgz",
- "integrity": "sha512-jOsKlZVRnzfhLojb+Ykb+gyUSp9Xb57So+fAiFlLzzTKpqg8xxSav0e40c8/4F/v9N8QSvrRRaLeVzQbLqomYw==",
+ "version": "1.0.30001676",
+ "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001676.tgz",
+ "integrity": "sha512-Qz6zwGCiPghQXGJvgQAem79esjitvJ+CxSbSQkW9H/UX5hg8XM88d4lp2W+MEQ81j+Hip58Il+jGVdazk1z9cw==",
"dev": true,
"funding": [
{
@@ -7004,9 +7004,9 @@
}
},
"node_modules/ts-api-utils": {
- "version": "1.3.0",
- "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz",
- "integrity": "sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==",
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.4.0.tgz",
+ "integrity": "sha512-032cPxaEKwM+GT3vA5JXNzIaizx388rhsSW79vGRNGXfRRAdEAn2mvk36PvK5HnOchyWZ7afLEXqYCvPCrzuzQ==",
"dev": true,
"license": "MIT",
"engines": {
@@ -7299,15 +7299,15 @@
}
},
"node_modules/vite-plugin-vue-devtools": {
- "version": "7.5.6",
- "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.5.6.tgz",
- "integrity": "sha512-RkKiY7NYfxwjTt8PTV1Z4d8nzP2afGcAvNzwyXsCTBF5qQZJ/hckbdamN6z9JpmlNJoG07dQsy3vXK5ElFIIxw==",
+ "version": "7.6.1",
+ "resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.6.1.tgz",
+ "integrity": "sha512-nMzlrEd60HG9KSmN4xsEponDoFFh+1LNFIuuJplo5irS8QEg4aG+vBsE3EWo5S1e5OSi1mqPX++hL/jVjncBUA==",
"dev": true,
"license": "MIT",
"dependencies": {
- "@vue/devtools-core": "^7.5.6",
- "@vue/devtools-kit": "^7.5.6",
- "@vue/devtools-shared": "^7.5.6",
+ "@vue/devtools-core": "^7.6.1",
+ "@vue/devtools-kit": "^7.6.1",
+ "@vue/devtools-shared": "^7.6.1",
"execa": "^8.0.1",
"sirv": "^3.0.0",
"vite-plugin-inspect": "^0.8.7",
@@ -7429,9 +7429,9 @@
}
},
"node_modules/vue-component-type-helpers": {
- "version": "2.1.8",
- "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.1.8.tgz",
- "integrity": "sha512-ii36gDzrYAfOQIkOlo44yceDdT5269gKmNGxf07Qx6seH2U50+tQ2ol02XLhYPmxrh6YabAsOdte8WDrpaO6Tw==",
+ "version": "2.1.10",
+ "resolved": "https://registry.npmjs.org/vue-component-type-helpers/-/vue-component-type-helpers-2.1.10.tgz",
+ "integrity": "sha512-lfgdSLQKrUmADiSV6PbBvYgQ33KF3Ztv6gP85MfGaGaSGMTXORVaHT1EHfsqCgzRNBstPKYDmvAV9Do5CmJ07A==",
"dev": true,
"license": "MIT"
},
diff --git a/src/composables/gameComposable.ts b/src/composables/gameComposable.ts
index 3ae3fa4..bd22f52 100644
--- a/src/composables/gameComposable.ts
+++ b/src/composables/gameComposable.ts
@@ -24,7 +24,6 @@ export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): P
// If asset is found, add it to the scene
if (asset) {
return new Promise<boolean>((resolve) => {
- console.log(asset.data)
scene.textures.addBase64(asset.key, asset.data)
scene.textures.once(`addtexture-${asset.key}`, () => {
gameStore.game.loadedAssets.push(asset)
@@ -39,6 +38,7 @@ export async function loadTexture(scene: Phaser.Scene, assetData: AssetDataT): P
export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
const sprite_actions = await fetch(config.server_endpoint + '/assets/list_sprite_actions/' + sprite?.id).then((response) => response.json())
for await (const sprite_action of sprite_actions) {
+
await loadTexture(scene, {
key: sprite_action.key,
data: sprite_action.data,
@@ -49,14 +49,18 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
frameHeight: sprite_action.frameHeight
} as AssetDataT)
- if (sprite_action.isAnimated) {
- scene.anims.create({
- key: sprite_action.key,
- frameRate: 7,
- frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
- repeat: -1
- })
- }
+ // If the sprite is not animated, skip
+ if (!sprite_action.isAnimated) continue
+
+ // Add the animation to the scene
+ const anim = scene.textures.get(sprite_action.key)
+ scene.textures.addSpriteSheet(sprite_action.key, anim, { frameWidth: sprite_action.frameWidth ?? 0, frameHeight: sprite_action.frameHeight ?? 0 })
+ scene.anims.create({
+ key: sprite_action.key,
+ frameRate: 7,
+ frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
+ repeat: -1
+ })
}
return true
}
\ No newline at end of file