CSSを使ってptextの文字を背景画像で切り抜く

ツイッターで流れてきたのでちょっと考えたんですが、ちゃんとやるのは難しいですね。背景画像がウィンドウサイズとぴったりじゃないとずれます。あと画像はそのままで文字だけ中央にして切り抜く、とするとflexbox使わないなら縦はpaddingで合わせないと駄目かなあと。左右はtext-alignでいけますね。

参考は以下。

とりあえず下記のように書くと、上記のようにマスクされます。

;レイヤー0可視化
[layopt layer=0 visible=true]

;デフォルトのタイトルが960*640なのでこれを背景に指定。
[bg storage="title.jpg" time="100"]

;そのままマスクすると文字が背景と同化して見えないので、廊下の画像を表示させとく。
[image layer="0" folder="bgimage" storage="rouka.jpg" time="0"]

;文字。nameを指定して、colorをtransparentにする。
[ptext name="t_mask" layer="0" text="切り抜きテスト" width="960" size="80" x="0" align="center" y="0"  color="transparent"]

;あとは背景画像のURL取り込んでptextで指定したnameのクラスに入れてclipする。
;paddingは真ん中に寄せるためのやつなので、適当に変える。
[iscript]

var bg = TYRANO.kag.layer.getLayer("base", "fore");
var url = bg.css("background-image");

$(".t_mask").css({"background-image":url,"-webkit-background-clip":"text","padding-top":"300px"})

[endscript]

今回iscriptでやりましたが、cssに直接使う画像ごとにクラス振って書いてった方が分かりやすい気がします。

マスクするだけなら簡単なんですが、背景画像にせよ前景画像にせよ、それと同じ位置に合わせるのがちょっと面倒な感じですね。何か他に良い方法あるでしょうか。

ただ文字で画像をマスクする……画像で文字をマスクする……？どっちだ？とにかくそういう感じのことはできるので、表現幅が広がるかもしれません。ちなみにメッセージウィンドウの文字でやるのはもっと難しそうです。今のティラノはメッセージをspanで一文字一文字囲ってるので、この辺でかなり改造しないと駄目っぽいかなあと。

CSSマスクはロマンがありますね。この前アニメも加えた記事見つけて一人でテンション上がってました。

1歩踏み込んでみる! CSSグラデーションのマニアックな世界 - ICS MEDIA

自作ゲーでCSSマスクでアニメさせてトランジションさせたんですが、もっとバリエーション増やせそうだなーと思います。ただ多分Canvasでやった方が処理軽そうですね。しかしそこまでの技術力はなかった（完）。