v0.9.3 parameterize background color (#214)

alexanderclarktx · Jan 15, 2025 · 9fa0e3a · 9fa0e3a
1 parent 7159582
commit 9fa0e3a
Show file tree

Hide file tree

Showing 10 changed files with 24 additions and 15 deletions.
diff --git a/core/src/ecs/entities/ui/Shop.ts b/core/src/ecs/entities/ui/Shop.ts
@@ -34,7 +34,6 @@ export const Shop = (): Entity => {
           const background = pixiGraphics()
           const outline = pixiGraphics()
 
-          // const coords: TwoPoints = [width / 6, height / 6, width / 1.5, height / 1.5]
           const coords: TwoPoints = [width / 6, height / 4, width / 1.5, height / 2]
 
           background.rect(0, 0, width, height).fill({ color: 0x000000, alpha: 0.5 })

diff --git a/core/src/ecs/systems/core/PhysicsSystem.ts b/core/src/ecs/systems/core/PhysicsSystem.ts
@@ -19,7 +19,6 @@ export const PhysicsSystem: SystemBuilder<"PhysicsSystem"> = {
       })
       colliders.clear()
       physics.free()
-      // physics = new RapierWorld({ x: 0, y: 4000 })
       physics = new RapierWorld({ x: 0, y: 0 })
       physics.switchToSmallStepsPgsSolver(); // https://github.com/dimforge/rapier.js/blob/master/src.ts/pipeline/world.ts#L400
       physics.timestep = 0.025

diff --git a/core/src/graphics/Renderer.ts b/core/src/graphics/Renderer.ts
@@ -13,6 +13,7 @@ export type Renderer = {
   camera: Camera
   guiRenderables: Renderable[]
   resizedFlag: boolean
+  setBgColor: (color: number) => void
   init: () => Promise<void>
   handleResize: () => void
   addGui: (renderable: Renderable) => void
@@ -30,6 +31,9 @@ export const Renderer = (props: RendererProps): Renderer => {
     camera: Camera(app),
     guiRenderables: [],
     resizedFlag: false,
+    setBgColor: (color: number) => {
+      renderer.app.renderer.background.color = color
+    },
     init: async () => {
       const { canvas } = props
 
@@ -39,9 +43,7 @@ export const Renderer = (props: RendererProps): Renderer => {
         resolution: 1,
         antialias: true,
         autoDensity: true,
-        backgroundColor: 0x006633,
-        // backgroundColor: 0x003311,
-        // backgroundColor: 0x000000,
+        backgroundColor: 0x000000,
         width: renderer.props.width ?? 800,
         height: renderer.props.height ?? 600
       })

diff --git a/core/src/runtime/DefaultGame.ts b/core/src/runtime/DefaultGame.ts
@@ -5,9 +5,11 @@ export const DefaultGame = <T extends string>(gameBuilder: GameBuilder<T>): Game
   init: (world) => {
     const game = gameBuilder.init(world)
 
-    if (world.runtimeMode === "client") isMobile() ?
-      game.entities.push(Joystick()) :
-      game.entities.push(FullscreenButton(), Cursor(), Chat())
+    if (world.runtimeMode === "client") {
+      isMobile() ?
+        game.entities.push(Joystick()) :
+        game.entities.push(FullscreenButton(), Cursor(), Chat())
+    }
 
     return game
   }

diff --git a/core/src/runtime/Game.ts b/core/src/runtime/Game.ts
@@ -7,6 +7,7 @@ export type Game<T extends string = string> = {
   systems: SystemBuilder[]
   commands?: Command[]
   tileMap?: number[]
+  bgColor?: number
 }
 
 export type GameBuilder<T extends string = string> = {

diff --git a/core/src/runtime/World.ts b/core/src/runtime/World.ts
@@ -206,13 +206,17 @@ export const World = ({ commands, games, systems, renderer, runtimeMode }: World
       // set new game
       world.currentGame = game.init(world)
 
+      const { tileMap, bgColor, entities, systems } = world.currentGame
+
       // set tileMap
-      world.tileMap = world.currentGame.tileMap
+      world.tileMap = tileMap
+
+      if (bgColor !== undefined) world.renderer?.setBgColor(bgColor)
 
       // initialize new game
-      world.addEntities(world.currentGame.entities)
-      world.addSystemBuilders(world.currentGame.systems)
-      world.currentGame.commands?.forEach((command) => world.commands[command.id] = command)
+      world.addEntities(entities)
+      world.addSystemBuilders(systems)
+      commands?.forEach((command) => world.commands[command.id] = command)
     }
   }
 

diff --git a/docs/piggo-gg-min.js b/docs/piggo-gg-min.js
diff --git a/games/flappy/Flappy.ts b/games/flappy/Flappy.ts
@@ -7,7 +7,8 @@ export const Flappy = DefaultGame({
   id: "flappy",
   init: () => ({
     id: "flappy",
-    systems: [],
+    bgColor: 0x000000,
+    systems: [SkellySpawnSystem],
     entities: [
       isMobile() ? MobilePvEHUD() : PvEHUD(),
       // Zomi(),

diff --git a/games/sandbox/Sandbox.ts b/games/sandbox/Sandbox.ts
@@ -8,6 +8,7 @@ export const Sandbox = DefaultGame({
   init: () => ({
     id: "sandbox",
     systems: [SkellySpawnSystem],
+    bgColor: 0x006633,
     entities: [
       isMobile() ? MobilePvEHUD() : PvEHUD(),
       Zomi(),

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
@@ -38,7 +38,7 @@ export const Header = ({ world, netState, setNetState }: HeaderProps) => (
 
     <div style={{ position: 'absolute', right: 0, bottom: 0 }}>
       <span style={{ fontFamily: "sans-serif", fontSize: 14, marginRight: 5, verticalAlign: "-70%" }}>
-        v<b>0.9.2</b>
+        v<b>0.9.3</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>