Adding logo in the bottom right corner and placing help text in function of height
authorDavid Négrier <d.negrier@thecodingmachine.com>
Fri, 1 May 2020 20:23:41 +0000 (22:23 +0200)
committerDavid Négrier <d.negrier@thecodingmachine.com>
Fri, 1 May 2020 20:23:41 +0000 (22:23 +0200)
front/src/Phaser/Components/TextField.ts
front/src/Phaser/Login/LogincScene.ts

index 427a25abe80e07c175d1591b6f3c263a9bd34d68..61a6f0960d1ae123629c31428876c6e309207039 100644 (file)
@@ -1,7 +1,7 @@
 
 export class TextField extends Phaser.GameObjects.Text {
     constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) {
-        super(scene, x, y, text, { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'});
+        super(scene, x, y, text, { fontFamily: 'Arial', fontSize: "15px", color: '#ffffff'});
         this.scene.add.existing(this)
     }
-}
\ No newline at end of file
+}
index 15ead519c4b68b66c47e14ebaf07f3eb9c495916..42d46766f4a40c396def50dde6eec5ac7836630a 100644 (file)
@@ -3,11 +3,13 @@ import {TextField} from "../Components/TextField";
 import {TextInput} from "../Components/TextInput";
 import {ClickButton} from "../Components/ClickButton";
 import {GameSceneName} from "../Game/GameScene";
+import Image = Phaser.GameObjects.Image;
 
 //todo: put this constants in a dedicated file
 export const LoginSceneName = "LoginScene";
 enum LoginTextures {
     playButton = "play_button",
+    icon = "icon"
 }
 
 export class LogincScene extends Phaser.Scene {
@@ -15,6 +17,7 @@ export class LogincScene extends Phaser.Scene {
     private textField: TextField;
     private playButton: ClickButton;
     private infoTextField: TextField;
+    private logo: Image;
 
     constructor() {
         super({
@@ -24,18 +27,23 @@ export class LogincScene extends Phaser.Scene {
 
     preload() {
         this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
+        this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
     }
 
     create() {
-        this.textField = new TextField(this, 10, 10, 'Enter your email:');
+        this.textField = new TextField(this, 10, 10, 'Enter your name:');
         this.emailInput = new TextInput(this, 10, 50);
 
         let x = this.game.renderer.width / 2;
         let y = this.game.renderer.height / 2;
         this.playButton = new ClickButton(this, x, y, LoginTextures.playButton, this.login.bind(this));
 
-        let infoText = "Commandes de base: \n - Z,Q,S,D (ou les flèches de direction) pour bouger\n - SHIFT pour accélerer";
-        this.infoTextField = new TextField(this, 10, 300, infoText);
+        this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
+        this.add.existing(this.logo);
+
+
+        let infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run";
+        this.infoTextField = new TextField(this, 10, this.game.renderer.height - 60, infoText);
     }
 
     update(time: number, delta: number): void {
@@ -49,4 +57,4 @@ export class LogincScene extends Phaser.Scene {
             this.scene.start(GameSceneName);
         });
     }
-}
\ No newline at end of file
+}