Skip to content

Instantly share code, notes, and snippets.

@vegeta897

vegeta897/canvas.js

Created January 23, 2018 12:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save vegeta897/2cbb18b1d0b23d1d42b6c27226ceaf42 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save vegeta897/2cbb18b1d0b23d1d42b6c27226ceaf42 to your computer and use it in GitHub Desktop.
Download ZIP
Adds 0.5x zoom level
Raw
canvas.js
'use strict';
var util = require('./../common/util.js');
var EventEmitter = require('events').EventEmitter;
var inherits = require('inherits');
var BetterCanvas = require('./../common/bettercanvas.js');
module.exports = Canvas;
inherits(Canvas, EventEmitter);
var scales = [0.5,1,2,3,4];
function Canvas(options) {
this.id = options.id;
this.game = options.game;
this.backgroundColor = options.backgroundColor;
this.scale = options.initialScale;
this.canvases = [];
for(var s = 0; s < scales.length; s++) {
var newCanvas = new BetterCanvas(1,1);
newCanvas.canvas.id = this.id + scales[s];
document.body.appendChild(newCanvas.canvas);
newCanvas.canvas.style.transform = 'scale(' + scales[s] + ', ' + scales[s] + ')';
newCanvas.context.mozImageSmoothingEnabled = false;
newCanvas.context.imageSmoothingEnabled = false;
newCanvas.canvas.addEventListener("contextmenu", function(e) {
e.preventDefault();
});
this.canvases.push(newCanvas);
}
this.onZoom();
this.onResize();
window.addEventListener('resize',this.onResize.bind(this));
this.panning = {
buttons: [],
origin: { x: 0, y: 0 },
panned: { x: 0, y: 32 }
};
var self = this;
this.game.on('mousedown', function(mouseEvent) {
if(self.game.ui.mouseOnElement) return;
if(self.panning.buttons.length == 0) {
self.panning.origin.x = mouseEvent.x;
self.panning.origin.y = mouseEvent.y;
}
self.panning.buttons.push(mouseEvent.button);
});
this.game.on('mouseup', function(mouseEvent) {
util.findAndRemove(mouseEvent.button, self.panning.buttons);
});
this.game.on('mousemove', function(mouseEvent) {
var dx = mouseEvent.x - self.panning.origin.x,
dy = mouseEvent.y - self.panning.origin.y;
if(self.panning.buttons.length > 0) {
self.panning.panned.x += dx;
self.panning.panned.y += dy;
}
self.panning.origin.x = mouseEvent.x;
self.panning.origin.y = mouseEvent.y;
});
//touch handling
this.game.on('touchstart', function(mouseEvent) {
if(self.game.ui.mouseOnElement) return;
if(self.panning.buttons.length == 0) {
self.panning.origin.x = mouseEvent.x;
self.panning.origin.y = mouseEvent.y;
}
self.panning.buttons.push(mouseEvent.button);
});
this.game.on('touchend', function(mouseEvent) {
util.findAndRemove(mouseEvent.button, self.panning.buttons);
});
this.game.on('touchmove', function(mouseEvent) {
var dx = mouseEvent.x - self.panning.origin.x,
dy = mouseEvent.y - self.panning.origin.y;
if(self.panning.buttons.length > 0) {
self.panning.panned.x += dx;
self.panning.panned.y += dy;
}
self.panning.origin.x = mouseEvent.x;
self.panning.origin.y = mouseEvent.y;
});
this.game.on('mouseout', function(mouseEvent) {
});
this.game.on('mouseover', function(mouseEvent) {
self.panning.origin.x = mouseEvent.x;
self.panning.origin.y = mouseEvent.y;
if(!mouseEvent.button) self.panning.buttons = [];
});
this.game.on('mousewheel', function(mouseEvent) {
var oldScale = scales.indexOf(self.scale);
var newScale = util.clamp(oldScale + (mouseEvent.direction == 'up' ? 1 : -1), 0, scales.length - 1);
console.log(oldScale, newScale);
if(newScale == oldScale) return;
self.scale = scales[newScale];
self.onZoom();
self.onResize();
});
}
Canvas.prototype.setRenderer = function(renderer) {
this.images = renderer.images;
};
Canvas.prototype.onResize = function() {
this.width = this.canvas.canvas.width = Math.ceil(window.innerWidth / this.scale);
this.height = this.canvas.canvas.height = Math.ceil(window.innerHeight / this.scale);
this.halfWidth = Math.round(this.width/2);
this.halfHeight = Math.round(this.height/2);
this.emit('resize',{ scale: this.scale, width: this.width, height: this.height });
};
Canvas.prototype.onZoom = function() {
for(var s = 0; s < this.canvases.length; s++) {
if(s == scales.indexOf(this.scale)) {
this.canvases[s].canvas.style.zIndex = 5;
this.canvas = this.canvases[s];
this.context = this.canvas.context;
} else {
this.canvases[s].canvas.style.zIndex = 1;
}
}
};
Canvas.prototype.draw = function() {
this.canvas.fill(this.backgroundColor);
if(this.game.servers) return;
this.context.fillStyle = '#d4cfb6';
this.context.font='14px Arial';
this.context.textAlign = 'center';
this.context.fillText('connecting...',Math.round(this.width/2),Math.round(this.height/2-4));
};
Canvas.prototype.drawStatic = function(staticCanvas) {
this.context.drawImage(staticCanvas, 0, 0);
};
Canvas.prototype.drawBG = function(bgCanvas) {
var x = bgCanvas.x + this.halfWidth + this.panning.panned.x,
y = bgCanvas.y + this.halfHeight + this.panning.panned.y;
if(x >= this.width || y >= this.height
|| x*-1 >= bgCanvas.image.width || y*-1 >= bgCanvas.image.height) {
return; // BG canvas is out of frame
}
var canvasStart = {
x: Math.max(0,x), y: Math.max(0,y)
};
var canvasClipped = {
w: Math.min(bgCanvas.image.width,this.width,this.width - x),
h: Math.min(bgCanvas.image.height,this.height,this.height - y)
};
var bgStart = {
x: Math.max(0,x*-1), y: Math.max(0,y*-1)
};
var bgEnd = {
x: Math.min(bgCanvas.image.width,bgStart.x + canvasClipped.w),
y: Math.min(bgCanvas.image.height,bgStart.y + canvasClipped.h)
};
var clipped = {
x: bgEnd.x - bgStart.x, y: bgEnd.y - bgStart.y
};
this.context.drawImage(
bgCanvas.image, bgStart.x, bgStart.y, clipped.x, clipped.y,
canvasStart.x, canvasStart.y, clipped.x, clipped.y
);
};
Canvas.prototype.drawEntity = function(sprite) {
if(!sprite || !sprite.image || sprite.hidden) return;
if(sprite.position && sprite.position.z > this.game.hideZ) return;
var screen = {
x: sprite.screen.x + this.halfWidth + this.panning.panned.x + (sprite.metrics.ox || 0),
y: sprite.screen.y + this.halfHeight + this.panning.panned.y + (sprite.metrics.oy || 0)
};
if(sprite.keepOnScreen) {
screen.x = Math.min(this.width - sprite.metrics.w, Math.max(0, screen.x));
screen.y = Math.min(this.height - sprite.metrics.h, Math.max(0, screen.y));
}
if(screen.x >= this.width || screen.y >= this.height
|| screen.x + sprite.metrics.w <= 0 || screen.y + sprite.metrics.h <= 0) return;
var image = sprite.image.constructor === Array ? this.images[sprite.image[0]][sprite.image[1]]
: (this.images[sprite.image] || sprite.image);
var highlight = sprite === this.game.mouseOver.sprite;
if(highlight) {
this.context.save();
this.context.shadowColor = 'rgba(255,255,255,1)';
this.context.shadowBlur = 3;
}
if(!sprite.stay && sprite.parent && this.game.mouseOver !== sprite.parent) return;
this.canvas.drawImage(
image, sprite.metrics.x, sprite.metrics.y, sprite.metrics.w, sprite.metrics.h,
Math.round(screen.x), Math.round(screen.y), sprite.metrics.w, sprite.metrics.h
);
if(highlight) {
this.context.restore();
}
if(this.game.showGrid && sprite.grid) { // Show tile grid
this.context.fillStyle = '#bbbbbb';
this.context.font='9px Arial';
this.context.fillText(sprite.grid,Math.round(screen.x)+5, Math.round(screen.y)+9);
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment