소개
이 플러그인은 기본 캔버스에 CSS 필터를 적용합니다. CSS 필터는 브라우저에 내장된 기본 기능이며 이 기능은 이미지를 흐림이나 색상반전 효과 등 다양한 효과를 별도의 작업 없이 매우 빠르게 적용할 수 있게 해줍니다. 예를 들면, 게임에 오류가 나는 경우, 오류 텍스트 이외의 화면은 흐릿하게 변하는 효과도 이에 속합니다.
사용법
플러그인을 다운로드 받고 프로젝트 폴더 내 js/plugins 경로에 플러그인을 추가해주시기 바랍니다. 그런 다음 플러그인 관리에서 RS_SimpleCanvasFilter.js 플러그인을 선택하고 추가합니다.
플러그인 커맨드
이 플러그인은 10개의 필터를 제공합니다. 필터는 다중으로 적용할 수도 있습니다.
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%
일반적으로 여러 개의 필터를 캔버스에 포함할 수 있습니다.
아래 명령을 사용하면 여러 개의 필터를 적용할 수 있습니다.
CanvasFilter Whole setMultipleFlag true
하나의 필터만 적용하려면 이 명령을 사용하세요.
CanvasFilter Whole setMultipleFlag false
캔버스에 적용된 모든 필터를 제거합니다.
CanvasFilter Whole clear
스크립트 호출
다음 코드를 통해 여러가지 작업을 할 수 있습니다.
|
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 효과의 정도 (필터 마다 다릅니다)
* @param {Boolean} isMultipleFilters 필터를 여러 개 적용할 지 여부
* @param {Canvas} target 이 값을 생략하면 메인 캔버스가 지정됩니다.
*/
Graphics.setCanvasFilter(filterName, amount, isMultipleFilters, target);
/**
* @method setClearCanvasFilter
* @param {Canvas} target 이 값을 생략하면 메인 캔버스가 지정됩니다.
*/
Graphics.setClearCanvasFilter(target);
/**
* @method setCanvasDropShadowFilter
* @param {Number} hShadow 그림자 크기(가로), px 단위
* @param {Number} vShadow 그림자 크기(세로), px 단위
* @param {Number} blur 흐림 효과, px 단위
* @param {String} color 색상명
* @param {Boolean} isMultipleFilters 필터를 여러 개 적용할 지 여부
* @param {Canvas} target 이 값을 생략하면 메인 캔버스가 지정됩니다.
*/
Graphics.setCanvasDropShadowFilter(hShadow, hShadow, blur, color, isMultipleFilters, target);
/**
* @method setCanvasInvert
* @param {Boolean} activate 반전 필터를 활성화 할 지 여부
* @param {Boolean} isMultipleFilters 필터를 여러 개 적용할 지 여부
* @param {Canvas} target 이 값을 생략하면 메인 캔버스가 지정됩니다.
*/
*/
Graphics.setCanvasInvert(activate, isMultipleFilters, target);
|
cs |
다운로드
버전 로그
2016.10.06 (v1.0.0) - 출시일
Credit and Thanks
Biud436
사용 조건
무료 게임 또는 상업적인 게임에서 모두 사용 가능합니다.
