fix #54 (#58)

examples/example/src/app.component.ts

@@ -3,6 +3,7 @@ import {
   Container,
   container,
   DisplayObjectMutable,
+  global,
   plane,
   world,
 } from "@tulib/tulip";
@@ -12,6 +13,8 @@ import { playerComponent } from "player.component";
 type Mutable = {} & DisplayObjectMutable<Container>;
 
 export const appComponent: AsyncComponent<unknown, Mutable> = async () => {
+  global.$setVisualHitboxes(true);
+
   const $container = container({ label: "app" });
 
   const $world = world({

examples/example/src/player.component.ts

@@ -6,7 +6,6 @@ import {
   Direction,
   DisplayObjectMutable,
   EventMode,
-  graphics,
   player2D,
   PlayStatus,
   Shape,
@@ -49,23 +48,18 @@ export const playerComponent: AsyncComponent<Props, Mutable> = async () => {
   $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,
   });
 
   $body.addShape({
     type: Shape.CONVEX,
+    width,
+    height,
     vertices: [
-      [-width / 2, -height / 2], // top-left
-      [width / 2, -height / 2], // top-right
-      [0, height / 2], // bottom
+      [-width / 2, -height / 2],
+      [width / 2, -height / 2],
+      [0, height / 2],
     ],
   });
   $player.setBody($body);

src/components/core/body.sub-component.ts

@@ -19,10 +19,12 @@ export const body: SubComponent<BodyProps, BodyMutable> = ({
   },
 } = {}) => {
   const $body = new p2.Body({
-    mass: mass,
+    mass,
     angle: angle ? degreesToRadians(angle) : 0,
   });
 
+  let $shapesProps = [];
+
   const $materialProps = structuredClone(material);
   const $material = new p2.Material();
 
@@ -33,14 +35,18 @@ export const body: SubComponent<BodyProps, BodyMutable> = ({
   const $getMaterial = () => $material;
   const $getBody = () => $body;
 
+  const $getShapes = () => $shapesProps;
+
   const addShape = <Shape extends Shapes>(shapeProps: Shape): number => {
     const shape = getShape(shapeProps);
     shape.material = $material;
     $body.addShape(shape);
+    $shapesProps.push({ id: shape.id, props: shapeProps });
     return shape.id;
   };
   const removeShape = (shapeId: number) => {
     $body.removeShape($body.shapes.find((shape) => shape.id === shapeId));
+    $shapesProps = $shapesProps.filter((data) => data.id !== shapeId);
   };
 
   const setPosition = (position: Point) => {
@@ -75,5 +81,6 @@ export const body: SubComponent<BodyProps, BodyMutable> = ({
     $getBody,
     $getMaterial,
     $getContactBody,
+    $getShapes,
   };
 };

src/components/core/container.component.ts

@@ -1,14 +1,19 @@
 import * as PIXI from "pixi.js";
 import {
+  BodyMutable,
   Component,
+  ComponentMutable,
   Container,
-  ContainerProps,
   ContainerMutable,
-  InternalMutable,
-  ComponentMutable,
+  ContainerProps,
   DisplayObjectMutable,
+  InternalMutable,
 } from "../../types";
-import { getDisplayObjectMutable, setDisplayObjectProps } from "../../utils";
+import {
+  getDisplayObjectMutable,
+  getVisualShape,
+  setDisplayObjectProps,
+} from "../../utils";
 import { empty } from "./empty.component";
 import { global } from "../../global";
 
@@ -55,6 +60,15 @@ export const container: Component<ContainerProps, ContainerMutable, false> = (
     global.$removeComponent(displayObjectMutable);
   };
 
+  const setBody = (body: BodyMutable) => {
+    displayObjectMutable.setBody(body);
+
+    if (global.$isVisualHitboxes()) {
+      const shapes = body.$getShapes();
+      shapes.forEach(({ props }) => add(getVisualShape(props)));
+    }
+  };
+
   const mutable: InternalMutable<ContainerMutable, false> = {
     ...displayObjectMutable,
     //
@@ -66,6 +80,8 @@ export const container: Component<ContainerProps, ContainerMutable, false> = (
       return mutable;
     },
 
+    setBody,
+
     getProps: () => $props as any,
 
     $destroy,

src/global/global.ts

@@ -9,6 +9,7 @@ export const global = (() => {
   let $componentList: ComponentMutable[] = [];
   const $sounds = sounds();
   $sounds.$load();
+  let $visualHitboxes = false;
 
   const getFPS = (): number => $application.ticker.FPS;
 
@@ -42,6 +43,10 @@ export const global = (() => {
       ({ $componentName }) =>
         !componentName || componentName === $componentName,
     );
+
+  const $isVisualHitboxes = () => $visualHitboxes;
+  const $setVisualHitboxes = (visual: boolean) => ($visualHitboxes = visual);
+
   return {
     getFPS,
 
@@ -56,6 +61,9 @@ export const global = (() => {
     $removeComponent,
     $getComponentList,
 
+    $isVisualHitboxes,
+    $setVisualHitboxes,
+
     events: events(),
     sounds: $sounds,
   };

src/types/body.types.ts

@@ -1,6 +1,6 @@
 import p2 from "p2";
 import { Point } from "./point.types";
-import { Shapes } from "../types/shapes";
+import { Shapes } from "./shapes";
 import { BodyMaterialProps } from "./material.types";
 
 export type BodyProps = {
@@ -26,4 +26,5 @@ export type BodyMutable<Raw extends any = {}> = {
   $getBody: () => p2.Body;
   $getMaterial: () => p2.Material;
   $getContactBody: (bodyMutable: BodyMutable) => p2.ContactMaterial;
+  $getShapes: <Shape extends Shapes>() => { id: number; props: Shape }[];
 };

src/types/shapes/core.types.ts

@@ -35,6 +35,8 @@ export type CapsuleShapeProps = {
 export type ConvexShapeProps = {
   type: Shape.CONVEX;
   vertices: number[][];
+  width: number;
+  height: number;
 } & ShapeProps;
 
 export type Shapes =

src/utils/shapes.utils.ts

@@ -9,6 +9,7 @@ import {
   Shapes,
 } from "../types";
 import { Shape } from "../enums";
+import { graphics } from "../components";
 
 const getBaseProps = <Props extends ShapeProps>({
   position,
@@ -29,17 +30,76 @@ export const getShape = ({ type, ...props }: Shapes) => {
   if (type === Shape.CONVEX) return getConvexShape(props as ConvexShapeProps);
 };
 
-export const getCircleShape = (props: CircleShapeProps): p2.Circle =>
+const getCircleShape = (props: CircleShapeProps): p2.Circle =>
   new p2.Circle(getBaseProps(props));
 
-export const getPlaneShape = (props: PlaneShapeProps): p2.Plane =>
+const getPlaneShape = (props: PlaneShapeProps): p2.Plane =>
   new p2.Plane(getBaseProps(props));
 
-export const getBoxShape = (props: BoxShapeProps): p2.Box =>
+const getBoxShape = (props: BoxShapeProps): p2.Box =>
   new p2.Box(getBaseProps(props));
 
-export const getCapsuleShape = (props: CapsuleShapeProps): p2.Capsule =>
+const getCapsuleShape = (props: CapsuleShapeProps): p2.Capsule =>
   new p2.Capsule(getBaseProps(props));
 
-export const getConvexShape = (props: ConvexShapeProps): p2.Convex =>
+const getConvexShape = (props: ConvexShapeProps): p2.Convex =>
   new p2.Convex(getBaseProps(props));
+
+export const getVisualShape = ({ type, ...props }: Shapes) => {
+  if (type === Shape.CIRCLE) return getVisualCircle(props as CircleShapeProps);
+  if (type === Shape.PLANE) return getVisualPlane(props as PlaneShapeProps);
+  if (type === Shape.BOX) return getVisualBox(props as BoxShapeProps);
+  if (type === Shape.CAPSULE)
+    return getVisualCapsule(props as CapsuleShapeProps);
+  if (type === Shape.CONVEX) return getVisualConvex(props as ConvexShapeProps);
+};
+
+const getVisualCircle = (props: CircleShapeProps) => {
+  const circle = graphics({
+    color: 0xff00ff,
+    alpha: 0.2,
+  });
+  circle.setCircle(props.radius);
+  return circle;
+};
+
+const getVisualPlane = (props: PlaneShapeProps) => {
+  const plane = graphics({
+    color: 0xff00ff,
+    alpha: 0.2,
+    angle: props.angle,
+  });
+  plane.setPolygon([0, 0, 10000, 0, 10000, 5, 0, 5]);
+  plane.setPivot({ x: 5000, y: 2.5 });
+
+  return plane;
+};
+
+const getVisualBox = (props: BoxShapeProps) => {
+  const { width, height } = props;
+  const box = graphics({
+    color: 0xff00ff,
+    alpha: 0.2,
+  });
+  box.setPolygon([0, 0, width, 0, width, height, 0, height]);
+  box.setPivot({ x: width / 2, y: height / 2 });
+  return box;
+};
+
+const getVisualCapsule = (props: CapsuleShapeProps) => {
+  const capsule = graphics({
+    color: 0xff00ff,
+    alpha: 0.2,
+  });
+  capsule.setCapsule(props.length, props.radius);
+  return capsule;
+};
+
+const getVisualConvex = (props: ConvexShapeProps) => {
+  const convex = graphics({
+    color: 0xff00ff,
+    alpha: 0.2,
+  });
+  convex.setTriangle(props.width, props.height);
+  return convex;
+};