Working IsIdle, IsWalking and IsAttackingWithClub

- animations offset not working yet
- animation settings are not yet dynamically set.

Author: serbanghita

README.md

@@ -1,8 +1,33 @@
-# glhf
+glhf
+====
+
+![glhf.js](./docs/logo.png)
+
 > Game library for 2d games written in Typescript. \
 > GL HF stands for "Good luck, have fun!"
 
-### Boostrapping a game
+
+## Packages
+
+* [glhf-assets](./packages/glhf-assets) - Helper to load assets files (JSON, Images).
+* [glhf-bitmask](./packages/glhf-bitmask) - Bitmask library for fast bitwise operations.
+* [glfh-component](./packages/glhf-component) - Generic opinionated ECS Components.
+* [glhf-ecs](./packages/glhf-ecs) - ECS Library that implements the following classes Entity, Component, System, Query, World
+* [glhf-fsm](./packages/glhf-fsm) - Finite State Machine implementation.
+* [glhf-input](./packages/glhf-input) - Implementation of inputs like Keyboard, Mouse and Controller.
+* [glhf-renderer](./packages/glhf-renderer) - Rendering UI and Canvas utilities.
+
+## Demo
+
+* [glhf-demo](./packages/glhf-demo) - A demo of a 2d game implementation using glhf.js library
+
+## Development
+
+Library is currently under development. \
+You can see the progress by following me at https://www.youtube.com/@SerbanTV \
+Catch me on the [Discord server](https://discord.gg/Vur9NaF) to discuss stuff about game dev, ECS, etc.
+
+## Bootstrapping a game (wip)
 
 ```ts
 import {map, state, keyboard, viewport, camera, start} from "@glhf/engine";

docs/logo.png

@@ -6,6 +6,6 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
-  "author": "",
-  "license": "ISC"
+  "author": "Serban Ghita",
+  "license": "MIT"
 }

packages/glhf-component/package.json

@@ -4,13 +4,14 @@ export enum Directions {
     NONE, LEFT, RIGHT, UP, DOWN
 }
 
-export interface IDirectionProps {
+export type DirectionProps = {
     x: Directions.LEFT | Directions.RIGHT | Directions.NONE
-    y: Directions.UP | Directions.DOWN | Directions.NONE
+    y: Directions.UP | Directions.DOWN | Directions.NONE,
+    literal: 'up' | 'down' | 'left' | 'right' | ''
 }
 
 export default class Direction extends Component {
-    constructor(public properties: IDirectionProps) {
+    constructor(public properties: DirectionProps) {
         super(properties);
     }
 }

packages/glhf-component/src/Direction.ts

@@ -0,0 +1,11 @@
+import Component from "../../../glhf-ecs/src/Component";
+
+interface CurrentStateProps {
+    stateName: string;
+}
+
+export default class CurrentState extends Component {
+    constructor(public properties: CurrentStateProps) {
+        super(properties);
+    }
+}

packages/glhf-demo/src/component/CurrentState.ts

@@ -0,0 +1,32 @@
+import Component from "../../../glhf-ecs/src/Component";
+import {StateStatus} from "../state/state-status";
+import {extend} from "../utils";
+
+interface IsAttackingWithClubProps {
+    stateName: string;
+    animationStateName: string;
+    animationTick: number;
+    tick: number;
+    status: StateStatus;
+    [key: string]: any;
+}
+
+export default class IsAttackingWithClub extends Component {
+    constructor(public properties: IsAttackingWithClubProps) {
+        super(properties);
+
+        this.init(properties);
+    }
+
+    public init(properties: IsAttackingWithClubProps) {
+        const defaultProps = {
+            stateName: 'club_attack_one',
+            animationStateName: 'club_attack_one_down',
+            animationTick: 0,
+            tick: 0,
+            status: StateStatus.NOT_STARTED
+        };
+
+        this.properties = extend(defaultProps, properties);
+    }
+}

packages/glhf-demo/src/component/IsAttackingWithClub.ts

@@ -1,14 +1,32 @@
 import Component from "../../../glhf-ecs/src/Component";
+import {StateStatus} from "../state/state-status";
+import {extend} from "../utils";
 
-interface IsIdleState {
-    state: string;
-    animationState: string;
-    stateTick: number;
+interface IsIdleProps {
+    stateName: string;
+    animationStateName: string;
     animationTick: number;
+    tick: number;
+    status: StateStatus;
+    [key: string]: any;
 }
 
 export default class IsIdle extends Component {
-    constructor(public properties: IsIdleState) {
+    constructor(public properties: IsIdleProps) {
         super(properties);
+
+        this.init(properties);
+    }
+
+    public init(properties: IsIdleProps) {
+        const defaultProps = {
+            stateName: 'idle',
+            animationStateName: 'idle_down',
+            animationTick: 0,
+            tick: 0,
+            status: StateStatus.NOT_STARTED
+        };
+
+        this.properties = extend(defaultProps, properties);
     }
 }

packages/glhf-demo/src/component/IsIdle.ts

@@ -1,14 +1,32 @@
 import Component from "../../../glhf-ecs/src/Component";
+import {StateStatus} from "../state/state-status";
+import {extend} from "../utils";
 
-interface IsWalkingState {
-    state: string;
-    animationState: string;
-    stateTick: number;
+interface IsWalkingProps {
+    stateName: string;
+    animationStateName: string;
     animationTick: number;
+    tick: number;
+    status: StateStatus;
+    [key: string]: any;
 }
 
 export default class IsWalking extends Component {
-    constructor(public properties: IsWalkingState) {
+    constructor(public properties: IsWalkingProps) {
         super(properties);
+
+        this.init(properties);
+    }
+
+    public init(properties: IsWalkingProps) {
+        const defaultProps = {
+            stateName: 'walking',
+            animationStateName: 'walk_down',
+            animationTick: 0,
+            tick: 0,
+            status: StateStatus.NOT_STARTED
+        };
+
+        this.properties = extend(defaultProps, properties);
     }
 }

packages/glhf-demo/src/component/IsWalking.ts

@@ -1,5 +1,4 @@
 import ComponentRegistry from "../../glhf-ecs/src/ComponentRegistry";
-import Entity from "../../glhf-ecs/src/Entity";
 import World from "../../glhf-ecs/src/World";
 import Body from "../../glhf-component/src/Body";
 import Position from "../../glhf-component/src/Position";
@@ -15,12 +14,13 @@ import {default as KeyboardInput, InputActions} from "../../glhf-input/src/Keybo
 import PlayerKeyboardSystem from "./system/PlayerKeyboardSystem";
 import RenderSystem from "./system/RenderSystem";
 import PreRenderSystem from "./system/PreRenderSystem";
-import {PlayerState} from "./component/PlayerState";
 import IsIdle from "./component/IsIdle";
 import IsWalking from "./component/IsWalking";
 import IdleSystem from "./system/IdleSystem";
 import WalkingSystem from "./system/WalkingSystem";
-import StateSystem from "./system/StateSystem";
+import CurrentState from "./component/CurrentState";
+import IsAttackingWithClub from "./component/IsAttackingWithClub";
+import AttackingWithClubSystem from "./system/AttackingWithClubSystem";
 
 // 0. Create the UI and canvas.
 const $wrapper = createWrapperElement('game-wrapper', 640, 480);
@@ -45,24 +45,24 @@ input.bindKey('w', InputActions.MOVE_UP);
 input.bindKey('s', InputActions.MOVE_DOWN);
 input.bindKey('a', InputActions.MOVE_LEFT);
 input.bindKey('d', InputActions.MOVE_RIGHT);
-input.bindKey('q', InputActions.ACTION_1);
+input.bindKey(' ', InputActions.ACTION_1);
 input.listen();
 
-// Register all "Components".
-const reg = ComponentRegistry.getInstance();
-reg.registerComponent(Body);
-reg.registerComponent(Position);
-reg.registerComponent(Direction);
-reg.registerComponent(Keyboard);
-reg.registerComponent(Renderable);
-reg.registerComponent(SpriteSheet);
-reg.registerComponent(IsIdle);
-reg.registerComponent(IsWalking);
-reg.registerComponent(State);
-
 // Create the current "World" (scene).
 const world = new World();
 
+// Register all "Components".
+world.registerComponent(Body)
+    .registerComponent(Position)
+    .registerComponent(Direction)
+    .registerComponent(Keyboard)
+    .registerComponent(Renderable)
+    .registerComponent(SpriteSheet)
+    .registerComponent(IsIdle)
+    .registerComponent(IsWalking)
+    .registerComponent(IsAttackingWithClub)
+    .registerComponent(CurrentState);
+
 world.createEntity("dino")
     .addComponent(Body, { width: 10, height: 20 });
 
@@ -72,12 +72,6 @@ world.createEntity("player")
     .addComponent(Direction, { x: Directions.NONE, y: Directions.NONE })
     .addComponent(Keyboard, { up: "w", down: "s", left: "a", right: "d" })
     .addComponent(Renderable)
-    .addComponent(IsIdle, {
-        state: 'idle',
-        animationState: 'idle_up',
-        stateTick: 0,
-        animationTick: 0
-    })
     .addComponent(SpriteSheet, {
         name: 'kil',
         offset_x: 128,
@@ -87,36 +81,34 @@ world.createEntity("player")
         animations: new Map(),
         animationCurrentFrame: '',
         animationDefaultFrame: '',
-    }).addComponent(State, {
-        state: PlayerState.idle,
-        stateTick: 0,
-        animationState: kilDefaultAnimationFrameName,
-        animationTick: 0
-    });
-
-
-world.createQuery("renderable", { all: [Renderable, SpriteSheet, Position] });
-world.createQuery("keyboard", { all: [Keyboard] });
-world.createQuery("idle", {all: [IsIdle]});
-world.createQuery("walking", {all: [IsWalking]});
-
-
-// Pre-loop system run.
-const preRenderSystem = new PreRenderSystem(world.getQuery("renderable"));
-preRenderSystem.update(0);
-const inputSystem = new PlayerKeyboardSystem(world.getQuery("keyboard"), input);
-const idleSystem = new IdleSystem(world.getQuery("idle"));
-const walkingSystem = new WalkingSystem(world.getQuery("walking"));
-const renderSystem = new RenderSystem(world.getQuery("renderable"), $foreground);
-const stateSystem = new StateSystem(world.getQuery("renderable")); // @todo: Make this work on all entities.
-
+    }).addComponent(IsIdle, {
+        animationStateName: kilDefaultAnimationFrameName,
+    }).addComponent(CurrentState, { stateName: 'IsIdle' })
+
+world.createQuery("keyboard-query", { all: [Keyboard] });
+world.createQuery("idle-query", {all: [IsIdle]});
+world.createQuery("walking-query", {all: [IsWalking]});
+world.createQuery("attacking-with-club-query", {all: [IsAttackingWithClub]});
+world.createQuery("renderable-query", { all: [Renderable, SpriteSheet, Position] });
+
+world.registerSystem("pre-render-system", PreRenderSystem)
+    .registerSystem("input-system", PlayerKeyboardSystem)
+    .registerSystem("idle-system", IdleSystem)
+    .registerSystem("walking-system", WalkingSystem)
+    .registerSystem("attacking-with-club-system", AttackingWithClubSystem)
+    .registerSystem("render-system", RenderSystem);
+
+world.createSystem("pre-render-system", "renderable-query")
+    .createSystem("input-system", "keyboard-query", input)
+    .createSystem("idle-system", "idle-query")
+    .createSystem("walking-system", "walking-query")
+    .createSystem("attacking-with-club-system", "attacking-with-club-query")
+    .createSystem("render-system", "renderable-query", $foreground)
+
+world.getSystem("pre-render-system").update(0);
 
 const loop = (now: DOMHighResTimeStamp) => {
-    inputSystem.update(now);
-    idleSystem.update(now);
-    walkingSystem.update(now);
-    stateSystem.update(now);
-    renderSystem.update(now);
+    world.systems.forEach(system => system.update(now));
 
     window.requestAnimationFrame(loop);
 };
@@ -125,8 +117,8 @@ window.requestAnimationFrame(loop);
 
 
 // @ts-ignore
-// window['engine'] = {
-//     'q': q
-// };
+window['engine'] = {
+    world
+};
 
 

packages/glhf-demo/src/index.ts

@@ -1,9 +1,3 @@
-export const enum PlayerState {
-    idle = 'idle',
-    walk = 'walk',
-    club_attack = 'club_attack'
-}
-
 export const enum PlayerAnimationState {
     "idle" = "idle",
     "walk_left" = "walk_left",

packages/glhf-demo/src/component/PlayerState.ts packages/glhf-demo/src/state/player-animation-states.ts

@@ -0,0 +1,6 @@
+export const enum PlayerState {
+    idle = 'idle',
+    walk = 'walk',
+    club_attack = 'club_attack'
+}
+

packages/glhf-demo/src/state/player-states.ts

@@ -0,0 +1,5 @@
+export enum StateStatus {
+    NOT_STARTED = 0,
+    STARTED = 1,
+    FINISHED = 2
+}