v0.5.7 crosshair fix (#134)

core/src/contrib/components/Renderable.ts

@@ -2,49 +2,46 @@ import { Component, Entity, Renderer, World } from "@piggo-gg/core";
 import { AnimatedSprite, Container } from "pixi.js";
 
 export type RenderableProps = {
-  setContainer?: (r: Renderer) => Promise<Container>
-  setChildren?: (r: Renderer) => Promise<Renderable[]>
-  dynamic?: (c: Container, r: Renderable, e: Entity, w: World) => void
+  anchor?: { x: number, y: number }
+  animations?: Record<string, AnimatedSprite>
+  cacheAsBitmap?: boolean
+  color?: number
   interactiveChildren?: boolean
+  interpolate?: boolean
   position?: { x: number; y: number }
-  zIndex?: number
-  visible?: boolean
+  rotates?: boolean
   scale?: number,
-  anchor?: { x: number, y: number }
-  color?: number
   scaleMode?: "nearest" | "linear"
-  cacheAsBitmap?: boolean
-  rotates?: boolean
-  animations?: Record<string, AnimatedSprite>
+  visible?: boolean
+  zIndex?: number
+  dynamic?: (c: Container, r: Renderable, e: Entity, w: World) => void
+  setChildren?: (r: Renderer) => Promise<Renderable[]>
+  setContainer?: (r: Renderer) => Promise<Container>
   setup?: (renderable: Renderable, renderer: Renderer) => Promise<void>
 }
 
 export class Renderable extends Component<"renderable"> {
   type: "renderable" = "renderable";
 
-  animations: Record<string, AnimatedSprite>;
+  activeAnimation = "";
+  anchor: { x: number; y: number };
   animation: AnimatedSprite | undefined;
+  animations: Record<string, AnimatedSprite>;
   bufferedAnimation = "";
-  activeAnimation = "";
-
   c: Container = new Container();
-
-  rendered: boolean = false;
-
-  scale: number;
-  rotates: boolean;
-  zIndex: number;
+  children: Renderable[] | undefined;
   color: number;
-  visible: boolean;
-  scaleMode: "nearest" | "linear";
   interactiveChildren: boolean;
-
-  anchor: { x: number; y: number };
+  interpolate: boolean;
   position: { x: number; y: number };
-
   r: Renderable | undefined;
+  rendered: boolean = false;
   renderer: Renderer;
-  children: Renderable[] | undefined;
+  rotates: boolean;
+  scale: number;
+  scaleMode: "nearest" | "linear";
+  visible: boolean;
+  zIndex: number;
 
   setContainer: undefined | ((r: Renderer) => Promise<Container>);
   setChildren: undefined | ((r: Renderer) => Promise<Renderable[]>);
@@ -53,20 +50,21 @@ export class Renderable extends Component<"renderable"> {
 
   constructor(props: RenderableProps) {
     super();
+    this.anchor = props.anchor ?? { x: 0.5, y: 0.5 };
     this.animations = props.animations ?? {};
+    this.color = props.color ?? 0xffffff;
+    this.dynamic = this.overrideDynamic(props.dynamic ?? undefined);
+    this.interactiveChildren = props.interactiveChildren ?? false;
+    this.interpolate = props.interpolate ?? false;
     this.position = props.position ?? { x: 0, y: 0 };
     this.rotates = props.rotates ?? false;
     this.scale = props.scale ?? 1;
-    this.visible = props.visible ?? true;
-    this.zIndex = props.zIndex ?? 0;
-    this.color = props.color ?? 0xffffff;
-    this.interactiveChildren = props.interactiveChildren ?? false;
-    this.setContainer = props.setContainer ?? undefined;
-    this.setChildren = props.setChildren ?? undefined;
-    this.anchor = props.anchor ?? { x: 0.5, y: 0.5 };
     this.scaleMode = props.scaleMode ?? "linear";
+    this.setChildren = props.setChildren ?? undefined;
+    this.setContainer = props.setContainer ?? undefined;
     this.setup = props.setup ?? undefined;
-    this.dynamic = this.overrideDynamic(props.dynamic ?? undefined);
+    this.visible = props.visible ?? true;
+    this.zIndex = props.zIndex ?? 0;
   }
 
   overrideDynamic = (dynamic: undefined | ((c: Container, r: Renderable, e: Entity, w: World) => void)) => {

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

@@ -1,5 +1,4 @@
-import { Actions, Button, Clickable, NetClientSystem, Entity, Position, DelaySyncer } from "@piggo-gg/core";
-import { Text } from "pixi.js";
+import { Actions, Button, Clickable, Entity, Position, pixiText } from "@piggo-gg/core";
 
 export const ConnectButton = () => Entity({
   id: "connectButton",
@@ -17,7 +16,7 @@ export const ConnectButton = () => Entity({
     renderable: Button({
       dims: { w: 72, textX: 8, textY: 5 },
       zIndex: 1,
-      text: new Text({ text: "connect", style: { fill: "#FFFFFF", fontSize: 16 } }),
+      text: pixiText({ text: "connect", style: { fill: 0xffffff, fontSize: 16 } })
     })
   }
 })

core/src/contrib/entities/buttons/DebugButton.ts

@@ -1,5 +1,5 @@
-import { Actions, Button, Clickable, Entity, Position } from "@piggo-gg/core";
-import { Graphics, Text } from "pixi.js";
+import { Actions, Button, Clickable, Entity, Position, pixiText } from "@piggo-gg/core";
+import { Graphics } from "pixi.js";
 
 export const DebugButton = (): Entity => {
 
@@ -33,7 +33,7 @@ export const DebugButton = (): Entity => {
       renderable: Button({
         dims: { w: 32, textX: 8, textY: 5 },
         zIndex: 4,
-        text: new Text({ text: "🔍", style: { fill: "#FFFFFF", fontSize: 16 } }),
+        text: pixiText({ text: "🔍", style: { fill: 0xffffff, fontSize: 16 }}),
         outline, shadow
       })
     }

core/src/contrib/entities/buttons/FullscreenButton.ts

@@ -1,5 +1,4 @@
-import { Actions, Button, Clickable, Entity, Position } from "@piggo-gg/core";
-import { Text } from "pixi.js";
+import { Actions, Button, Clickable, Entity, Position, pixiText } from "@piggo-gg/core";
 
 export const FullscreenButton = (id: string = "fullscreenButton") => Entity({
   id: id,
@@ -23,7 +22,7 @@ export const FullscreenButton = (id: string = "fullscreenButton") => Entity({
     renderable: Button({
       dims: { w: 32, textX: 8, textY: 5 },
       zIndex: 4,
-      text: (new Text({ text: "⚁", style: { fill: "#FFFFFF", fontSize: 16 } }))
+      text: pixiText({ text: "⚁", style: { fill: 0xffffff, fontSize: 16 } })
     })
   }
 });

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

@@ -1,5 +1,5 @@
-import { Actions, Collider, Controlled, Controller, Debug, Entity, Gun, Networked, Pistol, Position, Renderable, Shoot, WASDActionMap, WASDController, loadTexture } from "@piggo-gg/core";
-import { AnimatedSprite, Text } from "pixi.js";
+import { Actions, Collider, Controlled, Controller, Debug, Entity, Gun, Networked, Pistol, Position, Renderable, Shoot, WASDActionMap, WASDController, loadTexture, pixiText } from "@piggo-gg/core";
+import { AnimatedSprite } from "pixi.js";
 
 export const Skelly = (id: string, color?: number) => {
   const skelly = Entity<Position | Gun>({
@@ -42,9 +42,8 @@ export const Skelly = (id: string, color?: number) => {
             ur: new AnimatedSprite([textures["ur1"], textures["ur2"], textures["ur3"]])
           }
 
-          const nametag = new Text({
+          const nametag = pixiText({
             text: id.split("-")[1],
-            resolution: 2,
             style: { fill: 0xffff00, fontSize: 13 }
           }).updateTransform({ x: -18, y: -45 });
 

core/src/contrib/entities/objects/Goal.ts

@@ -1,4 +1,4 @@
-import { Collider, Data, Entity, Networked, Position, Renderable, World } from "@piggo-gg/core";
+import { Collider, Data, Entity, Networked, Position, Renderable, World, pixiText } from "@piggo-gg/core";
 import { Container, Graphics, Text } from "pixi.js";
 
 export type GoalProps = {
@@ -26,7 +26,6 @@ export const Goal = ({ color, position, id, width }: GoalProps): Entity => {
 
   const render = async (): Promise<Container> => {
     const c = new Container();
-
     const g = new Graphics();
 
     // draw goal
@@ -38,11 +37,10 @@ export const Goal = ({ color, position, id, width }: GoalProps): Entity => {
     ]).fill({ color, alpha: 0.9 });
 
     // goal count
-    const t = new Text({
+    const t = pixiText({
       text: "0",
-      style: { "fill": "yellow" }
-    });
-    t.updateTransform({ x: color % 2 === 0 ? -50 : 40, y: -10 });
+      style: { fill: 0xffff00 } }
+    ).updateTransform({ x: color % 2 === 0 ? -50 : 40, y: -10 });
 
     // goal area
     c.addChild(g, t);

core/src/contrib/entities/objects/Portal.ts

@@ -1,6 +1,6 @@
-import { Actions, Clickable, Entity, Networked, Position, Renderable, loadTexture } from "@piggo-gg/core";
+import { Actions, Clickable, Entity, Networked, Position, Renderable, loadTexture, pixiText } from "@piggo-gg/core";
 import { OutlineFilter } from "pixi-filters";
-import { Matrix, Sprite, Text } from "pixi.js";
+import { Matrix, Sprite } from "pixi.js";
 
 export type PortalProps = {
   pos: { x: number, y: number }
@@ -42,7 +42,12 @@ export const Portal = ({ pos, game, tint }: PortalProps): Entity => {
           const sprite = new Sprite({ texture: textures["portal"] });
           sprite.setFromMatrix(new Matrix(2, 0, 0, 1, 0, 0));
 
-          const t = new Text({ text: game, resolution: 2, position: { x: 64, y: 64 }, anchor: 0.5, style: { fill: 0xffffff, fontSize: 14 } });
+          const t = pixiText({
+            text: game,
+            pos: { x: 64, y: 64 },
+            anchor: { x: 0.5, y: 0.5 },
+            style: { fill: 0xffffff, fontSize: 14 }
+          });
           sprite.addChild(t);
           return sprite;
         }

core/src/contrib/entities/ui/AbilityHUD.ts

@@ -28,7 +28,7 @@ export const AbilityHUD = (): Entity => {
           const keyE = pixiText({ text: "E", pos: { x: 2, y: 35 } });
           const keyR = pixiText({ text: "R", pos: { x: 77, y: 35 } });
 
-          const graphicsQ = pixiText({ text: "wall", fontSize: 18, pos: { x: -141, y: 10 } });
+          const graphicsQ = pixiText({ text: "wall", pos: { x: -141, y: 10 }, style: { fontSize: 18 } });
 
           c.addChild(squareQ, keyQ, squareW, keyW, squareE, keyE, squareR, keyR, graphicsQ);
           return c;

core/src/contrib/entities/ui/Cursor.ts

@@ -1,4 +1,4 @@
-import { Debug, Entity, Position, Renderable, Renderer } from "@piggo-gg/core";
+import { Entity, Position, Renderable, Renderer } from "@piggo-gg/core";
 import { Graphics } from "pixi.js";
 
 export const Cursor = (): Entity => {
@@ -9,6 +9,7 @@ export const Cursor = (): Entity => {
     components: {
       position: new Position({ x: 2000, y: 2000, screenFixed: true }),
       renderable: new Renderable({
+        interpolate: true,
         setContainer: async (r: Renderer) => {
           r.props.canvas.addEventListener("mousemove", (event) => {
             const rect = r.props.canvas.getBoundingClientRect();

core/src/contrib/entities/ui/FpsText.ts

@@ -1,4 +1,4 @@
-import { Entity, Position, Renderable, World } from "@piggo-gg/core";
+import { Entity, Position, Renderable, World, pixiText } from "@piggo-gg/core";
 import { Text } from "pixi.js";
 
 export type FpsTextProps = {
@@ -15,7 +15,7 @@ export const FpsText = ({ x, y }: FpsTextProps = {}) => Entity<Position | Render
     }),
     renderable: new Renderable({
       zIndex: 3,
-      setContainer: async () => new Text({ text: "", style: { fontSize: 14, fill: "#00ff00" }, resolution: 2 }),
+      setContainer: async () => pixiText({ text: "", style: { fontSize: 14, fill: 0x00ff00 } }),
       dynamic: (t: Text, _, __, w: World) => {
         if (w.tick % 5 !== 0) return;
         if (t) {
@@ -37,7 +37,7 @@ export const LagText = ({ x, y }: FpsTextProps = {}) => Entity<Position | Render
     }),
     renderable: new Renderable({
       zIndex: 3,
-      setContainer: async () => new Text({ text: "", style: { fontSize: 14, fill: "#00ff00" }, resolution: 2 }),
+      setContainer: async () => pixiText({ text: "", style: { fontSize: 14, fill: 0x00ff00 } }),
       dynamic: (t: Text, _, __, w: World) => {
         const lag = Math.round(w.client?.ms ?? 0);
         if (w.tick % 5 !== 0) return;

core/src/contrib/renderables/TextBox.ts

@@ -1,5 +1,5 @@
-import { Graphics, Text } from "pixi.js";
-import { Renderable, RenderableProps } from "@piggo-gg/core";
+import { Renderable, RenderableProps, pixiText } from "@piggo-gg/core";
+import { Graphics } from "pixi.js";
 
 export type TextBoxProps = RenderableProps & {
   text?: string
@@ -17,15 +17,7 @@ export const TextBox = (props: TextBoxProps): Renderable => {
   return new Renderable({
     ...props,
     setup: async (r: Renderable) => {
-      const textContainer = new Text({
-        text,
-        style: {
-          fill: color,
-          fontSize,
-          dropShadow,
-          padding
-        }
-      })
+      const textContainer = pixiText({ text, style: { fill: color, fontSize } });
 
       if (boxOutline) {
         const bg = new Graphics()

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

@@ -167,7 +167,11 @@ export const RenderSystem = ClientSystemBuilder({
         // interpolate entity positions
         entities.forEach((entity) => {
           const { position, renderable } = entity.components;
-          if (position.screenFixed) return;
+          if (position.screenFixed) {
+            if (renderable.interpolate) {
+              updateScreenFixed(entity as Entity<Renderable | Position>);
+            } else return;
+          }
 
           const { x, y, velocityX, velocityY } = position.data;
 
@@ -178,7 +182,6 @@ export const RenderSystem = ClientSystemBuilder({
           const dx = velocityX * elapsedTime / 1000;
           const dy = velocityY * elapsedTime / 1000;
 
-          // calculate interpolation with deltaMS
           if (((world.tick - position.lastCollided) > 4) && (velocityX || velocityY)) {
             renderable.c.position.set(
               x + dx + renderable.position.x,

core/src/contrib/utils/PixiUtils.ts

@@ -1,18 +1,20 @@
 import { Assets, Graphics, Text } from "pixi.js";
 
 export type pixiRectProps = { x: number, y: number, w: number, h: number, style?: Omit<pixiStyleProps, "g"> };
-export type pixiCircleProps = { x: number, y: number, r: number, style?: Omit<pixiStyleProps, "g">};
+export type pixiCircleProps = { x: number, y: number, r: number, style?: Omit<pixiStyleProps, "g"> };
 export type pixiStyleProps = { g: Graphics, color?: number, strokeColor?: number, alpha?: number };
-export type pixiTextProps = { text: string, fontSize?: number, pos?: { x: number, y: number } };
 
-export const pixiRect = ({x, y, w, h, style}: pixiRectProps): Graphics => {
+export type pixiTextStyle = { fill?: number, fontSize?: number };
+export type pixiTextProps = { text: string, anchor?: { x: number, y: number }, pos?: { x: number, y: number }, style?: pixiTextStyle };
+
+export const pixiRect = ({ x, y, w, h, style }: pixiRectProps): Graphics => {
   const g = new Graphics();
   g.rect(x, y, w, h);
 
   return pixiStyle({ g, ...style });
 }
 
-export const pixiCircle = ({x, y, r, style}: pixiCircleProps): Graphics => {
+export const pixiCircle = ({ x, y, r, style }: pixiCircleProps): Graphics => {
   const g = new Graphics();
   g.circle(x, y, r);
 
@@ -24,10 +26,17 @@ export const pixiStyle = ({ g, color, alpha, strokeColor }: pixiStyleProps): Gra
   return g;
 }
 
-export const pixiText = ({ text, fontSize, pos }: pixiTextProps): Text => {
-  const t = new Text({ text, style: { fill: 0xffffff, fontSize: fontSize ?? 12 } })
-  if (pos) t.position.set(pos.x, pos.y);
-  return t;
+export const pixiText = ({ text, pos, style, anchor }: pixiTextProps): Text => {
+  return new Text({
+    text,
+    anchor: anchor ?? 0,
+    position: pos ?? { x: 0, y: 0 },
+    resolution: 2,
+    style: {
+      fill: style?.fill ?? 0xffffff,
+      fontSize: style?.fontSize ?? 14
+    }
+  });
 }
 
 export const loadTexture = async (file: string): Promise<Record<string, any>> => {

core/src/graphics/Camera.ts

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

web/src/components/Header.tsx

@@ -22,7 +22,7 @@ export const Header = ({ world, netState, setNetState }: HeaderProps) => (
     </h1>
     <div style={{ position: 'absolute', right: 0, bottom: 0 }}>
       <span style={{ fontFamily: "sans-serif", fontSize: 14, marginRight: 5, verticalAlign: "-70%" }}>
-        v<b>0.5.6</b>
+        v<b>0.5.7</b>
       </span>
       <a style={{ margin: 0, color: "inherit", textDecoration: "none" }} target="_blank" href="https://discord.gg/VfFG9XqDpJ">
         <FaDiscord size={20} style={{ color: "white", verticalAlign: "-80%" }}></FaDiscord>