From 74cbf3f2c83ef9cb2f7449b38b785dfedca9ac82 Mon Sep 17 00:00:00 2001 From: Dennis Postma 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((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