From 588a293a8a7006de4c64f24af59766b80f49dce4 Mon Sep 17 00:00:00 2001 From: bye <bye@byecorps.com> Date: Thu, 29 Aug 2024 20:53:41 +0100 Subject: [PATCH] i cant get this fucking camera working --- src/js/main.js | 26 +++++++++-------- src/js/objects/ground.js | 27 ++++++++++++++++++ src/js/rooms/debug_sprites.js | 10 +++++-- src/js/rooms/game.js | 54 +++++++++++++++++++---------------- 4 files changed, 77 insertions(+), 40 deletions(-) create mode 100644 src/js/objects/ground.js diff --git a/src/js/main.js b/src/js/main.js index c667064..6a16d54 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -4,6 +4,12 @@ import Engine from "../../hampsterengine/src/engine.js"; import Keyboard from "../../hampsterengine/src/keyboard"; import {FontRenderer, Stars} from "./objects"; +// Init the engine and canvas +const canvas = new Canvas(c); +const engine = new Engine(canvas); +const assets = engine.assetStore; +const keyboard = new Keyboard(); + import SoundBox from "./sb-player-small"; // import {mus_DEMOSONG} from "./songs/DEMOSONGDONOTCOMMIT"; @@ -31,11 +37,6 @@ import {rm_DEBUG_sprites} from "./rooms/debug_sprites"; const query = new URLSearchParams(window.location.search); window.query = query; -// Init the engine and canvas -const canvas = new Canvas(c); -const engine = new Engine(canvas); -const assets = engine.assetStore; -const keyboard = new Keyboard(); assets.addImage('font', font); const fontRenderer = new FontRenderer(assets.get`font`); @@ -81,8 +82,9 @@ engine.running = false; // Game uses this as a pause state actually // } // tempCanvasStars.toBlob(createStarsObjectURL); -assets.addMiniSprite('grass', 'IIIIIIQIQQQJZQZZRZRRZRZRSSRSRZZR'); -assets.renderMiniSprite('grass', ['#2a6', '#964', '#853']); +const GROUND_PALETTE = ['#2a6', '#964', '#853'] +assets.addMiniSprite('grass', 'IIIIIIQIQQQJZQZZRZRRZRZRSSRSRZZR', 8, GROUND_PALETTE); +assets.addMiniSprite('dirt', 'SSRRRZ[ZZZRRZRZZRZRRZRZRSSRSRZZR', 8, GROUND_PALETTE); engine.registerRoom(rm_mainMenu, 'mainMenu'); engine.registerRoom(rm_game, 'game'); @@ -132,8 +134,7 @@ function main() { } catch (e) { engine.running = false; - canvas.pixelRatio = 2; - canvas.ctx.setTransform(canvas.pixelRatio, 0, 0, canvas.pixelRatio, 0, 0); + canvas.setScale(1); canvas.fill('#a05555d0'); const logo = assets.get`splash` @@ -162,12 +163,10 @@ function physicsTick() { console.debug(engine.rooms); +let roomToLoad = (query.get`room` ? engine.getRoomIndex(query.get`room`) : engine.getRoomIndex`mainMenu`); if (query.get`room`) { console.log('Requesting room', query.get`room`); engine.loadDelay = 0; - engine.room = engine.getRoomIndex(query.get`room`); -} else { - engine.room = engine.getRoomIndex`mainMenu`; } // Ensure assets are loaded. @@ -176,6 +175,9 @@ function load() { engine.loadLoop(); setTimeout(load, 1000/60); } else { + engine.initRooms(); + console.log("Initialised rooms"); + engine.room = roomToLoad; readyTime = performance.now(); engine.lastPhysicsFrame = performance.now(); main(); diff --git a/src/js/objects/ground.js b/src/js/objects/ground.js new file mode 100644 index 0000000..a73e0d9 --- /dev/null +++ b/src/js/objects/ground.js @@ -0,0 +1,27 @@ +import {Entity} from "../../../hampsterengine/src/things"; +import {round, roundToRatio} from "../extras"; + +export default class Ground extends Entity { + constructor(scale = 1) { + super(); + + this.width = canvas.width; + this.height = 16 * scale; + + this.x = 0; + this.y = canvas.height - this.height; + + this.scale = scale; + + this.surface = engine.assetStore.get`grass`.sprite; + this.below = engine.assetStore.get`dirt`.sprite; + } + + draw() { + if (!(this.surface || this.below)) return; + canvas.tileImage(this.surface, roundToRatio(this.x), roundToRatio(this.y), this.width, 8*this.scale, 8*this.scale, 8*this.scale); + canvas.tileImage(this.below, roundToRatio(this.x), roundToRatio(this.y+8*this.scale), this.width, this.height-8*this.scale, 8*this.scale, 8*this.scale); + canvas.fillRect(this.x, this.y, this.width, this.height); + } +} + diff --git a/src/js/rooms/debug_sprites.js b/src/js/rooms/debug_sprites.js index a59d14e..f5174f0 100644 --- a/src/js/rooms/debug_sprites.js +++ b/src/js/rooms/debug_sprites.js @@ -1,12 +1,16 @@ import {Room} from "../../../hampsterengine/src/things"; +import Ground from "../objects/ground"; export const rm_DEBUG_sprites = new Room(); +rm_DEBUG_sprites.init = function () { + const ground = new Ground(); + rm_DEBUG_sprites.push(ground, 'ground'); +} + rm_DEBUG_sprites.start = _=> { canvas.setScale(3); + rm_DEBUG_sprites.init(); canvas.ctx.imageSmoothingEnabled = false; } -rm_DEBUG_sprites.draw = _=> { - canvas.tileImage(engine.assetStore.get('grass').sprite, 0, 0, canvas.width, 8, 8, 8); -} diff --git a/src/js/rooms/game.js b/src/js/rooms/game.js index a1be296..3d8d328 100644 --- a/src/js/rooms/game.js +++ b/src/js/rooms/game.js @@ -2,12 +2,15 @@ import {Entity, Room} from "../../../hampsterengine/src/things"; import Player from "../objects/player"; import {clone, clonePlayer, abs} from "../extras"; +import Ground from "../objects/ground"; export const rm_game = new Room(); const GRAVITY_X = 0; // I don't think we're going to use X gravity but i'm going to keep in the source in case i do const GRAVITY_Y = 300; // Per second const entities = rm_game.entities; +rm_game.width = 1000; +rm_game.height = 1000; rm_game.start = _=>{ engine.running = true; @@ -19,6 +22,7 @@ rm_game.stop = _=>{ rm_game.step = _=>{ const elapsed = 1 / 60; + const player = rm_game.get('plr'); let friction = 0.9; const boost = keyboard.keys.includes("Shift") ? 40 : 0; @@ -71,6 +75,12 @@ rm_game.step = _=>{ if (abs(player.vy) < 1) player.vy = 0; if (abs(player.vx) < 1) player.vx = 0; + + // Update the camera + canvas.camera.goTo( + Math.min(Math.max(player.x+canvas.width/8, canvas.width/8), rm_game.width-canvas.width), + Math.min(Math.max(player.y+canvas.width/8, canvas.width/8), rm_game.height-canvas.height) + ); } rm_game.drawGui = _ => { @@ -87,30 +97,24 @@ rm_game.drawGui = _ => { }); // Draw the player's position - canvas.strokeRect(rm_game.x, rm_game.y, 10, 16); + // canvas.strokeRect(rm_game.x, rm_game.y, 10, 16); +} + +rm_game.init = _=>{ + let player = new Player(); + + player.x = 40; + player.y = 40; + player.width = 16; + player.height = 26; + window.player = player; + rm_game.push(player, 'plr'); + + let ground = new Ground(2); + ground.width = rm_game.width; + ground.y = rm_game.height - ground.height; + + rm_game.push(ground); + } -let player = new Player(); - -player.x = 40; -player.y = 40; -player.width = 10; -player.height = 16; -window.player = player; -entities.push(player); - -let floor = new Entity(); -floor.x = 64; -floor.y = 150; -floor.width = 128; -floor.height = 50; -floor.draw = _=> { canvas.setStrokeColor('black'); canvas.strokeRect(floor.x, floor.y, floor.width, floor.height) } -rm_game.entities.push(floor); - -let ceiling = new Entity(); -ceiling.x = 64; -ceiling.y = 75; -ceiling.width = 128; -ceiling.height = 50; -ceiling.draw = _=> { canvas.setStrokeColor('black'); canvas.strokeRect(ceiling.x, ceiling.y, ceiling.width, ceiling.height) } -rm_game.entities.push(ceiling); -- GitLab