Renamed frame speed > frame rate

src/components/gameMaster/assetManager/partials/object/ObjectDetails.vue

@@ -29,8 +29,8 @@
           </select>
         </div>
         <div class="form-field-full">
-          <label for="frame-speed">Frame speed</label>
+          <label for="frame-speed">Frame rate</label>
-          <input v-model="objectFrameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
+          <input v-model="objectFrameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
         </div>
         <div class="form-field-half">
           <label for="frame-width">Frame width</label>
@@ -69,7 +69,7 @@ const objectTags = ref<string[]>([])
 const objectOriginX = ref(0)
 const objectOriginY = ref(0)
 const objectIsAnimated = ref(false)
-const objectFrameSpeed = ref(0)
+const objectFrameRate = ref(0)
 const objectFrameWidth = ref(0)
 const objectFrameHeight = ref(0)
 
@@ -83,7 +83,7 @@ if (selectedObject.value) {
   objectOriginX.value = selectedObject.value.originX
   objectOriginY.value = selectedObject.value.originY
   objectIsAnimated.value = selectedObject.value.isAnimated
-  objectFrameSpeed.value = selectedObject.value.frameSpeed
+  objectFrameRate.value = selectedObject.value.frameRate
   objectFrameWidth.value = selectedObject.value.frameWidth
   objectFrameHeight.value = selectedObject.value.frameHeight
 }
@@ -127,7 +127,7 @@ function saveObject() {
       originX: objectOriginX.value,
       originY: objectOriginY.value,
       isAnimated: objectIsAnimated.value,
-      frameSpeed: objectFrameSpeed.value,
+      frameRate: objectFrameRate.value,
       frameWidth: objectFrameWidth.value,
       frameHeight: objectFrameHeight.value
     },
@@ -148,7 +148,7 @@ watch(selectedObject, (object: Object | null) => {
   objectOriginX.value = object.originX
   objectOriginY.value = object.originY
   objectIsAnimated.value = object.isAnimated
-  objectFrameSpeed.value = object.frameSpeed
+  objectFrameRate.value = object.frameRate
   objectFrameWidth.value = object.frameWidth
   objectFrameHeight.value = object.frameHeight
 })

src/components/gameMaster/assetManager/partials/sprite/SpriteDetails.vue

@@ -50,8 +50,8 @@
               </select>
             </div>
             <div class="form-field-full" v-if="action.isAnimated">
-              <label for="frame-speed">Frame speed</label>
+              <label for="frame-speed">Frame rate</label>
-              <input v-model.number="action.frameSpeed" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame speed" />
+              <input v-model.number="action.frameRate" class="input-field" type="number" step="any" name="frame-speed" placeholder="Frame rate" />
             </div>
             <div class="form-field-full">
               <SpriteActionsInput v-model="action.sprites" />
@@ -127,7 +127,7 @@ function saveSprite() {
           originY: action.originY,
           isAnimated: action.isAnimated,
           isLooping: action.isLooping,
-          frameSpeed: action.frameSpeed,
+          frameRate: action.frameRate,
           frameWidth: action.frameWidth,
           frameHeight: action.frameHeight
         }
@@ -156,7 +156,7 @@ function addNewImage() {
     originY: 0,
     isAnimated: false,
     isLooping: false,
-    frameSpeed: 0,
+    frameRate: 0,
     frameWidth: 0,
     frameHeight: 0
   }

src/composables/gameComposable.ts

@@ -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: sprite_action.frameSpeed,
+      frameRate: sprite_action.frameRate,
       frames: scene.anims.generateFrameNumbers(sprite_action.key, { start: 0, end: sprite_action.frameCount! - 1 }),
       repeat: -1
     })

src/types.ts

@@ -13,6 +13,7 @@ export type AssetDataT = {
   frameCount?: number
   frameWidth?: number
   frameHeight?: number
+  frameRate?: number
 }
 
 export type Tile = {
@@ -30,7 +31,7 @@ export type Object = {
   originX: number
   originY: number
   isAnimated: boolean
-  frameSpeed: number
+  frameRate: number
   frameWidth: number
   frameHeight: number
   createdAt: Date
@@ -214,7 +215,7 @@ export type SpriteAction = {
   isLooping: boolean
   frameWidth: number
   frameHeight: number
-  frameSpeed: number
+  frameRate: number
 }
 
 export type Chat = {