diff --git a/res/asdf-logo.png b/res/asdf-logo.png new file mode 100644 index 0000000..be7b72b Binary files /dev/null and b/res/asdf-logo.png differ diff --git a/src/index.js b/src/index.js index 7e03c64..091c520 100644 --- a/src/index.js +++ b/src/index.js @@ -8,7 +8,7 @@ const { Game, KeyControls, MouseControls } = asdf; // TODO: Add more screens const - //Logo = require(__dirname + "/../src/screens/logo.js"), + LogoScreen = require(__dirname + "/../src/screens/logo.js"), //Title = require(__dirname + "/../src/screens/title.js"), GameScreen = require(__dirname + "/../src/screens/game.js") //Gameover = require(__dirname + "/../src/screens/gameover.js") @@ -30,15 +30,19 @@ const controls = { // game.scene = new Title(game, keys, newGame, tutorial, remote.app.quit); // } -function gameOver() { - //game.scene = new Gameover(game, keys, titleScreen); -} - function newGame() { game.scene = new GameScreen(game, controls, gameOver); } -newGame(); +function logoScreen() { + game.scene = new LogoScreen(newGame); +} + +function gameOver() { + //game.scene = new Gameover(game, keys, titleScreen); +} + +logoScreen(); game.run(() => { diff --git a/src/screens/game.js b/src/screens/game.js index c37322e..5c2e586 100644 --- a/src/screens/game.js +++ b/src/screens/game.js @@ -26,7 +26,7 @@ class GameScreen extends Container { this.players = {}; // Connect to TanksJS-Server instance - this.socket = io("http://arnweb.nl:3000"); + this.socket = io("http://127.0.0.1:3000"); this.socket.on("identify", () => { this.socket.emit("identification", { name: "Arn", diff --git a/src/screens/logo.js b/src/screens/logo.js new file mode 100644 index 0000000..72c56a3 --- /dev/null +++ b/src/screens/logo.js @@ -0,0 +1,36 @@ +const { Container, Texture, Sprite, Rect } = require("asdf-games"); + +class LogoScreen extends Container { + constructor(onDone) { + super(); + this.onDone = onDone; + // Timer variable + this.period = 0; + // Alpha control variable + this.alpha = 1; + + // Asdf logo in the center of the screen. + const logo = new Sprite(new Texture(__dirname + "/../../res/asdf-logo.png")); + logo.pos = { x: (740 - 412) / 2, y: (480 - 140) / 2 }; + this.add(logo); + + // Overlay to control the fade + const overlay = new Rect(740, 480, { fill: "rgba(0,0,0,1)" }); + this.add(overlay); + } + + update(dt) { + // Update the overlay's alpha. + this.children[1].style.fill = `rgba(0,0,0,${this.alpha})`; + + // If the period is below 2, fade in (alpha <= 0 is fully visible) + // else fade out. + this.alpha += this.period >= 2 ? 2 * dt : -dt; + + // Timer for when the next screen needs to start. + this.period += dt; + if (this.period >= 3) this.onDone(); + } +} + +module.exports = LogoScreen; \ No newline at end of file