_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
Download Patch File Download Diff File Expand all files Collapse all files
front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts
+10 -10
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 {
front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts
+11 -11
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();
}
}