Filter Component & Directive

Filters implement Pixi filters and can be applied to any Pixi DisplayObject (such as Sprites or Containers). To see a list of the filters available and their options please refer to: https://pixijs.io/pixi-filters/tools/demo/

Directive

Member Variables

  @Input("filterStage") container;
  @Input("a2pfilter") set filterConfig(value)
  _filterConfig = {
    type: "BlurFilter"
  };
  filter: any;

Member Functions

  ngOnInit()
  initFilter()
  applyConfig() //Applies passed config to active filter(s)
  applyFilter() //Adds filter to container
  wipeFilter()
  ngOnDestroy()
  getAvailableFilters(): Array<String>

Example

<sprite [container]="myContainer" [anchor]="{ x: 0.5, y: 1 }" frameName="bunny" #avatarSpr [filterStage]="avatarSpr.spriteStage" [a2pfilter]="{type: 'DropShadowFilter', blur: 2, quality: 8, alpha: 0.5}">
  </sprite>

The above example would apply a filter to the SpriteComponent's own spriteStage member variable

Component

Currently, only blur is supported as filterName. The FilterComponent will be deprecated in favor of promoting using just the FilterDirective.

Member Variables

  @Input() filterName: string = null;
  @Input() container: PIXI.Container = null;
  @Input() config: any = {};
  filter: any;
  filterIndex: number;

Member Functions

ngOnInit //Adds filter to the container
ngOnDestroy //Removes filter from container

Example

		<filter-effect
			[container]="mainStage"
			filterName="blur"
			[config]="{
				blur: 0.5
			}">
		</filter-effect>