_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Changed font from text

Browse Source 
Input name can only be 4 characters long
Passing name to next scene
This commit is contained in:
David Négrier 2020-05-01 23:19:51 +02:00
parent 85f84517f6
commit 42ddd8b858
7 changed files with 141 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
front/dist/resources/fonts/arcade.png vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

83
front/dist/resources/fonts/arcade.xml vendored Normal file
View File

@ -0,0 +1,83 @@
<?xml version="1.0"?>
<font>
<info face="Cosmic Avenger" size="32" bold="0" italic="0" charset="" unicode="1" stretchH="100" smooth="0" aa="1" padding="2,2,2,2" spacing="1,1" outline="0"/>
<common lineHeight="32" base="32" scaleW="512" scaleH="512" pages="1" packed="0" alphaChnl="0" redChnl="4" greenChnl="4" blueChnl="4"/>
<pages>
<page id="0" file="arcade_0.png" />
</pages>
<chars count="73">
<char id="32" x="168" y="132" width="7" height="5" xoffset="-3" yoffset="29" xadvance="32" page="0" chnl="15" />
<char id="33" x="25" y="0" width="20" height="36" xoffset="2" yoffset="-2" xadvance="32" page="0" chnl="15" />
<char id="38" x="396" y="99" width="28" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="40" x="495" y="33" width="16" height="32" xoffset="6" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="41" x="495" y="66" width="16" height="32" xoffset="6" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="43" x="178" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="45" x="130" y="132" width="28" height="8" xoffset="-2" yoffset="14" xadvance="32" page="0" chnl="15" />
<char id="46" x="159" y="132" width="8" height="8" xoffset="10" yoffset="14" xadvance="32" page="0" chnl="15" />
<char id="48" x="277" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="49" x="29" y="136" width="20" height="32" xoffset="2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="50" x="343" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="51" x="376" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="52" x="409" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="53" x="442" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="54" x="475" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="55" x="0" y="37" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="56" x="33" y="37" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="57" x="66" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="58" x="121" y="132" width="8" height="20" xoffset="10" yoffset="6" xadvance="32" page="0" chnl="15" />
<char id="61" x="92" y="132" width="28" height="20" xoffset="-2" yoffset="6" xadvance="32" page="0" chnl="15" />
<char id="63" x="0" y="0" width="24" height="36" xoffset="2" yoffset="-2" xadvance="32" page="0" chnl="15" />
<char id="65" x="165" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="66" x="198" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="67" x="231" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="68" x="264" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="69" x="297" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="70" x="330" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="71" x="363" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="72" x="396" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="73" x="50" y="136" width="20" height="32" xoffset="2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="74" x="425" y="99" width="28" height="32" xoffset="2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="75" x="0" y="70" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="76" x="33" y="70" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="77" x="66" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="78" x="99" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="79" x="132" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="80" x="310" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="81" x="198" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="82" x="231" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="83" x="264" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="84" x="454" y="99" width="28" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="85" x="297" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="86" x="330" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="87" x="363" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="88" x="396" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="89" x="429" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="90" x="462" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="97" x="0" y="103" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="98" x="33" y="103" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="99" x="66" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="100" x="99" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="101" x="132" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="102" x="165" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="103" x="198" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="104" x="231" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="105" x="71" y="132" width="20" height="32" xoffset="2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="106" x="0" y="136" width="28" height="32" xoffset="2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="107" x="264" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="108" x="297" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="109" x="330" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="110" x="363" y="99" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="111" x="46" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="112" x="79" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="113" x="165" y="66" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="114" x="112" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="115" x="145" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="116" x="483" y="99" width="28" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="117" x="211" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="118" x="244" y="0" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="119" x="99" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="120" x="132" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="121" x="429" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
<char id="122" x="462" y="33" width="32" height="32" xoffset="-2" yoffset="2" xadvance="32" page="0" chnl="15" />
</chars>
</font>

4
front/src/Phaser/Components/TextField.ts
View File

@ -1,7 +1,7 @@
export class TextField extends Phaser.GameObjects.Text { export class TextField extends Phaser.GameObjects.BitmapText {
constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) { constructor(scene: Phaser.Scene, x: number, y: number, text: string | string[]) {
super(scene, x, y, text, { fontFamily: 'Arial', fontSize: "15px", color: '#ffffff'}); super(scene, x, y, 'main_font', text, 8);
this.scene.add.existing(this) this.scene.add.existing(this)
} }
} }

16
front/src/Phaser/Components/TextInput.ts
View File

@ -1,25 +1,25 @@
export class TextInput extends Phaser.GameObjects.Text { export class TextInput extends Phaser.GameObjects.BitmapText {
private underLineLength = 10; private underLineLength = 10;
private underLine: Phaser.GameObjects.Text; private underLine: Phaser.GameObjects.Text;
constructor(scene: Phaser.Scene, x: number, y: number) { constructor(scene: Phaser.Scene, x: number, y: number, maxLength: number) {
super(scene, x, y, '', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'}); super(scene, x, y, 'main_font', '', 32);
this.scene.add.existing(this); this.scene.add.existing(this);
this.underLine = this.scene.add.text(x, y+1, '__________', { fontFamily: 'Arial', fontSize: "20px", color: '#ffffff'}) this.underLine = this.scene.add.text(x, y+1, '_______', { fontFamily: 'Arial', fontSize: "32px", color: '#ffffff'})
let keySpace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE); let keySpace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
let keyBackspace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.BACKSPACE); let keyBackspace = this.scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.BACKSPACE);
this.scene.input.keyboard.on('keydown', (event: any) => { this.scene.input.keyboard.on('keydown', (event: any) => {
if (event.keyCode === 8 && this.text.length > 0) { if (event.keyCode === 8 && this.text.length > 0) {
this.deleteLetter(); this.deleteLetter();
} else if (event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode < 90)) { } else if ((event.keyCode === 32 || (event.keyCode >= 48 && event.keyCode <= 90)) && this.text.length < maxLength) {
this.addLetter(event.key); this.addLetter(event.key);
} }
}); });
} }
private deleteLetter() { private deleteLetter() {
this.text = this.text.substr(0, this.text.length - 1); this.text = this.text.substr(0, this.text.length - 1);
if (this.underLine.text.length > this.underLineLength) { if (this.underLine.text.length > this.underLineLength) {
@ -40,4 +40,4 @@ export class TextInput extends Phaser.GameObjects.Text {
} }
} }

6
front/src/Phaser/Game/GameScene.ts
View File

@ -5,6 +5,7 @@ import {DEBUG_MODE, RESOLUTION, ROOM, ZOOM_LEVEL} from "../../Enum/EnvironmentVa
import Tile = Phaser.Tilemaps.Tile; import Tile = Phaser.Tilemaps.Tile;
import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap"; import {ITiledMap, ITiledTileSet} from "../Map/ITiledMap";
import {cypressAsserter} from "../../Cypress/CypressAsserter"; import {cypressAsserter} from "../../Cypress/CypressAsserter";
import { GameSceneInitDataInterface } from "./GameSceneInitDataInterface";
export const GameSceneName = "GameScene"; export const GameSceneName = "GameScene";
export enum Textures { export enum Textures {
@ -28,6 +29,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
map: ITiledMap; map: ITiledMap;
startX = (window.innerWidth / 2) / RESOLUTION; startX = (window.innerWidth / 2) / RESOLUTION;
startY = (window.innerHeight / 2) / RESOLUTION; startY = (window.innerHeight / 2) / RESOLUTION;
playerName: string;
constructor() { constructor() {
@ -65,7 +67,9 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{
} }
//hook initialisation //hook initialisation
init(){} init(data: GameSceneInitDataInterface) {
this.playerName = data.name;
}
//hook create scene //hook create scene
create(): void { create(): void {

3
front/src/Phaser/Game/GameSceneInitDataInterface.ts Normal file
View File

@ -0,0 +1,3 @@
export interface GameSceneInitDataInterface {
name: string
}

57
front/src/Phaser/Login/LogincScene.ts
View File

@ -4,19 +4,22 @@ import {TextInput} from "../Components/TextInput";
import {ClickButton} from "../Components/ClickButton"; import {ClickButton} from "../Components/ClickButton";
import {GameSceneName} from "../Game/GameScene"; import {GameSceneName} from "../Game/GameScene";
import Image = Phaser.GameObjects.Image; import Image = Phaser.GameObjects.Image;
import Key = Phaser.Input.Keyboard.Key;
//todo: put this constants in a dedicated file //todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene"; export const LoginSceneName = "LoginScene";
enum LoginTextures { enum LoginTextures {
playButton = "play_button", //playButton = "play_button",
icon = "icon" icon = "icon",
mainFont = "main_font"
} }
export class LogincScene extends Phaser.Scene { export class LogincScene extends Phaser.Scene {
private emailInput: TextInput; private nameInput: TextInput;
private textField: TextField; private textField: TextField;
private playButton: ClickButton; private playButton: ClickButton;
private infoTextField: TextField; private infoTextField: TextField;
private pressReturnField: TextField;
private logo: Image; private logo: Image;
constructor() { constructor() {
@ -26,35 +29,55 @@ export class LogincScene extends Phaser.Scene {
} }
preload() { preload() {
this.load.image(LoginTextures.playButton, "resources/objects/play_button.png"); //this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png"); this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
// Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
} }
create() { create() {
this.textField = new TextField(this, 10, 10, 'Enter your name:'); this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:');
this.emailInput = new TextInput(this, 10, 50); this.textField.setOrigin(0.5).setCenterAlign()
this.nameInput = new TextInput(this, this.game.renderer.width / 2 - 64, 70, 4);
let x = this.game.renderer.width / 2; this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
let y = this.game.renderer.height / 2; this.pressReturnField.setOrigin(0.5).setCenterAlign()
this.playButton = new ClickButton(this, x, y, LoginTextures.playButton, this.login.bind(this));
//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));
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon); this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
this.add.existing(this.logo); this.add.existing(this.logo);
let infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run"; 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); this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText);
this.input.keyboard.on('keyup-ENTER', () => {
let name = this.nameInput.getText();
if (name === '') {
return
};
gameManager.connect(name).then(() => {
this.scene.start(GameSceneName, { name });
});
});
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
if (this.nameInput.getText() == '') {
this.pressReturnField.setVisible(false);
} else {
this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
}
} }
async login() { /*async login() {
let email = this.emailInput.text; let name = this.nameInput.text;
if (!email) return; if (!name) return;
gameManager.connect(email).then(() => { gameManager.connect(name).then(() => {
this.scene.start(GameSceneName); this.scene.start(GameSceneName);
}); });
} }*/
} }