Creating a modular game in JavaScript, part 3: Viewport and Organizing a spritesheet

Organizing Spritesheets

Implementation

this.spriteMatrix = [0,0,0,0];
  findNeighbors() {
let neighbors = [];

function checkProximity(a,b) {
return Math.hypot(a.centerX-b.centerX,a.centerY-b.centerY);
}
Wall.all.forEach(w => {
let d = checkProximity(this,w)
if (d<this.width+1) {neighbors.push(w)}
});
neighbors.forEach(w => {
this.updateMatrix(this, w);
})
}
  updateMatrix(obj1, obj2) {   
//spritesheet is organized in binary
let right = !!(obj1.centerX<obj2.centerX);
let left = !!(obj1.centerX>obj2.centerX);
let down = !!(obj1.centerY<obj2.centerY);
let up = !!(obj1.centerY>obj2.centerY);

if (right) {this.spriteMatrix[0] = 1}
if (left) (this.spriteMatrix[1] = 1)
if (down) {this.spriteMatrix[2] = 1}
if (up) (this.spriteMatrix[3] = 1)
}
//Convert the matrix to a binary string and convert it to an integer
get spriteCode() {return parseInt(this.spriteMatrix.join(""), 2);}
get spriteX() {return this.spriteCode % 4;}
get spriteY() {return Math.floor(this.spriteCode/4);}
draw() {
mapCtx.drawImage(this.img, this.spriteX * this.rawWidth, this.spriteY * this.rawHeight * 2, this.rawWidth, this.rawHeight * 2, this.x, this.y-this.height, this.width, this.height * 2);
}

Viewport

class Viewport {
constructor() {
this.width = gameCanvas.width;
this.height = gameCanvas.height;
}
get centerX() {return this.x+this.width/2;}
get centerY() {return this.y+this.height/2;}
get xMin() {
if (Player.all[0]) {
let viewLeft = Player.all[0].centerX-this.width/2;
if (viewLeft < 0) {viewLeft = 0;}
if (viewLeft > mapCanvas.width-this.width) {
viewLeft = mapCanvas.width-this.width;
}
return viewLeft;
}
return 0;
}
get yMin() {
if (Player.all[0]) {
let viewUp = Player.all[0].centerY-this.height/2;
if (viewUp < 0) {viewUp = 0;}
if (viewUp > mapCanvas.height-this.height) {
viewUp = mapCanvas.height-this.height;
}
return viewUp;
}
return 0;
}
get xMax() {return this.xMin+this.width;}
get yMax() {return this.yMin+this.height;}
}
let view = new Viewport();//Draw the view of the map onto the main game canvas
function renderView(img) {
gameCtx.drawImage(img, view.xMin, view.yMin, view.width, view.height, 0, 0, gameCanvas.width, gameCanvas.height);
}
function drawLoop() {
mapCtx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
objects.sort(compareZAxis);
drawObjects(objects);
//Render view of game onscreen
gameCtx.clearRect(0, 0, gameCanvas.width, gameCanvas.height);
renderView(mapCanvas);
window.requestAnimationFrame(drawLoop);
}

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How to integrate voice messages into your Stream chat application

[NodeJS] Gzip, CSV in-memory file handling using Streams

SERÜVENG 3 — Basitçe Genişleyen Zaman

How to Deploy a React App with Firebase authentication using Netlify

9 jQuery FormValidation Plugins

Top 10 JavaScript Interview Questions

How I implemented a service worker on my website.

Why haven’t I done it before?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tom Cantwell

Tom Cantwell

More from Medium

Axios Throttle

ReactJS: Spread Operator(…) simplified

Implement forget password functionality with Action Mailer into Ruby on Rails and React

Polyfill for map, filter and reduce in Javascript