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(() => {
 

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",

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;