fix #35 (#57)

* wip * wip #35 * wip #35 * wip #35 * wip #35 * fix #35
tulipjs · Jun 22, 2024 · 449fd73 · 449fd73
1 parent 18b6d7d
commit 449fd73
Show file tree

Hide file tree

Showing 17 changed files with 162 additions and 212 deletions.
diff --git a/examples/example/assets/quack.mp3 b/examples/example/assets/quack.mp3
diff --git a/examples/example/assets/sample.mp3 b/examples/example/assets/sample.mp3
diff --git a/examples/example/assets/speaker.png b/examples/example/assets/speaker.png
diff --git a/examples/example/src/app.component.ts b/examples/example/src/app.component.ts
@@ -2,16 +2,9 @@ import {
   AsyncComponent,
   Container,
   container,
-  DisplayObjectEvent,
   DisplayObjectMutable,
-  EventMode,
-  global,
   plane,
-  box,
-  circle,
-  sprite,
   world,
-  capsule,
 } from "@tulib/tulip";
 import { flyComponent } from "fly.component";
 import { playerComponent } from "player.component";
@@ -20,176 +13,51 @@ type Mutable = {} & DisplayObjectMutable<Container>;
 
 export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
   const $container = container({ label: "app" });
+
   const $world = world({
     position: { x: 0, y: 0 },
-    label: "world",
+    label: "world2",
     props: {
       physics: {
         enabled: true,
-        gravity: { x: 0, y: -0.25 },
+        gravity: { x: 0, y: -0 },
       },
     },
   });
 
   const $plane = plane({
     position: {
       x: 0,
-      y: 100,
+      y: 1200,
     },
-    angle: 60,
     props: {
-      color: 0x333333,
+      color: 0xff3333,
     },
     alpha: 0.25,
   });
   $world.add($plane);
 
-  const $plane2 = plane({
-    position: {
-      x: 400,
-      y: 200,
-    },
-    angle: -60,
-    props: {
-      color: 0x333333,
-    },
-    alpha: 0.25,
-  });
-  $world.add($plane2);
-
-  for (let i = 0; i < 10; i++) {
+  for (let i = 0; i < 400; i++) {
     const _fly = flyComponent({
       label: `ball`,
       props: {
-        color: 0,
-        size: 4,
-        mass: 10,
+        color: 0xffffff,
+        size: 2,
+        mass: 0.1,
       },
       position: {
-        x: 250 + i * 5,
-        y: 0,
+        x: Math.random() * 1300,
+        y: Math.random() * 900,
       },
     });
     $world.add(_fly);
   }
 
-  $container.add($world);
-
-  const $duck = await sprite({
-    texture: "duck.png",
-    eventMode: EventMode.STATIC,
-  });
-  $duck.setPosition({ x: 256, y: 100 });
-  $duck.setPivot({ x: 128, y: 128 });
-  const $quack = await $duck.addSound("quack", {
-    sources: ["quack.mp3"],
-    pannerConfig: {
-      distanceModel: "inverse",
-      rolloffFactor: 0.5,
-    },
-    $verbose: false,
-  });
-
-  $container.add($duck);
+  const $player = await playerComponent();
+  $player.setPosition({ x: 500, y: 1000 });
 
-  const $world2 = world({
-    position: { x: 0, y: 0 },
-    label: "world2",
-    props: {
-      physics: {
-        enabled: true,
-        gravity: { x: 0, y: -0.25 },
-      },
-    },
-  });
-
-  const player = await playerComponent();
-  $world2.add(player);
-
-  $duck.on(DisplayObjectEvent.CLICK, async () => {
-    $quack.play();
-  });
-
-  global.sounds.setVolume(1);
-
-  const $speaker = await sprite({
-    texture: "speaker.png",
-    eventMode: EventMode.STATIC,
-  });
-  $speaker.setPosition({ x: 500, y: 500 });
-  $speaker.setPivot({ x: 16, y: 16 });
-  $container.add($speaker);
-
-  const $sound = await $speaker.addSound("speaker", {
-    sources: ["sample.mp3"],
-    volume: 1,
-    pannerConfig: {
-      coneInnerAngle: 60,
-      coneOuterAngle: 180,
-      coneOuterGain: 0.2,
-    },
-    orientation: {
-      x: -1,
-      y: 0,
-      z: 0,
-    },
-  });
-
-  $speaker.on(DisplayObjectEvent.CLICK, async () => {
-    $sound.toggle();
-  });
-
-  $container.add($world2);
-
-  // Shapes
-  const colors = [0x219c90, 0xfff455, 0xffc700, 0xee4e4e];
-
-  colors.forEach((color, i) => {
-    const $capsule = capsule({
-      props: {
-        color,
-        length: 100 - i * 10,
-        radius: 10 - i * 1.2,
-        mass: 2,
-      },
-    });
-    $capsule.setPosition({ x: 800, y: 100 - i * 15 });
-    $world2.add($capsule);
-
-    const $box = box({
-      props: {
-        color: color,
-        width: 50 - i * 10,
-        height: 50 - i * 10,
-        mass: 2,
-      },
-    });
-    $box.setPosition({ x: 680, y: 80 - i * 60 });
-    $world2.add($box);
-
-    const $circle = circle({
-      props: {
-        color,
-        mass: 2,
-        size: 10,
-      },
-    });
-    $circle.setPosition({ x: 600, y: 50 - i * 10 });
-    $world2.add($circle);
-  });
-
-  const $plane3 = plane({
-    position: {
-      x: 400,
-      y: 300,
-    },
-    angle: 0,
-    props: {
-      color: 0xff00ff,
-    },
-    alpha: 0.5,
-  });
-  $world2.add($plane3);
+  $world.add($player);
+  $container.add($world);
 
   return $container.getComponent(appComponent);
 };
diff --git a/examples/example/src/main.ts b/examples/example/src/main.ts
@@ -3,7 +3,7 @@ import { appComponent } from "app.component";
 import { GlobalData } from "types";
 
 application({
-  backgroundColor: 0xcccfff,
+  backgroundColor: 0x030303,
   scale: 1,
   //@ts-ignore
   importMetaEnv: import.meta.env,

diff --git a/examples/example/src/player.component.ts b/examples/example/src/player.component.ts
@@ -3,73 +3,72 @@ import {
   AsyncComponent,
   body,
   Container,
-  ContainerProps,
-  DisplayObjectEvent,
+  Direction,
   DisplayObjectMutable,
-  Event,
   EventMode,
-  global,
+  graphics,
+  player2D,
   PlayStatus,
+  Shape,
 } from "@tulib/tulip";
 
-type Props = {
-  props: {
-    color: number;
-    size: number;
-    mass: number;
-  };
-} & ContainerProps;
+type Props = {};
 
 type Mutable = {} & DisplayObjectMutable<Container>;
 
-export const playerComponent: AsyncComponent<Props, Mutable> = async (
-  props,
-) => {
-  const $player = await animatedSprite({
+export const playerComponent: AsyncComponent<Props, Mutable> = async () => {
+  let $sprite;
+
+  const onTick = (direction: Direction) => {
+    switch (direction) {
+      case Direction.RIGHT:
+        $sprite.setAnimation("turnRight");
+        $sprite.setPlayStatus(PlayStatus.PLAY_AND_STOP);
+        return;
+      case Direction.LEFT:
+        $sprite.setAnimation("turnLeft");
+        $sprite.setPlayStatus(PlayStatus.PLAY_AND_STOP);
+        return;
+    }
+
+    $sprite.setFrame(0);
+  };
+
+  const $player = player2D({
+    onTick,
+  });
+
+  const width = 175;
+  const height = 226;
+
+  $sprite = await animatedSprite({
     spriteSheet: "fighter/fighter.json",
     animation: "turnRight",
     eventMode: EventMode.NONE,
   });
+  $sprite.setPivot({ x: width / 2, y: height / 2 });
+  $player.add($sprite);
+
+  const $hitbox = graphics({
+    color: 0xff0000,
+    alpha: 0.1,
+  });
+  $hitbox.setTriangle(width, height);
+  $player.add($hitbox);
+
   const $body = body({
     mass: 1,
   });
-  $player.setBody($body);
-  $player.setPivot({ x: 175 / 2, y: 226 / 2 });
-  $player.setPosition({ x: 100, y: 50 });
-
-  let currentKeyList = [];
-  $player.on(DisplayObjectEvent.TICK, () => {
-    const position = $player.getPosition();
-    global.sounds.setPosition({ ...position, z: 2 });
 
-    if (currentKeyList.includes("d")) {
-      $body.addForceX(-1);
-      $player.setAnimation("turnRight");
-      $player.setPlayStatus(PlayStatus.PLAY_AND_STOP);
-      return;
-    } else if (currentKeyList.includes("a")) {
-      $body.addForceX(1);
-      $player.setAnimation("turnLeft");
-      $player.setPlayStatus(PlayStatus.PLAY_AND_STOP);
-      return;
-    } else if (currentKeyList.includes("w")) {
-      $body.addForceY(1);
-    } else if (currentKeyList.includes("s")) {
-      $body.addForceY(-1);
-    }
-    $player.setFrame(0);
+  $body.addShape({
+    type: Shape.CONVEX,
+    vertices: [
+      [-width / 2, -height / 2], // top-left
+      [width / 2, -height / 2], // top-right
+      [0, height / 2], // bottom
+    ],
   });
-
-  const onKeyDown = ({ key }) => {
-    currentKeyList = [...new Set([...currentKeyList, key])];
-  };
-
-  const onKeyUp = ({ key }) => {
-    currentKeyList = currentKeyList.filter((cKey) => cKey != key);
-  };
-
-  global.events.on(Event.KEY_DOWN, onKeyDown, $player);
-  global.events.on(Event.KEY_UP, onKeyUp, $player);
+  $player.setBody($body);
 
   return $player.getComponent(playerComponent);
 };
diff --git a/src/components/core/body.sub-component.ts b/src/components/core/body.sub-component.ts
@@ -6,7 +6,7 @@ import {
   Shapes,
   SubComponent,
 } from "../../types";
-import { degreesToRadians, getShape } from "../../utils";
+import { degreesToRadians, getShape, radiansToDegrees } from "../../utils";
 
 export const body: SubComponent<BodyProps, BodyMutable> = ({
   mass,
@@ -51,7 +51,7 @@ export const body: SubComponent<BodyProps, BodyMutable> = ({
     y: -$body.position[1],
   });
 
-  const getAngle = (): number => $body.angle;
+  const getAngle = (): number => radiansToDegrees($body.angle);
   const setAngle = (angle: number) => ($body.angle = degreesToRadians(angle));
 
   const addForceX = (force: number) => ($body.force[0] = force);

diff --git a/src/components/core/empty.component.ts b/src/components/core/empty.component.ts
@@ -56,9 +56,9 @@ export const empty = <Data>(
   const getPosition = () => $body?.getPosition() || $position;
 
   const getAngle = () => $body?.getAngle() || $angle;
-  const setAngle = (angle: number) => {
-    $angle = angle;
-    $body?.setAngle(angle);
+  const setAngle = async (data) => {
+    $angle = await getValueMutableFunction<number>(data, getAngle());
+    $body?.setAngle($angle);
   };
 
   const getData = <R = Data>(selector?: (data: Data) => R): R => {

diff --git a/src/components/core/graphics.component.ts b/src/components/core/graphics.component.ts
@@ -24,6 +24,7 @@ type Mutable = {
   setPolygon: (polygon: number[]) => void;
   setCircle: (radius: number) => void;
   setCapsule: (length: number, radius: number) => void;
+  setTriangle: (width: number, height: number) => void;
 } & DisplayObjectMutable<Graphics>;
 
 export const graphics: Component<Props, Mutable, false> = (originalProps) => {
@@ -74,6 +75,9 @@ export const graphics: Component<Props, Mutable, false> = (originalProps) => {
       .circle(length / 2, 0, radius)
       .fill({ color: 0xffffff });
   };
+  const setTriangle = (width: number, height: number) => {
+    setPolygon([-width / 2, height / 2, width / 2, height / 2, 0, -height / 2]);
+  };
 
   const $getRaw = (): Props => {
     return {
@@ -107,6 +111,7 @@ export const graphics: Component<Props, Mutable, false> = (originalProps) => {
     setPolygon,
     setCircle,
     setCapsule,
+    setTriangle,
 
     // @ts-ignore
     getComponent: (component) => {