Overview
A simple SVG filters macro so you can add filters to characters/backgrounds
Creating the macro
– create a folder named svgfx in your scenario folder.
– inside that folder, create two files : filters.svg and style.css
– open these two files in notepad++
– paste the following in filters.svg :
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″> <defs> <filter id=”nostalgic” x=”0″ y=”0″> <feFlood flood-color=”#ffffff” flood-opacity=”0.0″ result=”SourceGraphic”/> <feBlend mode=”screen” in=”SourceGraphic”/> <feColorMatrix values=”0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0″ /> </filter> <filter id=”cartoon”> <feMorphology operator=”erode” in=”SourceGraphic” radius=”1″/> </filter> </defs> </svg>
– paste the following in style.css :
.cartoon { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#cartoon’); filter: url(‘filters.svg#cartoon’); } .nostalgic { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#nostalgic’); filter: url(‘filters.svg#nostalgic’); }
– create a file named plugin_webkitfilters.ks in your scenario folder.
– open plugin_webkitfilters.ks and paste :
[macro name=”webkitfilters”] [html left=0 top=0 ] <link rel=”stylesheet” href=”data/scenario/svgfx/style.css”> <script type=”text/javascript” defer=”defer”> $(‘.layer_free’).css(‘height’,’1px’); $(‘.layer_free’).css(‘width’,’1px’); $(‘.[emb exp=mp.charactername]’).[emb exp=mp.method](‘[emb exp=mp.filtername]’); </script> [endhtml] [endmacro]
– inside your scene files (.ks), before using it you have to put the following :
[tb_start_tyrano_code] [call storage=”plugin_webkitfilters.ks”] [_tb_end_tyrano_code]
– then, to use it on a character just call the macro like this :
[webkitfilters method=”addClass” filtername=”cartoon” charactername=”mkun”]
or
[webkitfilters method=”addClass” filtername=”nostalgic” charactername=”mkun”]
– and to remove the filter :
[webkitfilters method=”removeClass” filtername=”cartoon” charactername=”mkun”]
or
[webkitfilters method=”removeClass” filtername=”nostalgic” charactername=”mkun”]
– Alternatively, you can use a filter on the background image (but beware of scenes transitions) :
[webkitfilters method=”removeClass” filtername=”cartoon” charactername=”base_fore”]
or
[webkitfilters method=”removeClass” filtername=”nostalgic” charactername=”base_fore”]
Complete list of filters (CSS)
.brightness { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#brightness’); filter: url(‘filters.svg#brightness’); } .contrast { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#contrast’); filter: url(‘filters.svg#contrast’); } .discrete { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#discrete’); filter: url(‘filters.svg#discrete’); } .supersaturate { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#supersaturate’); filter: url(‘filters.svg#supersaturate’); } .hyperred { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#hyperred’); filter: url(‘filters.svg#hyperred’); } .EmbossFilter { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#EmbossFilter’); filter: url(‘filters.svg#EmbossFilter’); } .SharpenFilter { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#SharpenFilter’); filter: url(‘filters.svg#SharpenFilter’); } .EdgeDetectFilter { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#EdgeDetectFilter’); filter: url(‘filters.svg#EdgeDetectFilter’); } .LuminanceMaskFilter { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#LuminanceMaskFilter’); filter: url(‘filters.svg#LuminanceMaskFilter’); } .GradientMapFilter { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#GradientMapFilter’); filter: url(‘filters.svg#GradientMapFilter’); } .PosterizeFilter { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#PosterizeFilter’); filter: url(‘filters.svg#PosterizeFilter’); } .WashoutFilter { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#WashoutFilter’); filter: url(‘filters.svg#WashoutFilter’); } .XRayFilter { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#XRayFilter’); filter: url(‘filters.svg#XRayFilter’); } .dither { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#dither’); filter: url(‘filters.svg#dither’); } .nostalgic { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#nostalgic’); filter: url(‘filters.svg#nostalgic’); } .retro { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#retro’); filter: url(‘filters.svg#retro’); } .visuallyimpaired { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#visuallyimpaired’); filter: url(‘filters.svg#visuallyimpaired’); } .blurhue { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#blurhue’); filter: url(‘filters.svg#blurhue’); } .hueRotate { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#hueRotate’); filter: url(‘filters.svg#hueRotate’); } .matrix { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#matrix’); filter: url(‘filters.svg#matrix’); } .luminanceToAlpha { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#luminanceToAlpha’); filter: url(‘filters.svg#luminanceToAlpha’); } .discrete { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#discrete’); filter: url(‘filters.svg#discrete’); } .table { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#table’); filter: url(‘filters.svg#table’); } .linear { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#linear’); filter: url(‘filters.svg#linear’); } .gamma { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#gamma’); filter: url(‘filters.svg#gamma’); } .sharpening { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#sharpening’); filter: url(‘filters.svg#sharpening’); } .sharpenmore { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#sharpenmore’); filter: url(‘filters.svg#sharpenmore’); } .cartoon { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#cartoon’); filter: url(‘filters.svg#cartoon’); } .glow { -webkit-filter: url(‘data/scenario/svgfx/filters.svg#glow’); filter: url(‘filters.svg#glow’); }
Complete list of filters (SVG)
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″> <defs> <filter id=”blurhue” x=”0″ y=”0″> <feColorMatrix in=”SourceGraphic” type=”hueRotate” values=”90″ result=”A”/> <feGaussianBlur in=”A” stdDeviation=”6″/> </filter> <filter id=”visuallyimpaired” x=”0″ y=”0″> <feColorMatrix in=”SourceGraphic” type=”hueRotate” values=”0″ result=”A”/> <feGaussianBlur in=”A” stdDeviation=”4″/> </filter> <filter id=”nostalgic” x=”0″ y=”0″> <feFlood flood-color=”#ffffff” flood-opacity=”0.0″ result=”SourceGraphic”/> <feBlend mode=”screen” in=”SourceGraphic”/> <feColorMatrix values=”0.14 0.45 0.05 0 0 0.12 0.39 0.04 0 0 0.08 0.28 0.03 0 0 0 0 0 1 0″ /> </filter> <filter id=”dither” x=”0″ y=”0″> <feBlend mode=”screen” in=”SourceGraphic”/> <feComponentTransfer> <feFuncR type=”discrete” tableValues=”0 .5 1 1″/> <feFuncG type=”discrete” tableValues=”0 .5 1″/> <feFuncB type=”discrete” tableValues=”0″/> </feComponentTransfer> </filter> <filter id=”retro”> <feColorMatrix type=”matrix” values=”0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0″ /> </filter> <filter id=”WashoutFilter” filterUnits=”objectBoundingBox” x=”0%” y=”0%” width=”100%” height=”100%”> <feFlood flood-color=”#ffffff” flood-opacity=”0.5″ result=”flood”/> <feBlend mode=”screen” in2=”flood” in=”SourceGraphic”/> </filter> <filter id=”XRayFilter”> <feColorMatrix type=”matrix” values=”0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0″ /> <feComponentTransfer > <feFuncR type=”table” tableValues=”1 0″/> <feFuncG type=”table” tableValues=”1 0″/> <feFuncB type=”table” tableValues=”1 0″/> </feComponentTransfer> </filter> <filter id=”GradientMapFilter”> <feColorMatrix type=”matrix” values=”0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0″> </feColorMatrix> <feComponentTransfer> <feFuncR type=”table” tableValues=”0 1 0 1″/> <feFuncG type=”table” tableValues=”0 0 0.4 1″/> <feFuncB type=”table” tableValues=”0 0 .4 1″/> </feComponentTransfer> </filter> <filter id=”PosterizeFilter”> <feComponentTransfer> <feFuncR type=”discrete” tableValues=”0 0.25 0.5 0.75 1″/> <feFuncG type=”discrete” tableValues=”0 0.25 0.5 0.75 1″/> <feFuncB type=”discrete” tableValues=”0 0.25 0.5 0.75 1″/> </feComponentTransfer> </filter> <filter id=”EmbossFilter” > <feConvolveMatrix order=”5 5″ preserveAlpha=”true” kernelMatrix=”-1 0 0 0 0 0 -2 0 0 0 0 0 3 0 0 0 0 0 0 0 0 0 0 0 0″/> </filter> <filter id=”SharpenFilter”> <feConvolveMatrix order=”3 3″ preserveAlpha=”true” kernelMatrix=”0 -1 0 -1 5 -1 0 -1 0″/> </filter> <filter id=”EdgeDetectFilter”> <feConvolveMatrix order=”3 3″ preserveAlpha=”true” kernelMatrix=”-5 0 0 0 0 0 0 0 5″/> </filter> <filter id=”LuminanceMaskFilter”> <feColorMatrix type=”luminanceToAlpha”/> </filter> <filter id=”hyperred”> <feColorMatrix type=”matrix” values=”-1 3 3 0 -.5 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0″/> </filter> <filter id=”supersaturate”> <feColorMatrix type=”matrix” values=”3 -1 -1 0 0 -1 3 -1 0 0 -1 -1 3 0 0 0 0 0 1 0″/> </filter> <filter id=”discrete”> <feGaussianBlur stdDeviation=”1.5″ /> <feComponentTransfer> <feFuncR type=”discrete” tableValues=”0 .5 1 1″/> <feFuncG type=”discrete” tableValues=”0 .5 1″/> <feFuncB type=”discrete” tableValues=”0″/> </feComponentTransfer> </filter> <filter id=”contrast”> <feComponentTransfer> <feFuncR type=”linear” slope=”1″ intercept=”-0.1″></feFuncR> <feFuncG type=”linear” slope=”1″ intercept=”-0.1″></feFuncG> <feFuncB type=”linear” slope=”1″ intercept=”-0.1″></feFuncB> </feComponentTransfer> </filter> <filter id=”brightness”> <feComponentTransfer> <feFuncR type=”linear” slope=”5″/> <feFuncG type=”linear” slope=”5″/> <feFuncB type=”linear” slope=”5″/> </feComponentTransfer> </filter> <filter id=”matrix” filterUnits=”objectBoundingBox”> <feColorMatrix type=”matrix” in=”SourceGraphic” values=”-1 2 -3 0 -.5 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0″/> </filter> <filter id=”hueRotate” filterUnits=”objectBoundingBox”> <feColorMatrix type=”hueRotate” in=”SourceGraphic” values=”60″/> </filter> <filter id=”luminanceToAlpha” filterUnits=”objectBoundingBox”> <feColorMatrix type=”luminanceToAlpha” in=”SourceGraphic” values=”0.4″/> </filter> <filter id=”discrete”> <feComponentTransfer> <feFuncR type=”discrete” tableValues=”0 .5 1 1″/> <feFuncG type=”discrete” tableValues=”0 .5 1″/> <feFuncB type=”discrete” tableValues=”0 .5″/> </feComponentTransfer> </filter> <filter id=”table”> <feComponentTransfer> <feFuncR type=”table” tableValues=”1 0 1″ exponent=”5″/> <feFuncG type=”table” tableValues=”1 0 1″ exponent=”2″/> <feFuncB type=”table” tableValues=”1 0 1″ exponent=”5″/> </feComponentTransfer> </filter> <filter id=”linear”> <feComponentTransfer> <feFuncR type=”linear” slope=”.5″ amplitude=”6″ intercept=”.25″/> <feFuncG type=”linear” slope=”.5″ amplitude=”2″ intercept=”0″/> <feFuncB type=”linear” slope=”.5″ amplitude=”3″ intercept=”.5″/> </feComponentTransfer> </filter> <filter id=”gamma”> <feComponentTransfer> <feFuncR type=”gamma” amplitude=”2″ exponent=”1″/> <feFuncG type=”gamma” amplitude=”2″ exponent=”3″/> <feFuncB type=”gamma” amplitude=”2″ exponent=”1″/> </feComponentTransfer> </filter> <filter id=”sharpening”> <feConvolveMatrix order=”3″ kernelMatrix=”-1 -1 3 -2 1 -1 -1 1 -1″/> </filter> <filter id=”sharpenmore”> <feConvolveMatrix order=”4″ kernelMatrix=”-2 2 1 -1 -1 3 2 1 -1 0 -1 -4 -1 1 0 0″/> </filter> <filter id=”cartoon”> <feMorphology operator=”erode” in=”SourceGraphic” radius=”1″/> </filter> <filter id=”glow”> <feMorphology operator=”dilate” in=”SourceGraphic” radius=”1″/> </filter> </defs> </svg>