フィルターでのシェーダーの使用

フィルターでのシェーダーの使用は、ActionScript で他のフィルターを使用する場合と同じです。フィルターとしてシェーダーを使用する場合は、フィルターされたイメージ（表示オブジェクトまたは BitmapData オブジェクト）がシェーダーに渡されます。シェーダーは入力イメージを使用してフィルター出力を作成します。これは通常、元のイメージが変更されたイメージです。フィルターされたオブジェクトが表示オブジェクトである場合、シェーダーの出力は、画面上のフィルターされた表示オブジェクトの位置に表示されます。フィルターされたオブジェクトが BitmapData オブジェクトである場合は、シェーダーの出力が、 applyFilter() メソッドが呼び出される BitmapData オブジェクトのコンテンツになります。

フィルターとしてシェーダーを使用するには、まず、 シェーダーのロードまたは埋め込み で説明している手順で Shader オブジェクトを作成します。次に、Shader オブジェクトにリンクされた ShaderFilter オブジェクトを作成します。ShaderFilter オブジェクトは、フィルターされたオブジェクトに適用されるフィルターです。任意のフィルターを適用する場合と同じように、このフィルターをオブジェクトに適用します。これを表示オブジェクトの filters プロパティに渡すか、または BitmapData オブジェクトの applyFilter() メソッドを呼び出します。例えば、次のコードでは、ShaderFilter オブジェクトを作成し、 homeButton という名前の表示オブジェクトにフィルターを適用します。

var myFilter:ShaderFilter = new ShaderFilter(myShader); 
homeButton.filters = [myFilter];

フィルターとしてシェーダーを使用する場合は、シェーダーに最低 1 つの入力を定義する必要があります。例に示すように、コードでは入力値を設定しません。その代わり、フィルターされた表示オブジェクトまたは BitmapData オブジェクトが入力イメージとして設定されています。2 つ以上の入力を使用するシェーダーでは、最初の 1 つ以外の入力値を指定します。

フィルターによって、元のイメージのサイズが変更される場合があります。例えば、一般的なドロップシャドウ効果では、イメージに追加されるシャドウを含んでいるピクセルが追加されます。イメージのサイズを変更するシェーダーを使用する場合は、イメージサイズをどのくらい変更するかを示す leftExtension 、 rightExtension 、 topExtension および bottomExtension の各プロパティを設定します。

次の例は、フィルターとしてシェーダーを使用する方法を示します。この例では、フィルターによってイメージの赤、緑、青チャンネルの値が反転されます。この結果、イメージの「負」のバージョンが生成されます。

重要な ActionScript コードは、次の 2 つのメソッドにあります。

• init() ：アプリケーションがロードされると、 init() メソッドが呼び出されます。このメソッドで、シェーダーのバイトコードファイルがロードされます。

• onLoadComplete() ： onLoadComplete() メソッドで、 shader という名前の Shader オブジェクトが作成されます。次に、 target という名前のオブジェクトが作成され、コンテンツが描画されます。 target オブジェクトは、左側が赤、中央が緑、右側が青の線状グラデーションで塗られた矩形です。フィルターされていないオブジェクトは、次のようになります。

  

  フィルターの適用により色が反転されて、次のような矩形になります。

  

この例で使用しているシェーダーは、Pixel Bender Toolkit に含まれている、「invertRGB.pbk」という Pixel Bender カーネルのサンプルです。Pixel Bender Toolkit インストールディレクトリの invertRGB.pbk ファイルからソースコードを利用できます。ソースコードをコンパイルし、ActionScript ソースコードと同じディレクトリに、「invertRGB.pbj」という名前でバイトコードファイルを保存します。

この例の ActionScript コードは次のようになります。Flash Builder の ActionScript のみのプロジェクトでは、このクラスをメインアプリケーションクラスとして使用します。または、Flash Professional の FLA ファイルでは、ドキュメントクラスとして使用します。

package 
{ 
    import flash.display.GradientType; 
    import flash.display.Graphics; 
    import flash.display.Shader; 
    import flash.display.Shape; 
    import flash.display.Sprite; 
    import flash.filters.ShaderFilter; 
    import flash.events.Event; 
    import flash.geom.Matrix; 
    import flash.net.URLLoader; 
    import flash.net.URLLoaderDataFormat; 
    import flash.net.URLRequest; 
     
    public class InvertRGB extends Sprite 
    { 
        private var shader:Shader; 
        private var loader:URLLoader; 
         
        public function InvertRGB() 
        { 
            init(); 
        } 
         
        private function init():void 
        { 
            loader = new URLLoader(); 
            loader.dataFormat = URLLoaderDataFormat.BINARY; 
            loader.addEventListener(Event.COMPLETE, onLoadComplete); 
            loader.load(new URLRequest("invertRGB.pbj")); 
        } 
         
         
        private function onLoadComplete(event:Event):void 
        { 
            shader = new Shader(loader.data); 
             
            var target:Shape = new Shape(); 
            addChild(target); 
             
            var g:Graphics = target.graphics; 
            var c:Array = [0x990000, 0x445500, 0x007799]; 
            var a:Array = [255, 255, 255]; 
            var r:Array = [0, 127, 255]; 
            var m:Matrix = new Matrix(); 
            m.createGradientBox(w, h); 
            g.beginGradientFill(GradientType.LINEAR, c, a, r, m); 
            g.drawRect(10, 10, w, h); 
            g.endFill(); 
             
            var invertFilter:ShaderFilter = new ShaderFilter(shader); 
            target.filters = [invertFilter]; 
        } 
    } 
}

フィルターの適用について詳しくは、 フィルターの作成と適用 を参照してください。

Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。