【スクリプト】加算合成やマスクを使用する

今回は、マスクや加算合成についてです。
これらの効果を使うことで、よりリッチな表現を手軽に実現出来ます。
ただし、マスク処理については少々処理が重いため、使い過ぎるとパーフォーマンスの低下を
招いてしまうので注意しましょう。
また、残念ながらこれらの効果はすべての描画方式に対応しているわけではなく
主にwebkitcss描画で使用できないものがありますのでご注意ください。

---

【加算合成】

webkitcss	×
canvas	○
webgl	○

加算合成を使用するには対象とするMCに下記のようにプロパティの設定します

/* js this.targetMC.blendMode = "add"; */

マスクや加算合成を適用させる場合は blendMode というプロパティを使用します。
加算合成を適用すると下の図のような感じになります

---

【マスク】

webkitcss	×
canvas	○
webgl	○

マスクを使用するには対象のMCに下記のプロパティを設定します

/* js //マスク形状となるMC this.maskMC.blendMode = "erase"; //マスク対象となるMC this.targetMC.blendMode = "layer"; */

マスクの形状として使うMCは blendMode="erase"

マスクの対象となるMCには blendMode="layer"

を設定しましょう。

また、マスク形状となるMCは対象のMCより上の階層に配置しましょう

適用させると下の図のような感じになります

---

【矩形マスク】

webkitcss	○
canvas	○
webgl	○

これは、画像形状ではなく、画像が収まっている矩形領域でマスクされます。

なので矩形以外の形状でマスクすることはできませんが、どの描画方式にも対応しています

矩形マスクを使用するには対象のMCに下記のプロパティを設定します

/* js //マスク形状となるMC this.maskMC.blendMode = "mask"; //マスク対象となるMC this.targetMC.blendMode = "layer"; */

マスクの形状として使うMCは blendMode="mask"
マスクの対象となるMCには blendMode="layer"
を設定しましょう。
また、マスク形状となるMCは対象のMCより上の階層に配置しましょう

適用させると下の図のような感じになります

---

このような感じで加算合成やマスク処理を行うことができます。
サンプルのLWFとソースはこちらになります。

http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part4/index-webkitcss.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part4/index-canvas.html
http://lwfs.tamagokobo.com/lwfs_work_output/html5/list/part4/index-webgl.html

http://lwfs.tamagokobo.com/source/part4/part4.fla

---

次回は、画像の着色について触れていきたいと思います。