Skip to content

Commit

Permalink
Render opaque pipes rather than 'open'
Browse files Browse the repository at this point in the history 
Render pipes after apples, so the apples display behind the pipes
  • Loading branch information
@nick-lironi-irvine
nick-lironi-irvine committed Nov 17, 2024
1 parent 14a0025 commit 78b6abb
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 109 deletions.
101 changes: 32 additions & 69 deletions games/apple-catcher/src/pipes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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(
Expand All @@ -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({
Expand All @@ -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,
);

/*
Expand All @@ -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(
Expand Down
3 changes: 2 additions & 1 deletion games/apple-catcher/src/scenes/Level1.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
77 changes: 38 additions & 39 deletions games/apple-catcher/src/scenes/Level3.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
}
Expand All @@ -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({
Expand All @@ -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,
);
}

Expand Down

0 comments on commit 78b6abb

Please sign in to comment.