3 files changed, 38 insertions(+), 1 deletions(-)

M starkingdoms-client/src/components/ui/Checkbox.svelte
M starkingdoms-client/src/pages/Play.svelte
M starkingdoms-client/src/rendering.ts

@@ 13,6 13,7 @@
   export let disabled = false; // Boolean parameters have no content.
   export let style = "";
   export let title = "";
+  export let checked = false;
 </script>
 
 <input


@@ 20,6 21,7 @@
   {id}
   class="svcmp-Checkbox {clazz}"
   {disabled}
+  {checked}
   on:click
   on:focus
   {style}

@@ 17,6 17,9 @@
   let velocity;
   let x_pos;
   let y_pos;
+  
+  let antialiasing: Checkbox;
+
   let chatbox: Chatbox;
 
   const logger = createDebug("main");


@@ 25,6 28,11 @@
   );
   logger("Current view: /play");
 
+  function toggleAntialiasing() {
+    global.rendering!.app.antialiasing = antialiasing.title;
+    //logger("Antialiasing is now", antialiasing.checked ? "on" : "off");
+  }
+
   onMount(async () => {
     config = await loadConfig();
 


@@ 116,6 124,12 @@
     <label for="dev_mode">Developer mode (Advanced)</label>
     <Checkbox
       title="Enables tools intended only for the developers. Buggy. Use at your own risk." />
+    <label for="antialiasing">Antialiasing</label>
+    <Checkbox
+      title="Smooth out jagged edges. Minor performance hit."
+      checked={false}
+      bind:this={antialiasing}
+      on:click={toggleAntialiasing} />
   </Popup>
 </div>
 

@@ 1,6 1,7 @@
 import * as PIXI from "pixi.js";
 import { global, player } from "./globals.ts";
-import { part_texture_url, planet_texture_url } from "./textures.ts";
+import { part_texture_url, planet_texture_url, starfield_url } from "./textures.ts";
+import tex_starfield from "./assets/starfield.svg";
 
 const PART_WIDTH = 50;
 const PART_HEIGHT = 50;


@@ 25,15 26,35 @@ export function startRender() {
     player_text_map: new Map(),
     planet_sprite_map: new Map(),
     part_sprite_map: new Map(),
+    starfield: {
+      sprite: new PIXI.TilingSprite(
+        PIXI.Texture.from(
+          tex_starfield,
+        ), app.width, app.height,
+      ),
+      off_x: 0,
+      off_y: 0,
+    },
     part_sprites_need_texture_change: [],
   };
 
+  global.rendering!.app.stage.addChild(global.rendering!.starfield.sprite);
+  global.rendering!.starfield.sprite.height = 512;
+  global.rendering!.starfield.sprite.width = 512;
+
   app.ticker.add(() => {
     global.rendering!.app.stage.x =
       -player()?.transform.x! + window.innerWidth / 2;
     global.rendering!.app.stage.y =
       -player()?.transform.y! + window.innerHeight / 2;
 
+    global.rendering!.starfield.sprite.x = global.rendering!.starfield.off_x;
+    global.rendering!.starfield.sprite.y = global.rendering!.starfield.off_y;
+
+    // Starfield
+    //global.rendering!.starfield.sprite.tilePosition.x = global.rendering!.starfield.off_x % 512;
+    //global.rendering!.starfield.sprite.tilePosition.y = global.rendering!.starfield.off_y % 512;
+
     for (let [id, part] of global.parts_map) {
       let part_sprite;