diff --git a/front/public/resources/tilesets/floor_tiles.png b/front/public/resources/tilesets/floor_tiles.png new file mode 100644 index 00000000..0cdc7fde Binary files /dev/null and b/front/public/resources/tilesets/floor_tiles.png differ diff --git a/front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts b/front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts index 828e03ec..f35a7aea 100644 --- a/front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts +++ b/front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts @@ -27,7 +27,8 @@ export interface CustomWokaPreviewerConfig { } export class CustomWokaPreviewer extends Phaser.GameObjects.Container { - private background: Phaser.GameObjects.Graphics; + private background: Phaser.GameObjects.Image; + private frame: Phaser.GameObjects.Graphics; private sprites: Record; private animationDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down; @@ -53,13 +54,15 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container { [CustomWokaBodyPart.Hat]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, "").setVisible(false), }; - this.background = this.scene.add.graphics(); - this.drawBackground(); + this.background = this.scene.add.image(0, 0, "floorTexture"); + this.frame = this.scene.add.graphics(); + this.drawFrame(); this.setSize(this.SIZE, this.SIZE); this.setInteractive({ cursor: "pointer" }); this.add([ this.background, + this.frame, this.sprites.Body, this.sprites.Eyes, this.sprites.Hair, @@ -118,13 +121,10 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container { }); } - private drawBackground(): void { - this.background.clear(); - this.background.fillStyle(0xffffff); - this.background.lineStyle(this.config.borderThickness, 0xadafbc); - - this.background.fillRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE); - this.background.strokeRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE); + private drawFrame(): void { + this.frame.clear(); + this.frame.lineStyle(this.config.borderThickness, 0xadafbc); + this.frame.strokeRect(-this.SIZE / 2, -this.SIZE / 2, this.SIZE, this.SIZE); } private animate(): void { diff --git a/front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts b/front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts index 3db2962e..9aee98f5 100644 --- a/front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts +++ b/front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts @@ -19,7 +19,8 @@ export enum WokaBodyPartSlotEvent { } export class WokaBodyPartSlot extends GridItem { - private background: Phaser.GameObjects.Graphics; + private background: Phaser.GameObjects.Image; + private frame: Phaser.GameObjects.Graphics; private categoryImage?: Phaser.GameObjects.Image; private bodyImage: Phaser.GameObjects.Image; private image: Phaser.GameObjects.Image; @@ -37,9 +38,10 @@ export class WokaBodyPartSlot extends GridItem { this.selected = this.config.selected ?? false; - this.background = this.scene.add.graphics(); - this.drawBackground(); - this.add(this.background); + this.background = this.background = this.scene.add.image(0, 0, "floorTexture"); + this.frame = this.scene.add.graphics(); + this.drawFrame(); + this.add([this.background, this.frame]); if (this.config.categoryImageKey) { this.categoryImage = this.scene.add @@ -115,21 +117,19 @@ export class WokaBodyPartSlot extends GridItem { }); } - private drawBackground(): void { - this.background.clear(); - this.background.fillStyle(0xffffff); - this.background.lineStyle( + private drawFrame(): void { + this.frame.clear(); + this.frame.lineStyle( this.config.borderThickness, this.selected ? this.config.borderSelectedColor : this.config.borderColor ); const size = WokaBodyPartSlot.SIZE; - this.background.fillRect(-size / 2, -size / 2, size, size); - this.background.strokeRect(-size / 2, -size / 2, size, size); + this.frame.strokeRect(-size / 2, -size / 2, size, size); } private updateSelected(): void { - this.drawBackground(); + this.drawFrame(); } } diff --git a/front/src/Phaser/Helpers/TexturesHelper.ts b/front/src/Phaser/Helpers/TexturesHelper.ts index ee1b1082..6c0f1aab 100644 --- a/front/src/Phaser/Helpers/TexturesHelper.ts +++ b/front/src/Phaser/Helpers/TexturesHelper.ts @@ -32,6 +32,30 @@ export class TexturesHelper { } } + public static createFloorRectangleTexture( + scene: Phaser.Scene, + newTextureKey: string, + width: number, + height: number, + sourceTextureKey: string, + sourceTextureFrame?: number | string, + sourceTextureWidth: number = 32, + sourceTextureHeight: number = 32 + ): void { + const rt = scene.make.renderTexture({ x: 0, y: 0, width, height }, false); + const widthTiles = Math.ceil(width / sourceTextureWidth); + const heightTiles = Math.ceil(height / sourceTextureHeight); + + for (let x = 0; x < widthTiles; x += 1) { + for (let y = 0; y < heightTiles; y += 1) { + rt.drawFrame(sourceTextureKey, sourceTextureFrame, x * 32, y * 32); + } + } + + rt.saveTexture(newTextureKey); + rt.destroy(); + } + public static createRectangleTexture( scene: Phaser.Scene, textureKey: string, diff --git a/front/src/Phaser/Login/CustomizeScene.ts b/front/src/Phaser/Login/CustomizeScene.ts index e48ce89c..c8b89e11 100644 --- a/front/src/Phaser/Login/CustomizeScene.ts +++ b/front/src/Phaser/Login/CustomizeScene.ts @@ -32,8 +32,6 @@ export const CustomizeSceneName = "CustomizeScene"; export class CustomizeScene extends AbstractCharacterScene { private customWokaPreviewer!: CustomWokaPreviewer; - private bodyPartsDraggableGridBackground!: Phaser.GameObjects.Graphics; - private bodyPartsDraggableGridForeground!: Phaser.GameObjects.Graphics; private bodyPartsDraggableGridLeftShadow!: Phaser.GameObjects.Image; private bodyPartsDraggableGridRightShadow!: Phaser.GameObjects.Image; private bodyPartsDraggableGrid!: DraggableGrid; @@ -69,8 +67,9 @@ export class CustomizeScene extends AbstractCharacterScene { this.load.image("iconHair", "/resources/icons/icon_hair.png"); this.load.image("iconEyes", "/resources/icons/icon_eyes.png"); this.load.image("iconBody", "/resources/icons/icon_body.png"); + this.load.spritesheet("floorTiles", "/resources/tilesets/floor_tiles.png", { frameWidth: 32, frameHeight: 32 }); - TexturesHelper.createRectangleTexture(this, "gridEdgeShadow", 200, 115, 0x000000); + TexturesHelper.createRectangleTexture(this, "gridEdgeShadow", this.cameras.main.width * 0.2, 115, 0x000000); const wokaMetadataKey = "woka-list" + gameManager.currentStartedRoom.href; this.cache.json.remove(wokaMetadataKey); @@ -99,6 +98,7 @@ export class CustomizeScene extends AbstractCharacterScene { } public create(): void { + TexturesHelper.createFloorRectangleTexture(this, "floorTexture", 50, 50, "floorTiles", 0); this.customWokaPreviewer = new CustomWokaPreviewer( this, 0, @@ -106,18 +106,6 @@ export class CustomizeScene extends AbstractCharacterScene { this.getCustomWokaPreviewerConfig() ).setDisplaySize(200, 200); - this.bodyPartsDraggableGridBackground = this.add.graphics(); - - const gridBackgroundWidth = 500; - const gridBackgroundHeight = 170; - this.bodyPartsDraggableGridBackground.fillStyle(0xf9f9f9); - this.bodyPartsDraggableGridBackground.fillRect( - -gridBackgroundWidth / 2, - -gridBackgroundHeight / 2, - gridBackgroundWidth, - gridBackgroundHeight - ); - this.bodyPartsDraggableGrid = new DraggableGrid(this, { position: { x: 0, y: 0 }, maskPosition: { x: 0, y: 0 }, @@ -134,7 +122,6 @@ export class CustomizeScene extends AbstractCharacterScene { showDraggableSpace: false, }, }); - this.bodyPartsDraggableGridForeground = this.add.graphics(); this.bodyPartsDraggableGridLeftShadow = this.add .image(0, this.cameras.main.worldView.y + this.cameras.main.height, "gridEdgeShadow") @@ -231,32 +218,6 @@ export class CustomizeScene extends AbstractCharacterScene { this.scene.run(SelectCharacterSceneName); } - private drawGridBackground(gridPosition: { x: number; y: number }): void { - const gridBackgroundWidth = innerWidth / waScaleManager.getActualZoom(); - const gridBackgroundHeight = 115; - this.bodyPartsDraggableGridBackground.clear(); - this.bodyPartsDraggableGridBackground.fillStyle(0xf9f9f9); - this.bodyPartsDraggableGridBackground.fillRect( - gridPosition.x - gridBackgroundWidth / 2, - gridPosition.y - gridBackgroundHeight / 2, - gridBackgroundWidth, - gridBackgroundHeight - ); - } - - private drawGridForeground(gridPosition: { x: number; y: number }): void { - const gridBackgroundWidth = (innerWidth + 10) / waScaleManager.getActualZoom(); - const gridBackgroundHeight = 115; - this.bodyPartsDraggableGridForeground.clear(); - this.bodyPartsDraggableGridForeground.lineStyle(4, 0xadafbc); - this.bodyPartsDraggableGridForeground.strokeRect( - gridPosition.x - gridBackgroundWidth / 2, - gridPosition.y - gridBackgroundHeight / 2, - gridBackgroundWidth, - gridBackgroundHeight - ); - } - private initializeRandomizeButton(): void { this.randomizeButton = new Button(this, 50, 50, { width: 95, @@ -381,7 +342,7 @@ export class CustomizeScene extends AbstractCharacterScene { const gridWidth = innerWidth / waScaleManager.getActualZoom(); const gridPos = { x: this.cameras.main.worldView.x + this.cameras.main.width / 2, - y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5, + y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5 - 5, }; this.bodyPartsDraggableGridLeftShadow.setPosition(0, this.cameras.main.worldView.y + this.cameras.main.height); @@ -390,8 +351,6 @@ export class CustomizeScene extends AbstractCharacterScene { this.cameras.main.worldView.y + this.cameras.main.height ); - this.drawGridBackground(gridPos); - this.drawGridForeground(gridPos); try { this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize( gridPos, diff --git a/front/src/Phaser/Login/EntryScene.ts b/front/src/Phaser/Login/EntryScene.ts index 75846bf7..2610023f 100644 --- a/front/src/Phaser/Login/EntryScene.ts +++ b/front/src/Phaser/Login/EntryScene.ts @@ -9,6 +9,7 @@ import { get } from "svelte/store"; import { localeDetector } from "../../i18n/locales"; import { PlayerTextures } from "../Entity/PlayerTextures"; import { PUSHER_URL } from "../../Enum/EnvironmentVariable"; +import { CustomizeSceneName } from "./CustomizeScene"; export const EntrySceneName = "EntryScene"; @@ -46,7 +47,8 @@ export class EntryScene extends Scene { // Let's rescale before starting the game // We can do it at this stage. waScaleManager.applyNewSize(); - this.scene.start(nextSceneName); + // this.scene.start(nextSceneName); + this.scene.start(CustomizeSceneName); }) .catch((err) => { const $LL = get(LL);