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

entirely different approach to layout

Browse Source
This commit is contained in:
Piotr 'pwh' Hanusiak
2022-03-16 13:25:39 +01:00
parent 43bac6c5cf
commit fb020e22c7
4 changed files with 157 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts
+17 -34
View File
@@ -10,12 +10,9 @@ export enum CustomWokaBodyPart {
}
export interface CustomWokaPreviewerConfig {
width: number;
height: number;
color: number;
borderThickness: number;
borderColor: number;
bodyPartsScaleModifier: number;
bodyPartsOffsetX: number;
}
@@ -28,30 +25,20 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
private config: CustomWokaPreviewerConfig;
public readonly SIZE: number = 50;
constructor(scene: Phaser.Scene, x: number, y: number, config: CustomWokaPreviewerConfig) {
super(scene, x, y);
this.config = config;
this.sprites = {
[CustomWokaBodyPart.Accessory]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Body]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Clothes]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Eyes]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Hair]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Hat]: this.scene.add
.sprite(this.config.bodyPartsOffsetX, 0, "")
.setScale(this.config.bodyPartsScaleModifier),
[CustomWokaBodyPart.Accessory]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
[CustomWokaBodyPart.Body]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
[CustomWokaBodyPart.Clothes]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
[CustomWokaBodyPart.Eyes]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
[CustomWokaBodyPart.Hair]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
[CustomWokaBodyPart.Hat]: this.scene.add.sprite(this.config.bodyPartsOffsetX, 0, ""),
};
this.updateSprite("accessory1", CustomWokaBodyPart.Accessory);
@@ -61,8 +48,9 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
this.updateSprite("hair3", CustomWokaBodyPart.Hair);
this.updateSprite("hat2", CustomWokaBodyPart.Hat);
this.background = this.createBackground();
this.setSize(this.config.width, this.config.height);
this.background = this.scene.add.graphics();
this.drawBackground();
this.setSize(this.SIZE, this.SIZE);
this.add([
this.background,
@@ -86,18 +74,13 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
this.moving = moving;
}
private createBackground(): Phaser.GameObjects.Graphics {
const background = this.scene.add.graphics();
background.fillStyle(0xffffff);
background.lineStyle(this.config.borderThickness, 0xadafbc);
private drawBackground(): void {
this.background.clear();
this.background.fillStyle(0xffffff);
this.background.lineStyle(this.config.borderThickness, 0xadafbc);
const width = this.config.width;
const height = this.config.height;
background.fillRect(-width / 2, -height / 2, width, height);
background.strokeRect(-width / 2, -height / 2, width, height);
return background;
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 animate(): void {
front/src/Phaser/Components/CustomizeWoka/WokaBodyPartSlot.ts
+9 -8
View File
@@ -2,8 +2,6 @@ import { GridItem } from "@home-based-studio/phaser3-utils";
import { GridItemEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/GridItem";
export interface WokaBodyPartSlotConfig {
width: number;
height: number;
color: number;
borderThickness: number;
borderColor: number;
@@ -24,6 +22,8 @@ export class WokaBodyPartSlot extends GridItem {
private selected: boolean;
public readonly SIZE: number = 50;
constructor(scene: Phaser.Scene, x: number, y: number, config: WokaBodyPartSlotConfig) {
super(scene, undefined, { x, y });
@@ -34,19 +34,20 @@ export class WokaBodyPartSlot extends GridItem {
this.selected = this.config.selected ?? false;
this.background = this.scene.add
.rectangle(0, 0, this.config.width, this.config.height, this.config.color)
.rectangle(0, 0, this.SIZE, this.SIZE, this.config.color)
.setStrokeStyle(this.config.borderThickness, this.config.borderColor);
this.bodyImage = this.scene.add
.image(offsetX, offsetY, config.bodyImageKey ?? `body${Math.floor(Math.random() * 33) + 1}`)
.setScale(2);
this.bodyImage = this.scene.add.image(
offsetX,
offsetY,
config.bodyImageKey ?? `body${Math.floor(Math.random() * 33) + 1}`
);
this.image = this.scene.add
.image(offsetX, offsetY, config.imageKey ?? "")
.setScale(2)
.setVisible(config.imageKey !== undefined);
this.setSize(this.config.width + this.config.borderThickness, this.config.height + this.config.borderThickness);
this.setSize(this.SIZE + this.config.borderThickness, this.SIZE + this.config.borderThickness);
this.add([this.background, this.bodyImage, this.image]);