今回はフェードイン・フェードアウトです。
😎フェードイン・フェードアウトとは
ゲームや映画のシーン切り替えで欠かせないフェードイン・フェードアウト処理・・・
フェードは映像編集技術用語のひとつである。フェードイン（fade-in）とフェードアウト (fade-out) の2種類がある。
フェードインは「一色の状態から徐々に映像が見えている状態に移り変わること」であり、フェードアウトは「映像が見えている状態から徐々に一色に移り変わること」である。主として物語の展開の上でひと区切りつける必要がある場合に使われる。
Wikipedia
レトロすぎるゲームでは、フェードイン・フェードアウトは使っていなかったりしますが🤣
ないよりあった方が良いので、実装してみましょう・・・😘
😊サンプルプログラムの解説
先ずはサンプルプログラムのダウンロードをお願いします👇
https://nengasoft.com/prj/sample04.zip
下記のファイルがキモです。
（１）dib.js
（２）main.js
（３）nfld.js
それぞれ解説します。
😘dib.js
画像データに対し、半透明で塗りつぶしを行なう処理を追加します。
そう、画面全体に対して、この処理を掛けるのです😊
引数のr・g・bは色を（0～255）、aは透明度（0～255）を受けます。
😏main.js
dib.jsで追加した半透明で塗りつぶしを行なう処理を、透明度を変えながら呼び出します。
先ずはそのコントロールに必要な変数を定義します。それぞれの役割はコメントのとおり。
実際に変数を使う場所をば。
🙄nfld.js
今回は、ユーザーの操作でフェードイン・フェードアウトが起こるようにします。
タップがいいでしょう。
ということで、前回サンプル03でペギちゃんの（うざい）発声を行なっていた箇所を潰して🤣フェードイン・アウトの開始処理に置き換えました！
😗動かしてみましょう
どうでしょう。一回タップでフェードアウトに入り、もう一度タップでフェードインになったと思います。
😶まとめ
フェードイン・アウトの処理を追加し、それがタップによって切り替わるようなサンプルを作ってみました。
あとはこれをうまく使って、シーンの移行などに使ってください。
dib.jsに今回追加したFillRect()関数は色指定もできますから、ホワイトアウトさせたり、エロムードにさせたりと自由自在に遊べると思います🤣
コメント