feat: sounds, enemies, rotation, better movements and others

package.json

@@ -17,10 +17,10 @@
     "typecheck": "tsc --noEmit"
   },
   "devDependencies": {
-    "@fibbojs/2d": "^0.0.5",
-    "@fibbojs/core": "^0.0.5",
-    "@fibbojs/devtools": "^0.0.5",
-    "@fibbojs/event": "^0.0.5",
+    "@fibbojs/2d": "^0.0.8",
+    "@fibbojs/core": "^0.0.8",
+    "@fibbojs/devtools": "^0.0.8",
+    "@fibbojs/event": "^0.0.8",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
     "vite-plugin-top-level-await": "^1.4.4",

src/classes/Character.ts

@@ -1,5 +1,5 @@
 import { FSprite } from '@fibbojs/2d'
-import type { FScene } from '@fibbojs/2d'
+import { FScene } from '@fibbojs/2d'
 import {CharacterController} from "./controllers/CharacterController.ts";
 
 export default class Character extends FSprite {
@@ -13,7 +13,6 @@ export default class Character extends FSprite {
     })
 
     this.setScaleHeight(0.8)
-
     // Initialize the character controller
     this.controller = new CharacterController(scene, {
       component: this,

src/classes/blocs/Bloc.ts

@@ -0,0 +1,56 @@
+import { FScene, FSprite, FComponentEmpty } from '@fibbojs/2d'
+import Character from "../Character.ts";
+
+export default class Bloc extends FSprite {
+    topSensor: FComponentEmpty
+    audio= new Audio('maiojs/assets/oof.mp3')
+
+    public constructor(scene: FScene, position: { x: number, y: number }) {
+        super(scene,  {
+            texture: 'bloc.png',
+            position: position
+        })
+
+        this.topSensor = new FComponentEmpty(this.scene, {
+            position : {
+                x: this.position.x,
+                y: this.position.y + 0.2
+            }
+        })
+
+        this.initSensorAndCollider()
+        this.initCollision()
+        this.addToScene()
+    }
+
+    initSensorAndCollider() {
+        this.topSensor.initSensor()
+        this.initCollider()
+        this.initSensor({
+            'scale': {x: 0.8, y: 0.2},
+            'position': {x: 0, y: -0.5},
+        })
+    }
+
+    initCollision() {
+        this.topSensor.onCollisionWith(Character, ({component}) => {
+            const character = component as Character
+            if(!character.controller.jumpAvailable) {
+                character.controller.jumpAvailable = true
+            }
+        })
+
+        this.onCollisionWith(Character, ({component}) => {
+            this.audio.play()
+            const character = component as Character
+            character.controller.yVelocity = 0
+            this.scene.removeComponent(this)
+            this.scene.removeComponent(this.topSensor)
+        })
+    }
+
+    addToScene() {
+        this.scene.addComponent(this)
+        this.scene.addComponent(this.topSensor)
+    }
+}

src/classes/blocs/Generator.ts

@@ -12,15 +12,13 @@ export default abstract class Generator {
         this.character = character
     }
 
-    generate(position: { x: number, y: number }) {
+    generate(position: { x: number, y: number }, scale: { x: number, y: number } = { x: 1, y: 1 }) {
         let secretSensor = new FComponentEmpty(this.scene, {
-            position
+            position : { x: position.x, y: position.y + 0.2 },
+            scale: scale
         })
 
-        secretSensor.initSensor({
-            'scale': {x: 0.8, y: 0.2},
-            'position': {x: 0, y: 0.5},
-        })
+        secretSensor.initSensor()
 
         this.character.onCollisionWith(secretSensor, () => {
             if(!this.character.controller.jumpAvailable) {

src/classes/blocs/GroundGenerator.ts

@@ -11,7 +11,10 @@ export default class GroundGenerator extends Generator {
     }
 
     public generate(position: { x: number; y: number }) {
+        // Initialise le secret sensor pour recuperer le jump
         super.generate(position)
+
+        // Cree le sol
         let ground = new FSprite(this.scene, {
             texture: this.texture,
             position,

src/classes/blocs/LootboxGenerator.ts

@@ -6,6 +6,7 @@ import Character from "../Character.ts";
 
 export default class LootboxGenerator extends Generator {
     texture = 'lootbox.png'
+    audio = new Audio('maiojs/assets/coin.mp3')
 
     public constructor(scene: FScene, character: Character) {
         super(scene, character)
@@ -24,6 +25,7 @@ export default class LootboxGenerator extends Generator {
         lootbox.initCollider()
 
         this.character.onCollisionWith(lootbox, () => {
+            this.audio.play()
             this.character.controller.yVelocity = 0
             let position = lootbox.position
             this.scene.removeComponent(lootbox)

src/classes/blocs/TubeGenerator.ts

@@ -0,0 +1,36 @@
+import { FScene } from '@fibbojs/2d'
+import { FSprite } from '@fibbojs/2d'
+import Generator from "./Generator.ts";
+import Character from "../Character.ts";
+
+export default class TubeGenerator extends Generator {
+    texture = 'tube.png'
+
+    public constructor(scene: FScene, character: Character) {
+        super(scene, character)
+    }
+
+    public generate(position: { x: number, y: number }, scale: { x: number, y: number }) {
+        super.generate(position, scale)
+        let tube = new FSprite(this.scene, {
+            texture: this.texture,
+            position,
+            scale: {x: 1, y: 1}
+        })
+
+
+        tube.initCollider()
+        tube.initSensor({
+            'scale': {x: 0.8, y: 0.2},
+            'position': {x: 0, y: -0.5},
+        })
+
+        this.scene.addComponent(tube)
+
+        tube.onLoaded(() => {
+            tube.scaleX = scale.x
+            tube.scaleY = scale.y
+
+        })
+    }
+}

src/classes/camera/Camera.ts

@@ -0,0 +1,39 @@
+import { FCamera, FComponent, FScene } from '@fibbojs/2d'
+
+export interface CameraOptions {
+    constY: number
+    target: FComponent
+    zoom: number
+}
+
+export class Camera extends FCamera {
+    target: FComponent
+    constY: number
+    zoom: number
+
+    constructor(scene: FScene, options: CameraOptions) {
+        super(scene)
+        this.target = options.target
+        this.constY = options.constY || 0
+        this.zoom = options.zoom || 1
+    }
+
+    onFrame(_delta: number): void {
+        // Move the camera to the target
+        this.scene.viewport.moveCenter(
+            this.target.transform.position.x * 100 + this.position.x * 100,
+            this.constY * 100
+        )
+    }
+
+    __ON_CAMERA_ADDED_TO_SCENE_PLEASE_DO_NOT_CALL_THIS_BY_HAND__(): void {
+        // Disable all plugins on the pixi viewport
+        this.scene.viewport.plugins.pause('drag')
+        this.scene.viewport.plugins.pause('pinch')
+        this.scene.viewport.plugins.pause('wheel')
+        this.scene.viewport.plugins.pause('decelerate')
+    }
+
+
+
+}

src/classes/controllers/CharacterController.ts

@@ -52,7 +52,7 @@ export class CharacterController extends FController {
 
         // Define default values
         const DEFAULT_OPTIONS = {
-            speed: 1,
+            speed: 2,
         }
         // Apply default options
         options = { ...DEFAULT_OPTIONS, ...options }
@@ -65,7 +65,7 @@ export class CharacterController extends FController {
         this.speed = options.speed
 
         // Initialize the y velocity
-        this.yVelocity = -30
+        this.yVelocity = -50
 
         // Map of the movements (will be updated by the keyboard)
         this.inputs = {
@@ -87,16 +87,23 @@ export class CharacterController extends FController {
         })
         fKeyboard.onKeyDown('a', () => {
             this.inputs.left = true
+            if(this.component.container.scale.x > 0)
+                this.component.container.scale.x *= -1
         })
         fKeyboard.onKeyDown('d', () => {
             this.inputs.right = true
+            if(this.component.container.scale.x < 0)
+                this.component.container.scale.x *= -1
+
         })
         // For AZERTY keyboards
         fKeyboard.onKeyDown('z', () => {
             this.inputs.up = true
         })
         fKeyboard.onKeyDown('q', () => {
             this.inputs.left = true
+            if(this.component.container.scale.x > 0)
+                this.component.container.scale.x *= -1
         })
 
         // Key up
@@ -123,7 +130,7 @@ export class CharacterController extends FController {
         // Jump
         fKeyboard.onKeyDown(' ', () => {
             if(this.jumpAvailable) {
-                this.yVelocity = 38
+                this.yVelocity = 50
                 this.jumpAvailable = false;
             }
         })
@@ -150,7 +157,7 @@ export class CharacterController extends FController {
     /**
      * Return the corrected movements for the current frame.
      */
-    getCorrectedMovements(): { x: number, y: number } {
+    getCorrectedMovements(delta: number): { x: number, y: number } {
         const movementDirection = new RAPIER.Vector2(0, 0)
         // Compute the movement direction
         movementDirection.x = this.inputs.left ? -1 : this.inputs.right ? 1 : 0
@@ -167,23 +174,21 @@ export class CharacterController extends FController {
             RAPIER.QueryFilterFlags.EXCLUDE_SENSORS,
         )
 
-        // If yVelocity is not 0, apply gravity
+        // Apply gravity
         if (this.yVelocity > this.scene.world.gravity.y) {
-            this.yVelocity += this.scene.world.gravity.y * 0.00981 * 4
+            this.yVelocity += this.scene.world.gravity.y * delta * 11
         }
         else {
             this.yVelocity = this.scene.world.gravity.y
         }
 
-
-
         // Get the corrected movement
         return this.characterController.computedMovement()
     }
 
     onFrame(delta: number): void {
         // Get the corrected movement
-        const correctedMovement = this.getCorrectedMovements()
+        const correctedMovement = this.getCorrectedMovements(delta)
 
         // Apply the movement to the rigid body
         this.component.rigidBody?.rigidBody.setNextKinematicTranslation({

src/classes/controllers/EnemyController.ts

@@ -0,0 +1,97 @@
+import RAPIER from '@dimforge/rapier2d'
+import {FController, FShapes} from '@fibbojs/2d'
+import type { FControllerOptions, FScene } from '@fibbojs/2d'
+import BasicEnemy from "../enemy/BasicEnemy.ts";
+
+export interface CustomControllerOptions extends FControllerOptions {
+    /**
+     * The speed of the character.
+     */
+    speed?: number
+
+    positionInitial: { x: number, y: number }
+
+    positionFinal: { x: number, y: number }
+
+    component: BasicEnemy
+}
+
+/**
+ * @description Custom controller
+ * @category Character
+ */
+export class EnemyController extends FController {
+    /**
+     * The speed of the character.
+     */
+    speed: number
+
+    positionInitial: { x: number, y: number }
+
+    positionFinal: { x: number, y: number }
+
+    compteur: number = 0
+
+    component: BasicEnemy
+
+    /**
+     * The scene where the character is.
+     */
+    scene: FScene
+
+
+    /**
+     * The character controller that will be used to move the character.
+     */
+    characterController: RAPIER.KinematicCharacterController
+
+    constructor(scene: FScene, options: CustomControllerOptions) {
+        super(options)
+
+        this.component = options.component
+
+        this.positionInitial = options.positionInitial
+        this.positionFinal = options.positionFinal
+
+        // Define default values
+        const DEFAULT_OPTIONS = {
+            speed: options.speed,
+        }
+
+        // Apply default options
+        options = { ...DEFAULT_OPTIONS, ...options }
+        // Validate options
+        if (!options.speed)
+            throw new Error('FibboError: FCharacter requires speed option')
+
+        // Store options
+        this.scene = scene
+        this.speed = options.speed
+
+
+        // The gap the controller will leave between the character and its environment
+        const offset = 0.01
+        // Create the character controller
+        this.characterController = scene.world.createCharacterController(offset)
+
+        // Initialize a sensor
+        this.component.initSensor({
+            shape: FShapes.SQUARE,
+            scale: { x: 1, y: 1 },
+        })
+    }
+
+    onFrame(delta: number): void {
+        // Get the corrected movement
+        const mouvement = Math.sin(this.compteur)
+        this.compteur += delta
+
+        this.component.setPosition({
+            x: this.component.position.x + mouvement * delta * this.speed,
+            y: this.component.position.y
+        })
+        this.component.sensor?.rigidBody.setTranslation({ x: this.component.position.x, y: this.component.position.y }, true)
+
+        this.component.topSensor.sensor?.rigidBody.setTranslation({ x: this.component.position.x, y: this.component.position.y + 0.5 }, true)
+    }
+}