Canvas Filter - RPG Maker MV

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.

 /**
   * @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);

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.