-
Notifications
You must be signed in to change notification settings - Fork 263
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
0c14b00
commit c0dfc2d
Showing
4 changed files
with
376 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,373 @@ | ||
## Introduction | ||
|
||
Attach properties to a game object, to enable/disable/control [builtin preFX or postFX effects](shader-builtin.md). | ||
|
||
- Author: Rex | ||
- Method only | ||
- Pre-fx, and Post-fx shader effects | ||
|
||
!!! warning "WebGL only" | ||
Only work in WebGL render mode. | ||
|
||
## Live demos | ||
|
||
- [Color effects](https://codepen.io/rexrainbow/pen/JjeLYQb) | ||
|
||
## Usage | ||
|
||
[Sample code](https://github.com/rexrainbow/phaser3-rex-notes/blob/master/examples/effect-properties) | ||
|
||
### Install plugin | ||
|
||
#### Load minify file | ||
|
||
- Load plugin (minify file) in preload stage | ||
```javascript | ||
scene.load.plugin('rexeffectpropertiesplugin', 'https://raw.githubusercontent.com/rexrainbow/phaser3-rex-notes/master/dist/rexeffectpropertiesplugin.min.js', true); | ||
``` | ||
- Attach properties. | ||
```javascript | ||
scene.plugins.get('rexeffectpropertiesplugin').add(gameObject); | ||
``` | ||
|
||
#### Import plugin | ||
|
||
- Install rex plugins from npm | ||
``` | ||
npm i phaser3-rex-plugins | ||
``` | ||
- Install plugin in [configuration of game](game.md#configuration) | ||
```javascript | ||
import EffectPropertiesPlugin from 'phaser3-rex-plugins/plugins/effectproperties-plugin.js'; | ||
var config = { | ||
// ... | ||
plugins: { | ||
global: [{ | ||
key: 'rexEffectProperties', | ||
plugin: EffectPropertiesPlugin, | ||
start: true | ||
}, | ||
// ... | ||
] | ||
} | ||
// ... | ||
}; | ||
var game = new Phaser.Game(config); | ||
``` | ||
- Attach properties. | ||
```javascript | ||
scene.plugins.get('rexEffectProperties').add(gameObject); | ||
``` | ||
|
||
#### Import method | ||
|
||
- Install rex plugins from npm | ||
``` | ||
npm i phaser3-rex-plugins | ||
``` | ||
- Import method | ||
```javascript | ||
import AddEffectPropertiesProperties from 'phaser3-rex-plugins/plugins/effectproperties.js'; | ||
``` | ||
- Attach properties. | ||
```javascript | ||
AddEffectPropertiesProperties(gameObject); | ||
``` | ||
|
||
### Attach properties | ||
|
||
Supported effects are `barrel`, `blackWhite`, `bloom`, `blur`, `bokeh`, `brightness`, `brown`, | ||
`circle`, `contrast`, `desaturate`, `desaturateLuminance`, `displacement`, | ||
`glow`, `gradient`, `grayscale`, `hue`, `kodachrome`, `lsd`, `negative`, `pixelate`, `polaroid`, | ||
`reveal`, `saturate`, `sepia`, `shadow`, `shiftToBGR`, `shine`, `technicolor`, `tiltShift`, | ||
`vignette`, `vintagePinhole`, `wipe`. | ||
|
||
- Attatch properties of all effects. | ||
```javascript | ||
scene.plugins.get('rexEffectProperties').add(gameObject); | ||
``` | ||
- Attatch properties of some preFX/postFX effects. | ||
```javascript | ||
scene.plugins.get('rexEffectProperties').add(gameObject, { | ||
barrel: true, | ||
blackWhite: true, | ||
bloom: true, | ||
blur: true, | ||
bokeh: true, | ||
brightness: true, | ||
brown: true, | ||
circle: true, | ||
contrast: true, | ||
desaturate: true, | ||
desaturateLuminance: true, | ||
displacement: true, | ||
glow: true, | ||
gradient: true, | ||
grayscale: true, | ||
hue: true, | ||
kodachrome: true, | ||
lsd: true, | ||
negative: true, | ||
pixelate: true, | ||
polaroid: true, | ||
reveal: true, | ||
saturate: true, | ||
sepia: true, | ||
shadow: true, | ||
shiftToBGR: true, | ||
shine: true, | ||
technicolor: true, | ||
tiltShift: true, | ||
vignette: true, | ||
vintagePinhole: true, | ||
wipe: true, | ||
}); | ||
``` | ||
or | ||
```javascript | ||
scene.plugins.get('rexEffectProperties').add(gameObject, [ | ||
'barrel', 'blackWhite', 'bloom', 'blur', 'bokeh', 'brightness', 'brown', | ||
'circle', 'contrast', | ||
'desaturate', 'desaturateLuminance', 'displacement', | ||
'glow', 'gradient', 'grayscale', | ||
'hue', | ||
'kodachrome', | ||
'lsd', | ||
'negative', | ||
'pixelate', 'polaroid', | ||
'reveal', | ||
'saturate', 'sepia', 'shadow', 'shiftToBGR', 'shine', | ||
'technicolor', 'tiltShift', | ||
'vignette', 'vintagePinhole', | ||
'wipe' | ||
]); | ||
``` | ||
or | ||
```javascript | ||
scene.plugins.get('rexEffectProperties').add(gameObject, effectName); | ||
``` | ||
- A plain object with effect names. | ||
- A list of effect name string. | ||
- A effect name string. | ||
|
||
### Effect properties | ||
|
||
Will try to create preFX effect if gameObject has preFX, otherwise, try to create postFX effect. | ||
|
||
#### [Barrel](shader-builtin.md#barrel) | ||
|
||
- `barrel` : | ||
- A number : Enable this effect and set intensity of barrel (0~1). | ||
- `null` : Remove this effect | ||
|
||
#### [BlackWhite](shader-builtin.md#colormatrix) | ||
|
||
- `blackWhite` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
#### [Bloom](shader-builtin.md#bloom) | ||
|
||
- `bloomColor` : | ||
- A number : Enable this effect and set color of bloom (0xffffff). | ||
- `null` : Remove this effect | ||
- `bloomOffsetX`, `bloomOffsetY`, `bloomBlurStrength`, `bloomStrength`, `bloomSteps` : | ||
- A number | ||
|
||
#### [Blur](shader-builtin.md#blur) | ||
|
||
- `blurColor` : | ||
- A number : Enable this effect and set color of blur (0xffffff). | ||
- `null` : Remove this effect | ||
- `blurQuality`, `blurX`, `blurY`, `blurStrength`, `blurSteps` : | ||
- A number | ||
|
||
#### [Bokeh](shader-builtin.md#bokeh) | ||
|
||
- `bokehRadius` : | ||
- A number : Enable this effect and set radius of bokeh (0~1). | ||
- `null` : Remove this effect | ||
- `bokehAmount`, `bokehContrast` : | ||
- A number | ||
|
||
### [Brightness](shader-builtin.md#colormatrix) | ||
|
||
- `brightness` : | ||
- A number : Enable this effect and set brightness (0~1). | ||
- `null` : Remove this effect | ||
|
||
### [Brown](shader-builtin.md#colormatrix) | ||
|
||
- `brown` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
### [Circle](shader-builtin.md#circle-outline) | ||
|
||
- `circleColor` : | ||
- A number : Enable this effect and set color of circle (0xffffff). | ||
- `null` : Remove this effect | ||
- `circleThickness`, `circleBackgroundColor`, `circleBackgroundAlpha`, `circleScale`, `circleFeather` : | ||
- A number | ||
|
||
### [Contrast](shader-builtin.md#colormatrix) | ||
|
||
- `contrast` : | ||
- A number : Enable this effect and set contrast (0~1). | ||
- `null` : Remove this effect | ||
|
||
### [Desaturate](shader-builtin.md#colormatrix) | ||
|
||
- `desaturate` : | ||
- A number : Enable this effect and set desaturate (0~1). | ||
- `null` : Remove this effect | ||
|
||
### [DesaturateLuminance](shader-builtin.md#colormatrix) | ||
|
||
- `desaturateLuminance` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
### [Displacement](shader-builtin.md#displacement) | ||
|
||
- `displacementKey` : | ||
- A string : Enable this effect and set displacement reference texture. | ||
- `null` : Remove this effect | ||
- `displacementX`, `displacementY` : | ||
- A number | ||
|
||
### [Glow](shader-builtin.md#glow) | ||
|
||
- `glowColor` : | ||
- A number : Enable this effect and set color of glow (0xffffff). | ||
- `null` : Remove this effect | ||
- `glowOuterStrength`, `glowInnerStrength` : | ||
- A number | ||
|
||
### [Gradient](shader-builtin.md#gradient) | ||
|
||
- `gradientColor` : | ||
- `[number, number]` : Enable this effect and set gradient color1 and gradient color2 (0xffffff). | ||
- `null` : Remove this effect | ||
- `gradientAlpha`, `gradientFromX`, `gradientFromY`, `gradientToX`, `gradientToY`, `gradientSize` : | ||
- A number | ||
|
||
### [Grayscale](shader-builtin.md#colormatrix) | ||
|
||
- `grayscale` : | ||
- A number : Enable this effect and set intensity of grayscale (0~1). | ||
- `null` : Remove this effect | ||
|
||
### [Hue](shader-builtin.md#colormatrix) | ||
|
||
- `hue` : | ||
- A number : Enable this effect and set hue rotation, in degrees. | ||
- `null` : Remove this effect | ||
|
||
### [Kodachrome](shader-builtin.md#colormatrix) | ||
|
||
- `kodachrome` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
### [Lsd](shader-builtin.md#colormatrix) | ||
|
||
- `lsd` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
### [Negative](shader-builtin.md#colormatrix) | ||
|
||
- `negative` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
### [Pixelate](shader-builtin.md#pixelate) | ||
|
||
- `pixelate` : | ||
- A number : Enable this effect and set size of pixelate, in pixels. | ||
- `null` : Remove this effect | ||
|
||
### [Polaroid](shader-builtin.md#colormatrix) | ||
|
||
- `polaroid` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
### [Reveal](shader-builtin.md#reveal) | ||
|
||
- `revealLeft`, `revealRight`, `revealUp`, or `revealDown` : | ||
- A number : Enable this effect with specific reveal direction and set progress (0~1). | ||
- `null` : Remove this effect | ||
- `revealWidth` : | ||
- A number | ||
|
||
### [Saturate](shader-builtin.md#colormatrix) | ||
|
||
- `saturate` : | ||
- A number : Enable this effect and set saturate (0~1). | ||
- `null` : Remove this effect | ||
|
||
### [Sepia](shader-builtin.md#colormatrix) | ||
|
||
- `sepia` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
### [Shadow](shader-builtin.md#shadow) | ||
|
||
- `shadowColor` : | ||
- A number : Enable this effect and set color of shadow (0xffffff). | ||
- `null` : Remove this effect | ||
- `shadowX`, `shadowY`, `shadowDecay`, `shadowPower`, `shadowSamples`, `shadowIntensity` : | ||
- A number | ||
|
||
### [ShiftToBGR](shader-builtin.md#colormatrix) | ||
|
||
- `shiftToBGR` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
### [Shine](shader-builtin.md#shine) | ||
|
||
- `shineSpeed` : | ||
- A number : Enable this effect and set speed of shine, in seconds. | ||
- `null` : Remove this effect | ||
- `shineLineWidth`, `shineGradient` : | ||
- A number | ||
|
||
### [Technicolor](shader-builtin.md#colormatrix) | ||
|
||
- `technicolor` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
### [TiltShift](shader-builtin.md#tilt-shift) | ||
|
||
- `tiltShiftRadius` : | ||
- A number : Enable this effect and set radius of tiltShift (0~1). | ||
- `null` : Remove this effect | ||
- `tiltShiftAmount`, `tiltShiftContrast`, `tiltShiftBlurX`, `tiltShiftBlurY`, `tiltShiftStrength` : | ||
- A number | ||
|
||
### [Vignette](shader-builtin.md#vignette) | ||
|
||
- `vignetteRadius` : | ||
- A number : Enable this effect and set radius of vignette (0~1). | ||
- `null` : Remove this effect | ||
- `vignetteX`, `vignetteY`, `vignetteStrength` : | ||
- A number | ||
|
||
### [VintagePinhole](shader-builtin.md#colormatrix) | ||
|
||
- `vintagePinhole` : | ||
- `true`, or `1` : Enable this effect. | ||
- `null` : Remove this effect | ||
|
||
### [Wipe](shader-builtin.md#wipe) | ||
|
||
- `wipeLeft`, `wipeRight`, `wipeUp`, or `wipeDown` : | ||
- A number : Enable this effect with specific wipe direction and set progress (0~1). | ||
- `null` : Remove this effect | ||
- `wipeWidth` : | ||
- A number |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters