import * as PIXI from "pixi.js";
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";
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(<HTMLCanvasElement>app.view);
(<HTMLCanvasElement>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),
window.innerHeight,
window.innerWidth,
//1024,
//1024,
),
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 = window.innerHeight + 768;
global.rendering!.starfield.sprite.width = window.innerWidth + 768;
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;
// Starfield
global.rendering!.starfield.off_x =
((global.parts_map.get(global.me?.part_id).transform.x * 3) / 4) % 768;
global.rendering!.starfield.off_y =
((global.parts_map.get(global.me?.part_id).transform.y * 3) / 4) % 768;
global.rendering!.starfield.sprite.x =
Math.floor(global.parts_map.get(global.me?.part_id).transform.x / 768) *
768 -
global.rendering!.starfield.sprite.width / 2 +
384;
global.rendering!.starfield.sprite.y =
Math.floor(global.parts_map.get(global.me?.part_id).transform.y / 768) *
768 -
global.rendering!.starfield.sprite.height / 2 +
384;
global.rendering!.starfield.sprite.tilePosition.x =
global.rendering!.starfield.off_x;
global.rendering!.starfield.sprite.tilePosition.y =
global.rendering!.starfield.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;
}
});
}