grafix

js/Level.js

@@ -7,6 +7,7 @@ export default class Level {
 		this.lastTime = null;
 		this.raf = null;
 		this.minFPS = 10;
+		this.backgroundColor = "#87CEFA";
 
 		this.entities = [];
 		this.colliders = [];
@@ -92,6 +93,7 @@ export default class Level {
 	}
 
 	start() {
+		this.canvas.style.background = this.backgroundColor;
 		if (this.raf == null) {
 			this.lastTime = null;
 			this.update();

js/SpriteSheet.js

@@ -16,6 +16,9 @@ export default class SpriteSheet {
 			this.ready = true;
 			this.waiting.forEach(f => f());
 		};
+		this.img.onerror = err => {
+			console.error("Failed to load "+url+".");
+		};
 	}
 
 	whenReady(fn) {

js/Structure.js

@@ -99,7 +99,7 @@ function flattened(arr, newArr = []) {
 
 export default class Structure {
 	constructor(attrs, nestedArr) {
-		this.texture = new Texture(nestedArr);
+		this.texture = new Texture(assets.tiles, nestedArr);
 
 		this.attrs = {
 			wall: false,

js/Texture.js

@@ -2,14 +2,15 @@ import Rect from "./Rect.js";
 import assets from "./assets.js";
 
 export default class Texture {
-	constructor(nestedArr) {
+	constructor(sheet, nestedArr) {
+		this.sheet = sheet;
 		this.nestedArr = nestedArr;
 		this.can = document.createElement("canvas");
 		this.ctx = this.can.getContext("2d");
 		this.width = 0;
 		this.height = 0;
 
-		assets.tiles.whenReady(() => this.init());
+		this.sheet.whenReady(() => this.init());
 	}
 
 	findWidthHeight(arr) {
@@ -17,8 +18,8 @@ export default class Texture {
 			if (e instanceof Array) {
 				this.findWidthHeight(e);
 			} else {
-				let right = (e.x + 1) * assets.tiles.tileWidth;
-				let bottom = (e.y + 1) * assets.tiles.tileHeight;
+				let right = (e.x + 1) * this.sheet.tileWidth;
+				let bottom = (e.y + 1) * this.sheet.tileHeight;
 				if (right > this.width)
 					this.width = right;
 				if (bottom > this.height)
@@ -32,7 +33,7 @@ export default class Texture {
 			if (e instanceof Array) {
 				this.fillCanvas(e);
 			} else {
-				assets.tiles.drawTile(this.ctx, e.name, e.x, e.y);
+				this.sheet.drawTile(this.ctx, e.name, e.x, e.y);
 			}
 		});
 	}
@@ -47,4 +48,8 @@ export default class Texture {
 	draw(ctx, x, y) {
 		ctx.drawImage(this.can, x, y, this.width, this.height);
 	}
+
+	drawAt(ctx, vec) {
+		this.draw(ctx, vec.pixelX, vec.pixelY);
+	}
 }

js/Tile.js

@@ -5,3 +5,16 @@ export default class Tile {
 		this.name = name;
 	}
 }
+
+Tile.createLine = function(width, name) {
+	if (width <= 1) {
+		return [ new Tile(0, 0, name+"-lr") ];
+	} else {
+		return [
+			new Tile(0, 0, name+"-l"),
+			Array.from({ length: width - 2 }, (_, i) =>
+				new Tile(i + 1, 0, name)),
+			new Tile(width - 1, 0, name+"-r"),
+		];
+	}
+}

js/assets.js

@@ -3,8 +3,17 @@ import SpriteSheet from "./SpriteSheet.js";
 export default {
 	tiles: new SpriteSheet("assets/tiles.png", 32, 32, 1)
 		.defineTile("ground", 0, 0)
-		.defineTile("grass", 1, 0)
-		.defineTile("grass-l", 2, 0)
-		.defineTile("grass-r", 3, 0)
-		.defineTile("grass-lr", 4, 0),
+
+		.defineTile("grass", 0, 1)
+		.defineTile("grass-l", 1, 1)
+		.defineTile("grass-r", 2, 1)
+		.defineTile("grass-lr", 3, 1)
+
+		.defineTile("platform", 0, 2)
+		.defineTile("platform-l", 1, 2)
+		.defineTile("platform-r", 2, 2)
+		.defineTile("platform-lr", 3, 2),
+
+	entities: new SpriteSheet("assets/entities.png", 19, 32, 2)
+		.defineTile("player-head", 0, 0),
 }

js/entities/Platform.js

@@ -1,4 +1,7 @@
 import Entity from "../Entity.js";
+import Texture from "../Texture.js";
+import Tile from "../Tile.js";
+import assets from "../assets.js";
 
 import TPlatform from "../traits/TPlatform.js";
 import TCollider from "../traits/TCollider.js";
@@ -8,7 +11,7 @@ export default class Platform extends Entity {
 	constructor(level) {
 		super(level);
 
-		this.bounds.size.set(5, 1);
+		this.bounds.size.set(5, 0.5);
 		this.addTrait(new TCollider(this));
 		this.addTrait(new TPlatform(this));
 		this.addTrait(new TPhysics(this));
@@ -16,6 +19,9 @@ export default class Platform extends Entity {
 		this.targetSpeed = 3;
 		this.accel = 5;
 		this.dir = 1;
+
+		this.texture = new Texture(assets.tiles,
+			Tile.createLine(this.bounds.size.x, "platform"));
 	}
 
 	init() {
@@ -44,6 +50,6 @@ export default class Platform extends Entity {
 	}
 
 	draw(ctx) {
-		this.bounds.draw(ctx);
+		this.texture.drawAt(ctx, this.bounds.pos);
 	}
 }

js/entities/Player.js

@@ -1,4 +1,7 @@
 import Entity from "../Entity.js";
+import Texture from "../Texture.js";
+import Tile from "../Tile.js";
+import assets from "../assets.js";
 
 import TKeyboardController from "../traits/TKeyboardController.js";
 import TPhysics from "../traits/TPhysics.js";
@@ -12,9 +15,15 @@ export default class Player extends Entity {
 		this.addTrait(new TCollider(this));
 		this.addTrait(new TKeyboardController(this));
 		this.addTrait(new TPhysics(this));
+
+		this.texture = new Texture(assets.entities, [
+			new Tile(0, 0, "player-head"),
+		]);
 	}
 
 	draw(ctx) {
-		this.bounds.draw(ctx);
+		this.texture.draw(ctx,
+			this.bounds.pos.pixelX - assets.entities.scale * 1.5,
+			this.bounds.pos.pixelY);
 	}
 }

js/structures.js

@@ -1,8 +1,8 @@
 import Structure from "./Structure.js";
-import tiles from "./tiles.js";
+import Tile from "./Tile.js";
 
 export default {
 	floor: width => new Structure(
 		[ "wall" ],
-		tiles.fromLine(width, "grass")),
+		Tile.createLine(width, "grass")),
 };

js/tiles.js

@@ -1,16 +0,0 @@
-import Tile from "./Tile.js"
-
-export default {
-	fromLine: function(width, name) {
-		if (width <= 1) {
-			return [ new Tile(0, 0, name+"-lr") ];
-		} else {
-			return [
-				new Tile(0, 0, name+"-l"),
-				Array.from({ length: width - 2 }, (_, i) =>
-					new Tile(i + 1, 0, name)),
-				new Tile(width - 1, 0, name+"-r"),
-			];
-		}
-	},
-}

js/traits/TKeyboardController.js

@@ -10,7 +10,7 @@ export default class TKeyboardController extends Trait {
 		this.jump = 8;
 		this.jumpTimeMax = 0.4;
 		this.updrift = 100;
-		this.jumpLeeway = 0.4;
+		this.jumpLeeway = 0.2;
 
 		this.map = {
 			KeyA: 'left',
@@ -49,7 +49,7 @@ export default class TKeyboardController extends Trait {
 			phys.velocity.x += speed * dt;
 
 		let canJump =
-			!this.jumped && onGround &&
+			!this.jumped &&
 			this.entity.time -phys.timeLastOnGround < this.jumpLeeway;
 
 		if (this.pressed.jump && canJump) {