From b76f877509b1fcef3bfcb3f986bf7ab6ac8d0a54 Mon Sep 17 00:00:00 2001 From: TerraMaster85 Date: Tue, 9 Jan 2024 16:57:33 -0500 Subject: [PATCH] Cool double parallax and the texture tweaks to make it happen --- .../src/assets/starfield_dim.svg | 516 ++++++++++++++++++ .../src/assets/starfield_transp.svg | 389 +++++++++++++ starkingdoms-client/src/rendering.ts | 66 ++- 3 files changed, 958 insertions(+), 13 deletions(-) create mode 100644 starkingdoms-client/src/assets/starfield_dim.svg create mode 100644 starkingdoms-client/src/assets/starfield_transp.svg diff --git a/starkingdoms-client/src/assets/starfield_dim.svg b/starkingdoms-client/src/assets/starfield_dim.svg new file mode 100644 index 0000000000000000000000000000000000000000..ebb3bcbc89ce85918d0f5bc3e27da43d23682a16 --- /dev/null +++ b/starkingdoms-client/src/assets/starfield_dim.svg @@ -0,0 +1,516 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/starkingdoms-client/src/assets/starfield_transp.svg b/starkingdoms-client/src/assets/starfield_transp.svg new file mode 100644 index 0000000000000000000000000000000000000000..1ebad5478766586785b0b74ef2bfca05234c4ca8 --- /dev/null +++ b/starkingdoms-client/src/assets/starfield_transp.svg @@ -0,0 +1,389 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/starkingdoms-client/src/rendering.ts b/starkingdoms-client/src/rendering.ts index c44a9decaa97124897081831b283ee5e5104b5ca..a01a312ce26f7fc31a4dbec6d7e149d043afa8c8 100644 --- a/starkingdoms-client/src/rendering.ts +++ b/starkingdoms-client/src/rendering.ts @@ -3,9 +3,9 @@ import { global, player } from "./globals.ts"; import { part_texture_url, planet_texture_url, - starfield_url, } from "./textures.ts"; -import tex_starfield from "./assets/starfield.svg"; +import tex_starfield from "./assets/starfield_dim.svg"; +import tex_starfield_transp from "./assets/starfield_transp.svg"; const PART_WIDTH = 50; const PART_HEIGHT = 50; @@ -41,12 +41,30 @@ export function startRender() { off_x: 0, off_y: 0, }, + starfield_near: { + sprite: new PIXI.TilingSprite( + PIXI.Texture.from(tex_starfield_transp), + window.innerHeight, + window.innerWidth, + //1024, + //1024, + ), + off_x: 0, + off_y: 0, + }, part_sprites_need_texture_change: [], }; + // Main starfield global.rendering!.app.stage.addChild(global.rendering!.starfield.sprite); - global.rendering!.starfield.sprite.height = window.innerHeight + 768; - global.rendering!.starfield.sprite.width = window.innerWidth + 768; + global.rendering!.starfield.sprite.height = window.innerHeight + 384; + global.rendering!.starfield.sprite.width = window.innerWidth + 384; + + // Near starfield + global.rendering!.app.stage.addChild(global.rendering!.starfield_near.sprite); + global.rendering!.starfield_near.sprite.height = window.innerHeight + 768; + global.rendering!.starfield_near.sprite.width = window.innerWidth + 768; + app.ticker.add(() => { global.rendering!.app.stage.x = @@ -54,26 +72,48 @@ export function startRender() { global.rendering!.app.stage.y = -player()?.transform.y! + window.innerHeight / 2; - // Starfield + // TODO: refactor, make parallax configurable + + // Main starfield global.rendering!.starfield.off_x = - ((global.parts_map.get(global.me?.part_id).transform.x * 3) / 4) % 768; + (global.parts_map.get(global.me?.part_id).transform.x * 3 / 4) % 384; global.rendering!.starfield.off_y = - ((global.parts_map.get(global.me?.part_id).transform.y * 3) / 4) % 768; + (global.parts_map.get(global.me?.part_id).transform.y * 3 / 4) % 384; global.rendering!.starfield.sprite.x = - Math.floor(global.parts_map.get(global.me?.part_id).transform.x / 768) * - 768 - + Math.floor(global.parts_map.get(global.me?.part_id).transform.x / 384) * + 384 - global.rendering!.starfield.sprite.width / 2 + - 384; + 192; global.rendering!.starfield.sprite.y = - Math.floor(global.parts_map.get(global.me?.part_id).transform.y / 768) * - 768 - + Math.floor(global.parts_map.get(global.me?.part_id).transform.y / 384) * + 384 - global.rendering!.starfield.sprite.height / 2 + - 384; + 192; global.rendering!.starfield.sprite.tilePosition.x = global.rendering!.starfield.off_x; global.rendering!.starfield.sprite.tilePosition.y = global.rendering!.starfield.off_y; + // Near starfield + global.rendering!.starfield_near.off_x = + (global.parts_map.get(global.me?.part_id).transform.x / 2) % 768; + global.rendering!.starfield_near.off_y = + (global.parts_map.get(global.me?.part_id).transform.y / 2) % 768; + global.rendering!.starfield_near.sprite.x = + Math.floor(global.parts_map.get(global.me?.part_id).transform.x / 768) * + 768 - + global.rendering!.starfield_near.sprite.width / 2 + + 384; + global.rendering!.starfield_near.sprite.y = + Math.floor(global.parts_map.get(global.me?.part_id).transform.y / 768) * + 768 - + global.rendering!.starfield_near.sprite.height / 2 + + 384; + global.rendering!.starfield_near.sprite.tilePosition.x = + global.rendering!.starfield_near.off_x; + global.rendering!.starfield_near.sprite.tilePosition.y = + global.rendering!.starfield_near.off_y; + for (let [id, part] of global.parts_map) { let part_sprite;