noxious/client
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved proof of concept hair customisation & sprite anchor points

Browse Source
This commit is contained in:
Dennis Postma 2024-12-12 00:42:56 +01:00
parent b5c1c92b04
commit 608932300f
3 changed files with 49 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

82
package-lock.json generated
View File

@ -1182,9 +1182,9 @@
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.5",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
"integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
"integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -1987,9 +1987,9 @@
}
},
"node_modules/@types/node": {
"version": "20.17.9",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.9.tgz",
"integrity": "sha512-0JOXkRyLanfGPE2QRCwgxhzlBAvaRdCNMcvbd7jFfpmD4eEXll7LRwy5ymJmyeZqk7Nh7eD2LeUyQ68BbndmXw==",
"version": "20.17.10",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.10.tgz",
"integrity": "sha512-/jrvh5h6NXhEauFFexRin69nA0uHJ5gwk4iDivp/DeoEua3uwCUto6PC86IpRITBOs4+6i2I56K5x5b6WYGXHA==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -2485,14 +2485,14 @@
"license": "MIT"
},
"node_modules/@vue/devtools-core": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.6.7.tgz",
"integrity": "sha512-6fW8Q0H1NHDXdEcuV6dylT5U2Yxg3SdMnVCey99Y6S4R2PNgFL2vC+VU9U9rHIiaoEUkeza42S7FfHxV4VI3Jg==",
"version": "7.6.8",
"resolved": "https://registry.npmjs.org/@vue/devtools-core/-/devtools-core-7.6.8.tgz",
"integrity": "sha512-8X4roysTwzQ94o7IobjVcOd1aZF5iunikrMrHPI2uUdigZCi2kFTQc7ffYiFiTNaLElCpjOhCnM7bo7aK1yU7A==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/devtools-kit": "^7.6.7",
"@vue/devtools-shared": "^7.6.7",
"@vue/devtools-kit": "^7.6.8",
"@vue/devtools-shared": "^7.6.8",
"mitt": "^3.0.1",
"nanoid": "^5.0.9",
"pathe": "^1.1.2",
@ -2522,13 +2522,13 @@
}
},
"node_modules/@vue/devtools-kit": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.6.7.tgz",
"integrity": "sha512-V8/jrXY/swHgnblABG9U4QCbE60c6RuPasmv2d9FvVqc5d94t1vDiESuvRmdNJBdWz4/D3q6ffgyAfRVjwHYEw==",
"version": "7.6.8",
"resolved": "https://registry.npmjs.org/@vue/devtools-kit/-/devtools-kit-7.6.8.tgz",
"integrity": "sha512-JhJ8M3sPU+v0P2iZBF2DkdmR9L0dnT5RXJabJqX6o8KtFs3tebdvfoXV2Dm3BFuqeECuMJIfF1aCzSt+WQ4wrw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/devtools-shared": "^7.6.7",
"@vue/devtools-shared": "^7.6.8",
"birpc": "^0.2.19",
"hookable": "^5.5.3",
"mitt": "^3.0.1",
@ -2538,9 +2538,9 @@
}
},
"node_modules/@vue/devtools-shared": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.6.7.tgz",
"integrity": "sha512-QggO6SviAsolrePAXZ/sA1dSicSPt4TueZibCvydfhNDieL1lAuyMTgQDGst7TEvMGb4vgYv2I+1sDkO4jWNnw==",
"version": "7.6.8",
"resolved": "https://registry.npmjs.org/@vue/devtools-shared/-/devtools-shared-7.6.8.tgz",
"integrity": "sha512-9MBPO5Z3X1nYGFqTJyohl6Gmf/J7UNN1oicHdyzBVZP4jnhZ4c20MgtaHDIzWmHDHCMYVS5bwKxT3jxh7gOOKA==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -5030,9 +5030,9 @@
}
},
"node_modules/jsesc": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.0.2.tgz",
"integrity": "sha512-xKqzzWXDttJuOcawBt4KnKHHIf5oQ/Cxax+0PWFG+DFDgHNAdi+TXECADI+RYiFUMmx8792xsMbbgXj4CwnP4g==",
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
"integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
"dev": true,
"license": "MIT",
"bin": {
@ -5205,9 +5205,9 @@
"license": "ISC"
},
"node_modules/magic-string": {
"version": "0.30.14",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.14.tgz",
"integrity": "sha512-5c99P1WKTed11ZC0HMJOj6CDIue6F8ySu+bJL+85q1zBEIY8IklrJ1eiKC2NDRh3Ct3FcvmJPyQHb9erXMTJNw==",
"version": "0.30.15",
"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.15.tgz",
"integrity": "sha512-zXeaYRgZ6ldS1RJJUrMrYgNJ4fdwnyI6tVqoiIhyCyv5IVTK9BU8Ic2l253GGETQHxI4HNUwhJ3fjDhKqEoaAw==",
"license": "MIT",
"dependencies": {
"@jridgewell/sourcemap-codec": "^1.5.0"
@ -5425,9 +5425,9 @@
}
},
"node_modules/node-releases": {
"version": "2.0.18",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.18.tgz",
"integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
"version": "2.0.19",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
"integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==",
"dev": true,
"license": "MIT"
},
@ -7416,9 +7416,9 @@
}
},
"node_modules/vite-plugin-inspect": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.8.tgz",
"integrity": "sha512-aZlBuXsWUPJFmMK92GIv6lH7LrwG2POu4KJ+aEdcqnu92OAf+rhBnfMDQvxIJPEB7hE2t5EyY/PMgf5aDLT8EA==",
"version": "0.8.9",
"resolved": "https://registry.npmjs.org/vite-plugin-inspect/-/vite-plugin-inspect-0.8.9.tgz",
"integrity": "sha512-22/8qn+LYonzibb1VeFZmISdVao5kC22jmEKm24vfFE8siEn47EpVcCLYMv6iKOYMJfjSvSJfueOwcFCkUnV3A==",
"dev": true,
"license": "MIT",
"dependencies": {
@ -7439,7 +7439,7 @@
"url": "https://github.com/sponsors/antfu"
},
"peerDependencies": {
"vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0"
"vite": "^3.1.0 || ^4.0.0 || ^5.0.0-0 || ^6.0.1"
},
"peerDependenciesMeta": {
"@nuxt/kit": {
@ -7473,18 +7473,18 @@
}
},
"node_modules/vite-plugin-vue-devtools": {
"version": "7.6.7",
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.6.7.tgz",
"integrity": "sha512-H1ZyjtpWjP5mHA5R15sQeYgAARuh2Myg3TDFXWZK6QOQRy8s3XjTIt319DogVjU/x3rC3L/jJQjIasRU04mWXA==",
"version": "7.6.8",
"resolved": "https://registry.npmjs.org/vite-plugin-vue-devtools/-/vite-plugin-vue-devtools-7.6.8.tgz",
"integrity": "sha512-32aIps8C1Y7UEoqyWf+ES3J1OozsCYMIqTqd+I5qass+R0Tcf8SaA2bX1/rskAzkcKCteVoBjEENmqwTcMebbw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@vue/devtools-core": "^7.6.7",
"@vue/devtools-kit": "^7.6.7",
"@vue/devtools-shared": "^7.6.7",
"@vue/devtools-core": "^7.6.8",
"@vue/devtools-kit": "^7.6.8",
"@vue/devtools-shared": "^7.6.8",
"execa": "^9.5.1",
"sirv": "^3.0.0",
"vite-plugin-inspect": "0.8.8",
"vite-plugin-inspect": "~0.8.9",
"vite-plugin-vue-inspector": "^5.3.1"
},
"engines": {
@ -8011,9 +8011,9 @@
}
},
"node_modules/zod": {
"version": "3.23.8",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.23.8.tgz",
"integrity": "sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==",
"version": "3.24.1",
"resolved": "https://registry.npmjs.org/zod/-/zod-3.24.1.tgz",
"integrity": "sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==",
"license": "MIT",
"funding": {
"url": "https://github.com/sponsors/colinhacks"

34
src/components/game/character/partials/CharacterHair.vue
View File

@ -1,10 +1,10 @@
<template>
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" ref="hairImage" />
<Image v-bind="imageProps" v-if="gameStore.getLoadedAsset(texture)" />
</template>
<script lang="ts" setup>
import { computed, ref, watch } from 'vue'
import { Image, useScene, refObj } from 'phavuer'
import { computed } from 'vue'
import { Image, useScene } from 'phavuer'
import type { Sprite as SpriteT, ZoneCharacter } from '@/types'
import { loadSpriteTextures } from '@/composables/gameComposable'
import { useGameStore } from '@/stores/gameStore'
@ -17,8 +17,6 @@ const props = defineProps<{
const gameStore = useGameStore()
const scene = useScene()
const hairImage = refObj<Phaser.GameObjects.Image>()
const baseY = ref(0)
const texture = computed(() => {
const { rotation, characterHair } = props.zoneCharacter.character
@ -31,33 +29,13 @@ const texture = computed(() => {
const isFlippedX = computed(() => [6, 4].includes(props.zoneCharacter.character.rotation ?? 0))
const imageProps = computed(() => ({
depth: 1,
originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.30 : 5.30,
originY: [0, 6].includes(props.zoneCharacter.character.rotation ?? 0) ? 4.35 : 5.35,
flipX: isFlippedX.value,
y: props.zoneCharacter.isMoving ? (scene.time.now % 500 < 250 ? 0 : 2) : 2, // Add this line
x: props.zoneCharacter.isMoving ? (scene.time.now % 500 < 250 ? 0 : -2) : -1, // Add this line
texture: texture.value
}))
// Watch for movement changes and animate hair
watch(() => props.zoneCharacter.isMoving, (isMoving) => {
if (!hairImage.value) return
if (isMoving) {
// Start bounce animation
scene.tweens.add({
targets: hairImage.value,
x: { from: 0, to: 1 },
y: { from: 0, to: 1},
duration: 500,
yoyo: false,
repeat: -1,
ease: 'Linear'
})
} else {
// Stop all tweens on this hair image
scene.tweens.killTweensOf(hairImage.value)
// Reset position
hairImage.value.setY(0)
}
})
loadSpriteTextures(scene, props.zoneCharacter.character.characterHair?.sprite as SpriteT)
.then(() => {})

2
src/composables/gameComposable.ts
View File

@ -82,7 +82,7 @@ export async function loadSpriteTextures(scene: Phaser.Scene, sprite: Sprite) {
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, // TODO | 262 : Allow configuring frame rate
frameRate: 6.3, // TODO | 262 : Allow configuring frame rate
frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
repeat: -1
})