get rid of zoom factor
This commit is contained in:
Piotr 'pwh' Hanusiak
parent
9644512d68
commit
43bac6c5cf
@ -5,6 +5,7 @@
|
||||
"license": "SEE LICENSE IN LICENSE.txt",
|
||||
"devDependencies": {
|
||||
"@geprog/vite-plugin-env-config": "^4.0.0",
|
||||
"@home-based-studio/phaser3-utils": "0.3.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
|
||||
"@tsconfig/svelte": "^1.0.10",
|
||||
"@types/google-protobuf": "^3.7.3",
|
||||
|
||||
@ -9,25 +9,49 @@ export enum CustomWokaBodyPart {
|
||||
Accessory = "Accessory",
|
||||
}
|
||||
|
||||
export interface CustomWokaPreviewerConfig {
|
||||
width: number;
|
||||
height: number;
|
||||
color: number;
|
||||
borderThickness: number;
|
||||
borderColor: number;
|
||||
bodyPartsScaleModifier: number;
|
||||
bodyPartsOffsetX: number;
|
||||
}
|
||||
|
||||
export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
|
||||
private background: Phaser.GameObjects.Graphics;
|
||||
private sprites: Record<CustomWokaBodyPart, Phaser.GameObjects.Sprite>;
|
||||
|
||||
private currentAnimationDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
|
||||
private currentlyMoving: boolean = true;
|
||||
private animationDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
|
||||
private moving: boolean = true;
|
||||
|
||||
constructor(scene: Phaser.Scene, x: number, y: number) {
|
||||
private config: CustomWokaPreviewerConfig;
|
||||
|
||||
constructor(scene: Phaser.Scene, x: number, y: number, config: CustomWokaPreviewerConfig) {
|
||||
super(scene, x, y);
|
||||
|
||||
const spritesOffset = -2;
|
||||
this.config = config;
|
||||
|
||||
this.sprites = {
|
||||
[CustomWokaBodyPart.Accessory]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
|
||||
[CustomWokaBodyPart.Body]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
|
||||
[CustomWokaBodyPart.Clothes]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
|
||||
[CustomWokaBodyPart.Eyes]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
|
||||
[CustomWokaBodyPart.Hair]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
|
||||
[CustomWokaBodyPart.Hat]: this.scene.add.sprite(spritesOffset, 0, "").setScale(4),
|
||||
[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),
|
||||
};
|
||||
|
||||
this.updateSprite("accessory1", CustomWokaBodyPart.Accessory);
|
||||
@ -37,11 +61,8 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
|
||||
this.updateSprite("hair3", CustomWokaBodyPart.Hair);
|
||||
this.updateSprite("hat2", CustomWokaBodyPart.Hat);
|
||||
|
||||
const width = 150;
|
||||
const height = 200;
|
||||
|
||||
this.background = this.createBackground(width, height);
|
||||
this.setSize(width, height);
|
||||
this.background = this.createBackground();
|
||||
this.setSize(this.config.width, this.config.height);
|
||||
|
||||
this.add([
|
||||
this.background,
|
||||
@ -61,14 +82,17 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
|
||||
}
|
||||
|
||||
public changeAnimation(direction: PlayerAnimationDirections, moving: boolean): void {
|
||||
this.currentAnimationDirection = direction;
|
||||
this.currentlyMoving = moving;
|
||||
this.animationDirection = direction;
|
||||
this.moving = moving;
|
||||
}
|
||||
|
||||
private createBackground(width: number, height: number): Phaser.GameObjects.Graphics {
|
||||
private createBackground(): Phaser.GameObjects.Graphics {
|
||||
const background = this.scene.add.graphics();
|
||||
background.fillStyle(0xffffff);
|
||||
background.lineStyle(5, 0xadafbc);
|
||||
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);
|
||||
@ -85,15 +109,12 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
|
||||
}
|
||||
const textureKey = sprite.texture.key;
|
||||
if (
|
||||
this.currentlyMoving &&
|
||||
(!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== this.currentAnimationDirection)
|
||||
this.moving &&
|
||||
(!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== this.animationDirection)
|
||||
) {
|
||||
sprite.play(textureKey + "-" + this.currentAnimationDirection + "-" + PlayerAnimationTypes.Walk, true);
|
||||
} else if (!this.currentlyMoving) {
|
||||
sprite.anims.play(
|
||||
textureKey + "-" + this.currentAnimationDirection + "-" + PlayerAnimationTypes.Idle,
|
||||
true
|
||||
);
|
||||
sprite.play(textureKey + "-" + this.animationDirection + "-" + PlayerAnimationTypes.Walk, true);
|
||||
} else if (!this.moving) {
|
||||
sprite.anims.play(textureKey + "-" + this.animationDirection + "-" + PlayerAnimationTypes.Idle, true);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -113,4 +134,12 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
|
||||
this.scene.sys.updateList.add(this.sprites[bodyPart]);
|
||||
}
|
||||
}
|
||||
|
||||
public isMoving(): boolean {
|
||||
return this.moving;
|
||||
}
|
||||
|
||||
public getAnimationDirection(): PlayerAnimationDirections {
|
||||
return this.animationDirection;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,96 @@
|
||||
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;
|
||||
borderSelectedColor: number;
|
||||
offsetX: number;
|
||||
offsetY: number;
|
||||
bodyImageKey?: string;
|
||||
imageKey?: string;
|
||||
selected?: boolean;
|
||||
}
|
||||
|
||||
export class WokaBodyPartSlot extends GridItem {
|
||||
private background: Phaser.GameObjects.Rectangle;
|
||||
private bodyImage: Phaser.GameObjects.Image;
|
||||
private image: Phaser.GameObjects.Image;
|
||||
|
||||
private config: WokaBodyPartSlotConfig;
|
||||
|
||||
private selected: boolean;
|
||||
|
||||
constructor(scene: Phaser.Scene, x: number, y: number, config: WokaBodyPartSlotConfig) {
|
||||
super(scene, undefined, { x, y });
|
||||
|
||||
this.config = config;
|
||||
|
||||
const offsetY = -3;
|
||||
const offsetX = -2;
|
||||
this.selected = this.config.selected ?? false;
|
||||
|
||||
this.background = this.scene.add
|
||||
.rectangle(0, 0, this.config.width, this.config.height, 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.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.add([this.background, this.bodyImage, this.image]);
|
||||
|
||||
this.setInteractive();
|
||||
this.scene.input.setDraggable(this);
|
||||
|
||||
this.bindEventHandlers();
|
||||
|
||||
this.scene.add.existing(this);
|
||||
}
|
||||
|
||||
public setBodyTexture(textureKey: string, frame?: string | number): void {
|
||||
this.bodyImage.setTexture(textureKey, frame);
|
||||
}
|
||||
|
||||
public setImageTexture(textureKey?: string, frame?: string | number): void {
|
||||
this.image.setVisible(textureKey !== undefined || textureKey !== "");
|
||||
if (textureKey) {
|
||||
this.bodyImage.setTexture(textureKey, frame);
|
||||
}
|
||||
}
|
||||
|
||||
public select(select: boolean = true): void {
|
||||
if (this.selected === select) {
|
||||
return;
|
||||
}
|
||||
this.selected = select;
|
||||
this.updateSelected();
|
||||
}
|
||||
|
||||
public isSelected(): boolean {
|
||||
return this.selected;
|
||||
}
|
||||
|
||||
protected bindEventHandlers(): void {
|
||||
super.bindEventHandlers();
|
||||
|
||||
this.on(GridItemEvent.Clicked, () => {
|
||||
this.select(!this.selected);
|
||||
// this.emit(CategoryGridItemEvent.Selected, this.categoryName);
|
||||
});
|
||||
}
|
||||
|
||||
private updateSelected(): void {
|
||||
this.background.setStrokeStyle(2.5, this.selected ? this.config.borderSelectedColor : this.config.borderColor);
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,5 @@
|
||||
import { EnableCameraSceneName } from "./EnableCameraScene";
|
||||
import Rectangle = Phaser.GameObjects.Rectangle;
|
||||
import { loadAllLayers } from "../Entity/PlayerTexturesLoadingManager";
|
||||
import Sprite = Phaser.GameObjects.Sprite;
|
||||
import { gameManager } from "../Game/GameManager";
|
||||
import { localUserStore } from "../../Connexion/LocalUserStore";
|
||||
import { Loader } from "../Components/Loader";
|
||||
@ -17,13 +15,17 @@ import { analyticsClient } from "../../Administration/AnalyticsClient";
|
||||
import { isMediaBreakpointUp } from "../../Utils/BreakpointsUtils";
|
||||
import { PUSHER_URL } from "../../Enum/EnvironmentVariable";
|
||||
import { CustomWokaBodyPart, CustomWokaPreviewer } from "../Components/CustomizeWoka/CustomWokaPreviewer";
|
||||
import { DraggableGrid } from "@home-based-studio/phaser3-utils";
|
||||
import { WokaBodyPartSlot, WokaBodyPartSlotConfig } from "../Components/CustomizeWoka/WokaBodyPartSlot";
|
||||
|
||||
export const CustomizeSceneName = "CustomizeScene";
|
||||
|
||||
export class CustomizeScene extends AbstractCharacterScene {
|
||||
private Rectangle!: Rectangle;
|
||||
private Rectangle!: Phaser.GameObjects.Rectangle;
|
||||
|
||||
private customWokaPreviewer: CustomWokaPreviewer;
|
||||
private customWokaPreviewer!: CustomWokaPreviewer;
|
||||
private bodyPartsDraggableGrid!: DraggableGrid;
|
||||
private bodyPartsSlots!: Record<CustomWokaBodyPart, WokaBodyPartSlot>;
|
||||
|
||||
private selectedLayers: number[] = [0];
|
||||
private containersRow: CustomizedCharacter[][] = [];
|
||||
@ -88,8 +90,7 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
public create(): void {
|
||||
console.log(this.layers);
|
||||
|
||||
waScaleManager.saveZoom();
|
||||
waScaleManager.zoomModifier = isMediaBreakpointUp("md") ? 3 : 1;
|
||||
const isVertical = isMediaBreakpointUp("md");
|
||||
|
||||
this.Rectangle = this.add.rectangle(
|
||||
this.cameras.main.worldView.x + this.cameras.main.width / 2,
|
||||
@ -116,7 +117,55 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
this.updateSelectedLayer();
|
||||
}
|
||||
|
||||
this.customWokaPreviewer = new CustomWokaPreviewer(this, 300, 300);
|
||||
this.customWokaPreviewer = new CustomWokaPreviewer(this, 0, 0, {
|
||||
width: 150,
|
||||
height: 200,
|
||||
color: 0xffffff,
|
||||
borderThickness: 5,
|
||||
borderColor: 0xadafbc,
|
||||
bodyPartsScaleModifier: 4,
|
||||
bodyPartsOffsetX: -2,
|
||||
});
|
||||
this.bodyPartsDraggableGrid = new DraggableGrid(this, {
|
||||
position: { x: 0, y: 0 },
|
||||
maskPosition: { x: 0, y: 0 },
|
||||
dimension: { x: 485, y: 165 },
|
||||
horizontal: true,
|
||||
repositionToCenter: true,
|
||||
itemsInRow: 2,
|
||||
margin: {
|
||||
left: 5,
|
||||
right: 5,
|
||||
},
|
||||
spacing: 5,
|
||||
debug: {
|
||||
showDraggableSpace: false,
|
||||
},
|
||||
});
|
||||
|
||||
const defaultWokaBodyPartSlotConfig: WokaBodyPartSlotConfig = {
|
||||
width: 72.5,
|
||||
height: 72.5,
|
||||
color: 0xffffff,
|
||||
borderThickness: 2.5,
|
||||
borderColor: 0xadafbc,
|
||||
borderSelectedColor: 0x00ffff,
|
||||
offsetX: -3,
|
||||
offsetY: -2,
|
||||
};
|
||||
|
||||
for (let i = 0; i < 50; i += 1) {
|
||||
this.bodyPartsDraggableGrid.addItem(new WokaBodyPartSlot(this, 0, 0, defaultWokaBodyPartSlotConfig));
|
||||
}
|
||||
|
||||
this.bodyPartsSlots = {
|
||||
[CustomWokaBodyPart.Hair]: new WokaBodyPartSlot(this, 220, 50, defaultWokaBodyPartSlotConfig),
|
||||
[CustomWokaBodyPart.Body]: new WokaBodyPartSlot(this, 220, 130, defaultWokaBodyPartSlotConfig),
|
||||
[CustomWokaBodyPart.Accessory]: new WokaBodyPartSlot(this, 220, 210, defaultWokaBodyPartSlotConfig),
|
||||
[CustomWokaBodyPart.Hat]: new WokaBodyPartSlot(this, 520, 50, defaultWokaBodyPartSlotConfig),
|
||||
[CustomWokaBodyPart.Clothes]: new WokaBodyPartSlot(this, 520, 130, defaultWokaBodyPartSlotConfig),
|
||||
[CustomWokaBodyPart.Eyes]: new WokaBodyPartSlot(this, 520, 210, defaultWokaBodyPartSlotConfig),
|
||||
};
|
||||
|
||||
this.onResize();
|
||||
|
||||
@ -151,13 +200,16 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
}
|
||||
|
||||
public onResize(): void {
|
||||
const isVertical = this.cameras.main.height > this.cameras.main.width;
|
||||
console.log(`isVertical: ${isVertical}`);
|
||||
this.moveLayers();
|
||||
|
||||
this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
this.Rectangle.y = this.cameras.main.worldView.y + this.cameras.main.height / 3;
|
||||
|
||||
this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
this.customWokaPreviewer.y = this.cameras.main.worldView.y + this.cameras.main.height / 2;
|
||||
this.repositionCustomWokaPreviewer(isVertical);
|
||||
this.repositionBodyPartSlots(isVertical);
|
||||
this.repositionBodyPartsDraggableGrid(isVertical);
|
||||
}
|
||||
|
||||
public nextSceneToCamera() {
|
||||
@ -187,6 +239,43 @@ export class CustomizeScene extends AbstractCharacterScene {
|
||||
this.scene.run(SelectCharacterSceneName);
|
||||
}
|
||||
|
||||
private repositionCustomWokaPreviewer(isVertical: boolean): void {
|
||||
this.customWokaPreviewer.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;
|
||||
this.customWokaPreviewer.y =
|
||||
this.cameras.main.worldView.y +
|
||||
this.customWokaPreviewer.displayHeight * 0.5 +
|
||||
this.cameras.main.height * 0.1;
|
||||
}
|
||||
|
||||
private repositionBodyPartSlots(isVertical: boolean): void {
|
||||
const slotWidth = this.bodyPartsSlots.Accessory.displayWidth;
|
||||
|
||||
const left = this.customWokaPreviewer.x - this.customWokaPreviewer.displayWidth * 0.5 - slotWidth;
|
||||
const right = this.customWokaPreviewer.x + this.customWokaPreviewer.displayWidth * 0.5 + slotWidth;
|
||||
const top = this.customWokaPreviewer.y - this.customWokaPreviewer.displayHeight * 0.5;
|
||||
const middle = this.customWokaPreviewer.y;
|
||||
const bottom = this.customWokaPreviewer.y + this.customWokaPreviewer.displayHeight * 0.5;
|
||||
|
||||
this.bodyPartsSlots.Hair.setPosition(left, top);
|
||||
this.bodyPartsSlots.Body.setPosition(left, middle);
|
||||
this.bodyPartsSlots.Accessory.setPosition(left, bottom);
|
||||
this.bodyPartsSlots.Hat.setPosition(right, top);
|
||||
this.bodyPartsSlots.Clothes.setPosition(right, middle);
|
||||
this.bodyPartsSlots.Eyes.setPosition(right, bottom);
|
||||
}
|
||||
|
||||
private repositionBodyPartsDraggableGrid(isVertical: boolean): void {
|
||||
const gridPos = {
|
||||
x: this.cameras.main.worldView.x + this.cameras.main.width / 2,
|
||||
y:
|
||||
this.cameras.main.worldView.y +
|
||||
this.cameras.main.height -
|
||||
this.bodyPartsDraggableGrid.displayHeight * 0.5 -
|
||||
this.cameras.main.height * 0.02,
|
||||
};
|
||||
this.bodyPartsDraggableGrid.changeDraggableSpacePosAndSize(gridPos, { x: 485, y: 165 }, gridPos);
|
||||
}
|
||||
|
||||
private bindEventHandlers(): void {
|
||||
this.events.addListener("wake", () => {
|
||||
waScaleManager.saveZoom();
|
||||
|
||||
@ -98,6 +98,13 @@
|
||||
resolved "https://registry.yarnpkg.com/@geprog/vite-plugin-env-config/-/vite-plugin-env-config-4.0.0.tgz#989d95f23fbab5eae7c4c96d04a18abdc289b81e"
|
||||
integrity sha512-25ZMNdpssqkyv1sxfa6gBhmL8yCxCqjRRc1c05GJfhPkqD6Cn9dnG6xnHHHfJaEqrDFCViD0Bcnr+tgs76OZ2Q==
|
||||
|
||||
"@home-based-studio/phaser3-utils@0.3.0":
|
||||
version "0.3.0"
|
||||
resolved "https://registry.yarnpkg.com/@home-based-studio/phaser3-utils/-/phaser3-utils-0.3.0.tgz#e23337162252e9cb5db0dc0b4f3393e95369f254"
|
||||
integrity sha512-p7FQKyLP2xjQsGxgQwAhlghLE3vdkSCLPSFvYohrNwglkUigbSJrpv7iq6oxK/0Uvmby8S6fU2Sv1BIbDysKoA==
|
||||
dependencies:
|
||||
phaser "3.55.1"
|
||||
|
||||
"@humanwhocodes/config-array@^0.9.2":
|
||||
version "0.9.2"
|
||||
resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.9.2.tgz#68be55c737023009dfc5fe245d51181bb6476914"
|
||||
@ -2218,6 +2225,14 @@ phaser3-rex-plugins@^1.1.42:
|
||||
papaparse "^5.3.0"
|
||||
webfontloader "^1.6.28"
|
||||
|
||||
phaser@3.55.1:
|
||||
version "3.55.1"
|
||||
resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.55.1.tgz#25923fe845f6598aec57cfb37a5641834e9943a7"
|
||||
integrity sha512-A5J9/diRz05qc498UNJAaXp85JVkBAEMqxP8pmcRMu1RCLBs4Kx7axd7YxNbXnQuK58JBhTRucngLt8LSpsUlQ==
|
||||
dependencies:
|
||||
eventemitter3 "^4.0.7"
|
||||
path "^0.12.7"
|
||||
|
||||
phaser@^3.54.0:
|
||||
version "3.54.0"
|
||||
resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.54.0.tgz#46b191e46059aab2a9a57f78525c60b595767eee"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user