This class defines a Renderer object to be used inside a Haxball room. A Renderer is a piece of code that generates graphical representations for some objects in memory.

• Renderer.addonType: This will always return the value of AddonType.Renderer. This value can be useful for checks while importing addons from files etc. Example workflow of importing addons:

  1- Read the file contents. 2- Execute it and expect a function as the result. 3- Execute the function with the new keyword and get an instance of the addon. 4- Check addonInstance.__proto__.constructor.addonType value to see whether the type of addon is correct. 5- Store the object somewhere and use it when you are creating/joining a room.

Defines these functions that has to exist in every Renderer:

• Renderer.prototype.defineMetadata(metadata: object): void

  This function is called internally inside the constructor of all Renderers by default. The function body is empty by default. This means that the metadata values are not stored in Renderer objects by default, because they are not useful in a non-GUI node.js environment. If we want to make use of the metadata, we might override this behavior by overriding this method. Remember that this should be done after initializing the API and before initializing any Renderers.

  Parameters:

  • metadata: object: An object that holds some metadata values. This value might depend on what you want to do with this API. The examples in the GitHub repo are intended to be shown in a web application GUI that can be accessed by anyone. Therefore, they use the following structure for this object:
    • name: string: Name of the Renderer that will be displayed on the GUI.
    • version: number: The current version number of this Renderer.
    • author: string: The author of this Renderer.
    • description: string: A detailed description of this Renderer.

  Return value: None.

  Default definition (in node.js):

  Renderer.prototype.defineMetadata = function(metadata){};

  Example (default) definition (in a complex website):

  Renderer.prototype.defineMetadata = function(metadata){
    this.metadata = metadata;
  };

• Renderer.prototype.setVariableGUIProps(varName: string, ...vals: ({name: string, value: any})[]): void

  This function might be used to modify some GUI properties regarding a specific variable called varName. The function body is empty by default, since we do not have a GUI in a non-GUI node.js environment. All other parameters after the first parameter should be structured as {name: propName, value: propValue}. Here, each property named propName is requested to set its new value to propValue. For example; in a GUI environment, setVariableGUIProps("testVariable", {name: "visible", value: false}) could make the testVariable disappear from the GUI.

  Parameters:

  • varName: string: The name of the variable whose GUI properties are desired to be modified.
  • ...vals: ({name: string, value: any})[]: The property name/value pairs.

  Return value: None.

• Renderer.prototype.defineVariable(variableObj: Variable): void

  This function defines a variable inside the Addon object that can be changed from outside. If we want to make use of the metadata that we sent into this function, we can override this function. Only name and value fields are used by the default implementation. The implementation also depends on the API's global config.noVariableValueChangeEvent variable.

  Parameters:

  • variableObj: Variable: An object that might hold some metadata values along with the variable's name and value. This object might depend on what you want to do with this API. The examples in the GitHub repo are intended to be shown in a web application GUI that can be accessed by anyone. Therefore, the following structure is used for this object:
    • name: string: Name of the variable.
    • value: any: The default/initial value of this variable.
    • type: VariableType: Type of this variable. (omittable)
    • description: string: A detailed description of this variable. (omittable)
    • range: object: The possible range of this variable's value. Should only be applied to numbers(literally) and maybe strings(for min and max length of the string). (omittable)
      • min: number: The minimum value for this variable. (omittable)
      • max: number: The maximum value for this variable. (omittable)
      • step: number: The step increment/decrement for this variable. (for easy increment/decrement via a spinbox) (omittable)

  Return value: The initial value of this variable.

  Example (default) definition (in a complex website):

  Renderer.prototype.defineMetadata = function(metadata){
    //...do other stuff...
    this.variables = {}; // define an object that will hold all variable details inside all Renderers.
  };
  var originalDefineVariable = Renderer.prototype.defineVariable;
  Renderer.prototype.defineVariable = function(variable){
    //...do other stuff...
    originalDefineVariable(variable);
    this.variables[variable.name] = { // store all variable details inside all Renderers, so that you can show them later in your GUI application if you want to.
      type: variable.type, 
      range: variable.range, 
      description: variable.description
    };
    //...do other stuff...
  };

Creates a new Renderer instance.

• metadata: Any information that we would want to show/update inside a GUI application about this Renderer. This is not used by the API by default, but we can reprogram the Renderer's prototype to make use of this value if we want.

Example Renderer definition:

function TestRenderer(API){
  const { Renderer } = API;
  Object.setPrototypeOf(this, Renderer.prototype);
  Renderer.call(this, {
    version: "0.1",
    author: "author",
    description: `This is a test renderer`
  });
  // Renderer codes here...
}

• room: Room: The Room object that this Renderer is attached to.

The API can work with the following callback functions inside a Renderer object.

• initialize(): void

  If defined, called while creating or joining a room, or during a call to Room.setRenderer. You should write all custom initialization logic inside this callback function.

  Parameters: None

  Return value: void.

• finalize(): void

  If defined, called while leaving a room, or during a call to Room.setRenderer. We should write all custom finalization logic inside this callback function.

  Parameters: None

  Return value: void.

• render(): void

  This callback should always be defined, since this function holds the main purpose of the Renderer class. All rendering logic is supposed to reside inside this function. The default renderer code first calls room.extrapolate(milliseconds) function and then renders the new extrapolated room state using an outer canvas's Context2D object. The callback is used internally by the game engine inside window.requestAnimationFrame callback.

  Parameters: None

  Return value: void.

• Common Callbacks

  A Renderer calls all common callbacks by prepending on before the callback's name. As an example; if the common callback is RoomPropertiesChange(props: object), it is called as customData = onRoomPropertiesChange(props: object, customData: object) here.

  We have to select the callbacks that we want to use and prepend on to their name while defining them in our Renderer. All of these callbacks may also take an extra customData parameter that is passed from the previously called callback and may also return a new customData object to the next callback in the callback queue. This is done to be able to better communicate between API components.

  NOTE: Renderer classes do not call modifier callbacks. If you need them, define them inside a RoomConfig or a Plugin instead.

  Example: Here is how we can write the code to add a RoomPropertiesChange callback to our Renderer:

  this.onRoomPropertiesChange = function(props, customData){
    // callback code here...
    // return customData; // you can return whatever you want here
  }

  You can see the complete list of common callbacks here.