Improve FSprite, fix FComponent2d.setScale

apps/playground-2d/src/main.ts

@@ -40,10 +40,10 @@ import MySquare from './classes/MySquare'
   scene.addComponent(circle)
 
   const sprite = new FSprite(scene, '/fibbo/playground-2d/bunny.png')
-  sprite.setPosition(2, 3)
-  sprite.initRigidBody(undefined, {
-    x: 0.3,
-    y: 0.5,
+  sprite.onLoaded(() => {
+    sprite.setPosition(2, 3)
+    sprite.initRigidBody()
+    sprite.setScaleWidth(0.5)
   })
   scene.addComponent(sprite)
 })()

packages/2d/src/FComponent2d.ts

@@ -78,6 +78,9 @@ export abstract class FComponent2d extends FComponent {
   setScale(x: number, y: number): void {
     this.scale = new PIXI.Point(x, y)
     this.container.scale.set(x, y)
+    // If a collider exists, update its half-extents
+    if (this.collider)
+      this.collider.setHalfExtents(new RAPIER.Vector2(x / 2, y / 2))
   }
 
   /**

packages/2d/src/sprite/FSprite.ts

@@ -1,6 +1,7 @@
 import * as PIXI from 'pixi.js'
 import { FComponent2d } from '../FComponent2d'
 import type { FScene2d } from '../FScene2d'
+import type { F2dShapes } from '../types/F2dShapes'
 
 /**
  * @description A simple sprite in FibboJS.
@@ -41,10 +42,21 @@ export class FSprite extends FComponent2d {
     this.container = new PIXI.Sprite(this.texture)
     // Set the pivot of the container to the center
     this.container.pivot.set(this.container.width / 2, this.container.height / 2)
+    // Set the scale of the component so it fits the texture by its width
+    // Width will be 1 unit, height will be calculated according to the aspect ratio
+    this.scale = new PIXI.Point(1, this.texture.height / this.texture.width)
     // Call the onLoaded method
     this.emitOnLoaded()
   }
 
+  setScaleWidth(width: number) {
+    this.setScale(width, width * this.texture.height / this.texture.width)
+  }
+
+  setScaleHeight(height: number) {
+    this.setScale(height * this.texture.width / this.texture.height, height)
+  }
+
   onFrame(delta: number): void {
     super.onFrame(delta)
   }