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

New custom woka scene full clothes (#2023)

Browse Source 
* center grid if possible

* whole outfit for every slot

* switched bodyPart slots into buttons

* change categories and body parts with WSAD / arrow keys

Co-authored-by: Piotr 'pwh' Hanusiak <p.hanusiak@workadventu.re>
This commit is contained in:
Piotr Hanusiak
2022-04-04 13:01:21 +02:00
committed by GitHub
parent d0ad5f8299
commit 32b777b5cf
5 changed files with 398 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/Phaser/Login/CustomizeScene.ts
+236 -120
View File
@@ -27,6 +27,7 @@ import { DraggableGridEvent } from "@home-based-studio/phaser3-utils/lib/utils/g
import { Button } from "../Components/Ui/Button";
import { wokaList } from "../../Messages/JsonMessages/PlayerTextures";
import { TexturesHelper } from "../Helpers/TexturesHelper";
import { IconButton, IconButtonConfig, IconButtonEvent } from "../Components/Ui/IconButton";
export const CustomizeSceneName = "CustomizeScene";
@@ -35,7 +36,7 @@ export class CustomizeScene extends AbstractCharacterScene {
private bodyPartsDraggableGridLeftShadow!: Phaser.GameObjects.Image;
private bodyPartsDraggableGridRightShadow!: Phaser.GameObjects.Image;
private bodyPartsDraggableGrid!: DraggableGrid;
private bodyPartsSlots!: Record<CustomWokaBodyPart, WokaBodyPartSlot>;
private bodyPartsButtons!: Record<CustomWokaBodyPart, IconButton>;
private randomizeButton!: Button;
private finishButton!: Button;
@@ -43,7 +44,6 @@ export class CustomizeScene extends AbstractCharacterScene {
private selectedLayers: number[] = [0, 0, 0, 0, 0, 0];
private layers: BodyResourceDescriptionInterface[][] = [];
private selectedBodyPartType?: CustomWokaBodyPart;
private selectedItemTextureKey?: string;
protected lazyloadingAttempt = true; //permit to update texture loaded after renderer
@@ -98,7 +98,10 @@ export class CustomizeScene extends AbstractCharacterScene {
}
public create(): void {
TexturesHelper.createFloorRectangleTexture(this, "floorTexture", 50, 50, "floorTiles", 0);
TexturesHelper.createFloorRectangleTexture(this, "floorTexture1", 50, 50, "floorTiles", 0);
TexturesHelper.createFloorRectangleTexture(this, "floorTexture2", 50, 50, "floorTiles", 1);
TexturesHelper.createFloorRectangleTexture(this, "floorTexture3", 50, 50, "floorTiles", 2);
TexturesHelper.createFloorRectangleTexture(this, "floorTexture4", 50, 50, "floorTiles", 3);
this.customWokaPreviewer = new CustomWokaPreviewer(
this,
0,
@@ -126,7 +129,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.bodyPartsDraggableGridLeftShadow = this.add
.image(0, this.cameras.main.worldView.y + this.cameras.main.height, "gridEdgeShadow")
.setAlpha(1, 0, 1, 0)
.setOrigin(0, 1);
.setOrigin(0, 0.5);
this.bodyPartsDraggableGridRightShadow = this.add
.image(
@@ -136,38 +139,24 @@ export class CustomizeScene extends AbstractCharacterScene {
)
.setAlpha(1, 0, 1, 0)
.setFlipX(true)
.setOrigin(1, 1);
.setOrigin(1, 0.5);
this.bodyPartsSlots = {
[CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(this, 0, 0, {
...this.getDefaultWokaBodyPartSlotConfig(),
categoryImageKey: "iconHair",
}),
[CustomWokaBodyPart.Body]: new WokaBodyPartSlot(this, 0, 0, {
...this.getDefaultWokaBodyPartSlotConfig(),
categoryImageKey: "iconBody",
}),
[CustomWokaBodyPart.Accessory]: new WokaBodyPartSlot(this, 0, 0, {
...this.getDefaultWokaBodyPartSlotConfig(),
categoryImageKey: "iconAccessory",
}),
[CustomWokaBodyPart.Hat]: new WokaBodyPartSlot(this, 0, 0, {
...this.getDefaultWokaBodyPartSlotConfig(),
categoryImageKey: "iconHat",
}),
[CustomWokaBodyPart.Clothes]: new WokaBodyPartSlot(this, 0, 0, {
...this.getDefaultWokaBodyPartSlotConfig(),
categoryImageKey: "iconClothes",
}),
[CustomWokaBodyPart.Eyes]: new WokaBodyPartSlot(this, 0, 0, {
...this.getDefaultWokaBodyPartSlotConfig(),
categoryImageKey: "iconEyes",
}),
this.bodyPartsButtons = {
[CustomWokaBodyPart.Accessory]: new IconButton(
this,
0,
0,
this.getDefaultIconButtonConfig("iconAccessory")
),
[CustomWokaBodyPart.Body]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconBody")),
[CustomWokaBodyPart.Clothes]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconClothes")),
[CustomWokaBodyPart.Eyes]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconEyes")),
[CustomWokaBodyPart.Hair]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconHair")),
[CustomWokaBodyPart.Hat]: new IconButton(this, 0, 0, this.getDefaultIconButtonConfig("iconHat")),
};
this.selectedBodyPartType = CustomWokaBodyPart.Body;
this.selectedItemTextureKey = this.layers[CustomWokaBodyPartOrder.Body][0].id;
this.bodyPartsSlots.Body.select();
this.bodyPartsButtons.Body.select();
this.initializeRandomizeButton();
this.initializeFinishButton();
@@ -185,10 +174,10 @@ export class CustomizeScene extends AbstractCharacterScene {
public onResize(): void {
this.handleCustomWokaPreviewerOnResize();
this.handleBodyPartSlotsOnResize();
this.handleBodyPartsDraggableGridOnResize();
this.handleBodyPartButtonsOnResize();
this.handleRandomizeButtonOnResize();
this.handleFinishButtonOnResize();
this.handleBodyPartsDraggableGridOnResize();
}
public nextSceneToCamera() {
@@ -218,6 +207,34 @@ export class CustomizeScene extends AbstractCharacterScene {
this.scene.run(SelectCharacterSceneName);
}
private getDefaultIconButtonConfig(iconTextureKey: string): IconButtonConfig {
return {
iconTextureKey,
width: 25,
height: 25,
idle: {
color: 0xffffff,
borderThickness: 3,
borderColor: 0xe7e7e7,
},
hover: {
color: 0xe7e7e7,
borderThickness: 3,
borderColor: 0xadafbc,
},
pressed: {
color: 0xadafbc,
borderThickness: 3,
borderColor: 0xadafbc,
},
selected: {
color: 0xadafbc,
borderThickness: 3,
borderColor: 0x209cee,
},
};
}
private initializeRandomizeButton(): void {
this.randomizeButton = new Button(this, 50, 50, {
width: 95,
@@ -275,80 +292,101 @@ export class CustomizeScene extends AbstractCharacterScene {
for (const layerItem of this.selectedLayers) {
const bodyPart = CustomWokaBodyPart[CustomWokaBodyPartOrder[i] as CustomWokaBodyPart];
this.customWokaPreviewer.updateSprite(this.layers[i][layerItem].id, bodyPart);
this.bodyPartsSlots[bodyPart].setTextures(
this.layers[CustomWokaBodyPartOrder.Body][this.selectedLayers[CustomWokaBodyPartOrder.Body]].id,
this.layers[i][layerItem].id
);
i += 1;
}
}
private getCurrentlySelectedWokaTexturesRecord(): Record<CustomWokaBodyPart, string> {
return {
[CustomWokaBodyPart.Accessory]:
this.layers[CustomWokaBodyPartOrder.Accessory][this.selectedLayers[CustomWokaBodyPartOrder.Accessory]]
.id,
[CustomWokaBodyPart.Body]:
this.layers[CustomWokaBodyPartOrder.Body][this.selectedLayers[CustomWokaBodyPartOrder.Body]].id,
[CustomWokaBodyPart.Clothes]:
this.layers[CustomWokaBodyPartOrder.Clothes][this.selectedLayers[CustomWokaBodyPartOrder.Clothes]].id,
[CustomWokaBodyPart.Eyes]:
this.layers[CustomWokaBodyPartOrder.Eyes][this.selectedLayers[CustomWokaBodyPartOrder.Eyes]].id,
[CustomWokaBodyPart.Hair]:
this.layers[CustomWokaBodyPartOrder.Hair][this.selectedLayers[CustomWokaBodyPartOrder.Hair]].id,
[CustomWokaBodyPart.Hat]:
this.layers[CustomWokaBodyPartOrder.Hat][this.selectedLayers[CustomWokaBodyPartOrder.Hat]].id,
};
}
private handleCustomWokaPreviewerOnResize(): void {
this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
this.customWokaPreviewer.y = this.customWokaPreviewer.displayHeight * 0.5 + 10;
}
private handleBodyPartSlotsOnResize(): void {
private handleBodyPartButtonsOnResize(): void {
const ratio = innerHeight / innerWidth;
const slotDimension = 100;
const slotDimension = 50;
for (const part in this.bodyPartsSlots) {
this.bodyPartsSlots[part as CustomWokaBodyPart].setDisplaySize(slotDimension, slotDimension);
for (const part in this.bodyPartsButtons) {
this.bodyPartsButtons[part as CustomWokaBodyPart].setDisplaySize(slotDimension, slotDimension);
}
const slotSize = this.bodyPartsSlots.Accessory.displayHeight;
const slotSize = this.bodyPartsButtons.Accessory.displayHeight;
if (ratio > 1.6) {
const middle = Math.floor(this.customWokaPreviewer.x);
const left = Math.floor(middle - slotSize - 10);
const right = Math.floor(middle + slotSize + 10);
const left = Math.floor(middle - slotSize - 23);
const right = Math.floor(middle + slotSize + 23);
const top = Math.floor(
this.customWokaPreviewer.y + this.customWokaPreviewer.displayHeight * 0.5 + slotSize * 1.5 + 9
this.customWokaPreviewer.y + this.customWokaPreviewer.displayHeight * 0.5 + slotSize * 1.5 + 30
);
const bottom = Math.floor(top + slotSize + 10);
const bottom = Math.floor(top + slotSize + 23);
this.bodyPartsSlots.Body.setPosition(left, top);
this.bodyPartsSlots.Eyes.setPosition(middle, top);
this.bodyPartsSlots.Hair.setPosition(right, top);
this.bodyPartsSlots.Clothes.setPosition(left, bottom);
this.bodyPartsSlots.Hat.setPosition(middle, bottom);
this.bodyPartsSlots.Accessory.setPosition(right, bottom);
this.bodyPartsButtons.Body.setPosition(left, top);
this.bodyPartsButtons.Eyes.setPosition(middle, top);
this.bodyPartsButtons.Hair.setPosition(right, top);
this.bodyPartsButtons.Clothes.setPosition(left, bottom);
this.bodyPartsButtons.Hat.setPosition(middle, bottom);
this.bodyPartsButtons.Accessory.setPosition(right, bottom);
return;
}
const left = Math.floor(
this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5 - slotSize * 0.5 - 10
this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5 - slotSize * 0.5 - 24
);
const leftEdge = Math.floor(left - slotSize - 10);
const right = Math.floor(
this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5 + slotSize * 0.5 + 10
this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5 + slotSize * 0.5 + 24
);
const rightEdge = Math.floor(right + slotSize + 10);
const top = Math.floor(0 + slotSize * 0.5 + 9);
const middle = Math.floor(top + slotSize + 10);
const bottom = Math.floor(middle + slotSize + 10);
const top = Math.floor(0 + slotSize * 0.5 + 11);
const middle = Math.floor(top + slotSize + 24);
const bottom = Math.floor(middle + slotSize + 24);
this.bodyPartsSlots.Body.setPosition(left, top);
this.bodyPartsSlots.Eyes.setPosition(left, middle);
this.bodyPartsSlots.Hair.setPosition(ratio < 0.6 ? leftEdge : left, ratio < 0.6 ? middle : bottom);
this.bodyPartsSlots.Clothes.setPosition(right, top);
this.bodyPartsSlots.Hat.setPosition(right, middle);
this.bodyPartsSlots.Accessory.setPosition(ratio < 0.6 ? rightEdge : right, ratio < 0.6 ? middle : bottom);
this.bodyPartsButtons.Body.setPosition(left, top);
this.bodyPartsButtons.Eyes.setPosition(left, middle);
this.bodyPartsButtons.Hair.setPosition(left, bottom);
this.bodyPartsButtons.Clothes.setPosition(right, top);
this.bodyPartsButtons.Hat.setPosition(right, middle);
this.bodyPartsButtons.Accessory.setPosition(right, bottom);
}
private handleBodyPartsDraggableGridOnResize(): void {
const gridHeight = 110;
const gridWidth = innerWidth / waScaleManager.getActualZoom();
const gridTopMargin = Math.max(
this.finishButton.y + this.finishButton.displayHeight * 0.5,
this.bodyPartsButtons.Hair.y + this.bodyPartsButtons.Hair.displayHeight * 0.5
);
const gridBottomMargin = this.cameras.main.worldView.y + this.cameras.main.height;
const yPos = gridTopMargin + (gridBottomMargin - gridTopMargin) * 0.5;
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 - 5,
y: yPos,
};
this.bodyPartsDraggableGridLeftShadow.setPosition(0, this.cameras.main.worldView.y + this.cameras.main.height);
this.bodyPartsDraggableGridLeftShadow.setPosition(0, yPos);
this.bodyPartsDraggableGridRightShadow.setPosition(
this.cameras.main.worldView.x + this.cameras.main.width,
this.cameras.main.worldView.y + this.cameras.main.height
yPos
);
try {
@@ -399,34 +437,33 @@ export class CustomizeScene extends AbstractCharacterScene {
};
}
private getDefaultWokaBodyPartSlotConfig(): WokaBodyPartSlotConfig {
private getWokaBodyPartSlotConfig(bodyPart?: CustomWokaBodyPart, newTextureKey?: string): WokaBodyPartSlotConfig {
const textures = this.getCurrentlySelectedWokaTexturesRecord();
if (bodyPart && newTextureKey) {
textures[bodyPart] = newTextureKey;
}
return {
color: 0xffffff,
borderThickness: 1,
borderColor: 0xadafbc,
borderSelectedColor: 0x209cee,
textureKeys: textures,
offsetX: -4,
offsetY: 2,
};
}
private bindEventHandlers(): void {
this.bindKeyboardEventHandlers();
this.events.addListener("wake", () => {
waScaleManager.saveZoom();
waScaleManager.zoomModifier = isMediaBreakpointUp("md") ? 3 : 1;
});
this.input.keyboard.on("keyup-ENTER", () => {
this.nextSceneToCamera();
});
this.input.keyboard.on("keyup-BACKSPACE", () => {
this.backToPreviousScene();
});
this.randomizeButton.on(Phaser.Input.Events.POINTER_UP, () => {
this.randomizeOutfit();
this.clearGrid();
this.deselectAllSlots();
this.deselectAllButtons();
this.refreshPlayerCurrentOutfit();
});
@@ -435,52 +472,136 @@ export class CustomizeScene extends AbstractCharacterScene {
});
for (const bodyPart in CustomWokaBodyPart) {
const slot = this.bodyPartsSlots[bodyPart as CustomWokaBodyPart];
slot.on(WokaBodyPartSlotEvent.Clicked, (selected: boolean) => {
const button = this.bodyPartsButtons[bodyPart as CustomWokaBodyPart];
button.on(IconButtonEvent.Clicked, (selected: boolean) => {
if (!selected) {
this.selectedBodyPartType = bodyPart as CustomWokaBodyPart;
this.selectedItemTextureKey = slot.getContentData().key ?? slot.getContentData().bodyImageKey;
this.deselectAllSlots();
slot.select(true);
this.populateGrid();
if (!this.selectedItemTextureKey) {
return;
}
const selectedGridItem = this.selectGridItem();
if (!selectedGridItem) {
return;
}
this.bodyPartsDraggableGrid.moveContentToBeginning();
this.centerGridOnItem(selectedGridItem);
} else {
this.selectedBodyPartType = undefined;
slot.select(false);
this.clearGrid();
this.selectBodyPartType(bodyPart as CustomWokaBodyPart);
}
});
}
this.bodyPartsDraggableGrid.on(DraggableGridEvent.ItemClicked, (item: WokaBodyPartSlot) => {
void this.bodyPartsDraggableGrid.centerOnItem(this.bodyPartsDraggableGrid.getAllItems().indexOf(item), 500);
this.bodyPartsDraggableGrid.getAllItems().forEach((slot) => (slot as WokaBodyPartSlot).select(false));
this.changeOutfitPart(Number(item.getId()));
this.refreshPlayerCurrentOutfit();
this.deselectAllSlots();
item.select(true);
this.setNewBodyPart(Number(item.getId()));
});
}
private selectGridItem(): WokaBodyPartSlot | undefined {
const items = this.bodyPartsDraggableGrid.getAllItems() as WokaBodyPartSlot[];
let item: WokaBodyPartSlot | undefined;
if (this.selectedBodyPartType === CustomWokaBodyPart.Body) {
item = items.find((item) => item.getContentData().bodyImageKey === this.selectedItemTextureKey);
} else {
item = items.find((item) => item.getContentData().key === this.selectedItemTextureKey);
private selectBodyPartType(bodyPart: CustomWokaBodyPart): void {
this.selectedBodyPartType = bodyPart;
this.deselectAllButtons();
const button = this.bodyPartsButtons[bodyPart];
button.select(true);
this.populateGrid();
const selectedGridItem = this.selectGridItem();
if (!selectedGridItem) {
return;
}
this.bodyPartsDraggableGrid.moveContentToBeginning();
this.centerGridOnItem(selectedGridItem);
}
private bindKeyboardEventHandlers(): void {
this.input.keyboard.on("keyup-ENTER", () => {
this.nextSceneToCamera();
});
this.input.keyboard.on("keyup-BACKSPACE", () => {
this.backToPreviousScene();
});
this.input.keyboard.on("keydown-LEFT", () => {
this.selectNextGridItem(true);
});
this.input.keyboard.on("keydown-RIGHT", () => {
this.selectNextGridItem();
});
this.input.keyboard.on("keydown-UP", () => {
this.selectNextCategory(true);
});
this.input.keyboard.on("keydown-DOWN", () => {
this.selectNextCategory();
});
this.input.keyboard.on("keydown-W", () => {
this.selectNextCategory(true);
});
this.input.keyboard.on("keydown-S", () => {
this.selectNextCategory();
});
this.input.keyboard.on("keydown-A", () => {
this.selectNextGridItem(true);
});
this.input.keyboard.on("keydown-D", () => {
this.selectNextGridItem();
});
}
private setNewBodyPart(bodyPartIndex: number) {
this.changeOutfitPart(bodyPartIndex);
this.refreshPlayerCurrentOutfit();
}
private selectGridItem(): WokaBodyPartSlot | undefined {
const bodyPartType = this.selectedBodyPartType;
if (!bodyPartType) {
return;
}
const items = this.bodyPartsDraggableGrid.getAllItems() as WokaBodyPartSlot[];
const item = items.find(
(item) => item.getContentData()[bodyPartType] === this.getBodyPartSelectedItemId(bodyPartType)
);
item?.select();
return item;
}
private getBodyPartSelectedItemId(bodyPartType: CustomWokaBodyPart): string {
const categoryIndex = CustomWokaBodyPartOrder[bodyPartType];
return this.layers[categoryIndex][this.selectedLayers[categoryIndex]].id;
}
private selectNextGridItem(previous: boolean = false): void {
if (!this.selectedBodyPartType) {
return;
}
const currentIndex = this.getCurrentlySelectedItemIndex();
if (previous ? currentIndex > 0 : currentIndex < this.bodyPartsDraggableGrid.getAllItems().length - 1) {
this.deselectAllSlots();
const item = this.bodyPartsDraggableGrid.getAllItems()[
currentIndex + (previous ? -1 : 1)
] as WokaBodyPartSlot;
if (item) {
item.select();
this.setNewBodyPart(Number(item.getId()));
this.centerGridOnItem(item);
}
}
}
private selectNextCategory(previous: boolean = false): void {
if (!this.selectedBodyPartType) {
this.selectBodyPartType(CustomWokaBodyPart.Body);
return;
}
if (previous && this.selectedBodyPartType === CustomWokaBodyPart.Body) {
return;
}
if (!previous && this.selectedBodyPartType === CustomWokaBodyPart.Accessory) {
return;
}
const index = CustomWokaBodyPartOrder[this.selectedBodyPartType] + (previous ? -1 : 1);
this.selectBodyPartType(CustomWokaBodyPart[CustomWokaBodyPartOrder[index] as CustomWokaBodyPart]);
}
private getCurrentlySelectedItemIndex(): number {
const bodyPartType = this.selectedBodyPartType;
if (!bodyPartType) {
return -1;
}
const items = this.bodyPartsDraggableGrid.getAllItems() as WokaBodyPartSlot[];
return items.findIndex(
(item) => item.getContentData()[bodyPartType] === this.getBodyPartSelectedItemId(bodyPartType)
);
}
private centerGridOnItem(item: WokaBodyPartSlot, duration: number = 500): void {
void this.bodyPartsDraggableGrid.centerOnItem(
this.bodyPartsDraggableGrid.getAllItems().indexOf(item),
@@ -515,21 +636,12 @@ export class CustomizeScene extends AbstractCharacterScene {
0,
0,
{
...this.getDefaultWokaBodyPartSlotConfig(),
...this.getWokaBodyPartSlotConfig(this.selectedBodyPartType, bodyPartsLayer[i].id),
offsetX: 0,
offsetY: 0,
},
i
).setDisplaySize(this.SLOT_DIMENSION, this.SLOT_DIMENSION);
if (this.selectedBodyPartType === CustomWokaBodyPart.Body) {
slot.setBodyTexture(bodyPartsLayer[i].id);
slot.setImageTexture();
} else {
slot.setBodyTexture(
this.layers[CustomWokaBodyPartOrder.Body][this.selectedLayers[CustomWokaBodyPartOrder.Body]].id
);
slot.setImageTexture(bodyPartsLayer[i].id);
}
this.bodyPartsDraggableGrid.addItem(slot);
}
}
@@ -538,9 +650,13 @@ export class CustomizeScene extends AbstractCharacterScene {
this.bodyPartsDraggableGrid.clearAllItems();
}
private deselectAllSlots(): void {
private deselectAllButtons(): void {
for (const bodyPart in CustomWokaBodyPart) {
this.bodyPartsSlots[bodyPart as CustomWokaBodyPart].select(false);
this.bodyPartsButtons[bodyPart as CustomWokaBodyPart].select(false);
}
}
private deselectAllSlots(): void {
this.bodyPartsDraggableGrid.getAllItems().forEach((slot) => (slot as WokaBodyPartSlot).select(false));
}
}