diff --git a/clients/player-client/src/core/GameEngine/GameEngine.ts b/clients/player-client/src/core/GameEngine/GameEngine.ts index 7296c7e6..9aa7db8e 100644 --- a/clients/player-client/src/core/GameEngine/GameEngine.ts +++ b/clients/player-client/src/core/GameEngine/GameEngine.ts @@ -91,12 +91,14 @@ export const GameEngine: React.FC = props => { data.actors[actorIndex].addAction( new WalkAction({ wait: Duration.fromObject({ seconds: 0 }), - act: Duration.fromObject({ seconds: 3 }), + act: Duration.fromObject({ seconds: 0.5 }), recovery: Duration.fromObject({ seconds: 0 }), direction: ActorOrientation.NORTHWEST, frames: 10, }), ); + } else { + data.actors[actorIndex].orientation = ActorOrientation.NORTHWEST; } break; case InputEventRecordKey.RIGHT: @@ -110,13 +112,16 @@ export const GameEngine: React.FC = props => { data.actors[actorIndex].addAction( new WalkAction({ wait: Duration.fromObject({ seconds: 0 }), - act: Duration.fromObject({ seconds: 1 }), + act: Duration.fromObject({ seconds: 0.5 }), recovery: Duration.fromObject({ seconds: 0 }), direction: ActorOrientation.SOUTHEAST, frames: 10, }), ); + } else { + data.actors[actorIndex].orientation = ActorOrientation.SOUTHEAST; } + break; case InputEventRecordKey.UP: if ( @@ -129,13 +134,16 @@ export const GameEngine: React.FC = props => { data.actors[actorIndex].addAction( new WalkAction({ wait: Duration.fromObject({ seconds: 0 }), - act: Duration.fromObject({ seconds: 1 }), + act: Duration.fromObject({ seconds: 0.5 }), recovery: Duration.fromObject({ seconds: 0 }), direction: ActorOrientation.NORTHEAST, frames: 10, }), ); + } else { + data.actors[actorIndex].orientation = ActorOrientation.NORTHEAST; } + break; case InputEventRecordKey.DOWN: if ( @@ -148,12 +156,14 @@ export const GameEngine: React.FC = props => { data.actors[actorIndex].addAction( new WalkAction({ wait: Duration.fromObject({ seconds: 0 }), - act: Duration.fromObject({ seconds: 1 }), + act: Duration.fromObject({ seconds: 0.5 }), recovery: Duration.fromObject({ seconds: 0 }), direction: ActorOrientation.SOUTHWEST, frames: 10, }), ); + } else { + data.actors[actorIndex].orientation = ActorOrientation.SOUTHWEST; } break; case InputEventRecordKey.DEBUG: diff --git a/clients/player-client/src/core/Keyboard/keyBindings.ts b/clients/player-client/src/core/Keyboard/keyBindings.ts index 93449f61..53032cb5 100644 --- a/clients/player-client/src/core/Keyboard/keyBindings.ts +++ b/clients/player-client/src/core/Keyboard/keyBindings.ts @@ -1,5 +1,6 @@ import { InputEventRecordKey } from '../../dtos/Player/InputEventRecordKey.type'; +// TODO: lowercase the key bindings export const keyboardBindings = { [InputEventRecordKey.UP]: 'w', [InputEventRecordKey.DOWN]: 's', diff --git a/clients/player-client/src/dtos/Actions/WalkAction.ts b/clients/player-client/src/dtos/Actions/WalkAction.ts index beb20aac..65278547 100644 --- a/clients/player-client/src/dtos/Actions/WalkAction.ts +++ b/clients/player-client/src/dtos/Actions/WalkAction.ts @@ -4,6 +4,7 @@ import { Actor } from '../Actor/Actor.dto'; import { Action } from './Action'; import { pause } from './pause'; import { SpriteMapActionId } from '../SpriteMap/SpriteMapType.type'; +import { Coordinate2d } from '../Coordinate2d.dto'; export class WalkAction extends Action { direction: ActorOrientation; @@ -27,31 +28,30 @@ export class WalkAction extends Action { const executeRun = async ( resolve: (value: boolean | PromiseLike) => void, ) => { - this.progress = 0; - let delta: { x?: number; y?: number } = {}; - + let delta: Coordinate2d = { x: 0, y: 0 }; switch (this.direction) { case ActorOrientation.NORTHEAST: - delta = { y: -0.1 }; + delta = { x: 0, y: -0.1 }; break; case ActorOrientation.NORTHWEST: - delta = { x: -0.1 }; + delta = { x: -0.1, y: 0 }; break; case ActorOrientation.SOUTHEAST: - delta = { x: 0.1 }; + delta = { x: 0.1, y: 0 }; break; case ActorOrientation.SOUTHWEST: - delta = { y: 0.1 }; + delta = { x: 0, y: 0.1 }; break; } actor.spriteMapActionId = this.spriteMapId; actor.orientation = this.direction; + const startCurrentFrame = actor.spriteMapCurrentFrame; - for (let currentFrame = 0; currentFrame < this.frames; currentFrame++) { + for (let i = 0; i < 5; i++) { actor.position.move(delta); - actor.spriteMapCurrentFrame = currentFrame; - this.progress = ((currentFrame + 1) / this.frames) * 100; + actor.spriteMapCurrentFrame = (startCurrentFrame + i) % this.frames; + this.progress = ((i + 1) / 5) * 100; await pause(this.frameDuration()); } diff --git a/clients/player-client/src/dtos/Actor/Actor.dto.ts b/clients/player-client/src/dtos/Actor/Actor.dto.ts index ca2337b4..5faf590c 100644 --- a/clients/player-client/src/dtos/Actor/Actor.dto.ts +++ b/clients/player-client/src/dtos/Actor/Actor.dto.ts @@ -17,7 +17,7 @@ import { kebabCase } from 'lodash'; import { Coordinate2d } from '../Coordinate2d.dto'; import { GridFieldArea } from '../Grid/GridFieldArea.type'; import { - SPRITE_HEIGHT, + SPRITE_DEPTH, SPRITE_WIDTH, } from '../../core/IsometricCanvas/utils/SpriteDimensions'; import { Coordinate3d } from '../Coordinate3d.dto'; @@ -74,9 +74,9 @@ export class Actor { y++; } return { - x: x, //Math.ceil(this.position.x), - y: y, //Math.ceil(this.position.y), - z: this.position.z, + x: Math.floor(x), //Math.ceil(this.position.x), + y: Math.floor(y), //Math.ceil(this.position.y), + z: Math.floor(this.position.z), }; } @@ -86,17 +86,25 @@ export class Actor { y: vectors.top.y - 17, }; - // if(this.position.subX < 0.5) { - // baseCoordinate2d.x -= this.position.subX * (SPRITE_WIDTH / 2); - // } - console.log(this.gridRenderPosition()); - console.log(this.position); + const gridRenderPosition = this.gridRenderPosition(); - if (this.position.subX >= 0.6) { - baseCoordinate2d.x += this.position.subX * (SPRITE_WIDTH / 2); - baseCoordinate2d.y += this.position.subX * (SPRITE_HEIGHT / 2); + if (gridRenderPosition.x > this.position.gridX) { + baseCoordinate2d.x -= ((1 - this.position.subX) * SPRITE_WIDTH) / 2; + baseCoordinate2d.y -= ((1 - this.position.subX) * SPRITE_DEPTH) / 2; } + if (gridRenderPosition.y > this.position.gridY) { + baseCoordinate2d.x += ((1 - this.position.subY) * SPRITE_WIDTH) / 2; + baseCoordinate2d.y -= ((1 - this.position.subY) * SPRITE_DEPTH) / 2; + } + + console.table({ + grid: this.position.grid, + gridRender: this.gridRenderPosition(), + base: baseCoordinate2d, + sub: this.position.sub, + }); + // if(this.position.subX <= 0.4) { // baseCoordinate2d.x -= this.position.subX * (SPRITE_WIDTH / 2); // baseCoordinate2d.y -= this.position.subX * (SPRITE_HEIGHT /2); diff --git a/clients/player-client/src/dtos/Actor/ActorPosition.dto.ts b/clients/player-client/src/dtos/Actor/ActorPosition.dto.ts index 04300e83..9f5623f7 100644 --- a/clients/player-client/src/dtos/Actor/ActorPosition.dto.ts +++ b/clients/player-client/src/dtos/Actor/ActorPosition.dto.ts @@ -1,5 +1,5 @@ import { IsNumber } from 'class-validator'; - +import { Coordinate3d } from '../Coordinate3d.dto'; export class ActorPosition { @IsNumber() x: number; @@ -16,6 +16,22 @@ export class ActorPosition { this.z = z; } + get grid(): Coordinate3d { + return { + x: this.gridX, + y: this.gridY, + z: this.gridZ, + }; + } + + get sub(): Coordinate3d { + return { + x: this.subX, + y: this.subY, + z: this.subZ, + }; + } + get gridX(): number { return Math.floor(this.x); } @@ -29,17 +45,16 @@ export class ActorPosition { } get subX(): number { - return this.x % 1; + return Number((this.x % 1).toFixed(1)); } get subY(): number { - return this.y % 1; + return Number((this.y % 1).toFixed(1)); } get subZ(): number { - return this.z % 1; + return Number((this.z % 1).toFixed(1)); } - move(deltas: { x?: number; y?: number; z?: number }) { if (deltas.x !== undefined) { this.x += deltas.x;