2020-08-07 12:21:15 -04:00
|
|
|
import GameLoop from "./Loop/GameLoop";
|
|
|
|
import Scene from "./GameState/Scene";
|
|
|
|
import Player from "./Nodes/Player";
|
|
|
|
import UIElement from "./Nodes/UIElement";
|
|
|
|
import ColoredCircle from "./Nodes/ColoredCircle";
|
|
|
|
import Color from "./Utils/Color";
|
2020-08-10 16:44:24 -04:00
|
|
|
import Button from "./Nodes/UIElements/Button";
|
2020-08-11 19:55:05 -04:00
|
|
|
import {} from "./index";
|
2020-08-17 10:34:31 -04:00
|
|
|
import OrthogonalTilemap from "./Nodes/Tilemaps/OrthogonalTilemap";
|
2020-08-03 16:51:20 -04:00
|
|
|
|
2020-08-07 12:21:15 -04:00
|
|
|
function main(){
|
|
|
|
// Create the game object
|
|
|
|
let game = new GameLoop();
|
2020-08-10 19:13:42 -04:00
|
|
|
let gameState = game.getGameState();
|
|
|
|
|
|
|
|
let backgroundScene = gameState.createScene();
|
|
|
|
backgroundScene.setParallax(0.5, 0.5);
|
|
|
|
let mainScene = gameState.createScene();
|
|
|
|
let foregroundLayer = gameState.createScene();
|
|
|
|
foregroundLayer.setParallax(1.5, 1.5);
|
|
|
|
let uiLayer = gameState.createScene();
|
|
|
|
uiLayer.setParallax(0, 0);
|
|
|
|
let pauseMenu = gameState.createScene();
|
|
|
|
pauseMenu.setParallax(0, 0);
|
2020-08-07 12:21:15 -04:00
|
|
|
|
|
|
|
// Initialize GameObjects
|
2020-08-17 10:34:31 -04:00
|
|
|
let player = mainScene.canvasNode.add(Player);
|
2020-08-10 19:13:42 -04:00
|
|
|
mainScene.getViewport().follow(player);
|
2020-08-07 12:21:15 -04:00
|
|
|
|
2020-08-17 10:34:31 -04:00
|
|
|
let recordButton = uiLayer.canvasNode.add(Button);
|
2020-08-07 12:21:15 -04:00
|
|
|
recordButton.setSize(100, 50);
|
|
|
|
recordButton.setText("Record");
|
|
|
|
recordButton.setPosition(400, 30);
|
2020-08-10 13:19:59 -04:00
|
|
|
recordButton.onClickEventId = "record_button_press";
|
2020-08-07 12:21:15 -04:00
|
|
|
|
2020-08-17 10:34:31 -04:00
|
|
|
let stopButton = uiLayer.canvasNode.add(Button);
|
2020-08-07 12:21:15 -04:00
|
|
|
stopButton.setSize(100, 50);
|
|
|
|
stopButton.setText("Stop");
|
|
|
|
stopButton.setPosition(550, 30);
|
2020-08-10 13:19:59 -04:00
|
|
|
stopButton.onClickEventId = "stop_button_press";
|
2020-08-07 12:21:15 -04:00
|
|
|
|
2020-08-17 10:34:31 -04:00
|
|
|
let playButton = uiLayer.canvasNode.add(Button);
|
2020-08-07 12:21:15 -04:00
|
|
|
playButton.setSize(100, 50);
|
|
|
|
playButton.setText("Play");
|
|
|
|
playButton.setPosition(700, 30);
|
2020-08-10 13:19:59 -04:00
|
|
|
playButton.onClickEventId = "play_button_press";
|
2020-08-07 12:21:15 -04:00
|
|
|
|
2020-08-17 10:34:31 -04:00
|
|
|
let cycleFramerateButton = uiLayer.canvasNode.add(Button);
|
2020-08-07 12:21:15 -04:00
|
|
|
cycleFramerateButton.setSize(150, 50);
|
|
|
|
cycleFramerateButton.setText("Cycle FPS");
|
|
|
|
cycleFramerateButton.setPosition(5, 400);
|
|
|
|
let i = 0;
|
|
|
|
let fps = [15, 30, 60];
|
2020-08-10 13:19:59 -04:00
|
|
|
cycleFramerateButton.onClick = () => {
|
2020-08-07 12:21:15 -04:00
|
|
|
game.setMaxFPS(fps[i]);
|
|
|
|
i = (i + 1) % 3;
|
|
|
|
}
|
|
|
|
|
2020-08-17 10:34:31 -04:00
|
|
|
let pauseButton = uiLayer.canvasNode.add(Button);
|
2020-08-07 12:21:15 -04:00
|
|
|
pauseButton.setSize(100, 50);
|
|
|
|
pauseButton.setText("Pause");
|
|
|
|
pauseButton.setPosition(700, 400);
|
2020-08-10 13:19:59 -04:00
|
|
|
pauseButton.onClick = () => {
|
2020-08-10 19:13:42 -04:00
|
|
|
mainScene.setPaused(true);
|
|
|
|
pauseMenu.enable();
|
2020-08-07 12:21:15 -04:00
|
|
|
}
|
|
|
|
|
2020-08-17 10:34:31 -04:00
|
|
|
let modalBackground = pauseMenu.canvasNode.add(UIElement);
|
2020-08-07 12:21:15 -04:00
|
|
|
modalBackground.setSize(400, 200);
|
|
|
|
modalBackground.setBackgroundColor(new Color(0, 0, 0, 0.4));
|
|
|
|
modalBackground.setPosition(200, 100);
|
|
|
|
|
2020-08-17 10:34:31 -04:00
|
|
|
let resumeButton = pauseMenu.canvasNode.add(Button);
|
2020-08-07 12:21:15 -04:00
|
|
|
resumeButton.setSize(100, 50);
|
|
|
|
resumeButton.setText("Resume");
|
|
|
|
resumeButton.setPosition(400, 200);
|
2020-08-10 13:19:59 -04:00
|
|
|
resumeButton.onClick = () => {
|
2020-08-10 19:13:42 -04:00
|
|
|
mainScene.setPaused(false);
|
|
|
|
pauseMenu.disable();
|
2020-08-07 12:21:15 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
for(let i = 0; i < 10; i++){
|
2020-08-17 10:34:31 -04:00
|
|
|
mainScene.canvasNode.add(ColoredCircle);
|
2020-08-07 12:21:15 -04:00
|
|
|
}
|
|
|
|
|
2020-08-17 10:34:31 -04:00
|
|
|
backgroundScene.tilemap.add(OrthogonalTilemap, "assets/tilemaps/MultiLayer.json");
|
2020-08-07 12:21:15 -04:00
|
|
|
|
2020-08-10 19:13:42 -04:00
|
|
|
for(let i = 0; i < 30; i++){
|
2020-08-17 10:34:31 -04:00
|
|
|
let cc = foregroundLayer.canvasNode.add(ColoredCircle);
|
2020-08-10 19:13:42 -04:00
|
|
|
cc.setSize(80, 80);
|
|
|
|
cc.setColor(cc.getColor().lighten().lighten())
|
|
|
|
cc.getColor().a = 0.5;
|
|
|
|
}
|
2020-08-07 12:21:15 -04:00
|
|
|
|
2020-08-10 19:13:42 -04:00
|
|
|
pauseMenu.disable();
|
2020-08-07 12:21:15 -04:00
|
|
|
|
|
|
|
game.start();
|
2020-08-03 16:51:20 -04:00
|
|
|
}
|
|
|
|
|
2020-08-11 19:55:05 -04:00
|
|
|
CanvasRenderingContext2D.prototype.roundedRect = function(x: number, y: number, w: number, h: number, r: number): void {
|
|
|
|
// Clamp the radius between 0 and the min of the width or height
|
|
|
|
if(r < 0) r = 0;
|
|
|
|
if(r > Math.min(w, h)) r = Math.min(w, h);
|
|
|
|
|
|
|
|
// Draw the rounded rect
|
|
|
|
this.beginPath();
|
|
|
|
|
|
|
|
// Top
|
|
|
|
this.moveTo(x + r, y);
|
|
|
|
this.lineTo(x + w - r, y);
|
|
|
|
this.arcTo(x + w, y, x + w, y + r, r);
|
|
|
|
|
|
|
|
// Right
|
|
|
|
this.lineTo(x + w, y + h - r);
|
|
|
|
this.arcTo(x + w, y + h, x + w - r, y + h, r);
|
|
|
|
|
|
|
|
// Bottom
|
|
|
|
this.lineTo(x + r, y + h);
|
|
|
|
this.arcTo(x, y + h, x, y + h - r, r);
|
|
|
|
|
|
|
|
// Left
|
|
|
|
this.lineTo(x, y + r);
|
|
|
|
this.arcTo(x, y, x + r, y, r)
|
|
|
|
|
|
|
|
this.closePath();
|
|
|
|
}
|
|
|
|
|
|
|
|
CanvasRenderingContext2D.prototype.strokeRoundedRect = function(x, y, w, h, r){
|
|
|
|
this.roundedRect(x, y, w, h, r);
|
|
|
|
this.stroke();
|
|
|
|
}
|
|
|
|
|
|
|
|
CanvasRenderingContext2D.prototype.fillRoundedRect = function(x, y, w, h, r){
|
|
|
|
this.roundedRect(x, y, w, h, r);
|
|
|
|
this.fill();
|
|
|
|
}
|
|
|
|
|
2020-08-07 12:21:15 -04:00
|
|
|
main();
|