@hology/gameplay v0.0.0

Hology Gameplay

A framework to help with implementing game logic.

It provides dependency injection, the actor & component model and various utilities for implementing gameplay.

Start a game

While the @hology/core package provides a method to load a scene built in the editor, this package provide you with a way to also start the game with your own game class which is the starting point for your game's implementation. From this class you can initiate verything you need at the start of your game by calling services, instantiation actors and such.

First of you need a Service class which is just any class with the @Service() decorator.

@Service()
class Game {
  constructor() {}
}

Pass this class (not an instance of the class to the initiateGame function and some additional configurations necessary to load the scene into an HTML element.

const game = initiateGame(Game, {
  element,
  sceneName,
  dataDir,
  shaders
})

Game class

You likely want to provide input to the game through another UI framework like React or Angular such as when a button is clicked. The returned game class can be the entry point for doing this.

You may also want to get access to state from inside the game like player health. This can be provided as anything you want to have access to could be provided by you game class. Ideally for state information you want to use some sort of event emitter to update the dom or set state that gets reflected in the UI. This can be a lot of responsibility to put on the game class. However, you can also just designate various services in the game that provides this and the game instance can return references of these services.

A common use case could be to want to display an actor's property like health. To do this, you can represent the health value as an Rxjs Subject. To update it you call next(value) on the subject and whatever needs to use the value can subscribe on the subject. If you are using something like Angular, you could also just bind the attribute directly to your template and whenever there is an update to the value it UI will update. If you are using React Hooks, you can call the state update function whenever there is a new value.

Dependency injection

Preferred way

Inject services by using constructor arguments. This makes it easier to potentially write automated unit tests as you can easily pass in a mocked service.

Components could also be passed in as constructor arguments but unless you want to override them when instantiating the class, it's nice to define them as class properties and instantiating the component with a call to attach or using the Attach decorator.

React apps created using create-react-app

https://github.com/leonardfactory/babel-plugin-transform-typescript-metadata#readme

You also have to follow this guide to be able to configure babel via the .babelrc file https://dev.to/ansonh/simplest-way-to-install-babel-plugins-in-create-react-app-7i5

It should now be possible to inject dependencies via your constructor.

Fallback solution

If decorator metadata can not be supported, you can work around it by adding dependencies like services and components as properties and instantiating them with calls to attach and inject.

Altough you can also just instantiatte the services and components yourself as they are just classes, if they are part of the gameplay framework or a third party library that supports decorator metadata, then they would not be constructed correctly.