From 78b6abb2627d4a136ceda839f47664e9cfdb1282 Mon Sep 17 00:00:00 2001 From: Nick Lironi-Irvine Date: Sat, 16 Nov 2024 23:47:56 +1300 Subject: [PATCH] Render opaque pipes rather than 'open' Render pipes after apples, so the apples display behind the pipes --- games/apple-catcher/src/pipes.ts | 101 +++++++---------------- games/apple-catcher/src/scenes/Level1.ts | 3 +- games/apple-catcher/src/scenes/Level3.ts | 77 +++++++++-------- 3 files changed, 72 insertions(+), 109 deletions(-) diff --git a/games/apple-catcher/src/pipes.ts b/games/apple-catcher/src/pipes.ts index e356331..215ca46 100644 --- a/games/apple-catcher/src/pipes.ts +++ b/games/apple-catcher/src/pipes.ts @@ -2,6 +2,7 @@ import { AbstractCatcherScene } from "./scenes/AppleCatcherScene.ts"; import { BLUE } from "./constants.ts"; import GameObjectWithDynamicBody = Phaser.Types.Physics.Arcade.GameObjectWithDynamicBody; import Body = Phaser.Physics.Arcade.Body; +import Point = Phaser.Geom.Point; export function renderVerticalPipe( scene: AbstractCatcherScene, @@ -10,18 +11,14 @@ export function renderVerticalPipe( const pipeWidth = 80; const pipeHeight = 250; const pipeTop = 280; - const pipeBottom = pipeTop + pipeHeight; const pipeLeft = centerX - pipeWidth / 2; - const pipeRight = centerX + pipeWidth / 2; const pipe = scene.add.graphics(); pipe.setDefaultStyles({ fillStyle: { color: BLUE, }, - lineStyle: { color: BLUE, width: 4 }, }); - pipe.lineBetween(pipeLeft, pipeTop, pipeLeft, pipeBottom); - pipe.lineBetween(pipeRight, pipeTop, pipeRight, pipeBottom); + pipe.fillRect(pipeLeft, pipeTop, pipeWidth, pipeHeight); } export function setupForkedPipe( @@ -42,18 +39,22 @@ export function setupForkedPipe( .map(({ value }) => value); const pipeWidth = 80; - const pipeStraightHeight = 125; - const pipeForkHeight = 125; const pipeTop = 280; - const pipeStraightBottom = pipeTop + pipeStraightHeight; - const pipeForkInnerTop = pipeStraightBottom + pipeWidth; - const pipeForkBottom = pipeStraightBottom + pipeForkHeight; - const straightPipeLeft = centerX - pipeWidth / 2; - const forkedPipeLeftLeft = straightPipeLeft - pipeWidth; - const forkedPipeLeftRight = straightPipeLeft; - const straightPipeRight = centerX + pipeWidth / 2; - const forkedPipeRightLeft = straightPipeRight; - const forkedPipeRightRight = straightPipeRight + pipeWidth; + + const A = + centerX - 100 * Math.tan(Math.PI / 4) - pipeWidth * Math.sin(Math.PI / 4); // top of left fork + const B = centerX - 100 * Math.tan(Math.PI / 4); // bottom of left fork + const C = centerX - pipeWidth / 2; // LHS of center pipe + const D = centerX + pipeWidth / 2; // RHS of center pipe + const E = centerX + 100 * Math.tan(Math.PI / 4); // left edge of right fork + const F = + centerX + 100 * Math.tan(Math.PI / 4) + pipeWidth * Math.sin(Math.PI / 4); // right edge of right fork + + const one = pipeTop; + const two = one + 100; + const three = two + pipeWidth / Math.sin(Math.PI / 4); + const four = three + 60; + const center = two + 80; const pipe = scene.add.graphics(); pipe.setDefaultStyles({ @@ -63,53 +64,20 @@ export function setupForkedPipe( lineStyle: { color: BLUE, width: 4 }, }); - // Vertical pipe segment - // Left vertical line - pipe.lineBetween( - straightPipeLeft, - pipeTop, - straightPipeLeft, - pipeStraightBottom, - ); - // Right vertical line - pipe.lineBetween( - straightPipeRight, - pipeTop, - straightPipeRight, - pipeStraightBottom, - ); - - // Left Fork - // Left / outer side of fork - pipe.lineBetween( - straightPipeLeft, - pipeStraightBottom, - forkedPipeLeftLeft, - pipeForkInnerTop, - ); - - // Right / inner side of fork - pipe.lineBetween( - centerX, - pipeForkInnerTop, - forkedPipeLeftRight, - pipeForkBottom, - ); - - // Right fork - // Left / inner side of fork - pipe.lineBetween( - centerX, - pipeForkInnerTop, - forkedPipeRightLeft, - pipeForkBottom, - ); - // Right / outer side of fork - pipe.lineBetween( - straightPipeRight, - pipeStraightBottom, - forkedPipeRightRight, - pipeForkInnerTop, + pipe.fillPoints( + [ + new Point(C, one), + new Point(C, two), + new Point(A, three), + new Point(B, four), + new Point(centerX, center), + new Point(E, four), + new Point(F, three), + new Point(D, two), + new Point(D, one), + ], + true, + true, ); /* @@ -123,12 +91,7 @@ export function setupForkedPipe( the pipe and reinstate gravity and reduce the horizontal velocity so that the apple continues to fall more naturally. */ - const directionTriggerPoint = scene.add.rectangle( - centerX, - pipeForkInnerTop - 25, - 1, - 1, - ); + const directionTriggerPoint = scene.add.rectangle(centerX, 456 - 25, 1, 1); scene.physics.add.existing(directionTriggerPoint, true); scene.physics.add.collider( diff --git a/games/apple-catcher/src/scenes/Level1.ts b/games/apple-catcher/src/scenes/Level1.ts index 52f97f9..c4875c0 100644 --- a/games/apple-catcher/src/scenes/Level1.ts +++ b/games/apple-catcher/src/scenes/Level1.ts @@ -21,10 +21,11 @@ export class Level1 extends AbstractCatcherScene { create() { super.create(); - renderVerticalPipe(this, HALF_WIDTH); this.setupBasket(); this.setupApple(); + renderVerticalPipe(this, HALF_WIDTH); + this.addCollisionHandling(this.basket, this.apple); } diff --git a/games/apple-catcher/src/scenes/Level3.ts b/games/apple-catcher/src/scenes/Level3.ts index a84fd98..158336d 100644 --- a/games/apple-catcher/src/scenes/Level3.ts +++ b/games/apple-catcher/src/scenes/Level3.ts @@ -3,6 +3,7 @@ import SpriteWithStaticBody = Phaser.Types.Physics.Arcade.SpriteWithStaticBody; import { BLUE, BASKET_BOTTOM, HALF_WIDTH, APPLE_TOP } from "../constants.ts"; import Pointer = Phaser.Input.Pointer; import SpriteWithDynamicBody = Phaser.Types.Physics.Arcade.SpriteWithDynamicBody; +import Point = Phaser.Geom.Point; export class Level3 extends AbstractCatcherScene { private basket: SpriteWithStaticBody; @@ -20,9 +21,9 @@ export class Level3 extends AbstractCatcherScene { create() { super.create(); - this.renderThreeForkedPipe(); this.setupBasket(); this.setupApple(); + this.renderThreeForkedPipe(); this.addCollisionHandling(this.basket, this.apple); } @@ -40,21 +41,25 @@ export class Level3 extends AbstractCatcherScene { private renderThreeForkedPipe() { const pipeWidth = 80; const pipeTop = 280; - const pipeForkTop = pipeTop + 100; - const pipeForkVerticalHeight = pipeWidth / Math.sin(Math.PI / 4); - const pipeForkBottom = pipeForkTop + pipeForkVerticalHeight; - const pipeBottom = pipeForkBottom + pipeForkVerticalHeight; - const pipeLeft = HALF_WIDTH - pipeWidth / 2; - const pipeRight = HALF_WIDTH + pipeWidth / 2; - const forkTopLineAdditionalLength = Math.sqrt( - Math.pow(pipeForkVerticalHeight, 2) / Math.pow(pipeWidth, 2), - ); - const forkedPipeLeftLeft = - pipeLeft - pipeForkVerticalHeight - forkTopLineAdditionalLength; - const forkedPipeLeftRight = pipeLeft - pipeForkVerticalHeight; - const forkedPipeRightLeft = pipeRight + pipeForkVerticalHeight; - const forkedPipeRightRight = - pipeRight + pipeForkVerticalHeight + forkTopLineAdditionalLength; + + const A = + HALF_WIDTH - + 100 * Math.tan(Math.PI / 4) - + pipeWidth * Math.sin(Math.PI / 4); // top of left fork + const B = HALF_WIDTH - 100 * Math.tan(Math.PI / 4); // bottom of left fork + const C = HALF_WIDTH - pipeWidth / 2; // LHS of center pipe + const D = HALF_WIDTH + pipeWidth / 2; // RHS of center pipe + const E = HALF_WIDTH + 100 * Math.tan(Math.PI / 4); // left edge of right fork + const F = + HALF_WIDTH + + 100 * Math.tan(Math.PI / 4) + + pipeWidth * Math.sin(Math.PI / 4); // right edge of right fork + + const one = pipeTop; + const two = one + 100; + const three = two + 80 / Math.sin(Math.PI / 4); + const four = three + 60; + const five = three + 100; const pipe = this.add.graphics(); pipe.setDefaultStyles({ @@ -63,30 +68,24 @@ export class Level3 extends AbstractCatcherScene { }, lineStyle: { color: BLUE, width: 4 }, }); - // Top cylinder - pipe.lineBetween(pipeLeft, pipeTop, pipeLeft, pipeForkTop); - pipe.lineBetween(pipeRight, pipeTop, pipeRight, pipeForkTop); - - // Bottom cylinder - pipe.lineBetween(pipeLeft, pipeForkBottom, pipeLeft, pipeBottom); - pipe.lineBetween(pipeRight, pipeForkBottom, pipeRight, pipeBottom); - // Left fork - pipe.lineBetween(pipeLeft, pipeForkTop, forkedPipeLeftLeft, pipeForkBottom); - pipe.lineBetween(pipeLeft, pipeForkBottom, forkedPipeLeftRight, pipeBottom); - - // Right fork - pipe.lineBetween( - pipeRight, - pipeForkTop, - forkedPipeRightLeft, - pipeForkBottom, - ); - pipe.lineBetween( - pipeRight, - pipeForkBottom, - forkedPipeRightRight, - pipeBottom, + pipe.fillPoints( + [ + new Point(C, one), + new Point(C, two), + new Point(A, three), + new Point(B, four), + new Point(C, three), + new Point(C, five), + new Point(D, five), + new Point(D, three), + new Point(E, four), + new Point(F, three), + new Point(D, two), + new Point(D, one), + ], + true, + true, ); }