From ddb2ff4cffa7ddffd6d9a8c4c4a16927d1be9316 Mon Sep 17 00:00:00 2001 From: Florrie Date: Fri, 24 Aug 2018 09:20:13 -0300 Subject: Support to draw sprites without scaling Not 100% sure I'll stick with this, but it's good to have the support, and I think right now this is more presentable than the blurry sprites you get from scaling. --- index.js | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/index.js b/index.js index d71c52b..1a32030 100644 --- a/index.js +++ b/index.js @@ -107,9 +107,11 @@ class Sprite { // Since where a sprite is drawn is based on the position of the camera, // this function requires a camera to be passed. // Also returned are the 2D draw/render coordinates of the center of the - // sprite (ala getCenterCoordinates) and the width and height of the canvas + // sprite (ala getCenterCoordinates), the width and height of the canvas // adjusted to the scale ratio (i.e. the actual size at which the canvas - // should be drawn). + // should be drawn), and the position of where to draw the sprite when its + // canvas is not scaled (i.e. 3D position is still relevant but the canvas + // will be drawn at its original scale). const base = this.getBaseCoordinates() @@ -127,13 +129,18 @@ class Sprite { const canvasOffsetDrawX = drawX - drawW * 0.5 const canvasOffsetDrawY = drawY - drawH + const unscaledOffsetDrawX = drawX - this.canvas.width * 0.5 + const unscaledOffsetDrawY = drawY - this.canvas.height + return { x: canvasOffsetDrawX, y: canvasOffsetDrawY, centerX: drawX, centerY: drawY - drawH * 0.5, drawW, - drawH + drawH, + unscaledX: unscaledOffsetDrawX, + unscaledY: unscaledOffsetDrawY } } @@ -1018,8 +1025,9 @@ class Battle { }) window.spriteData = spriteData - for (const { x, y, drawW, drawH, sprite } of spriteData) { - ctx.drawImage(sprite.canvas, Math.round(x), Math.round(y), drawW, drawH) + for (const { x, y, drawW, drawH, unscaledX, unscaledY, sprite } of spriteData) { + // ctx.drawImage(sprite.canvas, Math.round(x), Math.round(y), drawW, drawH) + ctx.drawImage(sprite.canvas, Math.round(unscaledX), Math.round(unscaledY)) } for (const { centerX, y, sprite } of spriteData) { -- cgit 1.3.0-6-gf8a5