グラフィックの特殊効果 (5/5)
作成:2015-04-11 10:49
更新:2015-04-11 10:49
更新:2015-04-11 10:49
■エフェクトチェーンで複数の視覚効果を適用する
さまざまな視覚効果を紹介しましたが、これらはすべて、Nodeの「setEffect」で設定をしました。ということは、同時に複数のEffectを設定できない、ということになります。
が、実際問題として複数の視覚効果を同時に使いたいことはあります。こうした場合はどうすればいいのでしょうか。
これは、ちょっと発想を変えて考える必要があります。setEffectで設定できるEffectは1つだけです。これは変えようがありません。目を向けるべきは、適用するNodeではなくて、視覚効果となるEffectクラスの方です。
Effectクラスは、入力されたイメージにエフェクトを適用して出力する、という働きをするものです。つまり「入力イメージ」を変換し「出力イメージ」を生成して渡す、というものなのです。ということは、ある視覚効果の出力を別の視覚効果の入力に渡すことができれば、複数の視覚効果を使うことができるはずです。
つまり、「視覚効果A」→「視覚効果B」→「視覚効果C」……と順に視覚効果を適用していき、最終的な結果をsetEffectで設定するのです。これを「エフェクトチェーン」といいます。このエフェクトチェーンは、「setInput」というメソッドを利用することで設定できます。
setInputは、視覚効果であるEffectクラスのメソッドです。引数には、他のEffectインスタンスを指定します。これにより、引数で設定されたEffectの結果をもとに更に視覚効果を設定するようになります。
実際の利用例を下にあげておきましょう。ここで、InnerShadow、DropShadow、Reflectionの3つのEffectをsetInputでつないで視覚効果を生成しています。エフェクトチェーンの使い方がわかれば、いくらでも視覚効果を組み合わせて使うことができるようになるでしょう。
が、実際問題として複数の視覚効果を同時に使いたいことはあります。こうした場合はどうすればいいのでしょうか。
これは、ちょっと発想を変えて考える必要があります。setEffectで設定できるEffectは1つだけです。これは変えようがありません。目を向けるべきは、適用するNodeではなくて、視覚効果となるEffectクラスの方です。
Effectクラスは、入力されたイメージにエフェクトを適用して出力する、という働きをするものです。つまり「入力イメージ」を変換し「出力イメージ」を生成して渡す、というものなのです。ということは、ある視覚効果の出力を別の視覚効果の入力に渡すことができれば、複数の視覚効果を使うことができるはずです。
つまり、「視覚効果A」→「視覚効果B」→「視覚効果C」……と順に視覚効果を適用していき、最終的な結果をsetEffectで設定するのです。これを「エフェクトチェーン」といいます。このエフェクトチェーンは、「setInput」というメソッドを利用することで設定できます。
《Effect》.setInput( 《Effect》 );
setInputは、視覚効果であるEffectクラスのメソッドです。引数には、他のEffectインスタンスを指定します。これにより、引数で設定されたEffectの結果をもとに更に視覚効果を設定するようになります。
実際の利用例を下にあげておきましょう。ここで、InnerShadow、DropShadow、Reflectionの3つのEffectをsetInputでつないで視覚効果を生成しています。エフェクトチェーンの使い方がわかれば、いくらでも視覚効果を組み合わせて使うことができるようになるでしょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
public void createShape(Pane root){ InnerShadow is = new InnerShadow(10.0, 2.0, 2.0, Color.rgb(0, 100, 100)); DropShadow ds = new DropShadow(20.0, 10.0, 5.0, Color.BLACK); ds.setInput(is); Reflection rf = new Reflection(0.0, 2.0, 0.5, 0); rf.setInput(ds); Rectangle r = new Rectangle(20, 20, 100, 50); r.setFill(Color.CYAN); r.setEffect(rf); root.getChildren().add(r); }
※関連コンテンツ