From 55767f2c78602382302d2b0970b43788ebda61bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 7 Jul 2020 18:22:10 +0200 Subject: [PATCH 1/2] Fixing image tileset key If 2 maps share the same tileset name (even if they use 2 different URLs for the tileset), the tileset image will be reused wrongly. This commit fixes the tileset key to make it equal to the image URL. --- front/src/Phaser/Game/GameScene.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index cbf5ec26..bb255a6b 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -229,7 +229,7 @@ export class GameScene extends Phaser.Scene { return; } //TODO strategy to add access token - this.load.image(tileset.name, `${url}/${tileset.image}`); + this.load.image(`${url}/${tileset.image}`, `${url}/${tileset.image}`); }) } @@ -246,8 +246,9 @@ export class GameScene extends Phaser.Scene { create(): void { //initalise map this.Map = this.add.tilemap(this.MapKey); + const mapDirUrl = this.MapUrlFile.substr(0, this.MapUrlFile.lastIndexOf('/')); this.mapFile.tilesets.forEach((tileset: ITiledTileSet) => { - this.Terrains.push(this.Map.addTilesetImage(tileset.name, tileset.name, tileset.tilewidth, tileset.tileheight, tileset.margin, tileset.spacing/*, tileset.firstgid*/)); + this.Terrains.push(this.Map.addTilesetImage(tileset.name, `${mapDirUrl}/${tileset.image}`, tileset.tilewidth, tileset.tileheight, tileset.margin, tileset.spacing/*, tileset.firstgid*/)); }); //permit to set bound collision From 68794180988c1f022eb1134047e57d269484cee4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20N=C3=A9grier?= Date: Tue, 7 Jul 2020 22:52:22 +0200 Subject: [PATCH 2/2] Adding a 404 page when resources loading fails --- front/src/Phaser/Game/GameScene.ts | 7 ++ .../src/Phaser/Reconnecting/FourOFourScene.ts | 66 +++++++++++++++++++ front/src/index.ts | 3 +- 3 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 front/src/Phaser/Reconnecting/FourOFourScene.ts diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index bb255a6b..a46672ee 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -26,6 +26,8 @@ import GameObject = Phaser.GameObjects.GameObject; import { Queue } from 'queue-typescript'; import {SimplePeer} from "../../WebRtc/SimplePeer"; import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene"; +import FILE_LOAD_ERROR = Phaser.Loader.Events.FILE_LOAD_ERROR; +import {FourOFourSceneName} from "../Reconnecting/FourOFourScene"; export enum Textures { @@ -130,6 +132,11 @@ export class GameScene extends Phaser.Scene { //hook preload scene preload(): void { + this.load.on(FILE_LOAD_ERROR, (file: {src: string}) => { + this.scene.start(FourOFourSceneName, { + file: file.src + }); + }); this.load.on('filecomplete-tilemapJSON-'+this.MapKey, (key: string, type: string, data: unknown) => { this.onMapLoad(data); }); diff --git a/front/src/Phaser/Reconnecting/FourOFourScene.ts b/front/src/Phaser/Reconnecting/FourOFourScene.ts new file mode 100644 index 00000000..4fe4ff24 --- /dev/null +++ b/front/src/Phaser/Reconnecting/FourOFourScene.ts @@ -0,0 +1,66 @@ +import {TextField} from "../Components/TextField"; +import Image = Phaser.GameObjects.Image; +import Sprite = Phaser.GameObjects.Sprite; +import {SelectCharacterSceneInitDataInterface} from "../Login/SelectCharacterScene"; +import Text = Phaser.GameObjects.Text; + +export const FourOFourSceneName = "FourOFourScene"; +enum Textures { + icon = "icon", + mainFont = "main_font" +} + +export class FourOFourScene extends Phaser.Scene { + private mapNotFoundField: TextField; + private couldNotFindField: TextField; + private fileNameField: Text; + private logo: Image; + private cat: Sprite; + private file: string; + + constructor() { + super({ + key: FourOFourSceneName + }); + } + + init({ file }: { file: string }) { + this.file = file; + } + + preload() { + this.load.image(Textures.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(Textures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml'); + this.load.spritesheet( + 'cat', + 'resources/characters/pipoya/Cat 01-1.png', + {frameWidth: 32, frameHeight: 32} + ); + } + + create() { + this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, Textures.icon); + this.add.existing(this.logo); + + this.mapNotFoundField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2, "404 - File not found"); + this.mapNotFoundField.setOrigin(0.5, 0.5).setCenterAlign(); + + this.couldNotFindField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height / 2 + 24, "Could not load file"); + this.couldNotFindField.setOrigin(0.5, 0.5).setCenterAlign(); + + this.fileNameField = this.add.text(this.game.renderer.width / 2, this.game.renderer.height / 2 + 38, this.file, { fontFamily: 'Georgia, "Goudy Bookletter 1911", Times, serif', fontSize: '10px' }); + this.fileNameField.setOrigin(0.5, 0.5); + + this.cat = this.physics.add.sprite(this.game.renderer.width / 2, this.game.renderer.height / 2 - 32, 'cat', 6); + this.cat.flipY=true; + /*this.anims.create({ + key: 'right', + frames: this.anims.generateFrameNumbers('cat', { start: 6, end: 8 }), + frameRate: 10, + repeat: -1 + }); + cat.play('right');*/ + + } +} diff --git a/front/src/index.ts b/front/src/index.ts index 15c2e0e8..eb63b6d0 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -7,13 +7,14 @@ import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene"; import {gameManager} from "./Phaser/Game/GameManager"; import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene"; import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene"; +import {FourOFourScene} from "./Phaser/Reconnecting/FourOFourScene"; const config: GameConfig = { title: "Office game", width: window.innerWidth / RESOLUTION, height: window.innerHeight / RESOLUTION, parent: "game", - scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene], + scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene], zoom: RESOLUTION, physics: { default: "arcade",