Introduction

This plugin applies the CSS filter to your game canvas. CSS Filter is a built-in function within the browser. and this function is possible to modify images very quickly. For example, In case of a blur filter is used for indicating an error text.


Usage

Download the plugin and place it in the folder called your_project_directory/js/plugins

Then In Plugin Manager, Select the RS_SimpleCanvasFilter.js plugin and add it.


Plugin Commands

This plugin has ten filters, which could be applying to your canvas.


CanvasFilter Whole blur 5px


CanvasFilter Whole brightness 0.5


CanvasFilter Whole contrast 150%


CanvasFilter Whole dropShadow 16px 16px 20px gray


CanvasFilter Whole grayscale 50%


CanvasFilter Whole hueRotate 50deg


CanvasFilter Whole invert true


CanvasFilter Whole opacity 25%


CanvasFilter Whole saturate 30%


CanvasFilter Whole sepia 60%


This plugin can typically involve multiple filters. 


To use this, You can apply the multiple filters to your canvas.


CanvasFilter Whole setMultipleFlag true


To use this, You can involve only the one filter to your canvas


CanvasFilter Whole setMultipleFlag false


This command clears all filter to your canvas.


CanvasFilter Whole clear


Script Calls

You can implement the powerful effects by using these code.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 /**
   * @method setCanvasFilter
   * @param {String} filterName blur, brightness, contrast, grayscale, hueRotate, opacity, saturate, sepia
   * @param {Number} amount amount of effect.
   * @param {Boolean} isMultipleFilters Decide whether this parameter involves the multiple filters.
   * @param {Canvas} target If you omitted this parameter, It applies its filter to your canvas.
   */
  Graphics.setCanvasFilter(filterName, amount, isMultipleFilters, target);
 
  /**
   * @method setClearCanvasFilter
   * @param {Canvas} target If you omitted this parameter, It applies its filter to your canvas.
   */
  Graphics.setClearCanvasFilter(target);
 
  /**
   * @method setCanvasDropShadowFilter
   * @param {Number} hShadow px
   * @param {Number} vShadow px
   * @param {Number} blur px
   * @param {String} color string
   * @param {Boolean} isMultipleFilters Decide whether this parameter involves the multiple filters.
   * @param {Canvas} target If you omitted this parameter, It applies its filter to your canvas.
   */
  Graphics.setCanvasDropShadowFilter(hShadow, hShadow, blur, color, isMultipleFilters, target);
 
  /**
   * @method setCanvasInvert
   * @param {Boolean} activate Decide whether this parameter activates for invert filter.
   * @param {Boolean} isMultipleFilters Decide whether this parameter involves the multiple filters.
   * @param {Canvas} target If you omitted this parameter, It applies its filter to your canvas.
   */
   */
  Graphics.setCanvasInvert(activate, isMultipleFilters, target);
cs



Download

Github RAW


Change Log

2016.10.06 (v1.0.0) - First Release.

2017.10.06 (v1.0.1) - Fixed the issue that could not set the number after the decimal point.


Credit and Thanks

Biud436


Terms of Use

Free for commercial and non-commercial use.