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

turn icon with animation

Browse Source
This commit is contained in:
Piotr 'pwh' Hanusiak 2022-04-04 14:10:50 +02:00
parent c43e5b97c6
commit 7acebfa70c
3 changed files with 22 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
front/public/resources/icons/icon_turn.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

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

@ -1,3 +1,4 @@
import { Easing } from "../../../types";
import { getPlayerAnimations, PlayerAnimationDirections, PlayerAnimationTypes } from "../../Player/Animation"; import { getPlayerAnimations, PlayerAnimationDirections, PlayerAnimationTypes } from "../../Player/Animation";
export enum CustomWokaBodyPart { export enum CustomWokaBodyPart {
@ -29,10 +30,13 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
private background: Phaser.GameObjects.Image; private background: Phaser.GameObjects.Image;
private frame: Phaser.GameObjects.Graphics; private frame: Phaser.GameObjects.Graphics;
private sprites: Record<CustomWokaBodyPart, Phaser.GameObjects.Sprite>; private sprites: Record<CustomWokaBodyPart, Phaser.GameObjects.Sprite>;
private turnIcon: Phaser.GameObjects.Image;
private animationDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down; private animationDirection: PlayerAnimationDirections = PlayerAnimationDirections.Down;
private moving: boolean = true; private moving: boolean = true;
private turnIconTween?: Phaser.Tweens.Tween;
private config: CustomWokaPreviewerConfig; private config: CustomWokaPreviewerConfig;
public readonly SIZE: number = 50; public readonly SIZE: number = 50;
@ -55,6 +59,12 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
this.background = this.scene.add.image(0, 0, "floorTexture1"); this.background = this.scene.add.image(0, 0, "floorTexture1");
this.frame = this.scene.add.graphics(); this.frame = this.scene.add.graphics();
this.turnIcon = this.scene.add
.image(this.background.displayWidth * 0.35, this.background.displayHeight * 0.35, "iconTurn")
.setScale(0.25)
.setTintFill(0xffffff)
.setAlpha(0.5);
this.drawFrame(); this.drawFrame();
this.setSize(this.SIZE, this.SIZE); this.setSize(this.SIZE, this.SIZE);
this.setInteractive({ cursor: "pointer" }); this.setInteractive({ cursor: "pointer" });
@ -68,6 +78,7 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
this.sprites.Clothes, this.sprites.Clothes,
this.sprites.Hat, this.sprites.Hat,
this.sprites.Accessory, this.sprites.Accessory,
this.turnIcon,
]); ]);
this.bindEventHandlers(); this.bindEventHandlers();
@ -117,6 +128,16 @@ export class CustomWokaPreviewer extends Phaser.GameObjects.Container {
const direction = this.getNextAnimationDirection(); const direction = this.getNextAnimationDirection();
const moving = direction === PlayerAnimationDirections.Down ? !this.moving : this.moving; const moving = direction === PlayerAnimationDirections.Down ? !this.moving : this.moving;
this.changeAnimation(direction, moving); this.changeAnimation(direction, moving);
this.turnIconTween?.stop();
this.turnIcon.setScale(0.25);
this.turnIconTween = this.scene.tweens.add({
targets: [this.turnIcon],
duration: 100,
scale: 0.2,
yoyo: true,
ease: Easing.SineEaseIn,
});
}); });
} }

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

@ -67,6 +67,7 @@ export class CustomizeScene extends AbstractCharacterScene {
this.load.image("iconHair", "/resources/icons/icon_hair.png"); this.load.image("iconHair", "/resources/icons/icon_hair.png");
this.load.image("iconEyes", "/resources/icons/icon_eyes.png"); this.load.image("iconEyes", "/resources/icons/icon_eyes.png");
this.load.image("iconBody", "/resources/icons/icon_body.png"); this.load.image("iconBody", "/resources/icons/icon_body.png");
this.load.image("iconTurn", "/resources/icons/icon_turn.png");
this.load.spritesheet("floorTiles", "/resources/tilesets/floor_tiles.png", { frameWidth: 32, frameHeight: 32 }); this.load.spritesheet("floorTiles", "/resources/tilesets/floor_tiles.png", { frameWidth: 32, frameHeight: 32 });
TexturesHelper.createRectangleTexture(this, "gridEdgeShadow", this.cameras.main.width * 0.2, 115, 0x000000); TexturesHelper.createRectangleTexture(this, "gridEdgeShadow", this.cameras.main.width * 0.2, 115, 0x000000);