diff options
| -rw-r--r-- | test-client/main.ts | 4 | ||||
| -rw-r--r-- | test-client/particles.ts | 60 | ||||
| -rw-r--r-- | test-client/visual.ts | 4 |
3 files changed, 68 insertions, 0 deletions
diff --git a/test-client/main.ts b/test-client/main.ts index de1424d3..b2deeca5 100644 --- a/test-client/main.ts +++ b/test-client/main.ts @@ -19,6 +19,7 @@ import { init_locale } from "./locale.ts"; import { MovementBase, collide_player_player, update_movement } from "./movement.ts"; +import { particle_splash, tick_particles } from "./particles.ts"; import { Gamedata, ItemIndex, ItemLocation, Message, MessageTimeout, PacketC, PacketS, PlayerID, TileIndex } from "./protocol.ts"; import { V2, lerp_exp_v2_mut, normalize, lerp_exp } from "./util.ts"; import { draw_ingame, draw_wait } from "./visual.ts"; @@ -289,6 +290,7 @@ function keyboard(ev: KeyboardEvent, down: boolean) { if (down && ev.code == "Numpad8") send({ player: my_id, type: "communicate", message: { text: "/start-tutorial plate:seared-patty,sliced-bun" } }) if (down && ev.code == "Numpad9") send({ player: my_id, type: "communicate", message: { text: "/start-tutorial plate:bun" } }) if (down && ev.code == "Numpad0") send({ player: my_id, type: "communicate", message: { text: "/end" } }) + if (down && ev.code == "KeyE") particle_splash(get_interact_target() ?? { x: 0, y: 0 }) if (down) keys_down.add(ev.code) else keys_down.delete(ev.code) } @@ -395,6 +397,8 @@ function frame_update(dt: number) { const zoom_target = Math.min(canvas.width, canvas.height) * (keys_down.has("KeyL") ? 0.05 : 0.1) camera_scale = lerp_exp(camera_scale, zoom_target, dt * 5) nametag_scale_anim = lerp_exp(nametag_scale_anim, +keys_down.has("KeyL"), dt * 10) + + tick_particles(dt) } function resize() { diff --git a/test-client/particles.ts b/test-client/particles.ts new file mode 100644 index 00000000..ba695cc0 --- /dev/null +++ b/test-client/particles.ts @@ -0,0 +1,60 @@ +import { ctx } from "./main.ts"; +import { V2 } from "./util.ts"; + +const particles = new Set<Particle>() +let particles_to_remove = new Set<Particle>() + +export function tick_particles(dt: number) { + particles.forEach(p => p.tick(dt) ? {} : particles_to_remove.add(p)) + particles_to_remove.forEach(p => particles.delete(p)) + particles_to_remove = new Set() +} +export function draw_particles() { + particles.forEach(p => p.draw()) +} +export function particle_count() { return particles.size } + +export function particle_splash(pos: V2) { + for (let i = 0; i < 64; i++) { + const p = new Particle() + p.px = pos.x + 0.5 + p.py = pos.y + 0.5 + const a = Math.random() * Math.PI * 2 + const r = Math.sqrt(Math.random()) * 5. + p.vx = Math.sin(a) * r + p.vy = Math.cos(a) * r + p.decay = 4. + p.tr = Math.sqrt(Math.random()) * 1. + p.c = `hsl(${Math.random() * 0.2 + 0.7}turn, 100%, 50%)` + p.r = Math.random() * 0.1 + 0.03 + particles.add(p) + } +} + +class Particle { + c = "red" + r = 0.05 + tr = 0 + px = 0 + py = 0 + vx = 0 + vy = 0 + decay = 1 + + tick(dt: number) { + this.tr -= dt + this.px += this.vx * dt; + this.py += this.vy * dt; + this.vx *= Math.exp(-dt * this.decay) + this.vy *= Math.exp(-dt * this.decay) + return this.tr > 0. + } + draw() { + ctx.fillStyle = this.c + ctx.globalAlpha = Math.min(1, this.tr * 5.) + ctx.beginPath() + ctx.arc(this.px, this.py, this.r, 0, Math.PI * 2) + ctx.fill() + } +} + diff --git a/test-client/visual.ts b/test-client/visual.ts index e1bb7681..cf8e6bf1 100644 --- a/test-client/visual.ts +++ b/test-client/visual.ts @@ -21,6 +21,7 @@ import { PLAYER_SIZE } from "./movement.ts"; import { draw_item_sprite, draw_tile_sprite, ItemName, TileName } from "./tiles.ts"; import { V2, ceil_v2, floor_v2 } from "./util.ts"; import { Message } from "./protocol.ts"; +import { draw_particles, particle_count } from "./particles.ts"; export function draw_wait(text: string) { ctx.fillStyle = "#444" @@ -62,6 +63,8 @@ export function draw_ingame() { for (const [_, tile] of tiles) if (tile.item) draw_item(tile.item) + draw_particles() + for (const [_, player] of players) if (player.message) draw_message(player.message) @@ -109,6 +112,7 @@ function draw_debug() { ctx.fillText(`position = ${JSON.stringify(players.get(my_id)?.anim_position)}`, 10, 30) ctx.fillText(`velocity = ${JSON.stringify(players.get(my_id)?.vel)}`, 10, 50) ctx.fillText(`interact = ${JSON.stringify(get_interact_target())}`, 10, 70) + ctx.fillText(`particle_count = ${particle_count()}`, 10, 90) } function draw_tile(tile: TileData) { |