【解決済】スポットライトでの演出

[anman]

お世話になります。
マップ内を真っ暗にして、乱舞するスポットライトを最終的に一人に焦点を絞る実装をしたいと思っています。
コンテスト等で「優勝者は…」とタメが入った後、ドラムロールと共にスポットライトが左右するような演出です。

以下の記事がやりたい事に一番近いのですが、どの様に実装すればよいでしょうか？
https://had2apps.com/552/

よろしくお願いいたします。

[しぐれん]

これと似たようなものが可能か検証したことはありますが、プラグインコマンドの使いにくいMV用に作ることは難しいです。
ツクールMZ用であれば提供できます。

現在ツクールMZは40%オフのセール中です。

[anman]

しぐれん様

ご回答ありがとうございます。
MVでの実装が厳しそうとの事、承知致しました。
また、代案のご提案もありがとうございます。
MZに関しては所持しているのですが、一緒についてきたMVで大部分を進めてしまっております状況です。(機能にほぼ差がないからプラグインの充実しているMVが良いとの評判を受けて選択しました)

こちらの機能は諦めを念頭にすすめていきたいと思います。
繰り返しとなりますが、ありがとうございました！

[虚構の城跡]

プラグインを利用しないでやるとしたら、穴が幾つもあるピクチャを複数用意して次々表示させていく方法も考えられます。
ただ、丸い穴ではなく、こちらの様な円錐状の様な光だとかなり計算して作る必要があります。
http://cacaosoft.blog42.fc2.com/blog-entry-366.html

[anman]

虚構の城跡 様

ご回答ありがとうございます。
なるほど、そういった方法もとれるのですね！高速で表示させたらそれっぽくなるでしょうか。
試してみようと思います。
円錐は凄く良いですが、見るからに難しそうですね…。まずは一歩ずつ進めていきます。

この度は、具体案のご提示ありがとうございました！

[名無し蛙]

PIXI.jsには全く詳しくないんですけどこういうのを見ると出来そうな気がしてきますよね。
試しに手探りで実装してみたんですけど一応それっぽいのは出来ました。
他にスマートな方法はありそうですけどよろしければ動作チェックしてみてください。
コードは全てイベントコマンド＞スクリプトでコピペする事を想定しています。

①スポットライトを表示して画面左右に振らせる。

コード: 全て選択

const radius = 100; const focusY = 200;
const circle = new Bitmap(radius * 2, radius * 2);
circle.drawCircle(radius, radius, radius, '#880000');
const focus = new Sprite();
focus.bitmap = circle;
SceneManager._scene.addChild(focus);
SceneManager._scene._spriteset.mask = focus;
focus.ox = focus.oy = radius; focus.y = focusY;
focus.intervalId = setInterval(() => {
    const widthHalf = Graphics.boxWidth / 2 - radius;
    focus.x = widthHalf + Math.sin(Graphics.frameCount) * widthHalf;
}, 100);

※特にY軸はfocusYを弄って適当に調節してください。

②スポットライトを一度消す

コード: 全て選択

const lastIndex = SceneManager._scene.children.length - 1;
const focus = SceneManager._scene.getChildAt(lastIndex);
focus.bitmap = null;

③対象イベントにスポットライトを当てる

コード: 全て選択

const eventId = 2;
const lastIndex = SceneManager._scene.children.length - 1;
const focus = SceneManager._scene.getChildAt(lastIndex);
clearInterval(focus.intervalId);
const radius = 100;
const circle = new Bitmap(radius * 2, radius * 2);
circle.drawCircle(radius, radius, radius, '#FF0000');
focus.bitmap = circle;
const character = this.character(eventId);
focus.x = character.screenX() - radius;
focus.y = character.screenY() - radius - 24;

※eventIdが-1の場合はプレイヤ、イベントIDを指定した場合はそのイベントにスポットライトが当たります。

④残りのスポットライトに関連した処理を削除する。

コード: 全て選択

const lastIndex = SceneManager._scene.children.length - 1;
const focus = SceneManager._scene.getChildAt(lastIndex);
SceneManager._scene._spriteset.mask = null;
SceneManager._scene.removeChild(focus);

汎用性なんて全くなく想定外の使用をすれば間違いなくバグりますけど、
自動実行イベントで使用する分にはこの一連の4つのコードを使えば想定の演出くらいは可能かなぁ、と。
欲を言えばライトを二つ以上同時に動かしたかったんですけどマスク処理との相性が悪いですね。

[anman]

名無し蛙 様

ご回答ありがとうございます。
制作くださったスクリプトを適用してみました所、
まさに想定していた通りの挙動でございました！
他のイベントコマンドの組み合わせも無しにここまでできるものなのですね…。感服いたしました。
是非こちら使用させて下さい。
この度は貴重なお時間を割いて頂きありがとうございます。

また、こちらのトピックはとりあえず解決済みとさせて頂きます。
ご回答下さった皆様改めましてありがとうございます！
大変参考となりました。