added scene changes

This commit is contained in:
Joe Weaver 2020-09-07 22:15:49 -04:00
parent 9e86192bb0
commit 8cb4fb7972
9 changed files with 179 additions and 9 deletions

View File

@ -1,6 +1,6 @@
import Collection from "./Collection"; import Collection from "./Collection";
export default class Map<T> implements Collection{ export default class Map<T> implements Collection {
private map: Record<string, T>; private map: Record<string, T>;
constructor(){ constructor(){
@ -30,4 +30,8 @@ export default class Map<T> implements Collection{
forEach(func: Function): void { forEach(func: Function): void {
Object.keys(this.map).forEach(key => func(key)); Object.keys(this.map).forEach(key => func(key));
} }
clear(): void {
this.forEach((key: string) => delete this.map[key]);
}
} }

View File

@ -7,6 +7,7 @@ import Vec2 from "./DataTypes/Vec2";
import UIElement from "./Nodes/UIElement"; import UIElement from "./Nodes/UIElement";
import Button from "./Nodes/UIElements/Button"; import Button from "./Nodes/UIElements/Button";
import Layer from "./Scene/Layer"; import Layer from "./Scene/Layer";
import SecondScene from "./SecondScene";
export default class MainScene extends Scene { export default class MainScene extends Scene {
@ -40,7 +41,8 @@ export default class MainScene extends Scene {
backgroundTilemap.getLayer().setAlpha(0.5); backgroundTilemap.getLayer().setAlpha(0.5);
// Add the music and start playing it on a loop // Add the music and start playing it on a loop
this.add.audio("level_music").play(true); let music = this.add.audio("level_music");
music.play(true);
// Add the tilemap // Add the tilemap
this.add.tilemap("platformer", OrthogonalTilemap); this.add.tilemap("platformer", OrthogonalTilemap);
@ -114,10 +116,19 @@ export default class MainScene extends Scene {
let resumeButton = this.add.uiElement(Button, pauseLayer); let resumeButton = this.add.uiElement(Button, pauseLayer);
resumeButton.setSize(100, 50); resumeButton.setSize(100, 50);
resumeButton.setText("Resume"); resumeButton.setText("Resume");
resumeButton.setPosition(400, 200); resumeButton.setPosition(360, 150);
resumeButton.onClick = () => { resumeButton.onClick = () => {
this.layers.forEach((layer: Layer) => layer.setPaused(false)); this.layers.forEach((layer: Layer) => layer.setPaused(false));
pauseLayer.disable(); pauseLayer.disable();
} }
let switchButton = this.add.uiElement(Button, pauseLayer);
switchButton.setSize(140, 50);
switchButton.setText("Change Scene");
switchButton.setPosition(340, 190);
switchButton.onClick = () => {
music.stop();
this.sceneManager.changeScene(SecondScene);
}
} }
} }

View File

@ -14,6 +14,8 @@ export default class Rect extends Graphic {
render(ctx: CanvasRenderingContext2D): void { render(ctx: CanvasRenderingContext2D): void {
let origin = this.getViewportOriginWithParallax(); let origin = this.getViewportOriginWithParallax();
console.log(origin.toFixed());
ctx.fillStyle = this.color.toStringRGBA(); ctx.fillStyle = this.color.toStringRGBA();
ctx.fillRect(this.position.x - origin.x, this.position.y - origin.y, this.size.x, this.size.y); ctx.fillRect(this.position.x - origin.x, this.position.y - origin.y, this.size.x, this.size.y);
} }

View File

@ -108,6 +108,23 @@ export default class ResourceManager {
} }
unloadAllResources(): void {
this.loading = false;
this.justLoaded = false;
this.imagesLoaded = 0;
this.imagesToLoad = 0;
this.images.clear();
this.tilemapsLoaded = 0;
this.tilemapsToLoad = 0;
this.tilemaps.clear();
this.audioLoaded = 0;
this.audioToLoad = 0;
this.audioBuffers.clear();
}
private loadTilemapsFromQueue(onFinishLoading: Function){ private loadTilemapsFromQueue(onFinishLoading: Function){
this.tilemapsToLoad = this.tilemapLoadingQueue.getSize(); this.tilemapsToLoad = this.tilemapLoadingQueue.getSize();
this.tilemapsLoaded = 0; this.tilemapsLoaded = 0;

View File

@ -9,6 +9,7 @@ import FactoryManager from "./Factories/FactoryManager";
import Tilemap from "../Nodes/Tilemap"; import Tilemap from "../Nodes/Tilemap";
import ResourceManager from "../ResourceManager/ResourceManager"; import ResourceManager from "../ResourceManager/ResourceManager";
import GameLoop from "../Loop/GameLoop"; import GameLoop from "../Loop/GameLoop";
import SceneManager from "./SceneManager";
export default class Scene{ export default class Scene{
protected layers: Stack<Layer>; protected layers: Stack<Layer>;
@ -16,6 +17,7 @@ export default class Scene{
protected viewport: Viewport; protected viewport: Viewport;
protected running: boolean; protected running: boolean;
protected game: GameLoop; protected game: GameLoop;
protected sceneManager: SceneManager;
protected tilemaps: Array<Tilemap>; protected tilemaps: Array<Tilemap>;
protected sceneGraph: SceneGraph; protected sceneGraph: SceneGraph;
@ -24,13 +26,14 @@ export default class Scene{
public add: FactoryManager; public add: FactoryManager;
public load: ResourceManager; public load: ResourceManager;
constructor(viewport: Viewport, game: GameLoop){ constructor(viewport: Viewport, sceneManager: SceneManager, game: GameLoop){
this.layers = new Stack(10); this.layers = new Stack(10);
this.worldSize = new Vec2(1600, 1000); this.worldSize = new Vec2(1600, 1000);
this.viewport = viewport; this.viewport = viewport;
this.viewport.setBounds(0, 0, 2560, 1280); this.viewport.setBounds(0, 0, 2560, 1280);
this.running = false; this.running = false;
this.game = game; this.game = game;
this.sceneManager = sceneManager;
this.tilemaps = new Array(); this.tilemaps = new Array();
this.sceneGraph = new SceneGraphArray(this.viewport, this); this.sceneGraph = new SceneGraphArray(this.viewport, this);

View File

@ -16,8 +16,8 @@ export default class SceneManager{
this.game = game; this.game = game;
} }
public addScene<T extends Scene>(constr: new (...args: any) => T){ public addScene<T extends Scene>(constr: new (...args: any) => T): void {
let scene = new constr(this.viewport, this.game); let scene = new constr(this.viewport, this, this.game);
this.currentScene = scene; this.currentScene = scene;
// Enqueue all scene asset loads // Enqueue all scene asset loads
@ -27,7 +27,18 @@ export default class SceneManager{
this.resourceManager.loadResourcesFromQueue(() => { this.resourceManager.loadResourcesFromQueue(() => {
scene.startScene(); scene.startScene();
scene.setRunning(true); scene.setRunning(true);
}) });
}
public changeScene<T extends Scene>(constr: new (...args: any) => T): void {
// unload current scene
this.currentScene.unloadScene();
this.resourceManager.unloadAllResources();
this.viewport.setPosition(0, 0);
this.addScene(constr);
} }
public render(ctx: CanvasRenderingContext2D){ public render(ctx: CanvasRenderingContext2D){

123
src/SecondScene.ts Normal file
View File

@ -0,0 +1,123 @@
import Scene from "./Scene/Scene";
import OrthogonalTilemap from "./Nodes/Tilemaps/OrthogonalTilemap";
import Player from "./Player";
import Rect from "./Nodes/Graphics/Rect";
import Color from "./Utils/Color";
import Vec2 from "./DataTypes/Vec2";
import UIElement from "./Nodes/UIElement";
import Button from "./Nodes/UIElements/Button";
import Layer from "./Scene/Layer";
export default class SecondScene extends Scene {
loadScene(){
this.load.tilemap("level2", "assets/tilemaps/OtherMap.json");
this.load.tilemap("background2", "assets/tilemaps/OtherBackground.json");
this.load.image("player", "assets/sprites/player.png");
this.load.audio("player_jump", "assets/sounds/jump-3.wav");
this.load.audio("level_music", "assets/sounds/level.wav");
let loadingScreen = this.addLayer();
let box = this.add.graphic(Rect, loadingScreen, new Vec2(200, 300), new Vec2(400, 60));
box.setColor(new Color(0, 0, 0));
let bar = this.add.graphic(Rect, loadingScreen, new Vec2(205, 305), new Vec2(0, 50));
bar.setColor(new Color(255, 100, 0));
this.load.onLoadProgress = (percentProgress: number) => {
bar.setSize(295 * percentProgress, bar.getSize().y);
}
this.load.onLoadComplete = () => {
loadingScreen.disable();
}
}
startScene(){
// Add the background tilemap
let backgroundTilemap = this.add.tilemap("background2", OrthogonalTilemap)[0];
// ...and make it have parallax
backgroundTilemap.getLayer().setParallax(1, 1);
backgroundTilemap.getLayer().setAlpha(0.2);
// Add the music and start playing it on a loop
this.add.audio("level_music").play(true);
// Add the tilemap
this.add.tilemap("level2", OrthogonalTilemap);
// Create the main game layer
let mainLayer = this.addLayer();
// Add a player
let player = this.add.physics(Player, mainLayer, "platformer");
let playerSprite = this.add.sprite("player", mainLayer);
player.setSprite(playerSprite);
// TODO - Should sound playing be handled with events?
let playerJumpSound = this.add.audio("player_jump");
player.jumpSound = playerJumpSound;
this.viewport.follow(player);
// Initialize UI
let uiLayer = this.addLayer();
uiLayer.setParallax(0, 0);
let recordButton = this.add.uiElement(Button, uiLayer);
recordButton.setSize(100, 50);
recordButton.setText("Record");
recordButton.setPosition(400, 30);
recordButton.onClickEventId = "record_button_press";
let stopButton = this.add.uiElement(Button, uiLayer);
stopButton.setSize(100, 50);
stopButton.setText("Stop");
stopButton.setPosition(550, 30);
stopButton.onClickEventId = "stop_button_press";
let playButton = this.add.uiElement(Button, uiLayer);
playButton.setSize(100, 50);
playButton.setText("Play");
playButton.setPosition(700, 30);
playButton.onClickEventId = "play_button_press";
let cycleFramerateButton = this.add.uiElement(Button, uiLayer);
cycleFramerateButton.setSize(150, 50);
cycleFramerateButton.setText("Cycle FPS");
cycleFramerateButton.setPosition(5, 400);
let i = 0;
let fps = [15, 30, 60];
cycleFramerateButton.onClick = () => {
this.game.setMaxFPS(fps[i]);
i = (i + 1) % 3;
}
// Pause Menu
let pauseLayer = this.addLayer();
pauseLayer.setParallax(0, 0);
pauseLayer.disable();
let pauseButton = this.add.uiElement(Button, uiLayer);
pauseButton.setSize(100, 50);
pauseButton.setText("Pause");
pauseButton.setPosition(700, 400);
pauseButton.onClick = () => {
this.layers.forEach((layer: Layer) => layer.setPaused(true));
pauseLayer.enable();
}
let modalBackground = this.add.uiElement(UIElement, pauseLayer);
modalBackground.setSize(400, 200);
modalBackground.setBackgroundColor(new Color(0, 0, 0, 0.4));
modalBackground.setPosition(200, 100);
let resumeButton = this.add.uiElement(Button, pauseLayer);
resumeButton.setSize(100, 50);
resumeButton.setText("Resume");
resumeButton.setPosition(400, 200);
resumeButton.onClick = () => {
this.layers.forEach((layer: Layer) => layer.setPaused(false));
pauseLayer.disable();
}
}
}

View File

@ -2,7 +2,6 @@
"files": [ "files": [
"src/main.ts", "src/main.ts",
"src/Player.ts", "src/Player.ts",
"src/PlayerSprite.ts",
"src/DataTypes/Tilesets/TiledData.ts", "src/DataTypes/Tilesets/TiledData.ts",
"src/DataTypes/Tilesets/Tileset.ts", "src/DataTypes/Tilesets/Tileset.ts",