From 30c5eea4208489db0946c348439253a54673102e Mon Sep 17 00:00:00 2001 From: Oli Thissen Date: Sat, 19 Sep 2020 00:42:56 +0200 Subject: [PATCH] Adds real buttons to the game Fixes #7 and #8 --- assets/github.svg | 1 + assets/play.svg | 1 + assets/random.svg | 1 + assets/twitter.svg | 1 + assets/undo.svg | 1 + package.json | 3 ++- src/Button.ts | 24 +++++++++++++++++ src/ButtonArray.ts | 23 +++++++++++++++++ src/SceneGameOver.ts | 58 +++++++++++++++++------------------------- src/SceneMainMenu.ts | 35 ++++++++++++------------- src/main.ts | 1 - webpack.config.js | 6 ++--- webpack.config.prod.js | 6 ++--- 13 files changed, 102 insertions(+), 59 deletions(-) create mode 100644 assets/github.svg create mode 100644 assets/play.svg create mode 100644 assets/random.svg create mode 100644 assets/twitter.svg create mode 100644 assets/undo.svg create mode 100644 src/Button.ts create mode 100644 src/ButtonArray.ts diff --git a/assets/github.svg b/assets/github.svg new file mode 100644 index 0000000..53bd7b2 --- /dev/null +++ b/assets/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/play.svg b/assets/play.svg new file mode 100644 index 0000000..d7fa87f --- /dev/null +++ b/assets/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/random.svg b/assets/random.svg new file mode 100644 index 0000000..3c23b13 --- /dev/null +++ b/assets/random.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/twitter.svg b/assets/twitter.svg new file mode 100644 index 0000000..f0ed9c5 --- /dev/null +++ b/assets/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/assets/undo.svg b/assets/undo.svg new file mode 100644 index 0000000..44b3904 --- /dev/null +++ b/assets/undo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/package.json b/package.json index 8ca0aa6..4ebe5f4 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "license": "MIT", "scripts": { "build": "webpack --config webpack.config.prod.js", - "dev": "webpack-dev-server --host 0.0.0.0" + "dev": "webpack-dev-server", + "devext": "webpack-dev-server --host 0.0.0.0" }, "devDependencies": { "copy-webpack-plugin": "^6.1.0", diff --git a/src/Button.ts b/src/Button.ts new file mode 100644 index 0000000..06cd0b8 --- /dev/null +++ b/src/Button.ts @@ -0,0 +1,24 @@ +export class Button extends Phaser.GameObjects.Container { + constructor(scene: Phaser.Scene, x: number, y: number, icon: string, text: string) { + super(scene, x, y, []); + + let i = scene.add.image(0, 0, icon); + let f = new Phaser.GameObjects.Ellipse(scene, 0, 0, 64, 64, 0xffffff); + + let t = scene.add.text(0, 36, text, { + fontFamily: 'monospace', + fontSize: 16, + color: '#ffffff', + align: 'center' + }).setOrigin(0.5, 0); + + this.add(f); + this.add(i); + this.add(t); + + this.setSize(64, 64); + this.setInteractive(); + + scene.add.existing(this); + } +} diff --git a/src/ButtonArray.ts b/src/ButtonArray.ts new file mode 100644 index 0000000..a121dae --- /dev/null +++ b/src/ButtonArray.ts @@ -0,0 +1,23 @@ +import { Tilemaps } from "phaser"; +import { Button } from "./Button" + +export class ButtonArray extends Phaser.GameObjects.Container { + constructor(scene: Phaser.Scene, x: number, y: number, width: number, buttons: Button[]) { + super(scene, x, y, buttons); + + let spacing = 16; + + let diff = 0 + width / 2 - (this.length * width + (this.length - 1) * spacing) / 2; + + for (let i = 0; i < this.length; i++) { + let item = this.getAt(i) as Button; + item.setX(diff); + diff += width; + if (i < this.length - 1) { + diff += 16; + } + } + + scene.add.existing(this); + } +} diff --git a/src/SceneGameOver.ts b/src/SceneGameOver.ts index 7f88f48..3e07e32 100644 --- a/src/SceneGameOver.ts +++ b/src/SceneGameOver.ts @@ -1,3 +1,6 @@ +import { Button } from "./Button" +import { ButtonArray } from "./ButtonArray" + const headingConfig = { fontFamily: 'monospace', fontSize: 48, @@ -14,65 +17,52 @@ const textConfig = { align: 'center' }; -const linkConfig = { - fontFamily: 'monospace', - fontSize: 20, - fontStyle: 'bold', - color: '#ffff00', - align: 'center' -}; - export class SceneGameOver extends Phaser.Scene { title: Phaser.GameObjects.Text; hint: Phaser.GameObjects.Text; - twitter: Phaser.GameObjects.Text; - randomSeed: Phaser.GameObjects.Text; + constructor() { super({ key: "SceneGameOver" }); } + preload() { + this.load.svg('replay', 'assets/undo.svg', { width: 32, height: 32 }); + this.load.svg('random', 'assets/random.svg', { width: 32, height: 32 }); + this.load.svg('twitter', 'assets/twitter.svg', { width: 32, height: 32 }); + } + create(data: { seed: string; time: string; }) { let tweet = `I survived @wrdgrvty level '${data.seed}' for ${data.time} seconds. Challenge me on ${window.location.href}`; let twitterUrl = 'https://twitter.com/intent/tweet?text=' + encodeURIComponent(tweet); - - this.title = this.add.text((this.game.config.width as number) * 0.5, 128, "WEIRD GRAVITY SPACE GAME", headingConfig); - this.hint = this.add.text((this.game.config.width as number) * 0.5, 200, "Star system '" + decodeURIComponent(data.seed) + "':\nYou survived for " + data.time + " seconds\n\nPress any key to play again", textConfig); - this.twitter = this.add.text((this.game.config.width as number) * 0.5, 300, "Or click here to brag about it on Twitter", linkConfig); - this.randomSeed = this.add.text((this.game.config.width as number) * 0.5, 330, "Or click here to try a new level at random", linkConfig); - - this.title.setOrigin(0.5); - this.hint.setOrigin(0.5); - this.twitter.setOrigin(0.5); - this.randomSeed.setOrigin(0.5); - this.twitter.setInteractive(); - this.randomSeed.setInteractive(); - - this.twitter.on('pointerup', function () { - this.openExternalLink(twitterUrl); - }, this); - - this.randomSeed.on('pointerup', function () { + + let replayButton = new Button(this, 0, 0, "replay", "replay").on('pointerup', function () { this.scene.transition({ target: "SceneMain", duration: 0, moveAbove: true, sleep: false, - data: new Phaser.Math.RandomDataGenerator().integer().toString(), + data: data.seed }); }, this); - const replay = function (): void { + let randomButton = new Button(this, 0, 0, "random", "random").on('pointerup', function () { this.scene.transition({ target: "SceneMain", duration: 0, moveAbove: true, sleep: false, - data: data.seed, + data: new Phaser.Math.RandomDataGenerator().integer().toString(), }); - }; + }, this); + + let twitterButton = new Button(this, 0, 0, "twitter", "tweet").on('pointerup', () => this.openExternalLink(twitterUrl), this); + new ButtonArray(this, (this.game.config.width as number) * 0.5, 300, 64, [replayButton, randomButton, twitterButton]); - this.input.keyboard.on('keydown', replay, this); - this.input.on('pointerdown', replay, this); + this.title = this.add.text((this.game.config.width as number) * 0.5, 128, "WEIRD GRAVITY SPACE GAME", headingConfig); + this.hint = this.add.text((this.game.config.width as number) * 0.5, 200, "Star system '" + decodeURIComponent(data.seed) + "':\nYou survived for " + data.time + " seconds\n\nPress any key to play again", textConfig); + + this.title.setOrigin(0.5); + this.hint.setOrigin(0.5); } openExternalLink(url: string) { diff --git a/src/SceneMainMenu.ts b/src/SceneMainMenu.ts index c0ae706..6dc9204 100644 --- a/src/SceneMainMenu.ts +++ b/src/SceneMainMenu.ts @@ -1,21 +1,26 @@ +import { Button } from "./Button" +import { ButtonArray } from "./ButtonArray" + export class SceneMainMenu extends Phaser.Scene { title: Phaser.GameObjects.Text; hint: Phaser.GameObjects.Text; - github: Phaser.GameObjects.Text; constructor() { super({ key: "SceneMainMenu" }); } preload() { + this.load.svg('play', 'assets/play.svg', { width: 36, height: 36 }); + this.load.svg('github', 'assets/github.svg', { width: 48, height: 48 }); } create() { - this.github = this.add.text((this.game.config.width as number) * 0.5, 80, "Find me on GitHub", { - fontFamily: 'monospace', - fontSize: 16, - color: '#cccccc', - align: 'center' - }); + const start = function (): void { + this.scene.start("SceneMain"); + }; + + let playButton = new Button(this, 0, 0, "play", "play").on('pointerup', start, this); + let githubButton = new Button(this, 0, 0, "github", "github").on('pointerup', this.openExternal(), this); + new ButtonArray(this, (this.game.config.width as number) * 0.5, 300, 64, [playButton, githubButton]); this.title = this.add.text((this.game.config.width as number) * 0.5, 128, "WEIRD GRAVITY SPACE GAME", { fontFamily: 'monospace', @@ -34,10 +39,12 @@ export class SceneMainMenu extends Phaser.Scene { }); this.title.setOrigin(0.5); this.hint.setOrigin(0.5); - this.github.setOrigin(0.5); - this.github.setInteractive(); - this.github.on('pointerup', function () { + this.input.keyboard.on('keydown', start, this); + } + + private openExternal(): Function { + return function () { let url = "https://github.com/olithissen/weirdspacegame"; var s = window.open(url, '_blank'); if (s && s.focus) { @@ -46,15 +53,9 @@ export class SceneMainMenu extends Phaser.Scene { else if (!s) { window.location.href = url; } - }, this); - - const start = function (): void { - this.scene.start("SceneMain"); }; - - this.input.on('pointerdown', start, this); - this.input.keyboard.on('keydown', start, this); } + update() { } } \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index dacebfb..ed1f91c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -26,7 +26,6 @@ const gameConfig: Phaser.Types.Core.GameConfig = { fps: 30, }, }, - scene: [SceneMainMenu, SceneMain, SceneGameOver], parent: 'game', diff --git a/webpack.config.js b/webpack.config.js index a766891..014dee3 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -48,9 +48,9 @@ module.exports = { { from: 'index.html', }, - // { - // from: 'assets/**/*', - // }, + { + from: 'assets/**', + }, ], }), new webpack.DefinePlugin({ diff --git a/webpack.config.prod.js b/webpack.config.prod.js index b8164dc..39bdff8 100644 --- a/webpack.config.prod.js +++ b/webpack.config.prod.js @@ -48,9 +48,9 @@ module.exports = { { from: 'index.html', }, - // { - // from: 'assets/**/*', - // }, + { + from: 'assets/**/*', + }, ], }), new webpack.DefinePlugin({