From 14bac4be783587472f02a1044451b9164f73f8d1 Mon Sep 17 00:00:00 2001 From: wartoshika Date: Wed, 26 Jul 2017 17:42:25 +0200 Subject: [PATCH] entity movement ready to go --- example/rpg/MyAwesomeRpgGame.ts | 9 ++++- example/rpg/entity/Link.ts | 13 +++---- src/client/camera/OrthogonalCamera.ts | 20 ++--------- src/client/render/BaseEntityRenderer.ts | 6 ++++ src/client/render/BasicRenderer.ts | 8 +++++ src/client/render/Renderer.ts | 5 +++ .../render/canvas/CanvasEntityRenderer.ts | 34 ++++++++++++++++++- src/client/render/canvas/CanvasRenderer.ts | 3 +- src/shared/entity/Entity.ts | 24 +++++++++++++ 9 files changed, 93 insertions(+), 29 deletions(-) diff --git a/example/rpg/MyAwesomeRpgGame.ts b/example/rpg/MyAwesomeRpgGame.ts index d13561e..7257bb4 100644 --- a/example/rpg/MyAwesomeRpgGame.ts +++ b/example/rpg/MyAwesomeRpgGame.ts @@ -89,8 +89,15 @@ class MyAwesomeRpgGame extends Client { */ public update(myGame: Game, input: Input): void { + // get the arrow keys + const arrowKeys = input.getArrowKeys(); + // handle movement for link - this.link.handleMovement(input.getArrowKeys()); + if (arrowKeys.right) this.link.translatePosition(5, 0); + else if (arrowKeys.left) this.link.translatePosition(-5, 0); + if (arrowKeys.up) this.link.translatePosition(0, -5); + else if (arrowKeys.down) this.link.translatePosition(0, 5); + } } diff --git a/example/rpg/entity/Link.ts b/example/rpg/entity/Link.ts index 504b91a..fbb3d03 100644 --- a/example/rpg/entity/Link.ts +++ b/example/rpg/entity/Link.ts @@ -98,17 +98,14 @@ export class Link extends Entity implements CanCollide { */ public handleMovement(arrowKeys: InputArrowKeys): void { - /*// get moveable directions - const blockedDirections = this.getBlockedDirections(); - // move the player - if (arrowKeys.left && !blockedDirections.Left) { + if (arrowKeys.left) { this.setPosition(this.position.add( new Vector2D(-5, 0) )); this.playAnimation('run_left', true); - } else if (arrowKeys.right && !blockedDirections.Right) { + } else if (arrowKeys.right) { this.setPosition(this.position.add( new Vector2D(5, 0) @@ -116,13 +113,13 @@ export class Link extends Entity implements CanCollide { this.playAnimation('run_right', true); } - if (arrowKeys.down && !blockedDirections.Down) { + if (arrowKeys.down) { this.setPosition(this.position.add( new Vector2D(0, 5) )); this.playAnimation('run_down', true); - } else if (arrowKeys.up && !blockedDirections.Up) { + } else if (arrowKeys.up) { this.setPosition(this.position.add( new Vector2D(0, -5) @@ -139,7 +136,7 @@ export class Link extends Entity implements CanCollide { // stop animation this.stopAnimation(); - }*/ + } } } diff --git a/src/client/camera/OrthogonalCamera.ts b/src/client/camera/OrthogonalCamera.ts index 8510b9d..406ce24 100644 --- a/src/client/camera/OrthogonalCamera.ts +++ b/src/client/camera/OrthogonalCamera.ts @@ -50,24 +50,8 @@ export class OrthogonalCamera extends BaseCamera { */ public isEntityVisible(entity: Entity): boolean { - // get the size of the entity - const entityDimension = Vector2D.from( - entity.getWidth(), - entity.getHeight() - ); - - // calculate the position of the entity including camera scale - const entityPosition = entity.getPosition().multiply( - this.getScaleVector() - ); - - // substract entity position and size for a max offset vector - const entityScaledPoisition = entityPosition.substract(entityDimension); - - // check - return this.drawingDimension.x >= entityScaledPoisition.x - && - this.drawingDimension.y >= entityScaledPoisition.y; + // currently render all entities + return true; } /** diff --git a/src/client/render/BaseEntityRenderer.ts b/src/client/render/BaseEntityRenderer.ts index 636e422..dd6c0bb 100644 --- a/src/client/render/BaseEntityRenderer.ts +++ b/src/client/render/BaseEntityRenderer.ts @@ -6,6 +6,7 @@ */ import { EntityRenderer } from './EntityRenderer'; +import { AssetStorage } from '../asset/AssetStorage'; import { Singleton } from '../../shared/helper/Singleton'; import { RenderableEntity } from '../entity'; import { Camera } from '../camera/Camera'; @@ -22,6 +23,11 @@ export abstract class BaseEntityRenderer extends Singleton implements EntityRend */ protected worldRenderer: WorldRenderer; + /** + * the asset storage for entity images + */ + protected assetStorage = AssetStorage.getInstance(); + /** * logger instance */ diff --git a/src/client/render/BasicRenderer.ts b/src/client/render/BasicRenderer.ts index c08b43b..b801489 100644 --- a/src/client/render/BasicRenderer.ts +++ b/src/client/render/BasicRenderer.ts @@ -89,6 +89,14 @@ export abstract class BasicRenderer extends Singleton implements Renderer { return this.currentCamera; } + /** + * get the last drawing area update timestamp + */ + public getLastUpdate(): number { + + return this.fps.lastUpdate; + } + /** * print the current fps on the canvas */ diff --git a/src/client/render/Renderer.ts b/src/client/render/Renderer.ts index 8f2d497..bb3410c 100644 --- a/src/client/render/Renderer.ts +++ b/src/client/render/Renderer.ts @@ -54,4 +54,9 @@ export interface Renderer { */ setCamera(camera: Camera): void; + /** + * get the last drawing area update timestamp + */ + getLastUpdate(): number; + } diff --git a/src/client/render/canvas/CanvasEntityRenderer.ts b/src/client/render/canvas/CanvasEntityRenderer.ts index 4dc13c0..ac1e097 100644 --- a/src/client/render/canvas/CanvasEntityRenderer.ts +++ b/src/client/render/canvas/CanvasEntityRenderer.ts @@ -7,12 +7,21 @@ import { BaseEntityRenderer } from '../BaseEntityRenderer'; import { RenderableEntity } from '../../entity/RenderableEntity'; +import { Image, AssetType } from '../../asset'; +import { Vector2D } from '../../../shared'; /** * an entity renderer for canvas */ export class CanvasEntityRenderer extends BaseEntityRenderer { + constructor( + drawingDimension: Vector2D, + protected ctx: CanvasRenderingContext2D + ) { + super(drawingDimension); + } + /** * renders the given entity */ @@ -25,7 +34,30 @@ export class CanvasEntityRenderer extends BaseEntityRenderer { if (!entity.isVisible() || !camera.isEntityVisible(entity)) return; // get the position for the entity - + const positionVector = camera.translatePosition(entity.getPosition()); + + // get image and scale vector + const entityImageName = entity.getImage(); + let entityScaleVector = Vector2D.from(entity.getScale()); + + // get the image from the asset store + const entityImage = this.assetStorage.getAsset( + entityImageName, AssetType.Image + ).getData() as ImageBitmap; + + // sacle the entity + entityScaleVector = entityScaleVector.multiply(Vector2D.from( + entityImage.width, entityImage.height + )); + + // draw the image + this.ctx.drawImage( + entityImage, + 0, 0, + entityImage.width, entityImage.height, + positionVector.x, positionVector.y, + entityScaleVector.x, entityScaleVector.y + ); } } diff --git a/src/client/render/canvas/CanvasRenderer.ts b/src/client/render/canvas/CanvasRenderer.ts index 74a056a..920de7b 100644 --- a/src/client/render/canvas/CanvasRenderer.ts +++ b/src/client/render/canvas/CanvasRenderer.ts @@ -62,7 +62,8 @@ export class CanvasRenderer extends BasicRenderer { this.entityRenderer = new CanvasEntityRenderer( Vector2D.from( this.gameDimension.x, this.gameDimension.y - ) + ), + this.ctx ); } diff --git a/src/shared/entity/Entity.ts b/src/shared/entity/Entity.ts index 4142a70..bbb97ba 100644 --- a/src/shared/entity/Entity.ts +++ b/src/shared/entity/Entity.ts @@ -51,4 +51,28 @@ export abstract class Entity { this.position = position; } + + /** + * changes the position of the position by applying + * a vector addition + * + * @param positionTranslation + * @param positionTranslationY + */ + public translatePosition( + positionTranslation: Vector2D | number, + positionTranslationY?: number + ): void { + + // number given? + if (isFinite(positionTranslation as number)) { + + positionTranslation = Vector2D.from( + positionTranslation as number, positionTranslationY + ); + } + + // add the position + this.position = this.position.add(positionTranslation as Vector2D); + } }