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

custom background for slots

Browse Source
This commit is contained in:
Piotr 'pwh' Hanusiak 2022-03-30 13:02:02 +02:00
parent 4c93060f85
commit d0ad5f8299
6 changed files with 52 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
front/public/resources/tilesets/floor_tiles.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

20
front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts
View File

@ -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<CustomWokaBodyPart, Phaser.GameObjects.Sprite>;
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 {

22
front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts
View File

@ -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();
}
}

24
front/src/Phaser/Helpers/TexturesHelper.ts
View File

@ -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,

49
front/src/Phaser/Login/CustomizeScene.ts
View File

@ -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,

4
front/src/Phaser/Login/EntryScene.ts
View File

@ -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);