Simple Main Menu

added for now - make prettier later
This commit is contained in:
OfficialCHenry 2022-04-02 00:02:24 -04:00
parent eec6b11062
commit ff133c4a65
2 changed files with 167 additions and 4 deletions

3
.vscode/settings.json vendored Normal file
View File

@ -0,0 +1,3 @@
{
"liveServer.settings.port": 5501
}

View File

@ -1,15 +1,175 @@
import Scene from "../../Wolfie2D/Scene/Scene";
import ConfigManager from "../Tools/ConfigManager";
import SaveManager from "../Tools/SaveManager";
import Vec2 from "../../Wolfie2D/DataTypes/Vec2";
import { GameEventType } from "../../Wolfie2D/Events/GameEventType";
import AnimatedSprite from "../../Wolfie2D/Nodes/Sprites/AnimatedSprite";
import Button from "../../Wolfie2D/Nodes/UIElements/Button";
import { UIElementType } from "../../Wolfie2D/Nodes/UIElements/UIElementTypes";
import Color from "../../Wolfie2D/Utils/Color";
import Layer from "../../Wolfie2D/Scene/Layer";
import Label from "../../Wolfie2D/Nodes/UIElements/Label";
import Levels from "./Levels";
export default class MainMenu extends Scene {
protected config: ConfigManager;
protected save: SaveManager;
// Layers, for multiple main menu screens
private mainMenu: Layer;
private about: Layer;
private control: Layer;
// TODO
startScene(): void {
animatedSprite: AnimatedSprite;
loadScene(): void {
// Load the menu song
//this.load.audio("menu", "hw5_assets/music/menu.mp3");
}
//TODO
startScene(): void{
this.config = new ConfigManager();
this.save = new SaveManager();
}
// Scene has started, so start playing music
//this.emitter.fireEvent(GameEventType.PLAY_SOUND, {key: "menu", loop: true, holdReference: true});
const center = this.viewport.getCenter();
// The main menu
this.mainMenu = this.addUILayer("mainMenu");
// Add map button, and give it an event to emit on press
const map = this.add.uiElement(UIElementType.BUTTON, "mainMenu", {position: new Vec2(center.x, center.y - 100), text: "Map"});
map.size.set(200, 50);
map.borderWidth = 2;
map.borderColor = Color.WHITE;
map.backgroundColor = Color.TRANSPARENT;
map.onClickEventId = "map";
// Add about button
const about = this.add.uiElement(UIElementType.BUTTON, "mainMenu", {position: new Vec2(center.x, center.y + 100), text: "About"});
about.size.set(200, 50);
about.borderWidth = 2;
about.borderColor = Color.WHITE;
about.backgroundColor = Color.TRANSPARENT;
about.onClickEventId = "about";
// Add control button, and give it an event to emit on press
const control = this.add.uiElement(UIElementType.BUTTON, "mainMenu", {position: new Vec2(center.x, center.y), text: "Controls"});
control.size.set(200, 50);
control.borderWidth = 2;
control.borderColor = Color.WHITE;
control.backgroundColor = Color.TRANSPARENT;
control.onClickEventId = "control";
/* ########## ABOUT SCREEN ########## */
this.about = this.addUILayer("about");
this.about.setHidden(true);
const aboutHeader = <Label>this.add.uiElement(UIElementType.LABEL, "about", {position: new Vec2(center.x, center.y - 250), text: "About"});
aboutHeader.textColor = Color.WHITE;
// HOMEWORK 4 - TODO: Give yourself credit and add your name to the about page!
const text1 = "This game was created by Henry Chen, Kelly Peng, and Xinyu Xu";
const text2 = "using the Wolfie2D game engine, a TypeScript game engine created by";
const text3 = "Joe Weaver and Richard McKenna.";
const line1 = <Label>this.add.uiElement(UIElementType.LABEL, "about", {position: new Vec2(center.x, center.y - 50), text: text1});
const line2 = <Label>this.add.uiElement(UIElementType.LABEL, "about", {position: new Vec2(center.x, center.y), text: text2});
const line3 = <Label>this.add.uiElement(UIElementType.LABEL, "about", {position: new Vec2(center.x, center.y + 50), text: text3});
line1.textColor = Color.WHITE;
line2.textColor = Color.WHITE;
line3.textColor = Color.WHITE;
const aboutBack = this.add.uiElement(UIElementType.BUTTON, "about", {position: new Vec2(center.x, center.y + 250), text: "Back"});
aboutBack.size.set(200, 50);
aboutBack.borderWidth = 2;
aboutBack.borderColor = Color.WHITE;
aboutBack.backgroundColor = Color.TRANSPARENT;
aboutBack.onClickEventId = "menu";
// Subscribe to the button events
this.receiver.subscribe("map");
this.receiver.subscribe("about");
this.receiver.subscribe("menu");
this.receiver.subscribe("control");
//Control screen
this.control = this.addUILayer("control");
this.control.setHidden(true);
}
const header = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y - 250), text: "Controls"});
header.textColor = Color.WHITE;
const lc = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y - 150), text: "A/D - Move Left/Right"});
lc.textColor = Color.WHITE;
const rc = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y - 100), text: "W/S - Look Up/Down"});
rc.textColor = Color.WHITE;
const wasd = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y - 50), text: "J/Z/Enter - Confirm Attack"});
wasd.textColor = Color.WHITE;
const e = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y), text: "SPACE/X - Jump"});
e.textColor = Color.WHITE;
const q = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y + 50), text: "K/C - Dash"});
q.textColor = Color.WHITE;
const oneTwo = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y + 100), text: "L/V - Use Skill"});
oneTwo.textColor = Color.WHITE
const zx = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y + 150), text: "I/B - open Backpack"});
zx.textColor = Color.WHITE;
const tb = <Label>this.add.uiElement(UIElementType.LABEL, "control", {position: new Vec2(center.x, center.y + 200), text: "ESC - Pause"});
tb.textColor = Color.WHITE;
const back = this.add.uiElement(UIElementType.BUTTON, "control", {position: new Vec2(center.x, center.y + 250), text: "Back"});
back.size.set(200, 50);
back.borderWidth = 2;
back.borderColor = Color.WHITE;
back.backgroundColor = Color.TRANSPARENT;
back.onClickEventId = "menu";
}
unloadScene(): void {
// The scene is being destroyed, so we can stop playing the song
//this.emitter.fireEvent(GameEventType.STOP_SOUND, {key: "menu"});
}
updateScene(){
while(this.receiver.hasNextEvent()){
let event = this.receiver.getNextEvent();
console.log(event);
if(event.type === "map"){
this.sceneManager.changeToScene(Levels, {});
}
if(event.type === "about"){
this.about.setHidden(false);
this.mainMenu.setHidden(true);
}
if(event.type === "menu"){
this.mainMenu.setHidden(false);
this.about.setHidden(true);
this.control.setHidden(true);
}
if(event.type === "control"){
this.mainMenu.setHidden(true);
this.control.setHidden(false);
}
}
}
}