v0.0.10: refactor API, internals, testing (#23)

* feat: start refactor with 2d

* feat: setRotationDegree to RigidBody + sample not working test

* chore: configure browser tests

* chore: fix test config (but expect error for testing purpose here)

* chore: fix test

* test: add tests for FCollider in 2d

* fix: 3d internals in 2d

* test(2d): add collider test which do not pass idk why

* fix(2d): improve collider testing and fix setScale

* feat(2d): refactor FRigidBody and add tests

* docs: add a section about internals

* test(2d): add tests for update transforms methods

* feat(3d): refactor collider & rigidBody + add tests

* chore: update docs + lint

* fix(3d): fix playground model position

* docs: add fibbo IPA pronouncation

* docs: fix rigid-body to rigidBody

* feat: improve test config, improve FScene, FComponent, FCamera...

* fix: tests config + devtools typing

* chore: fix ci and test config

* feat: hide pixi and three objects behind __INTERNALS__

* feat: frame / onFrame refactor

* fix: game camera + add light getters/setters

* feat(3d): start refactoring transform reactivity system

* feat(3d): refactor transform system

* fix: devtools

* fix(3d): custom meshes are back

* fix: default capsule and sphere collider shapes

* fix(3d): collision management

* fix(3d): make FCharacterControllerKV rotatable

* feat(3d): add setLinvel and setAngvel for convenience

* feat(2d): start refactoring 2d transform system

* test(2d): fix physic + tests

* feat(2d): refactor transform system

* chore: update API reference + lint

* docs: update documentation

.github/workflows/run-tests.yml

@@ -27,6 +27,9 @@ jobs:
         with:
           node-version: 22
           registry-url: https://registry.npmjs.org/
-      - run: npm ci
+      - name: Install Dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
       - name: Test all packages
-        run: npx nx run-many --target=test --all
+        run: npx nx run-many --target=test:run --all

.gitignore

@@ -15,4 +15,6 @@ html
 
 
 .nx/cache
-.nx/workspace-data
+.nx/workspace-data
+
+__screenshots__

.vscode/settings.json

@@ -52,6 +52,9 @@
     "**/node_modules": true,
     "**/tsconfig.json": true,
     "**/*.d.ts": true,
-    "**/.gitignore": true
+    "**/.gitignore": true,
+    "**/vitest.workspace.ts": true,
+    "**/vitest.config.ts": true,
+    "**/coverage": true
   }
 }

apps/playground-2d/src/classes/Character.ts

@@ -6,6 +6,7 @@ export default class Character extends FSprite {
     super(scene, {
       texture: 'character_0000.png',
       position: { x: 0, y: 10 },
+      // rotationDegree: 45,
       scale: { x: 0.5, y: 0.5 },
     })
 

apps/playground-2d/src/classes/MySquare.ts

@@ -4,11 +4,7 @@ import { FRectangle } from '@fibbojs/2d'
 export default class MySquare extends FRectangle {
   constructor(scene: FScene) {
     super(scene)
-    this.setRotationDegree(30)
+    this.transform.rotationDegree = 30
     this.initRigidBody()
   }
-
-  onFrame(delta: number) {
-    super.onFrame(delta)
-  }
 }

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

@@ -7,7 +7,6 @@ function addBelowGround(scene: FScene, position: { x: number, y: number }) {
     position,
   })
   ground.initCollider()
-  scene.addComponent(ground)
 }
 
 function addGround(scene: FScene, position: { x: number, y: number }) {
@@ -16,7 +15,6 @@ function addGround(scene: FScene, position: { x: number, y: number }) {
     position,
   })
   ground.initCollider()
-  scene.addComponent(ground)
 }
 
 function addBackground(scene: FScene, position: { x: number, y: number }) {
@@ -25,9 +23,8 @@ function addBackground(scene: FScene, position: { x: number, y: number }) {
     position,
   })
   background.onLoaded(() => {
-    background.container.zIndex = -1
+    background.__CONTAINER__.zIndex = -1
   })
-  scene.addComponent(background)
 }
 
 function addBackgroundDark(scene: FScene, position: { x: number, y: number }) {
@@ -36,9 +33,8 @@ function addBackgroundDark(scene: FScene, position: { x: number, y: number }) {
     position,
   })
   background.onLoaded(() => {
-    background.container.zIndex = -1
+    background.__CONTAINER__.zIndex = -1
   })
-  scene.addComponent(background)
 }
 
 function addBackgroundVariation(scene: FScene, position: { x: number, y: number }, variation = 0) {
@@ -53,9 +49,8 @@ function addBackgroundVariation(scene: FScene, position: { x: number, y: number
     position,
   })
   background.onLoaded(() => {
-    background.container.zIndex = -1
+    background.__CONTAINER__.zIndex = -1
   })
-  scene.addComponent(background)
 }
 
 export function loadLevel(scene: FScene) {

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-new */
 import './style.css'
 import { FAttachedCamera, FCircle, FComponentEmpty, FRectangle, FScene, FShapes } from '@fibbojs/2d'
 import { fDebug } from '@fibbojs/devtools'
@@ -20,13 +21,10 @@ import Character from './classes/Character'
     scale: { x: 20, y: 0.1 },
   })
   deathZone.initCollider()
-  scene.addComponent(deathZone)
-
   // Load level
   loadLevel(scene)
 
-  const square = new MySquare(scene)
-  scene.addComponent(square)
+  new MySquare(scene)
 
   const square2 = new FRectangle(scene, {
     position: { x: 0, y: 3 },
@@ -36,15 +34,13 @@ import Character from './classes/Character'
   square2.initCollider({
     rotationDegree: 45,
   })
-  scene.addComponent(square2)
 
   const square3 = new FRectangle(scene, {
     position: { x: 4, y: 1 },
   })
   square3.initCollider({
     shape: FShapes.CIRCLE,
   })
-  scene.addComponent(square3)
 
   const square4 = new FRectangle(scene, {
     position: { x: -2.2, y: 1 },
@@ -56,34 +52,30 @@ import Character from './classes/Character'
   square4.initSensor({
     scale: { x: 2.5, y: 2.5 },
   })
-  scene.addComponent(square4)
 
   const square5 = new FRectangle(scene, {
     position: { x: 1, y: 2 },
     scale: { x: 0.5, y: 0.5 },
   })
   square5.initSensor()
-  scene.addComponent(square5)
 
   const circle = new FCircle(scene, {
     position: { x: 0, y: 3 },
     scale: { x: 1, y: 1 },
   })
   circle.initRigidBody()
-  scene.addComponent(circle)
 
   // Create a rotating square
   const rotatingSquare = new FRectangle(scene, {
     position: { x: 0, y: 5 },
   })
   rotatingSquare.initSensor()
   let totalDelta = 0
-  scene.addComponent(rotatingSquare)
   scene.onFrame((delta) => {
     // Each frame, move the cube on a circle of radius 3
     const x = Math.cos(totalDelta) * 3
     const y = Math.sin(totalDelta) * 3
-    rotatingSquare.setPosition({ x, y })
+    rotatingSquare.transform.setPosition({ x, y })
     totalDelta += delta
   })
 
@@ -96,28 +88,27 @@ import Character from './classes/Character'
     // Cast the component to FRectangle
     const square = component as FRectangle
     // Change the color of the square to a random color
-    square.container.tint = Math.random() * 0xFFFFFF
+    square.__CONTAINER__.tint = Math.random() * 0xFFFFFF
   })
   character.onCollisionWith(circle, () => {
     console.log('Sprite collided with the circle!')
   })
   character.onCollisionWith(deathZone, () => {
-    character.setPosition({ x: 0, y: 5 })
+    character.transform.setPosition({ x: 0, y: 5 })
     console.log('Sprite collided with the death zone!')
   })
-  scene.addComponent(character)
 
   // Create keyboard
   const keyboard = new FKeyboard(scene)
   keyboard.onKeyDown('p', () => {
-    character.setPosition({ x: 0, y: 5 })
-
-    // Remove a square
-    scene.removeComponent(square4)
+    character.transform.setPosition({ x: 0, y: 5 })
 
     // Remove the collision callback with FRectangle
     removeCollisionCallbackWithFRectangle()
 
+    // Make character 2 times bigger on Y axis
+    character.transform.setScale({ x: 0.5, y: 1 })
+
     // Zoom in the camera
     scene.camera.setZoom(1)
   })

apps/playground-3d/pages/rainbowls/main.ts

@@ -21,21 +21,21 @@ import * as THREE from 'three'
     for (let j = 0; j < GRID_COLS; j++) {
     // Create the sphere to display
       const sphere = new FSphere(scene)
-      sphere.setPosition({ x: i * GRID_GAP - GRID_ROWS * GRID_GAP / 2, y: 1, z: j * GRID_GAP - GRID_COLS * GRID_GAP / 2 })
+      sphere.transform.setPosition({ x: i * GRID_GAP - GRID_ROWS * GRID_GAP / 2, y: 1, z: j * GRID_GAP - GRID_COLS * GRID_GAP / 2 })
       // @ts-expect-error Disable typing for the mesh property
-      sphere.mesh.material.color.set(new THREE.Color(0x2C2C2C))
+      sphere.__MESH__.material.color.set(new THREE.Color(0x2C2C2C))
 
       // Create a cube for the hitbox
       const cube = new FCuboid(scene)
-      cube.setPosition({ x: i * GRID_GAP - GRID_ROWS * GRID_GAP / 2, y: 1, z: j * GRID_GAP - GRID_COLS * GRID_GAP / 2 })
-      cube.setScale({ x: GRID_GAP, y: 1, z: GRID_GAP })
+      cube.transform.setPosition({ x: i * GRID_GAP - GRID_ROWS * GRID_GAP / 2, y: 1, z: j * GRID_GAP - GRID_COLS * GRID_GAP / 2 })
+      cube.transform.setScale({ x: GRID_GAP, y: 1, z: GRID_GAP })
       // Make the cube invisible
       // @ts-expect-error Disable typing for the mesh property
-      cube.mesh.material.transparent = true
+      cube.__MESH__.material.transparent = true
       // @ts-expect-error Disable typing for the mesh property
-      cube.mesh.material.opacity = 0
+      cube.__MESH__.material.opacity = 0
       // Attach coordinates to the cube
-      cube.mesh.userData = { x: i, y: j }
+      cube.__MESH__.userData = { x: i, y: j }
 
       // Add the sphere to the scene
       scene.addComponent(sphere)
@@ -49,13 +49,13 @@ import * as THREE from 'three'
 
   // Create a camera target
   const cameraTarget = new FCuboid(scene)
-  cameraTarget.setPosition({ x: 0, y: 1, z: 0 })
+  cameraTarget.transform.setPosition({ x: 0, y: 1, z: 0 })
   // Create a camera
-  const camera = new FOrbitCamera({
+  const camera = new FOrbitCamera(scene, {
     target: cameraTarget,
   })
-  camera.setPosition(14, 12, 14)
-  camera.lookAt(0, 0, 0)
+  camera.transform.setPosition({ x: 14, y: 12, z: 14 })
+  camera.lookAt({ x: 0, y: 0, z: 0 })
   scene.camera = camera
 
   // Create raycaster and pointer
@@ -79,11 +79,11 @@ import * as THREE from 'three'
       // Move the spheres back to their original position
         for (let i = 0; i < GRID_ROWS; i++) {
           for (let j = 0; j < GRID_COLS; j++) {
-            grid[i][j].mesh.position.lerp(
+            grid[i][j].__MESH__.position.lerp(
               new THREE.Vector3(
-                grid[i][j].mesh.position.x,
+                grid[i][j].__MESH__.position.x,
                 1,
-                grid[i][j].mesh.position.z,
+                grid[i][j].__MESH__.position.z,
               )
               , 0.1,
             )
@@ -102,19 +102,19 @@ import * as THREE from 'three'
             if (distance < RADIUS) {
             // Change the color of the sphere based on the distance
             // @ts-expect-error Disable typing for the mesh property
-              sphere.mesh.material.color.set(new THREE.Color(`hsl(${(distance / RADIUS) * 360}, 90%, 70%)`))
+              sphere.__MESH__.material.color.set(new THREE.Color(`hsl(${(distance / RADIUS) * 360}, 90%, 70%)`))
               // Elevate the sphere based on the distance
-              sphere.mesh.position.lerp(
+              sphere.__MESH__.position.lerp(
                 new THREE.Vector3(
-                  sphere.mesh.position.x,
+                  sphere.__MESH__.position.x,
                   1 + ELEVATION * (1 - distance / RADIUS),
-                  sphere.mesh.position.z,
+                  sphere.__MESH__.position.z,
                 )
                 , 0.1,
               )
             }
             // @ts-expect-error Disable typing for the mesh property
-            else { sphere.mesh.material.color.set(new THREE.Color(0x2C2C2C)) }
+            else { sphere.__MESH__.material.color.set(new THREE.Color(0x2C2C2C)) }
           }
         }
       }

apps/playground-3d/src/classes/Character.ts

@@ -17,17 +17,17 @@ export default class Character extends FFBX {
 
   initRigidBody(options?: FRigidBodyOptions) {
     super.initRigidBody({
-      position: { x: 0, y: 0.25, z: 0 },
-      scale: { x: 0.25, y: 0.25, z: 0.25 },
+      positionOffset: { x: 0, y: 0.25, z: 0 },
+      scaleOffset: { x: -1.5, y: -1.5, z: -1.5 },
       ...options,
     })
   }
 
   initSensor(options?: FRigidBodyOptions) {
     super.initSensor({
       ...options,
-      position: { x: 0, y: 0.25, z: 0 },
-      scale: { x: 0.6, y: 0.4, z: 0.6 },
+      positionOffset: { x: 0, y: 0.25, z: 0 },
+      scaleOffset: { x: -1.3, y: -1.8, z: -1.3 },
     })
   }
 }

apps/playground-3d/src/classes/Duck.ts

@@ -7,8 +7,4 @@ export default class Duck extends FGLB {
       name: 'Duck',
     })
   }
-
-  onFrame(delta: number) {
-    super.onFrame(delta)
-  }
 }

apps/playground-3d/src/classes/GltfCube.ts

@@ -6,13 +6,9 @@ export default class GltfCube extends FGLTF {
     super(scene, {
       name: 'Cube',
     })
-    this.setPosition({ x: -4, y: 5, z: 2 })
-    this.setScale({ x: 2, y: 0.25, z: 2 })
-    this.setRotationDegree({ x: 20, y: 0, z: 0 })
+    this.transform.position = { x: -4, y: 5, z: 2 }
+    this.transform.rotationDegree = { x: 20, y: 0, z: 0 }
+    this.transform.scale = { x: 2, y: 0.25, z: 2 }
     this.initRigidBody()
   }
-
-  onFrame(delta: number) {
-    super.onFrame(delta)
-  }
 }

apps/playground-3d/src/classes/MyCustomCube.ts

@@ -8,8 +8,4 @@ export default class MyCustomCube extends FCuboid {
   constructor(scene: FScene, options?: FComponentOptions) {
     super(scene, options)
   }
-
-  onFrame(delta: number) {
-    super.onFrame(delta)
-  }
 }