TECHNOLOGY 2013.12.24

Photoshopの「描画モード」をHTML5(Canvas)とFlashで再現する

  • Flash
  • HTML5/CSS3
  • Tips

フロントエンド・エンジニアの朝生です。

デザイナーの人が微妙な質感を調整するのに描画モードをよく使ってますね。
「すみません、ちょっとこの描画モードだとパーツ統合できないんですが…」とデザイナーにお願いしたりするのが実装陣の仕事です。

この描画モードでよく使われるものの一つが「覆い焼き(リニア)」です。

描画モードについて

今回はこれを利用して期待通りの結果にできたのでサンプルを置いておきます。
サンプル作るの頑張ったから褒めてください。

photoshopで加工したもの

黒赤緑青の4つの矩形を並べて、中央に画像を乗せて「覆い焼き(リニア)」を指定しています。
同じ表現結果を実装レベルで再現したものが下のものになります。Canvas版とFlash版を2通り作ってあります。

Canvasで加工したもの

サンプルはこちら

2Dコンテキストには globalCompositeOperation とかいうのがあって、
これにlighterを使用すると加算で描画されます。

ctx.globalCompositeOperation = 'lighter';


この部分です。
僕はこの globalCompositeOperation 大好きですよ。
DOMにもこういうプロパティあったらいいのにと思ってます。
このプロパティはマスキングする時も使ったりと、なんか機能がゴチャゴチャしてる印象を受けるのは自分だけでしょうか。

Flashで加工したもの

サンプルはこちら

Flashの場合ブレンドモードという機能を使用します。

_loader.blendMode = BlendMode.ADD;

57行目あたりで書いてるこの部分です。
一番馴染みがあります。ホワイトアウトとかさせる時とかよく使いますよね。

今回使用したものはすべて同じ再現結果になってますが、Photoshopの描画モードのすべてをサポートしてるわけではありません。
Photoshop > Flash> Canvas みたいな感じで出来ることが制限されてきます。
FlashはPhotoshopと同じAdobe製ともあって再現性が高い印象。

もう一個よく使われるパターンでPhotoshopの乗算は、

Flash -> BlendMode.MULTIPLY;
Canvas -> darker;

的な感じだったかなー?
減法混色的なアナログ感が出て個人的に好きです。
※Canvasのdarkerは対応してないブラウザもあった気がしたのでちゃんとした仕事で使う場合は要注意ですけど

表現的にも技術的にも同じテクニックなんですけど、機能と名前が全く一致しておらず、全くわかりあえてない感じがとてもムズムズしますね。
話が反れますが、最近はスペシャリスト化の流れで職域ごとの溝が深まっているように感じます。
クリエイティブチームで共通言語も減り、解決策が断片化してる傾向は大きな副作用でもあると認識してますので、なんとかこの溝を埋めていきたいともがいている今日このごろです。

以上「表現のニュアンス的な部分でロスがあるのがもったいない!」というお話でした。