From d0ad5f8299a07af289ee92bccf4ad6a825491c77 Mon Sep 17 00:00:00 2001 From: Piotr 'pwh' Hanusiak Date: Wed, 30 Mar 2022 13:02:02 +0200 Subject: [PATCH] custom background for slots --- .../public/resources/tilesets/floor_tiles.png | Bin 0 -> 19880 bytes .../CustomizeWoka/CustomWokaPreviewer.ts | 20 +++---- .../CustomizeWoka/WokaBodyPartSlot.ts | 22 ++++---- front/src/Phaser/Helpers/TexturesHelper.ts | 24 +++++++++ front/src/Phaser/Login/CustomizeScene.ts | 49 ++---------------- front/src/Phaser/Login/EntryScene.ts | 4 +- 6 files changed, 52 insertions(+), 67 deletions(-) create mode 100644 front/public/resources/tilesets/floor_tiles.png diff --git a/front/public/resources/tilesets/floor_tiles.png b/front/public/resources/tilesets/floor_tiles.png new file mode 100644 index 0000000000000000000000000000000000000000..0cdc7fde031f1dd3dd6f31913a9dee2999956432 GIT binary patch literal 19880 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 Hu0mjfj3HyU literal 0 HcmV?d00001 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);