fix #63 (#64)

* wip * wip * fix #63
tulipjs · Jun 24, 2024 · 7aaeb3b · 7aaeb3b
1 parent 26140e3
commit 7aaeb3b
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 7 deletions.
diff --git a/examples/example/src/app.component.ts b/examples/example/src/app.component.ts
@@ -13,7 +13,7 @@ import { playerComponent } from "player.component";
 type Mutable = {} & DisplayObjectMutable<Container>;
 
 export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
-  global.$setVisualHitboxes(true);
+  global.$setVisualHitboxes(false);
 
   const $container = container({ label: "app" });
 

diff --git a/examples/example/src/player.component.ts b/examples/example/src/player.component.ts
@@ -35,6 +35,8 @@ export const playerComponent: AsyncComponent<Props, Mutable> = async () => {
 
   const $player = player2D({
     onTick,
+    maxSpeed: 10,
+    acceleration: 3,
   });
 
   const width = 175;
@@ -49,7 +51,7 @@ export const playerComponent: AsyncComponent<Props, Mutable> = async () => {
   $player.add($sprite);
 
   const $body = body({
-    mass: 1,
+    mass: 10,
   });
 
   $body.addShape({

diff --git a/src/components/core/body.sub-component.ts b/src/components/core/body.sub-component.ts
@@ -64,6 +64,9 @@ export const body: SubComponent<BodyProps, BodyMutable> = ({
   const addForceY = (force: number) => ($body.force[1] = force);
   const addForce = (force: Point) => ($body.force = [force.x, force.y]);
 
+  const setVelocity = (velocity: Point) =>
+    ($body.velocity = [velocity.x, velocity.y]);
+
   return {
     addShape,
     removeShape,
@@ -78,6 +81,8 @@ export const body: SubComponent<BodyProps, BodyMutable> = ({
     addForceY,
     addForce,
 
+    setVelocity,
+
     $getBody,
     $getMaterial,
     $getContactBody,

diff --git a/src/components/prefabs/player-2d.component.ts b/src/components/prefabs/player-2d.component.ts
@@ -7,38 +7,85 @@ import {
 } from "../../types";
 import { DisplayObjectEvent, Event } from "../../enums";
 import { global } from "../../global";
+import { degreesToRadians } from "../../utils";
 
 type PlayerProps = {
+  maxSpeed?: number;
+  acceleration?: number;
+  deceleration?: number;
   onTick?: (direction: Direction) => void; // TODO: change direction -> keybinding -> https://github.com/tulipjs/tulip/issues/53
 } & ContainerProps;
 
 export const player2D: Component<PlayerProps, ContainerMutable> = ({
   onTick = () => {},
+  maxSpeed = 8,
+  acceleration = 0.3,
+  deceleration = 0.1,
   ...props
 }) => {
   const $container = container({
     ...props,
   });
 
   let currentKeyList = [];
+  let velocityX = 0;
+  let velocityY = 0;
+
   $container.on(DisplayObjectEvent.TICK, () => {
     const position = $container.getPosition();
     global.sounds.setPosition({ ...position, z: 2 });
     const $body = $container.getBody();
+    if (!$body) return;
+
+    const angle = degreesToRadians($container.getAngle());
 
     if (currentKeyList.includes("d")) {
-      $body.addForceX(-1);
+      velocityX -= acceleration * Math.cos(angle);
+      velocityY -= acceleration * Math.sin(angle);
+
       onTick(Direction.RIGHT);
     } else if (currentKeyList.includes("a")) {
-      $body.addForceX(1);
+      velocityX += acceleration * Math.cos(angle);
+      velocityY += acceleration * Math.sin(angle);
+
       onTick(Direction.LEFT);
     } else if (currentKeyList.includes("w")) {
-      $body.addForceY(1);
+      velocityX -= acceleration * Math.sin(angle);
+      velocityY += acceleration * Math.cos(angle);
+
       onTick(Direction.UP);
     } else if (currentKeyList.includes("s")) {
-      $body.addForceY(-1);
+      velocityX += acceleration * Math.sin(angle);
+      velocityY -= acceleration * Math.cos(angle);
+
       onTick(Direction.DOWN);
-    } else if (currentKeyList.includes("q")) {
+    } else {
+      if (velocityX > 0) {
+        velocityX = Math.max(0, velocityX - deceleration);
+      } else if (velocityX < 0) {
+        velocityX = Math.min(0, velocityX + deceleration);
+      }
+
+      if (velocityY > 0) {
+        velocityY = Math.max(0, velocityY - deceleration);
+      } else if (velocityY < 0) {
+        velocityY = Math.min(0, velocityY + deceleration);
+      }
+    }
+
+    // Max speed
+    const currentVelocity = Math.sqrt(
+      velocityX * velocityX + velocityY * velocityY,
+    );
+    if (currentVelocity > maxSpeed) {
+      const scalingFactor = maxSpeed / currentVelocity;
+      velocityX *= scalingFactor;
+      velocityY *= scalingFactor;
+    }
+    $body.setVelocity({ x: velocityX, y: velocityY });
+
+    // Rotation
+    if (currentKeyList.includes("q")) {
       $container.setAngle((a) => a - 3);
     } else if (currentKeyList.includes("e")) {
       $container.setAngle((a) => a + 3);

diff --git a/src/types/body.types.ts b/src/types/body.types.ts
@@ -23,6 +23,8 @@ export type BodyMutable<Raw extends any = {}> = {
   addForceY: (force: number) => void;
   addForce: (force: Point) => void;
 
+  setVelocity: (velocity: Point) => void;
+
   $getBody: () => p2.Body;
   $getMaterial: () => p2.Material;
   $getContactBody: (bodyMutable: BodyMutable) => p2.ContactMaterial;