diff --git a/src/js/main.js b/src/js/main.js
index c667064720e93958b9a37b07f9301ba513b311eb..6a16d5442142c306dbb3f6978eb0b60b37a641f5 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 0000000000000000000000000000000000000000..a73e0d9501c8369dec55329a11afcdf8d86bbedb
--- /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 a59d14e5233c44b7035fc4765ff3d650440aadf4..f5174f04861c8b14ee01ac9f5c3584af6a62b189 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 a1be29662baadf529e952dbd3cb59333888d7426..3d8d3289b6e6371304b926880ce431a16f808536 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);