memo

ゲーム制作やデザインについての個人的メモ

【ティラノスクリプト】動画をmix-blend-modeで重ねて表示してみる

========================================

[layermode_movie] レイヤーモード動画

http://tyrano.jp/tag/#layermode_movie

動画の合成はVer4.50以降で公式に実装されました。以下は古い情報になりますのでご注意ください。

========================================

f:id:onigirimgmg:20170205180007p:plain

DEMO(「動画×mix-blend-modeテスト」を選択)

CSSのmix-blend-modeプロパティを使用して、動画をちょっといい感じに表示してみたいと思います。

developer.mozilla.org

いろんなやり方がありますが、今回は[movie]タグにblendというパラメータを追加して、CSSでmix-blend-modeを指定できるようにしています。

例によって本体を改造してるので自己責任でお願いしますー。

tyrano/plugins/kag/kag.tag_ext.js

tyrano.plugin.kag.tag.movie = {
vital: ["storage"],
pm: {
storage: "",
volume: "",
skip: "false",
bgmode: "false",
loop: "false"//ここのカンマ忘れずに
blend: "" //追加
},
(中略)
var j_video = $(video);
if (pm.blend != "") j_video.css("mix-blend-mode", pm.blend); //追加
(中略)
};

実際に使うときはこんな感じ。

[movie storage="sea.webm" blend="multiply"]

赤字がmix-blend-modeの値で、これは乗算になります。

アレンジ次第でいろいろできると思いますので、良いように使ってみてくださいー。

commons.nicovideo.jp

動画素材お借りしました。ありがとうございます。

ニコニ・コモンズID:nc92133