@needle-tools/engine 2.37.0-pre → 2.38.0-pre.1

package/src/engine/engine_setup.ts

@@ -24,8 +24,8 @@ import { Application } from './engine_application';
 import { LightDataRegistry, ILightDataRegistry } from './engine_lightdata';
 import { PlayerViewManager } from './engine_playerview';
 
-import { ICamera as Camera, IComponent, ILight as Light } from "./engine_types"
-import { destroy } from './engine_gameobject';
+import { ICamera, IComponent, ILight } from "./engine_types"
+import { destroy, foreachComponent } from './engine_gameobject';
 
 
 const debug = utils.getParam("debugSetup");
@@ -58,6 +58,7 @@ export class ContextArgs {
 	alias: string | undefined | null = undefined;
 	domElement: HTMLElement | null;
 	renderer?: THREE.WebGLRenderer = undefined;
+	hash?: string;
 
 	constructor(domElement: HTMLElement | null) {
 		this.domElement = domElement ?? document.body;
@@ -70,7 +71,8 @@ export enum FrameEvent {
 	LateUpdate = 2,
 	OnBeforeRender = 3,
 	OnAfterRender = 4,
-	PhysicsStep = 10,
+	PrePhysicsStep = 9,
+	PostPhysicsStep = 10,
 }
 
 export enum XRSessionMode {
@@ -81,12 +83,12 @@ export enum XRSessionMode {
 export declare type OnBeforeRenderCallback = (renderer: THREE.WebGLRenderer, scene: THREE.Scene, camera: THREE.Camera, geometry: THREE.BufferGeometry, material: THREE.Material, group: THREE.Group) => void
 
 
-export function registerComponent(script : IComponent, context?: Context) {
-    if (!script) return;
-    const new_scripts = context?.new_scripts ?? Context.Current.new_scripts;
-    if (!new_scripts.includes(script)) {
-        new_scripts.push(script);
-    }
+export function registerComponent(script: IComponent, context?: Context) {
+	if (!script) return;
+	const new_scripts = context?.new_scripts ?? Context.Current.new_scripts;
+	if (!new_scripts.includes(script)) {
+		new_scripts.push(script);
+	}
 }
 
 export class Context {
@@ -105,13 +107,16 @@ export class Context {
 	alias: string | undefined | null;
 	isManagedExternally: boolean = false;
 
+	/** used to append to loaded assets */
+	hash?: string;
+
 	domElement: HTMLElement;
 	get resolutionScaleFactor() { return this._resolutionScaleFactor; }
 	/** use to scale the resolution up or down of the renderer. default is 1 */
-	set resolutionScaleFactor(val: number) { 
-		if(val === this._resolutionScaleFactor) return;
-		if(typeof val !== "number") return;
-		if(val <= 0) {
+	set resolutionScaleFactor(val: number) {
+		if (val === this._resolutionScaleFactor) return;
+		if (typeof val !== "number") return;
+		if (val <= 0) {
 			console.error("Invalid resolution scale factor", val);
 			return;
 		}
@@ -124,7 +129,9 @@ export class Context {
 	get domX(): number { return this.domElement.offsetLeft; }
 	get domY(): number { return this.domElement.offsetTop; }
 	get isInXR() { return this.renderer.xr?.isPresenting || false; }
-	xrSessionMode : XRSessionMode | undefined = undefined;
+	xrSessionMode: XRSessionMode | undefined = undefined;
+	get isInVR() { return this.xrSessionMode === XRSessionMode.ImmersiveVR; }
+	get isInAR() { return this.xrSessionMode === XRSessionMode.ImmersiveAR; }
 	get xrSession() { return this.renderer.xr?.getSession(); }
 	get arOverlayElement(): HTMLElement {
 		const el = this.domElement as any;
@@ -150,14 +157,14 @@ export class Context {
 
 	get mainCamera(): THREE.Camera | null {
 		if (this.mainCameraComponent) {
-			const cam = this.mainCameraComponent as Camera;
+			const cam = this.mainCameraComponent as ICamera;
 			if (!cam.cam)
 				cam.buildCamera();
 			return cam.cam;
 		}
 		return null;
 	}
-	mainCameraComponent: Camera | undefined;
+	mainCameraComponent: ICamera | undefined;
 
 	post_setup_callbacks: Function[] = [];
 	pre_update_callbacks: Function[] = [];
@@ -178,11 +185,11 @@ export class Context {
 	 * @deprecated AssetDataBase is deprecated
 	 */
 	assets: AssetDatabase;
-	mainLight: Light | null = null;
+	mainLight: ILight | null = null;
 	rendererData: RendererData;
 	addressables: Addressables;
 	lightmaps: ILightDataRegistry;
-	players : PlayerViewManager;
+	players: PlayerViewManager;
 
 	private _sizeChanged: boolean = false;
 	private _isCreated: boolean = false;
@@ -193,6 +200,7 @@ export class Context {
 		this.name = args?.name || "";
 		this.alias = args?.alias;
 		this.domElement = args?.domElement || document.body;
+		this.hash = args?.hash;
 		if (args?.renderer) {
 			this.renderer = args.renderer;
 			this.isManagedExternally = true;
@@ -232,7 +240,7 @@ export class Context {
 		this.lightmaps = new LightDataRegistry(this);
 		this.players = new PlayerViewManager(this);
 
-		window.addEventListener('resize', () => this._sizeChanged = true );
+		window.addEventListener('resize', () => this._sizeChanged = true);
 		const ro = new ResizeObserver(_ => this._sizeChanged = true);
 		ro.observe(this.domElement);
 	}
@@ -315,9 +323,9 @@ export class Context {
 		}
 	}
 
-	private _cameraStack: Camera[] = [];
+	private _cameraStack: ICamera[] = [];
 
-	setCurrentCamera(cam: Camera) {
+	setCurrentCamera(cam: ICamera) {
 		if (!cam) return;
 		if (!cam.cam) cam.buildCamera(); // < to build camera
 		if (!cam.cam) {
@@ -331,17 +339,17 @@ export class Context {
 		const camera = cam.cam as THREE.PerspectiveCamera;
 		if (camera.isPerspectiveCamera)
 			this.updateAspect(camera);
-		(this.mainCameraComponent as Camera)?.applyClearFlagsIfIsActiveCamera();
+		(this.mainCameraComponent as ICamera)?.applyClearFlagsIfIsActiveCamera();
 	}
 
-	removeCamera(cam?: Camera | null) {
-		if(!cam) return;
+	removeCamera(cam?: ICamera | null) {
+		if (!cam) return;
 		const index = this._cameraStack.indexOf(cam);
 		if (index >= 0) this._cameraStack.splice(index, 1);
 
 		if (this.mainCameraComponent === cam) {
 			this.mainCameraComponent = undefined;
-		
+
 			if (this._cameraStack.length > 0) {
 				const last = this._cameraStack[this._cameraStack.length - 1];
 				this.setCurrentCamera(last);
@@ -460,25 +468,24 @@ export class Context {
 		}
 
 		if (!this.mainCamera) {
-			// console.error("MISSING camera", this);
-			// return;
-			// Context._current = this;
-			// //@ts-ignore
-			// const cams = findObjectsOfType(Camera, this);
-			// console.log(cams);
-			// // get main camera, fallback to first camera
-			// const mc: Camera = cams.find(c => c.tag == "MainCamera") ?? cams.find(_ => true) as Camera;
-			// if (mc) {
-			// 	if (mc.tag !== "MainCamera")
-			// 		console.warn("No mainCamera configured. Some components rely on a mainCamera object being present. " +
-			// 			"When exporting your scene, make sure to set the mainCamera tag on your camera. Using \"" + mc.name + "\" as mainCamera now.");
-			// 	this.setCurrentCamera(mc);
-			// }
-			// else {
-			// 	console.error("No camera found");
-			// 	const cam = createCameraWithOrbitControl(this.scene);
-			// 	this.setCurrentCamera(cam);
-			// }
+			Context._current = this;
+			let camera: ICamera | null = null;
+			foreachComponent(this.scene, comp => {
+				const cam = comp as ICamera;
+				if (cam?.isCamera) {
+					if (cam.tag === "MainCamera") {
+						camera = cam;
+						return true;
+					}
+					else camera = cam;
+				}
+				return undefined;
+			});
+			if (camera) {
+				this.setCurrentCamera(camera);
+			}
+			else
+				console.error("MISSING camera", this);
 		}
 
 		Context._current = this;
@@ -569,8 +576,9 @@ export class Context {
 			const physicsSteps = 1;
 			const dt = this.time.deltaTime / physicsSteps;
 			for (let i = 0; i < physicsSteps; i++) {
+				this.executeCoroutines(FrameEvent.PrePhysicsStep);
 				this.physics.step(dt);
-				this.executeCoroutines(FrameEvent.PhysicsStep);
+				this.executeCoroutines(FrameEvent.PostPhysicsStep);
 			}
 		}
 		catch (err) {

package/src/engine/engine_types.ts

@@ -40,6 +40,7 @@ export interface IComponent {
     get name(): string;
     get layer(): number;
     get destroyed(): boolean;
+    get tag() : string;
 
     context: any;
 
@@ -83,6 +84,7 @@ export interface IComponent {
 
 
 export declare interface ICamera extends IComponent {
+    get isCamera() : boolean;
     applyClearFlagsIfIsActiveCamera(): unknown;
     buildCamera();
     get cam(): Camera;
@@ -173,7 +175,7 @@ export class ContactPoint {
 /// all info in here must be readonly because the object is only created once per started collision
 export class Collision {
 
-    private readonly contacts: ContactPoint[];
+    readonly contacts: ContactPoint[];
 
     constructor(obj: Object3D, otherCollider: ICollider, contacts: ContactPoint[]) {
         this.me = obj;
@@ -201,6 +203,7 @@ export class Collision {
         return this.collider?.attachedRigidbody;
     }
 
+    
 
     // private _normal?: Vector3;
     // get normal(): Vector3 {

package/src/engine-components/Animation.ts

@@ -112,6 +112,14 @@ export class Animation extends Behaviour {
         return this.actions?.find(a => a.getClip().name === name);
     }
 
+    get isPlaying() {
+        for (let i = 0; i < this._currentActions.length; i++) {
+            if (this._currentActions[i].isRunning())
+                return true;
+        }
+        return false;
+    }
+
     play(clipOrNumber: AnimationClip | number | string, options?: PlayOptions): Promise<AnimationAction> | void {
         this.init();
         if (!this.mixer) return;

package/src/engine-components/AnimatorController.ts

@@ -218,7 +218,7 @@ export class AnimatorController {
             if (!allConditionsAreMet) continue;
 
             if (debug && allConditionsAreMet) {
-                console.log("All conditions are met", transition);
+                // console.log("All conditions are met", transition);
             }
 
             // disable triggers
@@ -232,16 +232,16 @@ export class AnimatorController {
             if (action) {
                 const dur = state.motion.clip!.duration;
                 const normalizedTime = dur <= 0 ? 1 : action.time / dur;
-                if (!transition.hasExitTime
-                    || (normalizedTime >= transition.exitTime && action.time >= action.getClip().duration
-                    )
-                ) {
+                const makeTransition = transition.hasExitTime ? normalizedTime >= transition.exitTime : true;
+                // console.log(state.name, makeTransition, transition.hasExitTime, normalizedTime, transition.exitTime)
+                if (makeTransition) {
                     // if (transition.hasExitTime && transition.exitTime >= .9999) 
                     action.clampWhenFinished = true;
                     // else action.clampWhenFinished = false;
-                    if (debug) {
-                        console.log("transition to " + transition.destinationState, transition);
-                        console.log(action.time, transition.exitTime);
+                    if (debug) 
+                    {
+                        console.log("transition to " + transition.destinationState, transition, normalizedTime, transition.exitTime, transition.hasExitTime);
+                        // console.log(action.time, transition.exitTime);
                     }
                     this.transitionTo(transition.destinationState as State, transition.duration, transition.offset);
                     // use the first transition that matches all conditions and make the transition as soon as in range
@@ -252,7 +252,7 @@ export class AnimatorController {
                 this.transitionTo(transition.destinationState as State, transition.duration, transition.offset);
                 return;
             }
-            break;
+            // if none of the transitions can be made continue searching for another transition meeting the conditions
         }
 
         let didTriggerLooping = false;
@@ -376,7 +376,13 @@ export class AnimatorController {
     }
 
     private createAction(clip: AnimationClip) {
-        this._mixer.uncacheClip(clip);
+
+        // uncache clip causes issues when multiple states use the same clip
+        // this._mixer.uncacheClip(clip);
+        // instead only uncache the action when one already exists to make sure
+        // we get unique actions per state
+        const existing = this._mixer.existingAction(clip);
+        if (existing) this._mixer.uncacheAction(clip, this.animator?.gameObject);
 
         if (this.animator?.applyRootMotion) {
             if (!this.rootMotionHandler) {
@@ -387,7 +393,6 @@ export class AnimatorController {
             return this.rootMotionHandler.createClip(this._mixer, root, clip);
         }
         else {
-
             const action = this._mixer.clipAction(clip);
             return action;
         }

package/src/engine-components/Camera.ts

@@ -7,6 +7,7 @@ import { RGBAColor } from "./js-extensions/RGBAColor";
 import { PerspectiveCamera } from "three";
 import { XRSessionMode } from "../engine/engine_setup";
 import { ICamera } from "../engine/engine_types"
+import { showBalloonMessage } from "../engine/debug/debug";
 
 export enum ClearFlags {
     Skybox = 1,
@@ -18,6 +19,9 @@ const debug = getParam("debugcam");
 
 export class Camera extends Behaviour implements ICamera {
 
+    get isCamera() {
+        return true;
+    }
 
     get aspect(): number {
         if (this._cam instanceof PerspectiveCamera) return this._cam.aspect;
@@ -121,12 +125,16 @@ export class Camera extends Behaviour implements ICamera {
     onEnable(): void {
         if (debug) console.log(this);
         this.buildCamera();
-        if (this.tag == "MainCamera") {
+        if (this.tag == "MainCamera" || !this.context.mainCameraComponent) {
             this.context.setCurrentCamera(this);
         }
         this.applyClearFlagsIfIsActiveCamera();
     }
 
+    onDisable() {
+        this.context.removeCamera(this);
+    }
+
     buildCamera() {
         if (this._cam) return;
 
@@ -168,6 +176,8 @@ export class Camera extends Behaviour implements ICamera {
     }
 
     applyClearFlagsIfIsActiveCamera() {
+        if (debug)
+            showBalloonMessage("apply Camera clear flags");
         if (this._cam && this.context.mainCameraComponent === this) {
             switch (this._clearFlags) {
                 case ClearFlags.Skybox:
@@ -203,12 +213,22 @@ export class Camera extends Behaviour implements ICamera {
         const session = this.context.renderer.xr?.getSession();
         if (!session) return false;
         const environmentBlendMode = session.environmentBlendMode;
+        if (debug)
+            showBalloonMessage("Environment blend mode: " + environmentBlendMode + " on " + navigator.userAgent);
         const transparent = environmentBlendMode === 'additive' || environmentBlendMode === 'alpha-blend';
-        // workaround for Quest 2 returning opaque when it should be alpha-blend
-        // check user agent if this is the Quest browser and return true if so
 
-        if (environmentBlendMode === "opaque" && navigator.userAgent?.includes("OculusBrowser")) {
-            if (this.context.xrSessionMode === XRSessionMode.ImmersiveAR) return true;
+        if (this.context.xrSessionMode === XRSessionMode.ImmersiveAR) {
+            if (environmentBlendMode === "opaque") {
+                // workaround for Quest 2 returning opaque when it should be alpha-blend
+                // check user agent if this is the Quest browser and return true if so
+                if (navigator.userAgent?.includes("OculusBrowser")) {
+                    return true;
+                }
+                // Mozilla WebXR Viewer
+                else if (navigator.userAgent?.includes("Mozilla") && navigator.userAgent?.includes("Mobile WebXRViewer/v2")) {
+                    return true;
+                }
+            }
         }
         return transparent;
     }

package/src/engine-components/CharacterController.ts

@@ -0,0 +1,185 @@
+import { Quaternion, Ray, Vector3 } from "three";
+import { Mathf } from "../engine/engine_math";
+import { serializeable } from "../engine/engine_serialization";
+import { Collision } from "../engine/engine_types";
+import { CapsuleCollider } from "./Collider";
+import { Behaviour, GameObject } from "./Component";
+import { Rigidbody } from "./RigidBody";
+import { Animator } from "./Animator"
+import { RaycastOptions } from "../engine/engine_physics";
+import { getWorldPosition } from "../engine/engine_three_utils";
+
+export class CharacterController extends Behaviour {
+
+    @serializeable(Vector3)
+    center: Vector3 = new Vector3(0, 0, 0);
+    @serializeable()
+    radius: number = .5;
+    @serializeable()
+    height: number = 2;
+
+    private _rigidbody: Rigidbody | null = null;
+    get rigidbody(): Rigidbody {
+        if (this._rigidbody) return this._rigidbody;
+        this._rigidbody = this.gameObject.getComponent(Rigidbody);
+        if (!this._rigidbody)
+            this._rigidbody = this.gameObject.addNewComponent(Rigidbody) as Rigidbody;
+        return this.rigidbody;
+    }
+
+    onEnable() {
+        let rb = this.rigidbody;
+        let collider = this.gameObject.getComponent(CapsuleCollider);
+        if (!collider)
+            collider = this.gameObject.addNewComponent(CapsuleCollider) as CapsuleCollider;
+        // rb.isKinematic = true;
+        collider.center.copy(this.center);
+        collider.radius = this.radius;
+        collider.height = this.height;
+        this.gameObject.rotation.x = 0;
+        this.gameObject.rotation.z = 0;
+        rb.lockRotationX = true;
+        rb.lockRotationY = true;
+        rb.lockRotationZ = true;
+
+        // TODO: this doesnt work yet
+        // setInterval(()=>{
+        //     this.rigidbody.isKinematic = !this.rigidbody.isKinematic;
+        //     console.log(this.rigidbody.isKinematic);
+        // }, 1000)
+    }
+
+    move(vec: Vector3) {
+        this.gameObject.position.add(vec);
+    }
+
+    private _activeGroundCollisions: Set<Collision> = new Set();
+
+    onCollisionEnter(col: Collision) {
+        for (const contact of col.contacts) {
+            // console.log(contact.normal);
+            if (contact.normal.y > .1) {
+                this._activeGroundCollisions.add(col);
+                break;
+            }
+        }
+    }
+
+    onCollisionExit(col: Collision) {
+        this._activeGroundCollisions.delete(col);
+    }
+
+    get isGrounded(): boolean { return this._activeGroundCollisions.size > 0; }
+}
+
+export class CharacterControllerInput extends Behaviour {
+
+    @serializeable(CharacterController)
+    controller?: CharacterController;
+
+    @serializeable()
+    movementSpeed: number = 2;
+
+    @serializeable()
+    rotationSpeed: number = 2;
+
+    @serializeable()
+    jumpForce: number = 1;
+
+    @serializeable(Animator)
+    animator?: Animator;
+
+    lookForward: boolean = true;
+
+    private _currentSpeed: Vector3 = new Vector3(0, 0, 0);
+    private _currentAngularSpeed: Vector3 = new Vector3(0, 0, 0);
+
+    private _temp: Vector3 = new Vector3(0, 0, 0);
+    private _jumpCount: number = 0;
+    private _currentRotation!: Quaternion;
+
+    awake(){
+        this._currentRotation = new Quaternion();
+    }
+
+    update() {
+
+        if (this.controller?.isGrounded) {
+            this._jumpCount = 0;
+            this.animator?.SetBool("doubleJump", false);
+        }
+
+        const forward = this.context.input.isKeyPressed("w");
+        const backward = this.context.input.isKeyPressed("s");
+        const rotateLeft = this.context.input.isKeyPressed("a");
+        const rotateRight = this.context.input.isKeyPressed("d");
+        const jump = this.context.input.isKeyDown(" ");
+        // if (jumpDown) this._jumpDownTime = this.context.time.time;
+        // const jumpUp = this.context.input.isKeyUp(" ");
+
+        const step = forward ? 1 : 0 + backward ? -1 : 0;
+        this._currentSpeed.z += step * this.movementSpeed * this.context.time.deltaTime;
+
+        // if (!this.controller || this.controller.isGrounded)
+        this.animator?.SetBool("running", step != 0);
+        this.animator?.SetBool("jumping", this.controller?.isGrounded === true && jump);
+
+        this._temp.copy(this._currentSpeed);
+        this._temp.applyQuaternion(this.gameObject.quaternion);
+        if (this.controller) this.controller.move(this._temp);
+        else this.gameObject.position.add(this._temp);
+
+        const rotation = rotateLeft ? 1 : 0 + rotateRight ? -1 : 0;
+        this._currentAngularSpeed.y += Mathf.toRadians(rotation * this.rotationSpeed) * this.context.time.deltaTime;
+        if (this.lookForward && Math.abs(this._currentAngularSpeed.y) < .01) {
+            const forwardVector = this.context.mainCameraComponent!.forward;
+            forwardVector.y = 0;
+            forwardVector.normalize();
+            this._currentRotation.setFromUnitVectors(new Vector3(0, 0, 1), forwardVector);
+            this.gameObject.quaternion.slerp(this._currentRotation, this.context.time.deltaTime * 10);
+        }
+        this.gameObject.rotateY(this._currentAngularSpeed.y);
+
+
+        this._currentSpeed.multiplyScalar(1 - this.context.time.deltaTime * 10);
+        this._currentAngularSpeed.y *= 1 - this.context.time.deltaTime * 10;
+
+        if (this.controller && jump && this.jumpForce > 0) {
+            let canJump = this.controller?.isGrounded;
+            if (!this.controller?.isGrounded && this._jumpCount === 1) {
+                canJump = true;
+                this.animator?.SetBool("doubleJump", true);
+            }
+
+            if (canJump) {
+                this._jumpCount += 1;
+                // TODO: factor in mass
+                const rb = this.controller.rigidbody;
+                // const fullJumpHoldLength = .1;
+                const factor = this._jumpCount === 2 ? 2 : 1;// Mathf.clamp((this.context.time.time - this._jumpDownTime), 0, fullJumpHoldLength) / fullJumpHoldLength;
+                rb.applyImpulse(new Vector3(0, 1, 0).multiplyScalar(this.jumpForce * factor));
+            }
+        }
+
+        if (this.controller) {
+            // TODO: should probably raycast to the ground or check if we're still in the jump animation
+            const verticalSpeed = this.controller?.rigidbody.getVelocity().y;
+            if (verticalSpeed < -1) {
+                if (!this._raycastOptions.ray) this._raycastOptions.ray = new Ray();
+                this._raycastOptions.ray.origin.copy(getWorldPosition(this.gameObject));
+                this._raycastOptions.ray.direction.set(0, -1, 0);
+                const currentLayer = this.layer;
+                this.gameObject.layers.disableAll();
+                this.gameObject.layers.set(2);
+                const hits = this.context.physics.raycast(this._raycastOptions);
+                this.gameObject.layers.set(currentLayer);
+                if ((hits.length && hits[0].distance > 2 || verticalSpeed < -10)) {
+                    this.animator?.SetBool("falling", true);
+                }
+            }
+            else this.animator?.SetBool("falling", false);
+        }
+    }
+
+    private _raycastOptions = new RaycastOptions();
+}

package/src/engine-components/Collider.ts

@@ -2,16 +2,9 @@ import { Behaviour } from "./Component";
 import { Rigidbody } from "./RigidBody";
 import { serializeable } from "../engine/engine_serialization_decorator";
 import { Event, Mesh, Object3D, Vector3 } from "three"
-import { IColliderProvider, registerColliderProvider } from "../engine/engine_physics";
+// import { IColliderProvider, registerColliderProvider } from "../engine/engine_physics";
 import { ICollider } from "../engine/engine_types";
-import { getComponentInChildren } from "../engine/engine_components";
 
-class ColliderProvider implements IColliderProvider {
-    getCollider(obj: Object3D): ICollider {
-        return getComponentInChildren<Collider>(obj, Collider);
-    }
-}
-registerColliderProvider(new ColliderProvider());
 
 export class Collider extends Behaviour implements ICollider {
 
@@ -54,7 +47,7 @@ export class SphereCollider extends Collider {
     @serializeable()
     radius: number = .5;
     @serializeable(Vector3)
-    center: THREE.Vector3 = new Vector3(0, 0, 0);
+    center: Vector3 = new Vector3(0, 0, 0);
 
     onEnable() {
         super.onEnable();
@@ -65,9 +58,9 @@ export class SphereCollider extends Collider {
 export class BoxCollider extends Collider {
 
     @serializeable(Vector3)
-    size: THREE.Vector3 = new Vector3(1, 1, 1);
+    size: Vector3 = new Vector3(1, 1, 1);
     @serializeable(Vector3)
-    center: THREE.Vector3 = new Vector3(0, 0, 0);
+    center: Vector3 = new Vector3(0, 0, 0);
 
     onEnable() {
         super.onEnable();
@@ -83,10 +76,6 @@ export class MeshCollider extends Collider {
     @serializeable()
     convex: boolean = false;
 
-    awake(){
-        console.log(this);
-    }
-
     onEnable() {
         super.onEnable();
         if (!this.sharedMesh?.isMesh) {
@@ -98,4 +87,21 @@ export class MeshCollider extends Collider {
         if (this.sharedMesh?.isMesh)
             this.context.physics.addMeshCollider(this, this.sharedMesh, this.convex);
     }
+}
+
+
+export class CapsuleCollider extends Collider {
+    @serializeable(Vector3)
+    center: Vector3 = new Vector3(0, 0, 0);
+
+    @serializeable()
+    radius: number = .5;
+    @serializeable()
+    height: number = 2;
+
+    onEnable() {
+        super.onEnable();
+        this.context.physics.addCapsuleCollider(this, this.center, this.height, this.radius);
+    }
+
 }