Merge branch 'main' of github.com:Chocobois/TurtleTrampoline

src/assets/assets.ts

@@ -42,7 +42,7 @@ const audios: Audio[] = [
 ];
 
 /* Fonts */
-await loadFont('Sketch', 'Game Font');
+await loadFont('NerkoOne-Regular', 'Game Font');
 
 export {
 	images,

src/components/Trampoline.ts

@@ -1,28 +1,54 @@
 import { GameScene } from "@/scenes/GameScene";
 import { Button } from "./Button";
-import constants from '@/constants.json';
+import constants from "@/constants.json";
 
 export class Trampoline extends Button {
 	public scene: GameScene;
 
 	// Sprites
-	public sprite: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody;
+	public sprite: Phaser.GameObjects.Sprite;
+	public zone: Phaser.Geom.Rectangle;
 
 	constructor(scene: GameScene, x: number, y: number) {
 		super(scene, x, y);
 		scene.add.existing(this);
 		this.scene = scene;
 
-		/* Sprite */
-		this.sprite = this.scene.physics.add.sprite(0, 0, "trampoline");
-		this.sprite.setImmovable(true);
+		this.width = 800;
 
-        //this.sprite.static;
+		/* Sprite */
+		this.sprite = this.scene.add.sprite(0, 0, "trampoline");
+		this.sprite.setScale(this.width / this.sprite.width);
 		this.sprite.setOrigin(0.5, 1.0);
 		this.add(this.sprite);
 
-        /* Input */
+		this.zone = new Phaser.Geom.Rectangle(
+			this.x - this.width / 2,
+			0,
+			this.width,
+			this.y - 0.65 * this.sprite.displayHeight
+		);
+		// Debug draw zone
+		// this.scene.add
+		// 	.graphics({
+		// 		fillStyle: { color: 0xff0000, alpha: 0.5 },
+		// 	})
+		// 	.fillRectShape(this.zone);
+
+		/* Input */
 		this.bindInteractive(this.sprite, true);
+		this.on("click", () => {
+			// Clicked on trampoline
+		});
 	}
 
+	update(time: number, delta: number) {
+		const holdX = 1.0 + 0.2 * this.holdSmooth;
+		const holdY = 1.0 - 0.1 * this.holdSmooth;
+		const squish = 0.01;
+		// this.setScale(
+		// 	(1.0 + squish * Math.sin(time / 200)) * holdX,
+		// 	(1.0 + squish * Math.sin(-time / 200)) * holdY
+		// );
+	}
 }

src/components/Turtle.ts

@@ -1,6 +1,6 @@
 import { GameScene } from "@/scenes/GameScene";
 import { Button } from "./Button";
-import constants from '@/constants.json';
+import constants from "@/constants.json";
 
 const ACCELERATION = 150;
 const MAX_SPEED = 400;
@@ -16,89 +16,125 @@ export class Turtle extends Button {
 
 	// Sprites
 	private spriteSize: number;
-	public sprite: Phaser.Types.Physics.Arcade.SpriteWithDynamicBody;
+	public sprite: Phaser.GameObjects.Sprite;
 	private tween: Phaser.Tweens.Tween;
 
 	// Controls
+	public physicsPosition: Phaser.Math.Vector2;
+	public physicsVelocity: Phaser.Math.Vector2;
+	public dragVelocity: Phaser.Math.Vector2;
 	public velocity: Phaser.Math.Vector2;
 	private border: { [key: string]: number };
-	private isDragged: boolean;
 	private dragOffset: Phaser.Math.Vector2;
 
+	// Jumping
+	private trampolineZone?: Phaser.Geom.Rectangle;
+	public feetOffset: number;
+
 	constructor(scene: GameScene, x: number, y: number) {
 		super(scene, x, y);
 		scene.add.existing(this);
 		this.scene = scene;
 
 		/* Sprite */
 		this.spriteSize = 200;
-		this.sprite = this.scene.physics.add.sprite(0, 0, "turtle_waiting");
-		this.sprite.setGravityY(constants.physics.gravity);
-		this.sprite.setCollideWorldBounds(true, 1, 1, true);
-		this.sprite.setBounceY(0.4);
-		this.sprite.setOrigin(0.5, 1.0);
-		this.sprite.y += this.spriteSize / 2;
+		this.sprite = this.scene.add.sprite(0, 0, "turtle_waiting");
 		this.sprite.setScale(this.spriteSize / this.sprite.width);
 		this.add(this.sprite);
 
 		/* Controls */
-		this.velocity = new Phaser.Math.Vector2(0, 0);
+		this.physicsPosition = new Phaser.Math.Vector2(x, y);
+		this.physicsVelocity = new Phaser.Math.Vector2(0, 0);
+		this.dragVelocity = new Phaser.Math.Vector2(0, 0);
 		this.border = {
 			left: 100,
 			right: scene.W - 100,
-			top: 100,
-			bottom: scene.H - 100,
+			top: 0,
+			bottom: scene.H - 250,
 		};
+		this.feetOffset = 0.4 * this.sprite.displayHeight;
 
 		/* Input */
-		this.isDragged = false;
 		this.dragOffset = new Phaser.Math.Vector2();
 		this.bindInteractive(this.sprite, true);
 
-		this.sprite.on('collide', () => {
-			console.log("Collide")
+		this.sprite.on("collide", () => {
+			console.log("Collide");
 		});
 	}
 
 	update(time: number, delta: number) {
-		// Animation (Change to this.sprite.setScale if needed)
+		// "Physics"
+		if (!this.hold) {
+			// Trampoline
+			if (this.trampolineZone) {
+				if (
+					this.physicsPosition.y <
+					this.trampolineZone.bottom - this.feetOffset
+				) {
+					this.physicsVelocity.x = 0.97 * this.physicsVelocity.x;
+					this.physicsVelocity.y += 1;
+				} else {
+					let maxSpeed = 30;
+					let landSpeed = Math.max(this.physicsVelocity.y, 1);
+					let jumpSpeed =
+						Phaser.Math.Easing.Sine.Out(landSpeed / maxSpeed) * maxSpeed;
+					this.physicsVelocity.y = -Math.min(jumpSpeed, maxSpeed);
+				}
+			}
+
+			// Grounded
+			else if (this.isGrounded) {
+				// Friction
+				this.physicsVelocity.x = 0.5 * this.physicsVelocity.x;
+				// Stop fall
+				this.physicsVelocity.y = 0;
+				this.physicsPosition.y = this.border.bottom;
+			}
+
+			// Airborn
+			else {
+				this.physicsVelocity.x = 0.97 * this.physicsVelocity.x;
+				this.physicsVelocity.y += 1;
+			}
+
+			// Apply velocity
+			this.physicsPosition.add(this.physicsVelocity);
+		} else {
+			this.physicsVelocity.reset();
+		}
+
+		// Movement
+		this.x += 0.5 * (this.physicsPosition.x - this.x);
+		this.y += 0.5 * (this.physicsPosition.y - this.y);
+
+		if (this.hold) {
+			this.dragVelocity.set(
+				this.physicsPosition.x - this.x,
+				this.physicsPosition.y - this.y
+			);
+		} else {
+			this.dragVelocity.scale(0.9);
+		}
+
+		// Animation
 		const squish = 0.02 * Math.sin((6 * time) / 1000);
 		this.setScale(1.0 + squish, 1.0 - squish);
-	}
 
-	onDown(pointer: Phaser.Input.Pointer, localX: number, localY: number, event: Phaser.Types.Input.EventData): void {
-
-		this.sprite.setGravityY(0);
-		this.sprite.setVelocity(0, 0);
-	}
+		// let dangleAngle = 10 * Math.sin((5 * time) / 1000);
+		this.sprite.angle = this.dragVelocity.x;
 
-	onDragStart(pointer: Phaser.Input.Pointer, dragX: number, dragY: number) {
-		this.isDragged = true;
-		this.dragOffset.set(this.x, this.y);
-		this.sprite.setTexture("turtle_jumping");
+		if (this.trampolineZone || !this.isGrounded) {
+			this.sprite.setTexture("turtle_jumping");
+		} else {
+			this.sprite.setTexture("turtle_waiting");
+		}
 	}
 
-	onDrag(pointer: Phaser.Input.Pointer, dragX: number, dragY: number) {
-		super.onDrag(pointer, dragX, dragY);
-		const offsetDifference = new Phaser.Math.Vector2(
-			(this.originX - this.sprite.originX) * this.scaleX * this.sprite.width,
-			(this.originY - this.sprite.originY) * this.scaleY * this.sprite.height
-		)
-		this.setPosition(
-			dragX + this.dragOffset.x + offsetDifference.x,
-			dragY + this.dragOffset.y + offsetDifference.y
-		);
-	}
+	/* Jumping */
 
-	onDragEnd(
-		pointer: Phaser.Input.Pointer,
-		dragX: number,
-		dragY: number,
-		dropped: boolean
-	) {
-		this.isDragged = false;
-		this.sprite.setGravityY(constants.physics.gravity)
-		this.sprite.setTexture("turtle_waiting");
+	setTrampolineZone(zone?: Phaser.Geom.Rectangle) {
+		this.trampolineZone = zone;
 	}
 
 	doABarrelRoll() {
@@ -115,4 +151,34 @@ export class Turtle extends Button {
 			});
 		}
 	}
+
+	get isGrounded() {
+		return this.physicsPosition.y >= this.border.bottom - this.feetOffset;
+	}
+
+	/* Input */
+
+	onDragStart(pointer: Phaser.Input.Pointer, dragX: number, dragY: number) {
+		this.dragOffset.set(dragX, dragY);
+		this.physicsPosition.set(dragX, dragY);
+
+		this.sprite.setOrigin(0.5, 0.4);
+		this.sprite.setTexture("turtle_jumping");
+	}
+
+	onDrag(pointer: Phaser.Input.Pointer, dragX: number, dragY: number) {
+		this.physicsPosition.set(
+			dragX + this.dragOffset.x,
+			dragY + this.dragOffset.y
+		);
+	}
+
+	onDragEnd(pointer: Phaser.Input.Pointer, dragX: number, dragY: number) {
+		this.sprite.setOrigin(0.5);
+		// this.y += this.sprite.height / 2;
+		this.sprite.setTexture("turtle_waiting");
+
+		this.dragVelocity.scale(0.5);
+		this.physicsVelocity.add(this.dragVelocity);
+	}
 }

src/components/UI.ts

@@ -19,6 +19,7 @@ export class UI extends Phaser.GameObjects.Container {
 
 		this.background = this.scene.add.image(0, 0, "hud");
 		this.background.setScale(panelHeight / this.background.height);
+		this.background.setAlpha(0.2);
 		this.panel.add(this.background);
 
 		this.text = this.scene.addText({
@@ -28,7 +29,7 @@ export class UI extends Phaser.GameObjects.Container {
 			color: "#FFFFFF",
 			text: "Score: 123",
 		});
-		this.text.setStroke("black", 4);
+		this.text.setStroke("black", 8);
 		this.text.setOrigin(0, 0.5);
 		this.panel.add(this.text);
 

src/game.ts

@@ -22,12 +22,12 @@ const config: Phaser.Types.Core.GameConfig = {
 			},
 		],
 	},
-	physics: {
-		default: 'arcade',
-		arcade: {
-			debug: import.meta.env.DEV
-		}
-	}
+	// physics: {
+	// 	default: 'arcade',
+	// 	arcade: {
+	// 		debug: import.meta.env.DEV
+	// 	}
+	// }
 };
 
 const game = new Phaser.Game(config);

src/scenes/GameScene.ts

@@ -36,6 +36,7 @@ export class GameScene extends BaseScene {
 	update(time: number, delta: number) {
 		this.overworld.update(time, delta);
 		this.shop.update(time, delta);
+		this.ui.update(time, delta);
 	}
 
 	setState(state: State) {

src/scenes/OverworldState.ts

@@ -21,11 +21,7 @@ export class OverworldState extends Phaser.GameObjects.Container {
 		scene.fitToScreen(this.background);
 		this.add(this.background);
 
-		this.trampoline = new Trampoline(
-			scene, 
-			0.25 * scene.W, 
-			0.90 * scene.H
-		);
+		this.trampoline = new Trampoline(scene, 0.25 * scene.W, 0.9 * scene.H);
 		this.add(this.trampoline);
 
 		this.turtles = [];
@@ -37,7 +33,6 @@ export class OverworldState extends Phaser.GameObjects.Container {
 		this.add(this.someButton);
 		let buttonText = scene.addText({
 			size: 50,
-			weight: 900,
 			color: "black",
 			text: "Shop",
 		});
@@ -50,6 +45,9 @@ export class OverworldState extends Phaser.GameObjects.Container {
 	}
 
 	update(time: number, delta: number) {
+		if (!this.visible) return;
+
+		this.trampoline.update(time, delta);
 		this.turtles.forEach((turtle) => {
 			turtle.update(time, delta);
 		});
@@ -62,16 +60,14 @@ export class OverworldState extends Phaser.GameObjects.Container {
 		this.add(turtle);
 		this.turtles.push(turtle);
 
-		this.scene.physics.add.collider(turtle.sprite, this.trampoline.sprite, () => {
-			turtle.sprite.setVelocityY(-800 + (Math.random()*100-50));
-		});
-
-		this.scene.physics.world.on('worldbounds', (body: any) => {
-			// world collision event
-        });
-
-		turtle.on("action", () => {
-			turtle.doABarrelRoll();
+		turtle.on("click", () => {
+			if (
+				this.trampoline.zone.contains(turtle.x, turtle.y + turtle.feetOffset)
+			) {
+				turtle.setTrampolineZone(this.trampoline.zone);
+			} else {
+				turtle.setTrampolineZone(undefined);
+			}
 		});
 	}
 }

src/scenes/ShopState.ts

@@ -33,5 +33,7 @@ export class ShopState extends Phaser.GameObjects.Container {
 		});
 	}
 
-	update(time: number, delta: number) {}
+	update(time: number, delta: number) {
+		if (!this.visible) return;
+	}
 }