diff --git a/graphics/gisela-left.png b/graphics/gisela-left.png new file mode 100644 index 0000000..4bf4a9c Binary files /dev/null and b/graphics/gisela-left.png differ diff --git a/graphics/gisela-right.png b/graphics/gisela-right.png new file mode 100644 index 0000000..221de3b Binary files /dev/null and b/graphics/gisela-right.png differ diff --git a/js/Camera.js b/js/Camera.js index fbe692d..a1ab763 100644 --- a/js/Camera.js +++ b/js/Camera.js @@ -13,6 +13,7 @@ export default class Camera this.borderRight = undefined; this.speedX = 0; this.speedY = 0; + this.speedMax = 12; } centerCamera(x, y) @@ -33,28 +34,84 @@ export default class Camera } } - facePosition(x, y, delta, reactionSpeed = 1) + centerCameraX(x) { - let positionX = x - this.width * 0.5; - let positionY = y - this.height * 0.5; + this.position.x = x - this.width * 0.5; - let distanceX = this.position.x - positionX; - let distanceY = this.position.y - positionY; + if (this.position.x < this.borderLeft) { + this.position.x = this.borderLeft; + } else if (this.borderRight !== undefined && this.position.x + this.width > this.borderRight) { + this.position.x = this.borderRight - this.width; + } + } - if (this.position.x !== positionX) { - this.position.x += distanceX * delta * reactionSpeed; + lockCameraIntoBorders() + { + this.lockCameraIntoHorizontalBorders(); + this.lockCameraIntoVerticalBorders(); + } + + lockCameraIntoHorizontalBorders() + { + let hasBeenLocked = false; + + if (this.position.x < this.borderLeft) { + this.position.x = this.borderLeft; + hasBeenLocked = true; + } else if (this.borderRight !== undefined && this.position.x + this.width > this.borderRight) { + this.position.x = this.borderRight - this.width; + hasBeenLocked = true; } - if (distanceX < 0.01) { - this.position.x = positionX; + return hasBeenLocked; + } + + lockCameraIntoVerticalBorders() + { + let hasBeenLocked = false; + + if (this.position.y < this.borderTop) { + this.position.y = this.borderTop; + hasBeenLocked = true; + } else if (this.borderBottom !== undefined && this.position.y + this.height > this.borderBottom) { + this.position.y = this.borderBottom - this.height; + hasBeenLocked = true; } - if (this.position.y !== positionY) { - this.position.y += distanceY * delta * reactionSpeed; - } + return hasBeenLocked; + } - if (distanceY < 0.01) { - this.position.y = positionY; + focusPosition(x, y, reactionLatency = 1) + { + this.focusPositionX(x, reactionLatency); + this.focusPositionY(y, reactionLatency); + } + + focusPositionX(x, reactionLatency = 1) + { + let centerX = this.position.x + this.width * 0.5; + let distanceX = x - centerX; + + if (!this.lockCameraIntoHorizontalBorders() && distanceX !== 0) { + if (Math.abs(distanceX) < 1) { + this.position.x = x - this.width * 0.5; + } else { + this.position.x += distanceX * (1 / reactionLatency); + } + } + } + + focusPositionY(y, reactionLatency = 1) + { + let centerY = this.position.y + this.height * 0.5; + let distanceY = y - centerY; + + if (distanceY !== 0) { + if (Math.abs(distanceY) < 1) { + this.position.y = y - this.height * 0.5; + } else { + this.position.y += distanceY * (1 / reactionLatency); + } } } } \ No newline at end of file diff --git a/js/module.js b/js/module.js index 939ba30..72697cf 100644 --- a/js/module.js +++ b/js/module.js @@ -128,11 +128,18 @@ function MainLoop(timestamp) ) } + camera.focusPosition( + mrCroc.position.x - mrCroc.getWidth() * 0.5, + mrCroc.position.y - mrCroc.getHeight() * 0.5, + 20 + ); + camera.lockCameraIntoBorders(); + /* Drawing */ if (timestamp - lastRendered >= FRAME_DURATION) { context.clearRect(0, 0, window.innerWidth, window.innerHeight); - camera.centerCamera(mrCroc.position.x - mrCroc.getWidth() * 0.5, mrCroc.position.y - mrCroc.getHeight() * 0.5); + // camera.centerCamera(mrCroc.position.x - mrCroc.getWidth() * 0.5, mrCroc.position.y - mrCroc.getHeight() * 0.5); architecture.draw(context, camera); mrCroc.draw(context, camera); gisela.draw(context, camera);