From c3e2684e0964f586c89371cf06195ff2e94ed0d7 Mon Sep 17 00:00:00 2001 From: SpacialCircumstances Date: Sat, 4 Jan 2025 01:16:27 +0100 Subject: [PATCH 1/5] Use mipmaps and higher font resolution --- client/src/game/texture.ts | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/client/src/game/texture.ts b/client/src/game/texture.ts index 3fbc689fe..0152acdf4 100644 --- a/client/src/game/texture.ts +++ b/client/src/game/texture.ts @@ -91,6 +91,15 @@ const SPECIALIST_TEXTURES = [ 'bolter-gun' ]; +const loadTextureAsset = (url: string) => { + return Assets.load({ + src: url, + data: { + autoGenerateMipmaps: true + } + }); +} + class TextureService { static WARP_GATE_INDEX = 1 @@ -114,13 +123,13 @@ class TextureService { await Promise.all(Object.keys(TEXTURE_URLS).map(spec => { const val = TEXTURE_URLS[spec]; if (Array.isArray(val)) { - return Promise.all(val.map(url => Assets.load(url))); + return Promise.all(val.map(url => loadTextureAsset(url))); } else if (typeof val === 'string') { - return Assets.load(val); + return loadTextureAsset(val); } })); - await Promise.all(SPECIALIST_TEXTURES.map(specTex => Assets.load(new URL(`../assets/specialists/${specTex}.svg`, import.meta.url).href))); + await Promise.all(SPECIALIST_TEXTURES.map(specTex => loadTextureAsset(new URL(`../assets/specialists/${specTex}.svg`, import.meta.url).href))); } initialize() { @@ -134,18 +143,19 @@ class TextureService { padding: 3 }) - BitmapFont.install({ - name: 'chakrapetch', - style: this.DEFAULT_FONT_STYLE - }); - this.DEFAULT_FONT_STYLE_BOLD = new TextStyle({ fontFamily: `Chakra Petch,sans-serif;`, fill: 0xFFFFFF, - fontWeight: "bold", + fontWeight: 'bold', padding: 3 }) + BitmapFont.install({ + name: 'chakrapetch', + style: this.DEFAULT_FONT_STYLE, + resolution: 2, + }); + this.STAR_TEXTURE = Texture.from(TEXTURE_URLS.STAR) // STARLESS NEBULAS From ca41adf8e295cc495cffda4c05273887d9b6a841 Mon Sep 17 00:00:00 2001 From: SpacialCircumstances Date: Sat, 4 Jan 2025 19:26:38 +0100 Subject: [PATCH 2/5] Further increase font resolution --- client/src/game/texture.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/game/texture.ts b/client/src/game/texture.ts index 0152acdf4..f38162025 100644 --- a/client/src/game/texture.ts +++ b/client/src/game/texture.ts @@ -153,7 +153,7 @@ class TextureService { BitmapFont.install({ name: 'chakrapetch', style: this.DEFAULT_FONT_STYLE, - resolution: 2, + resolution: 4, }); this.STAR_TEXTURE = Texture.from(TEXTURE_URLS.STAR) From 111a0e52067ef9272d252cb32adda84d7f04ae2c Mon Sep 17 00:00:00 2001 From: SpacialCircumstances Date: Sat, 4 Jan 2025 19:48:48 +0100 Subject: [PATCH 3/5] Update pixijs --- client/package.json | 2 +- package-lock.json | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/client/package.json b/client/package.json index 94cfd950d..dc6dc4f48 100644 --- a/client/package.json +++ b/client/package.json @@ -21,7 +21,7 @@ "mitt": "^3.0.1", "moment": "^2.29.1", "pixi-viewport": "6.0.3", - "pixi.js": "8.6.3", + "pixi.js": "8.6.6", "random-seed": "^0.3.0", "socket.io-client": "2.5.0", "uuid": "^10.0.0", diff --git a/package-lock.json b/package-lock.json index 74b22dcfe..44abb7241 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27,7 +27,7 @@ "mitt": "^3.0.1", "moment": "^2.29.1", "pixi-viewport": "6.0.3", - "pixi.js": "8.6.3", + "pixi.js": "8.6.6", "random-seed": "^0.3.0", "socket.io-client": "2.5.0", "uuid": "^10.0.0", @@ -3057,8 +3057,9 @@ } }, "node_modules/pixi.js": { - "version": "8.6.3", - "license": "MIT", + "version": "8.6.6", + "resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.6.6.tgz", + "integrity": "sha512-o5pw7G2yuIrnBx0G4npBlmFp+XGNcapI/Ufs62rRj/4XKxc1Zo74YJr/BtEXcXTraTKd+pQvYOLvnfxRjxBMvQ==", "dependencies": { "@pixi/colord": "^2.9.6", "@types/css-font-loading-module": "^0.0.12", From f18854643b46ddc2455405c2503c6dcaa0476df9 Mon Sep 17 00:00:00 2001 From: SpacialCircumstances Date: Sun, 5 Jan 2025 12:44:50 +0100 Subject: [PATCH 4/5] Smooth line caps for territory lines to fix gaps in marching square territories --- client/src/game/territories.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/client/src/game/territories.ts b/client/src/game/territories.ts index 76c5e9eee..6609c6b18 100644 --- a/client/src/game/territories.ts +++ b/client/src/game/territories.ts @@ -288,7 +288,8 @@ export class Territories { territoryLines.stroke({ width: LINE_WIDTH, color, - alpha: 1 + alpha: 1, + cap: 'round', }) } } From 460bff20487e8850ff01adf5c3abb9c0ae136aa8 Mon Sep 17 00:00:00 2001 From: SpacialCircumstances Date: Sun, 5 Jan 2025 15:37:31 +0100 Subject: [PATCH 5/5] Fix graphics bug caused by broken animation circle --- client/src/game/animation.ts | 11 +++++++---- client/src/game/star.ts | 2 +- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/client/src/game/animation.ts b/client/src/game/animation.ts index f856f239e..5c6dd1a02 100644 --- a/client/src/game/animation.ts +++ b/client/src/game/animation.ts @@ -1,17 +1,20 @@ -import * as PIXI from 'pixi.js' +import type { Location } from '@solaris-common'; +import {Application, Ticker, Container, Graphics} from 'pixi.js'; class AnimationService { - drawSelectedCircle (app, container, location) { + drawSelectedCircle (app: Application, container: Container, location: Location) { // It ain't pretty, but it works. - let graphics = new PIXI.Graphics() + let graphics = new Graphics() let radius = 1 - const animation = (delta) => { + const animation = (ticker: Ticker) => { if (graphics.alpha <= 0) { return } + const delta = ticker.deltaTime; + graphics.clear() radius = radius + delta diff --git a/client/src/game/star.ts b/client/src/game/star.ts index 1f78be06b..3ed88ec8f 100644 --- a/client/src/game/star.ts +++ b/client/src/game/star.ts @@ -1,4 +1,4 @@ -import {Application, BitmapText, Circle, Container, Graphics, Sprite, TextStyle} from 'pixi.js'; +import {Application, BitmapText, Circle, Container, Graphics, Sprite} from 'pixi.js'; import TextureService from './texture' import gameHelper from '../services/gameHelper.js' import seededRandom from 'random-seed'