feat: add controller system

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

@@ -1,5 +1,5 @@
 import './style.css'
-import { FAttachedCamera, FCharacterKP, FCircle, FComponentEmpty, FRectangle, FScene, FShapes, FSprite } from '@fibbojs/2d'
+import { FAttachedCamera, FCharacterControllerKP, FCircle, FComponentEmpty, FRectangle, FScene, FShapes, FSprite } from '@fibbojs/2d'
 import { fDebug } from '@fibbojs/devtools'
 import { FKeyboard } from '@fibbojs/event'
 import MySquare from './classes/MySquare'
@@ -70,25 +70,19 @@ import { loadLevel } from './level'
   circle.initRigidBody()
   scene.addComponent(circle)
 
-  // Create a sprite
-  const sprite = new FSprite(scene, {
-    texture: 'bunny.png',
-    position: { x: 2, y: 3 },
-  })
-  sprite.onLoaded(() => {
-    sprite.initRigidBody({
-      lockRotations: true,
-    })
-    sprite.setScaleWidth(0.5)
-  })
-  scene.addComponent(sprite)
-
   /**
    * Create character
    */
-  const character = new FCharacterKP(scene, {
+  const character = new FSprite(scene, {
+    texture: 'character_0000.png',
     position: { x: 0, y: 5 },
   })
+  character.controller = new FCharacterControllerKP(scene, {
+    component: character,
+  })
+  character.onLoaded(() => {
+    character.setScaleWidth(0.5)
+  })
   character.onCollisionWith(FRectangle, () => {
     console.log('Sprite collided with a square!')
   })

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

@@ -1,5 +1,5 @@
 import * as THREE from 'three'
-import { FCapsule, FCharacterKP, FComponentEmpty, FCuboid, FFBX, FGLB, FGameCamera, FOBJ, FScene, FShapes, FSphere } from '@fibbojs/3d'
+import { FCapsule, FCharacterControllerKP, FComponentEmpty, FCuboid, FFBX, FGLB, FGameCamera, FOBJ, FScene, FShapes, FSphere } from '@fibbojs/3d'
 import { fDebug } from '@fibbojs/devtools'
 import Duck from './classes/Duck'
 import GltfCube from './classes/GltfCube'
@@ -118,9 +118,12 @@ import MyCustomCube from './classes/MyCustomCube'
   scene.addComponent(ground2)
 
   // Create a character
-  const character = new FCharacterKP(scene, {
+  const character = new FCapsule(scene, {
     position: { x: 0, y: 10, z: 0 },
   })
+  character.controller = new FCharacterControllerKP(scene, {
+    component: character,
+  })
   scene.addComponent(character)
 
   // Attach a camera to the character

packages/2d/src/cameras/FAttachedCamera.ts

@@ -1,5 +1,5 @@
-import type { FComponent } from '../FComponent'
-import type { FScene } from '../FScene'
+import type { FComponent } from '../core/FComponent'
+import type { FScene } from '../core/FScene'
 import type { FCameraOptions } from './FCamera'
 import { FCamera } from './FCamera'
 

packages/2d/src/cameras/FCamera.ts

@@ -1,5 +1,5 @@
 import { FCamera as FCameraCore } from '@fibbojs/core'
-import type { FScene } from '../FScene'
+import type { FScene } from '../core/FScene'
 
 export interface FCameraOptions {
   position?: { x: number, y: number }

packages/2d/src/cameras/FFixedCamera.ts

@@ -1,4 +1,4 @@
-import type { FScene } from '../FScene'
+import type { FScene } from '../core/FScene'
 import type { FCameraOptions } from './FCamera'
 import { FCamera } from './FCamera'
 

packages/2d/src/cameras/FFreeCamera.ts

@@ -1,4 +1,4 @@
-import type { FScene } from '../FScene'
+import type { FScene } from '../core/FScene'
 import type { FCameraOptions } from './FCamera'
 import { FCamera } from './FCamera'
 

packages/2d/src/character/FCharacter.ts → packages/2d/src/controllers/FCharacterController.ts

@@ -1,13 +1,13 @@
 import * as PIXI from 'pixi.js'
 import { FKeyboard } from '@fibbojs/event'
-import type { FScene } from '../FScene'
+import type { FScene } from '../core/FScene'
 import { FShapes } from '../types/FShapes'
-import type { FComponentOptions } from '../FComponent'
-import { FComponent } from '../FComponent'
-import type { FRigidBodyOptions } from '../FRigidBody'
-import type { FColliderOptions } from '../FCollider'
+import { FComponent } from '../core/FComponent'
+import type { FRigidBodyOptions } from '../core/FRigidBody'
+import type { FColliderOptions } from '../core/FCollider'
+import { FController, type FControllerOptions } from './FController'
 
-export interface FCharacterOptions extends FComponentOptions {
+export interface FCharacterControllerOptions extends FControllerOptions {
   /**
    * The speed of the character.
    */
@@ -18,7 +18,7 @@ export interface FCharacterOptions extends FComponentOptions {
  * @description An abstract pre-defined character controller.
  * @category Character
  */
-export abstract class FCharacter extends FComponent {
+export abstract class FCharacterController extends FController {
   /**
    * The inputs that will be used to move the character.
    */
@@ -34,11 +34,13 @@ export abstract class FCharacter extends FComponent {
    */
   speed: number
 
-  constructor(scene: FScene, options?: FCharacterOptions) {
-    super(scene, {
-      scale: { x: 0.5, y: 1 },
-      ...options,
-    })
+  /**
+   * The scene where the character is.
+   */
+  scene: FScene
+
+  constructor(scene: FScene, options: FCharacterControllerOptions) {
+    super(options)
 
     // Define default values
     const DEFAULT_OPTIONS = {
@@ -50,7 +52,8 @@ export abstract class FCharacter extends FComponent {
     if (!options.speed)
       throw new Error('FibboError: FCharacter requires speed option')
 
-    // Store speed
+    // Store options
+    this.scene = scene
     this.speed = options.speed
 
     // Map of the movements (will be updated by the keyboard)
@@ -61,13 +64,6 @@ export abstract class FCharacter extends FComponent {
       right: false,
     }
 
-    // Create a square
-    this.container = new PIXI.Graphics()
-      .rect(this.transform.position.x, this.transform.position.y, this.transform.scale.x * 100, this.transform.scale.y * 100)
-      .fill(new PIXI.FillGradient(0, 0, this.transform.scale.x * 100, this.transform.scale.y * 100).addColorStop(0, 0xFF00FF).addColorStop(1, 0xFFFF00))
-    // Set the pivot of the container to the center
-    this.container.pivot.set(this.container.width / 2, this.container.height / 2)
-
     // Create a keyboard instance
     const fKeyboard = new FKeyboard(scene)
 
@@ -112,32 +108,5 @@ export abstract class FCharacter extends FComponent {
     fKeyboard.onKeyUp('q', () => {
       this.inputs.left = false
     })
-
-    // Initialize the rigid body
-    this.initRigidBody()
-    // Initialize the sensor
-    this.initSensor()
-  }
-
-  initRigidBody(options?: FRigidBodyOptions): void {
-    super.initRigidBody({
-      shape: FShapes.SQUARE,
-      ...options,
-    })
-  }
-
-  initCollider(options?: FColliderOptions): void {
-    super.initCollider({
-      shape: FShapes.SQUARE,
-      ...options,
-    })
-  }
-
-  initSensor(options?: FColliderOptions): void {
-    super.initSensor({
-      scale: { x: 1.2, y: 1.2 },
-      shape: FShapes.SQUARE,
-      ...options,
-    })
   }
 }

packages/2d/src/controllers/FCharacterControllerD.ts

@@ -0,0 +1,54 @@
+import RAPIER from '@dimforge/rapier2d'
+import { FKeyboard } from '@fibbojs/event'
+import type { FScene } from '../core/FScene'
+import type { FCharacterControllerOptions } from './FCharacterController'
+import { FCharacterController } from './FCharacterController'
+
+/**
+ * @description A pre-defined character controller based on a Dynamic RigidBody.
+ * @category Controller
+ * @example
+ * ```ts
+ * import { FCapsule, FCharacterControllerD, FScene } from '@fibbojs/3d'
+ *
+ * const scene = new FScene()
+ *
+ * const capsule = new FCapsule(scene)
+ * capsule.controller = new FCharacterControllerD(scene)
+ * scene.addComponent(capsule)
+ * ```
+ */
+export class FCharacterControllerD extends FCharacterController {
+  constructor(scene: FScene, options: FCharacterControllerOptions) {
+    super(scene, options)
+
+    const fKeyboard = new FKeyboard(scene)
+    fKeyboard.on(' ', () => {
+      this.component.rigidBody?.rigidBody.applyImpulse({ x: 0, y: 0.5 }, true)
+    })
+
+    // Initialize the rigid body
+    this.component.initRigidBody({
+      rigidBodyType: RAPIER.RigidBodyType.Dynamic,
+      lockRotations: true,
+      ...options,
+    })
+  }
+
+  onFrame(_delta: number): void {
+    // Apply movement on the y axis
+    if (this.inputs.up) {
+      this.component.rigidBody?.rigidBody.applyImpulse({ x: 0, y: 0.15 * this.speed }, true)
+    }
+    else if (this.inputs.down) {
+      this.component.rigidBody?.rigidBody.applyImpulse({ x: 0, y: -0.15 * this.speed }, true)
+    }
+    // Apply movement on the x axis
+    if (this.inputs.left) {
+      this.component.rigidBody?.rigidBody.applyImpulse({ x: -0.15 * this.speed, y: 0 }, true)
+    }
+    else if (this.inputs.right) {
+      this.component.rigidBody?.rigidBody.applyImpulse({ x: 0.15 * this.speed, y: 0 }, true)
+    }
+  }
+}