diff --git a/assets/font.aseprite b/assets/font.aseprite
index cd7b4971ae6bd3bb043bb04813d1e54bf6af7dca..03036e2d1b5b702f8551d6fc5432286d3efd38cb 100644
Binary files a/assets/font.aseprite and b/assets/font.aseprite differ
diff --git a/src/img/font.json b/src/img/font.json
deleted file mode 100644
index 063b441944839a6a5190ed7e9b3d5bbc096aa96e..0000000000000000000000000000000000000000
--- a/src/img/font.json
+++ /dev/null
@@ -1,346 +0,0 @@
-{ "frames": [
- {
- "filename": "0",
- "frame": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "1",
- "frame": { "x": 6, "y": 0, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "2",
- "frame": { "x": 12, "y": 0, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "3",
- "frame": { "x": 18, "y": 0, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "4",
- "frame": { "x": 24, "y": 0, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "5",
- "frame": { "x": 30, "y": 0, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "6",
- "frame": { "x": 36, "y": 0, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "7",
- "frame": { "x": 0, "y": 8, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "8",
- "frame": { "x": 6, "y": 8, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "9",
- "frame": { "x": 12, "y": 8, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "10",
- "frame": { "x": 18, "y": 8, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "11",
- "frame": { "x": 24, "y": 8, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "12",
- "frame": { "x": 30, "y": 8, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "13",
- "frame": { "x": 36, "y": 8, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "14",
- "frame": { "x": 0, "y": 16, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "15",
- "frame": { "x": 6, "y": 16, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "16",
- "frame": { "x": 12, "y": 16, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "17",
- "frame": { "x": 18, "y": 16, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "18",
- "frame": { "x": 24, "y": 16, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "19",
- "frame": { "x": 30, "y": 16, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "20",
- "frame": { "x": 36, "y": 16, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "21",
- "frame": { "x": 0, "y": 24, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "22",
- "frame": { "x": 6, "y": 24, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "23",
- "frame": { "x": 12, "y": 24, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "24",
- "frame": { "x": 18, "y": 24, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "25",
- "frame": { "x": 24, "y": 24, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "26",
- "frame": { "x": 30, "y": 24, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "27",
- "frame": { "x": 36, "y": 24, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "28",
- "frame": { "x": 0, "y": 32, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "29",
- "frame": { "x": 6, "y": 32, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "30",
- "frame": { "x": 12, "y": 32, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "31",
- "frame": { "x": 18, "y": 32, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "32",
- "frame": { "x": 24, "y": 32, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "33",
- "frame": { "x": 30, "y": 32, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "34",
- "frame": { "x": 36, "y": 32, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "35",
- "frame": { "x": 0, "y": 40, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- },
- {
- "filename": "36",
- "frame": { "x": 6, "y": 40, "w": 6, "h": 8 },
- "rotated": false,
- "trimmed": false,
- "spriteSourceSize": { "x": 0, "y": 0, "w": 6, "h": 8 },
- "sourceSize": { "w": 6, "h": 8 },
- "duration": 100
- }
- ],
- "meta": {
- "app": "https://www.aseprite.org/",
- "version": "1.3.7-arm64",
- "image": "font.webp",
- "format": "I8",
- "size": { "w": 42, "h": 48 },
- "scale": "1",
- "slices": [
- ]
- }
-}
diff --git a/src/img/font.webp b/src/img/font.webp
index fad7b19026b5af571b749beb30d8c48767a8c388..2651a7a87011292037e183666590e68581b3725b 100644
Binary files a/src/img/font.webp and b/src/img/font.webp differ
diff --git a/src/index.html b/src/index.html
index 70a38e33b9f67a05945e5a8ea3b3617ad5dd4135..e70b4a8fb690b91995a633244d8c689cee57bcc1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -4,11 +4,24 @@
background: #1a1a1a;
}
canvas {
- width: 100vw;
- height: 100vh;
- object-fit: contain;
+ width: 256px;
+ height: 240px;
+ position:fixed;top:50%;left:50%;translate:-50% -50%;
image-rendering: pixelated;
}
</style>
-<canvas id="canvas"></canvas>
-<script src="./main.js"></script>
\ No newline at end of file
+<canvas id="c"></canvas>
+<script src="./main.js"></script>
+<script>
+ fl = Math.floor;
+ u = _=>{
+ w = innerWidth;
+ h = innerHeight;
+ wS = fl(w/256);
+ hS = fl(h/256);
+ s=Math.min(wS,hS);
+ c.style.width = 256*s;
+ c.style.height= 240*s;
+ }
+ u();addEventListener('resize', u, !0);
+</script>
\ No newline at end of file
diff --git a/src/js/main.js b/src/js/main.js
index c97615ee7fab4b2fcfb133da5f2f1092a0c6226d..1e064f5edfd134725a4c8c684ee49615a699e11e 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,6 +1,7 @@
import Canvas from "../../hampsterengine/src/canvas.js";
import Engine from "../../hampsterengine/src/engine.js";
+import {FontRenderer} from "./objects";
import SoundBox from "./sb-player-small";
// import {mus_DEMOSONG} from "./songs/DEMOSONGDONOTCOMMIT";
@@ -20,13 +21,12 @@ import {rm_DEBUG_music} from "./rooms/debug_music";
import {rm_DEBUG_INCURSION} from "./rooms/debug_incursion";
import {rm_DEBUG_text} from "./rooms/debug_text";
import Mouse from "../../hampsterengine/src/mouse";
-import {FontRenderer} from "./objects";
// Music
// There is none
// Init the engine and canvas
-const canvas = new Canvas('canvas');
+const canvas = new Canvas('c');
const engine = new Engine(canvas);
const assets = engine.assetStore;
assets.addImage('font', font);
@@ -36,9 +36,9 @@ window.fR = fontRenderer
// const mouse = new Mouse(engine);
// window.mouse = mouse;
-canvas.width = 256*4;
-canvas.height = 240*4;
-canvas.pixelRatio = 4;
+canvas.width = 256 * 2;
+canvas.height = 240 * 2;
+canvas.pixelRatio = 2;
canvas.ctx.setTransform(canvas.pixelRatio, 0, 0, canvas.pixelRatio, 0, 0);
canvas.ctx.imageSmoothingEnabled = false;
@@ -61,13 +61,16 @@ engine.registerRoom(rm_DEBUG_text, 'debug_text');
// stats.showPanel(0);
// document.body.appendChild( stats.dom );
+let physicsFrame=0;
+
function main() {
+ // Draw things. no user interaction or physics here.
+
try {
// stats.begin();
engine.frames++;
canvas.fill(engine.room.bgColor ?? 'black');
- engine.step();
engine.draw();
engine.drawGui();
@@ -75,6 +78,10 @@ function main() {
// stats.end();
+ if (query.get('debug')) {
+
+ }
+
// Ask to run at the next frame
requestAnimationFrame(main);
} catch (e) {
@@ -98,11 +105,10 @@ function main() {
}
function physicsTick() {
- if (!engine.running) return; // Paused
- // Tell every object to process physics
- for (let thing of engine.room.entities) {
- thing.physicsTick();
- }
+ // Runs 60 times a second regardless of frame rate.
+ physicsFrame++;
+
+ if (engine.running) engine.room.step();
}
console.debug(engine.rooms);
diff --git a/src/js/objects.js b/src/js/objects.js
index ddaa16d7488b0a02b0c8732d8dba9fd2ea6536b4..76486915aa86cf1c016ef5ebdb2c2349f3863a0b 100644
--- a/src/js/objects.js
+++ b/src/js/objects.js
@@ -1,5 +1,6 @@
-import {Entity} from "../../hampsterengine/src/things";
+import {Entity, PhysicsEntity} from "../../hampsterengine/src/things";
import ButtonBorder from "../img/button.webp";
+import {rm_game} from "./rooms/game";
// Private
@@ -146,22 +147,23 @@ export class FontRenderer {
const code = char.charCodeAt();
let slice;
if (code < 90 && code > 64) slice = code - 65; // Starts at 0 (LETTER)
- else if (code < 58 && code > 48) slice = 25 + (code - 59) // Starts at 25
- else if (code === 91) slice = 35;
- else if (code === 93) slice = 36;
- else slice = 37;
+ else if (code < 58 && code >= 48) slice = 25 + (code - 47) // Starts at 25
+ else if (code === 91) slice = 36;
+ else if (code === 93) slice = 37;
+ else slice = 38;
+
if (slice < 0) {
canvas.setFillColor('red');
// debugger
}
- else canvas.setFillColor('black');
- // canvas.drawText(`${Math.round(slice)}`, x+(i*(this.w+1)), y, {})
+ else canvas.setFillColor('green');
+ // canvas.drawText(`${slice}`, x+(i*(this.w+1)), y, {})
canvas.sliceImage(
this.font,
x+(i*(this.w+1)), y,
this.w, this.h,
- this.w * (slice % 7), this.h * Math.round(slice / 7), this.w, this.h);
+ this.w * slice, 0, this.w, this.h);
}
}
@@ -172,27 +174,3 @@ export class FontRenderer {
}
}
}
-
-// ENTITIES
-
-export class Player extends Entity {
- constructor() {
- super();
- this.height=16;
- this.width=10;
- this.velocity = {
- x:0, y:0
- };
- }
-
- draw() {
- canvas.setFillColor('red');
- canvas.fillRect(this.x,this.y,this.width,this.height);
- }
-
- physicsTick() {
- // Physics update 60 times a second
- this.y += this.velocity.y/60;
- this.x += this.velocity.x/60;
- }
-}
diff --git a/src/js/objects/player.js b/src/js/objects/player.js
new file mode 100644
index 0000000000000000000000000000000000000000..fdffe1a503c45ec62c7bda98ee3378ee1f880123
--- /dev/null
+++ b/src/js/objects/player.js
@@ -0,0 +1,8 @@
+import {Entity, PhysicsEntity} from "../../../hampsterengine/src/things";
+
+export default class Player extends PhysicsEntity {
+ draw() {
+ canvas.setFillColor('red');
+ canvas.fillRect(this.x,this.y,10,16);
+ }
+}
diff --git a/src/js/rooms/debug_text.js b/src/js/rooms/debug_text.js
index 2f0e3f6725b490266e847fdca9a6e9542f639ac8..96dfeb0b199699fabef8e05529fd735a4bf5807e 100644
--- a/src/js/rooms/debug_text.js
+++ b/src/js/rooms/debug_text.js
@@ -7,8 +7,8 @@ const sample_text = `haiiiiiii this is the text test room
if you're here, welcome!
why are you looking at the debug rooms??? they're boring!!
im not hiding any cut content here. i dont have time for that
-
-here is the same message with a pixel art font:`
+here is the same message with a pixel art font:
+ze fucking font isnt working`
rm_DEBUG_text.drawGui = _=>{
canvas.setFillColor('black');
diff --git a/src/js/rooms/game.js b/src/js/rooms/game.js
index 02ded7a3a0b49976625cdf3a960c0c24ac1f07a0..6f9d1eabc5e420acd00df0f64a0abbab6702ac49 100644
--- a/src/js/rooms/game.js
+++ b/src/js/rooms/game.js
@@ -1,26 +1,79 @@
-import {Room} from "../../../hampsterengine/src/things";
-import {Player} from "../objects";
+import {collideRect, Entity, PhysicsEntity, resolveElastic, Room} from "../../../hampsterengine/src/things";
+import Player from "../objects/player";
import {GRAVITY} from "../extras";
export const rm_game = new Room();
+const GRAVITY_X = 0;
+const GRAVITY_Y = 0.0003;
+
rm_game.start = _=>{
- canvas.pixelRatio = 3;
- canvas.ctx.setTransform(canvas.pixelRatio, 0, 0, canvas.pixelRatio, 0, 0);
- canvas.canvas.style.cursor = 'none';
engine.running = true;
}
+
rm_game.stop = _=>{
- canvas.canvas.style.cursor = 'auto';
engine.running = false;
-
}
+
rm_game.step = _=>{
+ const elapsed = (1000/60); // runs 60 times a second
+ const gx = GRAVITY_X*elapsed;
+ const gy = GRAVITY_Y*elapsed;
+ const entities = rm_game.entities;
+
+ for (let i = 0; i < entities.length; i++) {
+ let entity = entities[i];
+ entity.updateBounds();
+
+ switch (entity.type) {
+ case PhysicsEntity.DYNAMIC:
+ entity.vx += entity.ax * elapsed + gx;
+ entity.vy += entity.ay * elapsed + gy;
+ entity.x += entity.vx * elapsed;
+ entity.y += entity.vy * elapsed;
+ break;
+ case PhysicsEntity.KINEMATIC:
+ entity.vx += entity.ax * elapsed;
+ entity.vy += entity.ay * elapsed;
+ entity.x += entity.vx * elapsed;
+ entity.y += entity.vy * elapsed;
+ break;
+ }
+
+ // Check if the entity is colliding with another entity
+ for (let k = 0; k < entities.length; k++) {
+ if (k === i) {
+ // console.debug('SAME')
+ continue;
+ }
+ if (collideRect(entities[i], entities[k])) {
+ console.debug('COLLIDE');
+ resolveElastic(entities[i], entities[k]);
+ }
+ }
+ }
+}
+
+rm_game.drawGui = _ => {
+ // Draw the player's position
+ canvas.setFillColor('black');
+ canvas.drawText(`(${player.x},${player.y})`, 10, canvas.height-10, {
+ maxWidth: canvas.width-20
+ });
}
const player = new Player();
-player.velocity.x = 0;
-player.velocity.y = 0;
-player.direction = 0;// Radians
+// player.ay = 0.1;
+player.x = 40;
rm_game.entities.push(player);
+
+const floor = new PhysicsEntity();
+floor.type = PhysicsEntity.KINEMATIC;
+// floor.resitution = 0;
+floor.ay = 0.00000001;
+floor.height = 10;
+floor.width = 240*2;
+floor.x = -(240/2);
+floor.y = 160;
+rm_game.entities.push(floor);
diff --git a/src/js/rooms/mainMenu.js b/src/js/rooms/mainMenu.js
index 1d551880873d450eddd9a0e191f829a83b98e1bd..a76925b9fb00252354a7069a37f6efa49101d824 100644
--- a/src/js/rooms/mainMenu.js
+++ b/src/js/rooms/mainMenu.js
@@ -13,7 +13,7 @@ rm_mainMenu.entities.push(logo);
rm_mainMenu.drawGui = _ => {
canvas.setFillColor('#0f0f0f');
- canvas.drawText("Press [ENTER] to start.", 30, canvas.height-55, {});
- canvas.drawText("(c) bye 2024", 30, canvas.height-35, {});
- canvas.drawText("Uses 3rd-party licenses. Press [L] to read.", 30, canvas.height-25, {});
+ fR.draw("Press [ENTER] to start.", 30, canvas.height-35);
+ fR.draw("[c] bye 2024", 30, canvas.height-16);
+ // fR.draw("Uses 3rd-party licenses. Press [L] to read.", 30, canvas.height-16, {});
}
\ No newline at end of file