import * as PIXI from "pixi.js"; import { global, player } from "./globals.ts"; import { part_texture_url, planet_texture_url } from "./textures.ts"; 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; export function startRender() { let app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, resizeTo: window, hello: true, }); (globalThis as any).__PIXI_APP__ = app; // eslint-disable-line document .getElementById("gamewindow")! .appendChild(app.view); (app.view).classList.add("game"); global.rendering = { app: app, 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), //1024, //1024, ), off_x: 0, off_y: 0, }, starfield_near: { sprite: new PIXI.TilingSprite( PIXI.Texture.from(tex_starfield_transp), //1024, //1024, ), off_x: 0, off_y: 0, }, part_sprites_need_texture_change: [], }; // Main starfield global.rendering!.app.stage.addChild(global.rendering!.starfield.sprite); // Near starfield global.rendering!.app.stage.addChild(global.rendering!.starfield_near.sprite); 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; // TODO: refactor, make parallax configurable // Main starfield global.rendering!.starfield.sprite.height = window.innerHeight + 384; global.rendering!.starfield.sprite.width = window.innerWidth + 384; global.rendering!.starfield.off_x = ((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) % 384; global.rendering!.starfield.sprite.x = Math.floor(global.parts_map.get(global.me?.part_id!)!.transform.x / 384) * 384 - global.rendering!.starfield.sprite.width / 2 + 192; global.rendering!.starfield.sprite.y = Math.floor(global.parts_map.get(global.me?.part_id!)!.transform.y / 384) * 384 - global.rendering!.starfield.sprite.height / 2 + 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.sprite.height = window.innerHeight + 768; global.rendering!.starfield_near.sprite.width = window.innerWidth + 768; 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; if (global.rendering!.part_sprite_map.has(id)) { part_sprite = global.rendering!.part_sprite_map.get(id)!; if (global.rendering!.part_sprites_need_texture_change.includes(id)) { // slow :( part_sprite.texture = PIXI.Texture.from( part_texture_url(part.part_type, part.flags.attached), ); } } else { part_sprite = PIXI.Sprite.from( part_texture_url(part.part_type, part.flags.attached), ); global.rendering!.part_sprite_map.set(id, part_sprite); global.rendering!.app.stage.addChild(part_sprite); } part_sprite.anchor.set(0.5); part_sprite.height = PART_HEIGHT; part_sprite.width = PART_WIDTH; part_sprite.x = part.transform.x; part_sprite.y = part.transform.y; part_sprite.rotation = part.transform.rot; } for (let [id, planet] of global.planets_map) { let planet_sprite; if (global.rendering!.planet_sprite_map.has(id)) { planet_sprite = global.rendering!.planet_sprite_map.get(id)!; } else { planet_sprite = PIXI.Sprite.from( planet_texture_url(planet.planet_type), ); global.rendering!.planet_sprite_map.set(id, planet_sprite); global.rendering!.app.stage.addChild(planet_sprite); } planet_sprite.anchor.set(0.5); planet_sprite.height = planet.radius * 2; planet_sprite.width = planet.radius * 2; planet_sprite.x = planet.transform.x; planet_sprite.y = planet.transform.y; planet_sprite.rotation = planet.transform.rot; } }); }