ピクチャのマスク化（親子関係）

[sakata]

例えばＨＰバーを画面上に表示したい、といったとき、
ＨＰバー背景、動くＨＰバーのピクチャが最低いると思うのですが、
ＨＰの変化にあわせて動くＨＰバーのほうを単純に左右へずらすと、
ＨＰバーの背景をはみ出してしまいます。

従来だと、ＨＰバーを画面端に置く、縮小拡大を計算してやる。
といった方法もありますが、単純にクラッピングマスクができればすごい助かると思いました。

具体的にいうと、
ピクチャ１とピクチャ２があり、ピクチャ２はピクチャ１の子とする。
するとピクチャ２はピクチャ１が描画されている領域にしか描画されない。
といった動作があるといいと思いました。

これができると、単純にＨＰバーだけでなく、
ウィンドウの背景を簡単に動かしたりできるようになったり、
建物や洋服の生地を親とし、壁紙や柄を子ではめこんだりと、
いろいろ面白い演出ができるかと思います。

イメージサンプルです。
[img]ピクチャの親子関係.jpg[/img]

[raeyik]

さば缶　さん
ギャルゲー風会話システム12
http://petitrare.com/blog/%e3%82%ae%e3% ... 3%83%a012/
やな　さん
立ち絵表示制御文字ver1.043 MV用プラグインサンプルプロジェクト
https://uploader.mitukasa.jp/rpg/

[sakata]

raeyikさん、紹介ありがとうございます。
ただそれはレイヤーの重ね合わせで、マスク領域の話ではなさそうですね。

[Trb]

こんばんは。
ちょっと面白そうだったので試してみました。
こういうことですよね？
マスク用の画像

mask.png (4.31 KiB) 閲覧数: 6076 回

模様の画像

moyou.png (152.92 KiB) 閲覧数: 6076 回

マスク合成した画像

twitterを見させてもらったところプログラミングは出来るようですが、JavaScriptも分かるでしょうか？
もし分かるならとりあえずマスク描画用のメソッドだけ用意したプラグインを作ったので、これを元に使いやすいよう改変してください。

maskedBlt.js

(1.45 KiB) ダウンロード数: 410 回

使い方は、デフォルトで用意されているBitmap.bltメソッドと同じ要領で
マスク用画像と模様用画像の2つを指定するだけです。
（ソース画像は事前に予め読み込んでおかないと初回表示時に失敗するので気を付けて下さい）



参考にしたのはこのサイト
http://defghi1977.html.xdomain.jp/tech/ ... asMemo.htm
の、6.4.1 composite-modeの指定　の項です。
globalCompositeOperation の値を指定することで他にも色々な合成の仕方ができるようです。

[sakata]

Trbさん、ありがとうございます。やりたいことの結果はあってます。
ありがとうございます。また後日動作確認します。

>JavaScriptも分かるでしょうか？
読めますが発想力はないです……。ただjsよりも、先月買ったツクールMVの全体図のほうがようわかってません。
まずbltのプロトタイプを呼び出してピクチャとして表示するまでの流れがあるサンプルが見つからなかったので、
ちょっと実働できるかどうかの確認は後になります。申し訳ない。