Source: pixi-renderers/layer-pixi-renderer.js

// @ts-check
/*
 * GDevelop JS Platform
 * Copyright 2013-2016 Florian Rival ([email protected]). All rights reserved.
 * This project is released under the MIT License.
 */

/**
 * The renderer for a gdjs.Layer using Pixi.js.
 *
 * @class LayerPixiRenderer
 * @memberof gdjs
 * @param {gdjs.Layer} layer The layer
 * @param {gdjs.RuntimeScenePixiRenderer} runtimeSceneRenderer The scene renderer
 */
gdjs.LayerPixiRenderer = function(layer, runtimeSceneRenderer) {
  // @ts-ignore
  this._pixiContainer = new PIXI.Container();
  /** @type Object.<string, gdjsPixiFiltersToolsFilter> */
  this._filters = {};
  this._layer = layer;
  runtimeSceneRenderer.getPIXIContainer().addChild(this._pixiContainer);

  this._setupFilters();
};

gdjs.LayerRenderer = gdjs.LayerPixiRenderer; //Register the class to let the engine use it.

/**
 * Update the position of the PIXI container. To be called after each change
 * made to position, zoom or rotation of the camera.
 * @private
 */
gdjs.LayerPixiRenderer.prototype.updatePosition = function() {
  var angle = -gdjs.toRad(this._layer.getCameraRotation());
  var zoomFactor = this._layer.getCameraZoom();

  this._pixiContainer.rotation = angle;
  this._pixiContainer.scale.x = zoomFactor;
  this._pixiContainer.scale.y = zoomFactor;

  var cosValue = Math.cos(angle);
  var sinValue = Math.sin(angle);
  var centerX =
    this._layer.getCameraX() * zoomFactor * cosValue -
    this._layer.getCameraY() * zoomFactor * sinValue;
  var centerY =
    this._layer.getCameraX() * zoomFactor * sinValue +
    this._layer.getCameraY() * zoomFactor * cosValue;

  this._pixiContainer.position.x = -centerX;
  this._pixiContainer.position.y = -centerY;
  this._pixiContainer.position.x += this._layer.getWidth() / 2;
  this._pixiContainer.position.y += this._layer.getHeight() / 2;
};

gdjs.LayerPixiRenderer.prototype.updateVisibility = function(visible) {
  this._pixiContainer.visible = !!visible;
};

gdjs.LayerPixiRenderer.prototype.updateTime = function() {
  for(var filterName in this._filters) {
    var filter = this._filters[filterName];
    filter.update(filter.pixiFilter, this._layer);
  }
};

gdjs.LayerPixiRenderer.prototype._setupFilters = function() {
  var effects = this._layer.getEffects();
  if (effects.length === 0) {
    return;
  }

  this._filters = {};

  // @ts-ignore
  /** @type PIXI.Filter[] */
  var pixiFilters = [];
  for (var i = 0; i < effects.length; ++i) {
    var effect = effects[i];
    var filterCreator = gdjs.PixiFiltersTools.getFilterCreator(
      effect.effectType
    );
    if (!filterCreator) {
      console.log(
        'Filter "' +
          effect.name +
          '" has an unknown effect type: "' +
          effect.effectType +
          '". Was it registered properly? Is the effect type correct?'
      );
      continue;
    }

    /** @type gdjsPixiFiltersToolsFilter */
    var filter = {
      pixiFilter: filterCreator.makePIXIFilter(this._layer, effect),
      updateDoubleParameter: filterCreator.updateDoubleParameter,
      updateStringParameter: filterCreator.updateStringParameter,
      updateBooleanParameter: filterCreator.updateBooleanParameter,
      update: filterCreator.update,
    };

    pixiFilters.push(filter.pixiFilter);
    this._filters[effect.name] = filter;
  }

  this._pixiContainer.filters = pixiFilters;
};

/**
 * Add a child to the pixi container associated to the layer.
 * All objects which are on this layer must be children of this container.
 *
 * @param child The child (PIXI object) to be added.
 * @param zOrder The z order of the associated object.
 */
gdjs.LayerPixiRenderer.prototype.addRendererObject = function(child, zOrder) {
  child.zOrder = zOrder; //Extend the pixi object with a z order.

  for (var i = 0, len = this._pixiContainer.children.length; i < len; ++i) {
    if (this._pixiContainer.children[i].zOrder >= zOrder) {
      //TODO : Dichotomic search
      this._pixiContainer.addChildAt(child, i);
      return;
    }
  }
  this._pixiContainer.addChild(child);
};

/**
 * Change the z order of a child associated to an object.
 *
 * @param child The child (PIXI object) to be modified.
 * @param newZOrder The z order of the associated object.
 */
gdjs.LayerPixiRenderer.prototype.changeRendererObjectZOrder = function(
  child,
  newZOrder
) {
  this._pixiContainer.removeChild(child);
  this.addRendererObject(child, newZOrder);
};

/**
 * Remove a child from the internal pixi container.
 * Should be called when an object is deleted or removed from the layer.
 *
 * @param child The child (PIXI object) to be removed.
 */
gdjs.LayerPixiRenderer.prototype.removeRendererObject = function(child) {
  this._pixiContainer.removeChild(child);
};

/**
 * Update the parameter of an effect (with a number).
 * @param {string} name The effect name
 * @param {string} parameterName The parameter name
 * @param {number} value The new value for the parameter
 */
gdjs.LayerPixiRenderer.prototype.setEffectDoubleParameter = function(
  name,
  parameterName,
  value
) {
  var filter = this._filters[name];
  if (!filter) return;

  filter.updateDoubleParameter(filter.pixiFilter, parameterName, value);
};

/**
 * Update the parameter of an effect (with a string).
 * @param {string} name The effect name
 * @param {string} parameterName The parameter name
 * @param {string} value The new value for the parameter
 */
gdjs.LayerPixiRenderer.prototype.setEffectStringParameter = function(
  name,
  parameterName,
  value
) {
  var filter = this._filters[name];
  if (!filter) return;

  filter.updateStringParameter(filter.pixiFilter, parameterName, value);
};

/**
 * Enable or disable the parameter of an effect (boolean).
 * @param {string} name The effect name
 * @param {string} parameterName The parameter name
 * @param {boolean} value The new value for the parameter
 */
gdjs.LayerPixiRenderer.prototype.setEffectBooleanParameter = function(
  name,
  parameterName,
  value
) {
  var filter = this._filters[name];
  if (!filter) return;

  filter.updateBooleanParameter(filter.pixiFilter, parameterName, value);
};

/**
 * Enable an effect.
 * @param {string} name The effect name
 * @param {boolean} value Set to true to enable, false to disable
 */
gdjs.LayerPixiRenderer.prototype.enableEffect = function(name, value) {
  var filter = this._filters[name];
  if (!filter) return;

  gdjs.PixiFiltersTools.enableEffect(filter, value);
};

/**
 * Check if an effect is enabled.
 * @param {string} name The effect name
 * @return {boolean} true if the filter is enabled
 */
gdjs.LayerPixiRenderer.prototype.isEffectEnabled = function(name) {
  var filter = this._filters[name];
  if (!filter) return false;

  return gdjs.PixiFiltersTools.isEffectEnabled(filter);
};