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

grid shadow and animations

Browse Source
This commit is contained in:
Piotr 'pwh' Hanusiak 2022-03-28 12:29:31 +02:00
parent f656702bb9
commit 81c5876a66
4 changed files with 66 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -29,7 +29,7 @@ export class WokaBodyPartSlot extends GridItem {
private selected: boolean;
public readonly SIZE: number = 50;
public static readonly SIZE: number = 50;
constructor(scene: Phaser.Scene, x: number, y: number, config: WokaBodyPartSlotConfig, id?: number) {
super(scene, `${id}`, { x, y });
@ -44,9 +44,9 @@ export class WokaBodyPartSlot extends GridItem {
if (this.config.categoryImageKey) {
this.categoryImage = this.scene.add
.image(this.SIZE / 2 - 1, -this.SIZE / 2 + 1, this.config.categoryImageKey)
.image(WokaBodyPartSlot.SIZE / 2 - 1, -WokaBodyPartSlot.SIZE / 2 + 1, this.config.categoryImageKey)
.setDisplaySize(16, 16)
.setAlpha(0.4)
.setAlpha(0.75)
.setOrigin(1, 0);
this.add(this.categoryImage);
}
@ -59,7 +59,7 @@ export class WokaBodyPartSlot extends GridItem {
.image(this.config.offsetX, this.config.offsetY, config.imageKey ?? "")
.setVisible(config.bodyImageKey !== undefined);
this.setSize(this.SIZE, this.SIZE);
this.setSize(WokaBodyPartSlot.SIZE, WokaBodyPartSlot.SIZE);
this.add([this.bodyImage, this.image]);
@ -118,8 +118,10 @@ export class WokaBodyPartSlot extends GridItem {
this.selected ? this.config.borderSelectedColor : this.config.borderColor
);
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);
const size = WokaBodyPartSlot.SIZE;
this.background.fillRect(-size / 2, -size / 2, size, size);
this.background.strokeRect(-size / 2, -size / 2, size, size);
}
private updateSelected(): void {

1
front/src/Phaser/Entity/Character.ts
View File

@ -255,7 +255,6 @@ export abstract class Character extends Container implements OutlineableInterfac
}
const sprite = new Sprite(this.scene, 0, 0, texture, frame);
this.add(sprite);
console.log(texture);
getPlayerAnimations(texture).forEach((d) => {
this.scene.anims.create({
key: d.key,

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

@ -31,4 +31,16 @@ export class TexturesHelper {
throw new Error("Could not get the snapshot");
}
}
public static createRectangleTexture(
scene: Phaser.Scene,
textureKey: string,
width: number,
height: number,
color: number
): void {
const rectangleTexture = scene.add.graphics().fillStyle(color, 1).fillRect(0, 0, width, height);
rectangleTexture.generateTexture(textureKey, width, height);
rectangleTexture.destroy();
}
}

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

@ -26,6 +26,7 @@ import {
import { DraggableGridEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/DraggableGrid";
import { Button } from "../Components/Ui/Button";
import { wokaList } from "../../Messages/JsonMessages/PlayerTextures";
import { TexturesHelper } from "../Helpers/TexturesHelper";
export const CustomizeSceneName = "CustomizeScene";
@ -33,6 +34,8 @@ 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;
private bodyPartsSlots!: Record<CustomWokaBodyPart, WokaBodyPartSlot>;
@ -47,6 +50,8 @@ export class CustomizeScene extends AbstractCharacterScene {
private loader: Loader;
private readonly SLOT_DIMENSION = 100;
constructor() {
super({
key: CustomizeSceneName,
@ -64,6 +69,8 @@ export class CustomizeScene extends AbstractCharacterScene {
this.load.image("iconEyes", "/resources/icons/icon_eyes.png");
this.load.image("iconBody", "/resources/icons/icon_body.png");
TexturesHelper.createRectangleTexture(this, "gridEdgeShadow", 200, 115, 0x000000);
const wokaMetadataKey = "woka-list" + gameManager.currentStartedRoom.href;
this.cache.json.remove(wokaMetadataKey);
this.superLoad
@ -91,6 +98,7 @@ export class CustomizeScene extends AbstractCharacterScene {
}
public create(): void {
this.selectedBodyPartType = CustomWokaBodyPart.Body;
this.customWokaPreviewer = new CustomWokaPreviewer(
this,
0,
@ -118,8 +126,8 @@ export class CustomizeScene extends AbstractCharacterScene {
repositionToCenter: true,
itemsInRow: 1,
margin: {
left: 5,
right: 5,
left: (innerWidth / waScaleManager.getActualZoom() - this.SLOT_DIMENSION) * 0.5,
right: (innerWidth / waScaleManager.getActualZoom() - this.SLOT_DIMENSION) * 0.5,
},
spacing: 5,
debug: {
@ -128,6 +136,21 @@ export class CustomizeScene extends AbstractCharacterScene {
});
this.bodyPartsDraggableGridForeground = this.add.graphics();
this.bodyPartsDraggableGridLeftShadow = this.add
.image(0, this.cameras.main.worldView.y + this.cameras.main.height, "gridEdgeShadow")
.setAlpha(1, 0, 1, 0)
.setOrigin(0, 1);
this.bodyPartsDraggableGridRightShadow = this.add
.image(
this.cameras.main.worldView.x + this.cameras.main.width,
this.cameras.main.worldView.y + this.cameras.main.height,
"gridEdgeShadow"
)
.setAlpha(1, 0, 1, 0)
.setFlipX(true)
.setOrigin(1, 1);
this.bodyPartsSlots = {
[CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(this, 0, 0, {
...this.getDefaultWokaBodyPartSlotConfig(),
@ -319,11 +342,11 @@ export class CustomizeScene extends AbstractCharacterScene {
);
const bottom = Math.floor(top + slotSize + 10);
this.bodyPartsSlots.Hair.setPosition(left, top);
this.bodyPartsSlots.Hat.setPosition(middle, top);
this.bodyPartsSlots.Eyes.setPosition(right, top);
this.bodyPartsSlots.Body.setPosition(left, bottom);
this.bodyPartsSlots.Clothes.setPosition(middle, bottom);
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);
return;
@ -341,12 +364,12 @@ export class CustomizeScene extends AbstractCharacterScene {
const middle = Math.floor(top + slotSize + 10);
const bottom = Math.floor(middle + slotSize + 10);
this.bodyPartsSlots.Hair.setPosition(left, top);
this.bodyPartsSlots.Body.setPosition(left, middle);
this.bodyPartsSlots.Accessory.setPosition(ratio < 0.6 ? leftEdge : left, ratio < 0.6 ? middle : bottom);
this.bodyPartsSlots.Hat.setPosition(right, top);
this.bodyPartsSlots.Clothes.setPosition(right, middle);
this.bodyPartsSlots.Eyes.setPosition(ratio < 0.6 ? rightEdge : right, ratio < 0.6 ? middle : bottom);
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);
}
private handleBodyPartsDraggableGridOnResize(): void {
@ -357,6 +380,12 @@ export class CustomizeScene extends AbstractCharacterScene {
y: this.cameras.main.worldView.y + this.cameras.main.height - gridHeight * 0.5,
};
this.bodyPartsDraggableGridLeftShadow.setPosition(0, this.cameras.main.worldView.y + this.cameras.main.height);
this.bodyPartsDraggableGridRightShadow.setPosition(
this.cameras.main.worldView.x + this.cameras.main.width,
this.cameras.main.worldView.y + this.cameras.main.height
);
this.drawGridBackground(gridPos);
this.drawGridForeground(gridPos);
try {
@ -371,6 +400,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.populateGrid();
this.bodyPartsDraggableGrid.moveContentToBeginning();
void this.bodyPartsDraggableGrid.moveContentTo(0.5, 500);
}
private handleRandomizeButtonOnResize(): void {
@ -456,6 +486,7 @@ export class CustomizeScene extends AbstractCharacterScene {
}
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();
@ -480,7 +511,6 @@ export class CustomizeScene extends AbstractCharacterScene {
if (this.selectedBodyPartType === undefined) {
return;
}
const slotDimension = 100;
const bodyPartsLayer = this.layers[CustomWokaBodyPartOrder[this.selectedBodyPartType]];
@ -496,7 +526,7 @@ export class CustomizeScene extends AbstractCharacterScene {
offsetY: 0,
},
i
).setDisplaySize(slotDimension, slotDimension);
).setDisplaySize(this.SLOT_DIMENSION, this.SLOT_DIMENSION);
if (this.selectedBodyPartType === CustomWokaBodyPart.Body) {
slot.setBodyTexture(bodyPartsLayer[i].id);
slot.setImageTexture();
@ -509,6 +539,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.bodyPartsDraggableGrid.addItem(slot);
}
this.bodyPartsDraggableGrid.moveContentToBeginning();
void this.bodyPartsDraggableGrid.moveContentTo(0.5, 500);
}
private clearGrid(): void {