physics upgrade & unit collision (#70)

modules/contrib/main.ts

@@ -1,7 +1,7 @@
 export * from "./src/components/Actions";
 export * from "./src/components/Actions";
-export * from "./src/components/actions/CarMovement";
-export * from "./src/components/actions/CharacterMovement";
+export * from "./src/components/actions/VehicleMovement";
+export * from "./src/components/actions/WASDMovement";
 export * from "./src/components/actions/ZombieMovement";
 export * from "./src/components/actions/util";
 export * from "./src/components/Controller";

modules/contrib/src/components/Collider.ts

@@ -1,18 +1,18 @@
 import { Component } from "@piggo-legends/core";
 
 export type ColliderProps = {
-  x: number;
-  y: number;
+  radius: number
+  mass?: number
 }
 
 export class Collider implements Component<"collider"> {
   type: "collider";
 
-  x: number;
-  y: number;
+  radius: number;
+  mass: number;
 
   constructor(props: ColliderProps) {
-    this.x = props.x;
-    this.y = props.y;
+    this.radius = props.radius;
+    this.mass = props.mass ?? 0.001;
   }
 }

modules/contrib/src/components/Position.ts

@@ -16,7 +16,7 @@ export class Position implements Component<"position"> {
   type: "position";
 
   rotation: Rotation = new Rotation();
-  velocity: number = 0;
+  velocity: { x: number, y: number } = { x: 0, y: 0 };
   x: number;
   y: number;
   offset: PositionOffset;
@@ -45,7 +45,7 @@ export class Position implements Component<"position"> {
     this.y = (2 * isoY - isoX) / 2;
   }
 
-  setVelocity = (velocity: number) => {
+  setVelocity = (velocity: { x: number, y: number }) => {
     this.velocity = velocity;
   }
 

modules/contrib/src/components/actions/VehicleMovement.ts

@@ -0,0 +1,22 @@
+import { ActionMap, Position } from "@piggo-legends/contrib";
+import { Entity } from "@piggo-legends/core";
+
+const TURN_SPEED = 0.1;
+const SLIDE_FACTOR = 1.5;
+
+const SPEED = 2;
+
+export type VehicleMovementCommands = "up" | "down" | "left" | "right" | "skidleft" | "skidright";
+
+export const VehicleMovement: ActionMap<VehicleMovementCommands> = {
+  "up": (entity: Entity<Position>) => {
+    const x = Math.cos(entity.components.position.rotation.rads - Math.PI / 1.35) * SPEED;
+    const y = Math.sin(entity.components.position.rotation.rads - Math.PI / 1.35) * SPEED;
+    entity.components.position?.setVelocity({ x, y });
+  },
+  "down": (entity: Entity) => entity.components.position?.setVelocity({ x: 0, y: 0 }),
+  "left": (entity: Entity) => entity.components.position?.rotation.minus(TURN_SPEED),
+  "right": (entity: Entity) => entity.components.position?.rotation.plus(TURN_SPEED),
+  "skidleft": (entity: Entity) => entity.components.position?.rotation.minus(TURN_SPEED * SLIDE_FACTOR),
+  "skidright": (entity: Entity) => entity.components.position?.rotation.plus(TURN_SPEED * SLIDE_FACTOR),
+}

modules/contrib/src/components/actions/WASDMovement.ts

@@ -0,0 +1,28 @@
+import { ActionMap, AnimationKeys, Character, Position } from "@piggo-legends/contrib"
+import { Entity } from "@piggo-legends/core";
+
+const speed = 2;
+const speedDiagonal = speed / Math.sqrt(2);
+const speedHorizontal = speed / 2;
+
+export type WASDMovementCommands = "" | "up" | "down" | "left" | "right" | "upleft" | "upright" | "downleft" | "downright";
+
+export const WASDMovementPhysics: ActionMap<WASDMovementCommands> = {
+  "up": (entity: Entity<Position>) => setAV(entity, "u", { x: -speedDiagonal, y: -speedDiagonal }),
+  "down": (entity: Entity<Position>) => setAV(entity, "d", { x: speedDiagonal, y: speedDiagonal }),
+  "left": (entity: Entity<Position>) => setAV(entity, "l", { x: -speedHorizontal, y: speedHorizontal }),
+  "right": (entity: Entity<Position>) => setAV(entity, "r", { x: speedHorizontal, y: -speedHorizontal }),
+  "upleft": (entity: Entity<Position>) => setAV(entity, "ul", { x: -speed, y: 0 }),
+  "upright": (entity: Entity<Position>) => setAV(entity, "ur", { x: 0, y: -speed }),
+  "downleft": (entity: Entity<Position>) => setAV(entity, "dl", { x: 0, y: speed }),
+  "downright": (entity: Entity<Position>) => setAV(entity, "dr", { x: speed, y: 0 }),
+  "": (entity: Entity<Position>) => setAV(entity, undefined, { x: 0, y: 0 })
+}
+
+const setAV = (entity: Entity<Position>, animation: AnimationKeys | undefined, velocity: { x: number, y: number }) => {
+  const { position, renderable } = entity.components;
+  position.setVelocity(velocity);
+
+  const character = renderable?.r as Character;
+  if (character && animation) character.setAnimation(animation);
+}

modules/contrib/src/components/actions/ZombieMovement.ts

@@ -22,14 +22,11 @@ export const ZombieMovement: ActionMap<ZombieMovementCommands> = {
     // normalize speed toward player
     let moveX = dx / Math.sqrt(dx * dx + dy * dy) * speed;
     let moveY = dy / Math.sqrt(dx * dx + dy * dy) * speed;
+    position.setVelocity({ x: moveX, y: moveY });
 
     // get angle of movements
     const angle = Math.atan2(moveY, moveX) + t * 8;
 
-    // set velocity and rotation
-    position.velocity = speed;
-    position.rotation.rads = angle;
-
     // set animation based on angle
     const character = (entity.components.renderable as Renderable).r as Character;
     if (character) {

modules/contrib/src/components/renderables/Character.ts

@@ -8,7 +8,8 @@ export type CharacterProps = RenderableProps & {
   },
   scale?: number,
   tintColor?: number,
-  scaleMode?: SCALE_MODES
+  scaleMode?: SCALE_MODES,
+  anchor?: { x: number, y: number }
 }
 
 export type AnimationKeys = keyof CharacterProps['animations'];
@@ -31,7 +32,7 @@ export class Character extends Renderable<CharacterProps> {
     Object.values(this.props.animations).forEach((animation: AnimatedSprite) => {
       animation.animationSpeed = 0.1;
       animation.scale.set(this.props.scale || 1);
-      animation.anchor.set(0.5, 0.5);
+      animation.anchor.set(this.props.anchor?.x ?? 0.5, this.props.anchor?.y ?? 0.5);
       animation.texture.baseTexture.scaleMode = this.props.scaleMode ?? SCALE_MODES.LINEAR;
       if (this.props.tintColor) animation.tint = this.props.tintColor;
     });

modules/contrib/src/components/renderables/DebugBounds.ts

@@ -7,28 +7,23 @@ export type DebugBoundsProps = RenderableProps & {
 
 export class DebugBounds extends Renderable<DebugBoundsProps> {
   constructor(props: DebugBoundsProps) {
-    super({
-      ...props,
-      debuggable: false,
-      zIndex: 3
-    });
+    super({ ...props, debuggable: false });
     this.init(props.debugRenderable);
   }
 
   init = (r: Renderable) => {
     const drawing = new Graphics();
-
     const bounds = r.c.getLocalBounds();
 
-    // rectangle around bounds
-    drawing.lineStyle(1, 0xff0000);
-    drawing.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
-
     // circle at center
-    drawing.beginFill(0xff0000);
+    drawing.beginFill(0xff00ff);
     drawing.drawCircle(0, 0, 2);
     drawing.endFill();
 
+    // rectangle around bounds
+    drawing.lineStyle(1, 0xff0000);
+    drawing.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);
+
     this.c.addChild(drawing);
   }
 }

modules/contrib/src/entities/Ball.ts

@@ -1,5 +1,5 @@
 import { Entity } from "@piggo-legends/core";
-import { Position, TextBox, Networked, Clickable, Renderable, Actions } from "@piggo-legends/contrib";
+import { Position, TextBox, Networked, Clickable, Renderable, Actions, Collider } from "@piggo-legends/contrib";
 import { Text } from "pixi.js";
 
 export type BallProps = {
@@ -24,10 +24,15 @@ export const Ball = ({ position, id }: BallProps = {}): Entity => ({
         t.text = "🙃";
       }
     }),
+    collider: new Collider({ radius: 7 }),
     renderable: new Renderable({
       debuggable: true,
       zIndex: 1,
-      container: async () => new Text("🏀", { fill: "#FFFFFF", fontSize: 16 }),
+      container: async () => {
+        const text = new Text("🏀", { fill: "#FFFFFF", fontSize: 16 })
+        text.anchor.set(0.5);
+        return text;
+      }
     })
   }
 });

modules/contrib/src/entities/Skelly.ts

@@ -1,5 +1,5 @@
 import { Entity } from "@piggo-legends/core";
-import { Position, Networked, Clickable, Actions, Character, playerControlsEntity, Controller, CharacterMovementScreenPixels, CharacterMovementCommands, Renderable } from "@piggo-legends/contrib";
+import { Position, Networked, Clickable, Actions, Character, playerControlsEntity, Controller, WASDMovementCommands, Renderable, Health, Collider, WASDMovementPhysics } from "@piggo-legends/contrib";
 import { Assets, AnimatedSprite, SCALE_MODES, Container, Graphics } from "pixi.js";
 
 export const Skelly = async (id: string, tint?: number): Promise<Entity> => {
@@ -18,6 +18,7 @@ export const Skelly = async (id: string, tint?: number): Promise<Entity> => {
         ul: new AnimatedSprite([textures["ul1"], textures["ul2"], textures["ul3"]]),
         ur: new AnimatedSprite([textures["ur1"], textures["ur2"], textures["ur3"]])
       },
+      anchor: { x: 0.5, y: 0.7 },
       scale: 2,
       zIndex: 2,
       tintColor: tint ?? 0xffffff,
@@ -64,19 +65,21 @@ export const Skelly = async (id: string, tint?: number): Promise<Entity> => {
     components: {
       position: new Position({ x: 300, y: 300 }),
       networked: new Networked({ isNetworked: true }),
+      health: new Health(100, 100),
       clickable: new Clickable({
         width: 32,
         height: 32,
         active: true,
         onPress: "click"
       }),
-      controller: new Controller<CharacterMovementCommands>({
-        "a,d": "", "w,s": "",
+      collider: new Collider({ radius: 9, mass: 0.1 }),
+      controller: new Controller<WASDMovementCommands>({
+        "": "", "a,d": "", "w,s": "",
         "w,a": "upleft", "w,d": "upright", "s,a": "downleft", "s,d": "downright",
         "w": "up", "s": "down", "a": "left", "d": "right"
       }),
       actions: new Actions({
-        ...CharacterMovementScreenPixels,
+        ...WASDMovementPhysics,
         "click": playerControlsEntity
       }),
       renderable: new Renderable({

modules/contrib/src/entities/Spaceship.ts

@@ -1,5 +1,5 @@
 import { Entity } from "@piggo-legends/core";
-import { Position, Networked, Clickable, Actions, Character, CarMovement, playerControlsEntity, Controller, CarMovementCommands, Renderable } from "@piggo-legends/contrib";
+import { Position, Networked, Clickable, Actions, Character, VehicleMovement, playerControlsEntity, Controller, VehicleMovementCommands, Renderable, Collider } from "@piggo-legends/contrib";
 import { Assets, AnimatedSprite } from "pixi.js";
 
 export type SpaceshipProps = {
@@ -34,13 +34,14 @@ export const Spaceship = async ({ id, position }: SpaceshipProps = {}): Promise<
         active: true,
         onPress: "click"
       }),
-      controller: new Controller<CarMovementCommands>({
+      collider: new Collider({ radius: 60 }),
+      controller: new Controller<VehicleMovementCommands>({
         "a,d": "", "w,s": "",
         "shift,a": "skidleft", "shift,d": "skidright",
         "w": "up", "s": "down", "a": "left", "d": "right"
       }),
       actions: new Actions({
-        ...CarMovement,
+        ...VehicleMovement,
         "click": playerControlsEntity
       }),
       renderable: new Renderable({

modules/contrib/src/entities/TileFloor.ts

@@ -58,7 +58,7 @@ export const TileFloor = async ({ rows, cols, position = { x: 0, y: 0 }, id = `f
     components: {
       position: new Position(position),
       renderable: new Renderable({
-        debuggable: true,
+        debuggable: false,
         zIndex: 0,
         children: makeTiles
       })

modules/contrib/src/entities/Zombie.ts

@@ -54,10 +54,7 @@ export const Zombie = async (): Promise<Entity> => {
           }
         }
       }),
-      collider: new Collider({
-        x: 32,
-        y: 32,
-      }),
+      collider: new Collider({ radius: 9 }),
       renderable: new Renderable({
         debuggable: true,
         zIndex: 1,

modules/contrib/src/systems/CommandSystem.ts

@@ -7,7 +7,7 @@ export type Command = {
   actionId: string
 }
 
-// TODO hack
+// TODO localCommandBuffer is a hack
 export var localCommandBuffer: Command[] = [];
 
 export const CommandSystem: SystemBuilder = ({ game }) => {
@@ -44,7 +44,7 @@ export const CommandSystem: SystemBuilder = ({ game }) => {
           return;
         }
         action(entity, game);
-        // console.log(`${command.entityId} command ${command.actionId}`);
+        // console.log(`集 ${command.entityId} command ${command.actionId}`);
 
         // remove the command from the buffer
         localCommandBuffer = localCommandBuffer.filter((c) => c !== command);