mascully/improcket
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Render planets in higher quality when zoomed in

Browse source
This commit is contained in:
asraelite 2024-05-13 19:34:23 +02:00 • committed by Markus Scully
parent bf696695ee
commit 43a6ae8d60
4 changed files with 40 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/consts.ts
View file

@ -39,4 +39,5 @@ export const ENTITY_SPAWN_RATE = 8;
export const MIN_CELESTIAL_SPACING = 15; export const MIN_CELESTIAL_SPACING = 15;
export const FUEL_CAN_AMOUNT = 10000; export const FUEL_CAN_AMOUNT = 10000;
export const PLANET_IMAGE_SIZE = 250; export const PLANET_IMAGE_SIZE_SMALL = 256;
export const PLANET_IMAGE_SIZE_LARGE = 1024;

9
src/graphics/world.ts
View file

@ -3,6 +3,7 @@ import * as graphics from './index';
import { images as assets } from '../assets'; import { images as assets } from '../assets';
import * as world from '../world/index'; import * as world from '../world/index';
import { state } from '../game/index'; import { state } from '../game/index';
import Celestial from '../world/celestial';
export function render() { export function render() {
for (const particle of world.particles) renderParticle(particle); for (const particle of world.particles) renderParticle(particle);
@ -78,9 +79,11 @@ const celestialImages = {
green: Object.values(assets.celestials.green) green: Object.values(assets.celestials.green)
}; };
function renderCelestial(cel) { function renderCelestial(celestial: Celestial) {
context.drawImage(cel.image, cel.x, cel.y, const isClose = graphics.perspective.currentZoom > 5;
cel.diameter, cel.diameter); const image = isClose ? celestial.imageLarge : celestial.imageSmall;
context.drawImage(image, celestial.x, celestial.y,
celestial.diameter, celestial.diameter);
} }
function renderTracer(tracer) { function renderTracer(tracer) {

9
src/world/body.ts
View file

@ -1,6 +1,15 @@
import {GRAVITATIONAL_CONSTANT as G, TAU} from '../consts'; import {GRAVITATIONAL_CONSTANT as G, TAU} from '../consts';
export default class Body { export default class Body {
x: number;
y: number;
r: number;
xvel: number;
yvel: number;
rvel: number;
rfriction: number;
mass: number;
constructor(x, y, mass) { constructor(x, y, mass) {
this.x = x; this.x = x;
this.y = y; this.y = y;

32
src/world/celestial.ts
View file

@ -1,9 +1,14 @@
import { tempCanvas, tempContext } from '../graphics/index'; import { tempCanvas, tempContext } from '../graphics/index';
import { images as assets } from '../assets'; import { images as assets } from '../assets';
import Body from './body'; import Body from './body';
import { PLANET_IMAGE_SIZE } from '../consts'; import { PLANET_IMAGE_SIZE_SMALL, PLANET_IMAGE_SIZE_LARGE } from '../consts';
export default class Celestial extends Body { export default class Celestial extends Body {
radius: number;
imageSmall: CanvasImageSource;
imageLarge: CanvasImageSource;
type: string;
constructor(x, y, radius, { constructor(x, y, radius, {
density = 1, density = 1,
type = 'rock' type = 'rock'
@ -15,12 +20,21 @@ export default class Celestial extends Body {
this.type = type; this.type = type;
const imageArr = Object.values(assets.celestials[this.type]); const imageArr = Object.values(assets.celestials[this.type]);
const svgImage = imageArr[Math.random() * imageArr.length | 0]; const svgImage = imageArr[Math.random() * imageArr.length | 0];
tempCanvas.width = PLANET_IMAGE_SIZE;
tempCanvas.height = PLANET_IMAGE_SIZE; tempCanvas.width = PLANET_IMAGE_SIZE_SMALL;
tempContext.clearRect(0, 0, PLANET_IMAGE_SIZE, PLANET_IMAGE_SIZE); tempCanvas.height = PLANET_IMAGE_SIZE_SMALL;
tempContext.drawImage(svgImage, 0, 0, PLANET_IMAGE_SIZE, PLANET_IMAGE_SIZE); tempContext.clearRect(0, 0, PLANET_IMAGE_SIZE_SMALL, PLANET_IMAGE_SIZE_SMALL);
this.image = new Image(); tempContext.drawImage(svgImage, 0, 0, PLANET_IMAGE_SIZE_SMALL, PLANET_IMAGE_SIZE_SMALL);
this.image.src = tempCanvas.toDataURL(); this.imageSmall = new Image();
this.imageSmall.src = tempCanvas.toDataURL();
tempCanvas.width = PLANET_IMAGE_SIZE_LARGE;
tempCanvas.height = PLANET_IMAGE_SIZE_LARGE;
tempContext.clearRect(0, 0, PLANET_IMAGE_SIZE_LARGE, PLANET_IMAGE_SIZE_LARGE);
tempContext.drawImage(svgImage, 0, 0, PLANET_IMAGE_SIZE_LARGE, PLANET_IMAGE_SIZE_LARGE);
this.imageLarge = new Image();
this.imageLarge.src = tempCanvas.toDataURL();
// this.image = tempContext.getImageData(0, 0, PLANET_IMAGE_SIZE, PLANET_IMAGE_SIZE); // this.image = tempContext.getImageData(0, 0, PLANET_IMAGE_SIZE, PLANET_IMAGE_SIZE);
} }
@ -28,10 +42,6 @@ export default class Celestial extends Body {
return [this.x + this.radius, this.y + this.radius]; return [this.x + this.radius, this.y + this.radius];
} }
get escapeVelocity() {
}
tick(delta: number) { tick(delta: number) {
} }