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

fighting with not cripsy pixels when resizing

Browse Source
This commit is contained in:
Piotr 'pwh' Hanusiak 2022-03-21 12:38:12 +01:00
parent 9a7e5cae4c
commit 159bf0351f
4 changed files with 58 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
front/src/Phaser/Components/CustomizeWoka/CustomWokaPreviewer.ts
View File

@ -1,3 +1,4 @@
import { MathUtils } from "../../../Utils/MathUtils";
import { getPlayerAnimations, PlayerAnimationDirections, PlayerAnimationTypes } from "../../Player/Animation";
export enum CustomWokaBodyPart {
@ -73,6 +74,11 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
this.animate();
}
public setDisplaySize(width: number, height: number): this {
const [newWidth, newHeight] = MathUtils.getWholePixelsNewSize(this.SIZE, this.SIZE, width, height);
return super.setDisplaySize(newWidth, newHeight);
}
public changeAnimation(direction: PlayerAnimationDirections, moving: boolean): void {
this.animationDirection = direction;
this.moving = moving;

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

@ -1,5 +1,6 @@
import { GridItem } from "@home-based-studio/phaser3-utils";
import { GridItemEvent } from "@home-based-studio/phaser3-utils/lib/utils/gui/containers/grids/GridItem";
import { MathUtils } from "../../../Utils/MathUtils";
export interface WokaBodyPartSlotConfig {
color: number;
@ -61,6 +62,11 @@ export class WokaBodyPartSlot extends GridItem {
this.scene.add.existing(this);
}
public setDisplaySize(width: number, height: number): this {
const [newWidth, newHeight] = MathUtils.getWholePixelsNewSize(this.SIZE, this.SIZE, width, height, 32, 32);
return super.setDisplaySize(newWidth, newHeight);
}
public setTextures(bodyTextureKey?: string, imageTextureKey?: string): void {
this.setBodyTexture(bodyTextureKey);
this.setImageTexture(imageTextureKey);

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

@ -190,11 +190,11 @@ export class CustomizeScene extends AbstractCharacterScene {
private handleCustomWokaPreviewerOnResize(): void {
const slotDimension =
Math.min(innerWidth * (this.isVertical ? 0.2 : 0.15), innerHeight * (this.isVertical ? 0.2 : 0.15)) /
Math.min(innerWidth * (this.isVertical ? 0.2 : 0.2), innerHeight * (this.isVertical ? 0.2 : 0.2)) /
waScaleManager.getActualZoom();
const boxDimension =
Math.min(innerWidth * (this.isVertical ? 0.4 : 0.3), innerHeight * (this.isVertical ? 0.4 : 0.3)) /
Math.min(innerWidth * (this.isVertical ? 0.4 : 0.5), innerHeight * (this.isVertical ? 0.4 : 0.5)) /
waScaleManager.getActualZoom();
this.customWokaPreviewer.setDisplaySize(boxDimension, boxDimension);
@ -206,12 +206,16 @@ export class CustomizeScene extends AbstractCharacterScene {
private handleBodyPartSlotsOnResize(): void {
const slotDimension =
Math.min(innerWidth * (this.isVertical ? 0.2 : 0.15), innerHeight * (this.isVertical ? 0.2 : 0.15)) /
Math.min(innerWidth * (this.isVertical ? 0.2 : 0.25), innerHeight * (this.isVertical ? 0.2 : 0.25)) /
waScaleManager.getActualZoom();
// 1;
console.log("zoom: ", waScaleManager.getActualZoom());
console.log("slotDimension: ", slotDimension);
for (const part in this.bodyPartsSlots) {
this.bodyPartsSlots[part as CustomWokaBodyPart].setDisplaySize(slotDimension, slotDimension);
}
console.log(this.bodyPartsSlots.Body.displayWidth);
const slotSize = this.bodyPartsSlots.Accessory.displayHeight;

39
front/src/Utils/MathUtils.ts
View File

@ -35,4 +35,43 @@ export class MathUtils {
public static randomFromArray<T>(array: T[]): T {
return array[Math.floor(Math.random() * array.length)];
}
/**
*
* @param baseWidth Object's default width not affected by any scaling
* @param baseHeight Object's default height not affected by any scaling
* @param requestedWidth Width we would like to achieve
* @param requestedHeight Height we would like to achieve
* @param unitSizeWidth Smallest possible unit of our 'scale step' for width
* @param unitSizeHeight Smallest possible unit of our 'scale step' for height
* @returns [ newWidth, newHeight ]
*/
public static getWholePixelsNewSize(
baseWidth: number,
baseHeight: number,
requestedWidth: number,
requestedHeight: number,
unitSizeWidth: number = 32,
unitSizeHeight: number = 32
): [number, number] {
// Demanded scale to be applied
const newScaleW = requestedWidth / baseWidth;
const newScaleH = requestedHeight / baseHeight;
// How would it affect our sprites
const spriteWidth = Math.floor(unitSizeWidth * newScaleW);
const spriteHeight = Math.floor(unitSizeHeight * newScaleH);
// Expected nearest sprite size to maintain crisp pixels
const expectedSpriteWidth = spriteWidth - (spriteWidth % unitSizeWidth);
const expectedSpriteHeight = spriteHeight - (spriteHeight % unitSizeHeight);
// Expected nearest scale
const neededScaleWidth = expectedSpriteWidth / unitSizeWidth;
const neededScaleHeight = expectedSpriteHeight / unitSizeHeight;
console.log(neededScaleWidth, neededScaleHeight);
// Calculate new width and height and apply it to the whole container
return [baseWidth * neededScaleWidth, baseHeight * neededScaleHeight];
}
}