diff --git a/frontend/game.ts b/frontend/game.ts index ee332d7..05d0240 100644 --- a/frontend/game.ts +++ b/frontend/game.ts @@ -1,5 +1,5 @@ -const PIPE_IMAGE_PATH: string = "resources/seesORsoos_sad_no-bg.png"; -const BACKGROUND_IMAGE_PATH: string = "resources/raspberry-low-res.png"; +const PIPE_IMAGE_PATH: string = "resources/dell-pc-min-min-small.png"; +const BACKGROUND_IMAGE_PATH: string = "resources/htl-steyr-front.jpg"; const RASPBERRY_IMAGE_PATH: string = "resources/raspberry-rocket.png"; const FLOOR_IMAGE_PATH: string = "resources/table-min-min.png"; const FONT_PATH: string = "resources/PressStart2P-Regular.ttf"; @@ -85,7 +85,8 @@ function setupObstacles() { function instantiateObstacles(number: number) { for (let i = 0; i < number; i++) { obstacles.push( - new Obstacle(new Position(width + obstacleOffset * i, 0), OBSTACLE_WIDTH, height, pipeImage)); + new Obstacle(new Position(width + obstacleOffset * i, 0), OBSTACLE_WIDTH, height, pipeImage) + ); } } @@ -180,7 +181,7 @@ function die() { */ function displayScore() { push(); - fill(200, 100, 60); + fill(195, 33, 34); text(score, 0, height / 10, width, height); pop(); } diff --git a/frontend/model/Pipe.ts b/frontend/model/Pipe.ts index 7af7ea5..6e0185d 100644 --- a/frontend/model/Pipe.ts +++ b/frontend/model/Pipe.ts @@ -33,20 +33,47 @@ class Pipe extends Entity implements Collidable { push(); noFill(); - if (this.height > this.image.height) { - let maxImageYPos = Math.ceil(this.height / this.image.height) * this.image.height; - for (let imageYPos = 0; imageYPos < maxImageYPos; imageYPos += this.image.height) { - console.log("maximageypos: " + maxImageYPos); - console.log("image height: " + this.image.height); - console.log("imageypos: " + imageYPos); - image(this.image, this.position.x, this.position.y + imageYPos, this.width, this.image.height); + let imageAspectRatio = this.image.height / this.image.width; + let computedImageHeight = imageAspectRatio * this.width; + this.drawImage(computedImageHeight, imageAspectRatio); + + rect(this.position.x, this.position.y, this.width, this.height); + pop(); + } + + /** + * Draws the image of the pipe into it (tiling and not stretching) + * @param computedImageHeight image height on screen + * @param imageAspectRatio aspect ratio of the image + * @private + */ + private drawImage(computedImageHeight: number, imageAspectRatio: number): void { + if (this.height > computedImageHeight) { + let maxImageYPos = Math.ceil(this.height / computedImageHeight) * computedImageHeight; + for (let imageYPosition = 0; imageYPosition < maxImageYPos; imageYPosition += computedImageHeight) { + if(imageYPosition + computedImageHeight >= maxImageYPos) { + this.cropLastImage(imageYPosition, computedImageHeight, imageAspectRatio); + break; + } + image(this.image, this.position.x, this.position.y + imageYPosition, this.width, computedImageHeight); } } else { image(this.image, this.position.x, this.position.y, this.width, this.height); } + } - rect(this.position.x, this.position.y, this.width, this.height); - pop(); + /** + * Crops the last image in the pipe so that is doesn't get stretched or compressed + * @param imageYPosition y-Position of the image + * @param computedImageHeight image height on screen + * @param imageAspectRatio aspect ratio of the image + * @private + */ + private cropLastImage(imageYPosition: number, computedImageHeight: number, imageAspectRatio: number): void { + let amountOfImages = Math.floor(imageYPosition / computedImageHeight); + let heightToEdge = this.height - (amountOfImages * computedImageHeight); + let croppedImage = this.image.get(0, 0, this.image.width, this.image.height - (heightToEdge * imageAspectRatio)); + image(croppedImage, this.position.x, this.position.y + imageYPosition, this.width, heightToEdge); } /** diff --git a/frontend/resources/dell-pc-min-min-small.png b/frontend/resources/dell-pc-min-min-small.png new file mode 100644 index 0000000..f082471 Binary files /dev/null and b/frontend/resources/dell-pc-min-min-small.png differ diff --git a/frontend/resources/dell-pc-min-min.png b/frontend/resources/dell-pc-min-min.png deleted file mode 100644 index f480868..0000000 Binary files a/frontend/resources/dell-pc-min-min.png and /dev/null differ diff --git a/frontend/resources/dell-pc-min.png b/frontend/resources/dell-pc-min.png deleted file mode 100644 index 5fe742c..0000000 Binary files a/frontend/resources/dell-pc-min.png and /dev/null differ diff --git a/frontend/resources/dell-pc.png b/frontend/resources/dell-pc.png deleted file mode 100644 index bff626c..0000000 Binary files a/frontend/resources/dell-pc.png and /dev/null differ diff --git a/frontend/resources/htl-steyr-front.jpg b/frontend/resources/htl-steyr-front.jpg new file mode 100644 index 0000000..6323bfc Binary files /dev/null and b/frontend/resources/htl-steyr-front.jpg differ diff --git a/frontend/resources/seesORsoos_sad_no-bg.png b/frontend/resources/seesORsoos_sad_no-bg.png deleted file mode 100644 index ef179ad..0000000 Binary files a/frontend/resources/seesORsoos_sad_no-bg.png and /dev/null differ diff --git a/frontend/resources/sw_icon.png b/frontend/resources/sw_icon.png deleted file mode 100644 index 788a611..0000000 Binary files a/frontend/resources/sw_icon.png and /dev/null differ diff --git a/frontend/resources/table-min.png b/frontend/resources/table-min.png deleted file mode 100644 index 689238f..0000000 Binary files a/frontend/resources/table-min.png and /dev/null differ diff --git a/frontend/resources/table.png b/frontend/resources/table.png deleted file mode 100644 index 310df2a..0000000 Binary files a/frontend/resources/table.png and /dev/null differ