v0.6.8 map remake (#148)

core/src/ecs/actions/PlayerActions.ts

@@ -1,19 +1,19 @@
-import { Action, Controlling, InvokedAction, Noob, Skelly, TeamColors } from "@piggo-gg/core";
+import { Action, Controlling, InvokedAction, Noob, Skelly, TeamColors, XY } from "@piggo-gg/core";
 
 export const controlEntity: Action = Action(({ entity, player }) => {
   if (!entity || !player) return;
 
   player.components.controlling = new Controlling({ entityId: entity.id });
 })
 
-export const invokeSpawnSkelly = (player: Noob, color?: number): InvokedAction => ({
-  action: "spawnSkelly", playerId: player.id, params: { color }
+export const invokeSpawnSkelly = (player: Noob, color?: number, pos?: XY): InvokedAction => ({
+  action: "spawnSkelly", playerId: player.id, params: { color, pos }
 })
 
-export const spawnSkelly = Action<{ color: number }>(({ player, world, params }) => {
+export const spawnSkelly = Action<{ color: number, pos: XY }>(({ player, world, params }) => {
   if (!player) return;
 
-  const characterForPlayer = Skelly(`skelly-${player.id}`, player.components.team.data.team, params.color);
+  const characterForPlayer = Skelly(`skelly-${player.id}`, player.components.team.data.team, params.color, params.pos);
   player.components.controlling = new Controlling({ entityId: characterForPlayer.id });
   world.addEntity(characterForPlayer);
 })

core/src/ecs/components/Team.ts

@@ -3,7 +3,7 @@ import { Component, SystemBuilder } from "@piggo-gg/core";
 export type TeamNumber = 1 | 2;
 
 export const TeamColors: Record<TeamNumber, number> = {
-  1: 0xffaaaa,
+  1: 0xff7777,
   2: 0x00ccff
 }
 

core/src/ecs/entities/buttons/ConnectButton.ts

@@ -4,7 +4,7 @@ export const ConnectButton = () => Entity({
   id: "connectButton",
   persists: true,
   components: {
-    position: new Position({ x: 45, y: 5, screenFixed: true }),
+    position: new Position({ x: -75, y: 5, screenFixed: true }),
     clickable: new Clickable({ width: 80, height: 32, active: true }),
     actions: new Actions({
       click: {

core/src/ecs/entities/characters/Skelly.ts

@@ -2,16 +2,17 @@ import {
   Actions, Boost, Collider, Debug, Effects, Entity, Gun, Head, Health,
   Input, Move, Networked, Pistol, Position, Renderable, Shoot, Team,
   TeamNumber, WASDInputMap, DefaultJoystickHandler, Wall, loadTexture, pixiText,
-  Point
+  Point,
+  XY
 } from "@piggo-gg/core";
 import { AnimatedSprite } from "pixi.js";
 
-export const Skelly = (id: string, team: TeamNumber, color?: number) => {
+export const Skelly = (id: string, team: TeamNumber, color?: number, pos?: XY) => {
   const skelly = Entity<Position | Gun>({
     id: id,
     components: {
       debug: new Debug(),
-      position: new Position({ x: 32, y: 400, velocityResets: 1, speed: 130 }),
+      position: new Position({ x: pos?.x ?? 32, y: pos?.y ?? 400, velocityResets: 1, speed: 160 }),
       networked: new Networked({ isNetworked: true }),
       collider: new Collider({ shape: "ball", radius: 8, mass: 600, shootable: true }),
       health: new Health({ health: 200, maxHealth: 200 }),

core/src/ecs/entities/terrain/FloorTiles.ts

@@ -1,17 +1,22 @@
-import { Entity, Position, Renderable, Renderer, XY } from "@piggo-gg/core";
-import { Graphics, Matrix, RenderTexture, Sprite } from "pixi.js";
+import { Collider, Entity, Position, Renderable, Renderer, TeamColors, XY } from "@piggo-gg/core";
+import { Container, Graphics, Matrix, RenderTexture, Sprite } from "pixi.js";
 
 export type FloorTilesProps = {
   rows: number
   cols: number
   position?: XY
   id?: string
   tint?: number
+  color?: number
 }
 
 let index = 0;
 
-export const FloorTiles = ({ tint, rows, cols, position = { x: 0, y: 0 }, id = `floor${index++}` }: FloorTilesProps): Entity => Entity({
+const width = 64;
+const height = 32;
+const tileCoordinates = [ 0, 0, width / 2, height / 2, width, 0, width / 2, -height / 2, 0, 0 ]
+
+export const FloorTiles = ({ color, tint, rows, cols, position = { x: 0, y: 0 }, id = `floor${index++}` }: FloorTilesProps): Entity => Entity({
   id: id,
   components: {
     position: new Position(position),
@@ -20,12 +25,10 @@ export const FloorTiles = ({ tint, rows, cols, position = { x: 0, y: 0 }, id = `
       setChildren: async (r: Renderer) => {
 
         // draw the square
-        const width = 64;
-        const height = 32;
         const square = new Graphics()
           .transform(new Matrix(1, 0, 0, 1, 0, 16))
-          .poly([0, 0, width / 2, height / 2, width, 0, width / 2, -height / 2])
-          .fill({ color: 0x7777aa, alpha: 1 })
+          .poly(tileCoordinates)
+          .fill({ color: color ?? 0x7777aa, alpha: 1 })
           .stroke({ width: 1, color: 0x000000 });
 
         // create a render texture
@@ -48,3 +51,86 @@ export const FloorTiles = ({ tint, rows, cols, position = { x: 0, y: 0 }, id = `
     })
   }
 });
+
+export const FloorTilesArray = (dim: number, tileArray: number[]): Entity => Entity({
+  id: "floorTilesArray",
+  components: {
+    position: new Position(),
+    renderable: new Renderable({
+      zIndex: 0 + index * 0.01,
+      setContainer: async (r: Renderer) => {
+
+        // draw the square
+        const square = new Graphics()
+          .transform(new Matrix(1, 0, 0, 1, 0, 16))
+          .poly(tileCoordinates)
+          .fill({ color: 0xffffff, alpha: 1 })
+          .stroke({ width: 1, color: 0x000000 });
+
+        // create a render texture
+        const texture = RenderTexture.create({ width, height, resolution: window.devicePixelRatio });
+        r.app.renderer.render({ container: square, target: texture });
+
+        const c = new Container();
+
+        // create the tiles
+        for (let x = 0; x < dim; x++) {
+          for (let y = 0; y < dim; y++) {
+
+            const value = tileArray[x * dim + y];
+            let tint = 0x7777aa;
+
+            if (value === 0 || value === 10) continue;
+
+            if (value === 37) tint = TeamColors[1];
+            if (value === 64) tint = TeamColors[2];
+            if (value === 19) tint = 0xffccaa;
+
+            const child = new Sprite({ texture, tint });
+            child.position.set(y * width / 2 - (x * width / 2), (y + x) * height / 2);
+
+            c.addChild(child);
+          }
+        }
+        return c;
+      }
+    })
+  }
+})
+
+export const FloorCollidersArray = (dim: number, tileArray: number[]): Entity[] => {
+  const entities: Entity[] = [];
+  for (let x = 0; x < dim; x++) {
+    for (let y = 0; y < dim; y++) {
+
+      const value = tileArray[x * dim + y];
+      const value9 = tileArray[x * dim + y + 1];
+      const value5 = tileArray[x * dim + y - 1];
+      const value7 = tileArray[(x - 1) * dim + y];
+      const value1 = tileArray[(x + 1) * dim + y];
+
+      if (value !== 0) continue;
+
+      if (value9 || value5 || value7 || value1) {
+        const width = 64;
+        const height = 32;
+        const entity = Entity({
+          id: `floorCollider-${x}-${y}`,
+          components: {
+            position: new Position({
+              x: y * width / 2 - (x * width / 2),
+              y: (y + x) * height / 2 + 16
+            }),
+            collider: new Collider({
+              shape: "line",
+              isStatic: true,
+              points: tileCoordinates
+            })
+          }
+        });
+        entities.push(entity);
+      }
+    };
+  }
+  return entities;
+}

core/src/ecs/systems/ui/RenderSystem.ts

@@ -77,9 +77,9 @@ export const RenderSystem = ClientSystemBuilder({
           const { position, renderable } = entity.components;
 
           // cull if far from camera
-          if (!position.screenFixed && renderable.children) {
-            renderable.children.forEach((child) => {
-              if (child.c) child.visible = !isFarFromCamera({
+          if (!position.screenFixed && renderable.c.children) {
+            renderable.c.children.forEach((child) => {
+              child.visible = !isFarFromCamera({
                 x: position.data.x + child.position.x,
                 y: position.data.y + child.position.y
               });

core/src/graphics/Camera.ts

@@ -18,7 +18,7 @@ export const Camera = (app: Application): Camera => {
   let scale = 1.4;
 
   const rescale = () => {
-    const min = 1.2;
+    const min = 1;
     const max = 2;
 
     if (scale < min) scale = min;

core/src/net/Client.ts

@@ -65,7 +65,6 @@ export const Client = ({ world }: ClientProps): Client => {
 
       // store callback
       requestBuffer[requestData.request.id] = (response: LobbyJoin["response"]) => {
-        console.log(response);
         if (response.error) {
           console.error("Client: failed to join lobby", response.error)
         } else {