AIで知識ゼロからアプリ開発1000時間 #11

＃11：演出は魂だ。ペルソナ5風エフェクトに挑む』

アプリ開発中、ただの画面切り替えじゃつまらねぇと思って、人気ゲーム「ペルソナ5」みてぇなカッコいい演出をCSSとJSで再現しようとしたんず。最初はうまぐいかねくて、画面が変なタイミングで見えたり、クリックできねぐなったり、残像がのこったり…。でもいろいろ試して、"覆う"じゃなくて"開く"アニメーションにしたら世界観がバチっと決まったんず。見た目にこだわるのは、魂込めた証拠だなって思った。

アプリっこ作ってらと、だんだん欲が出でくるもんだ。最初は「動けばいいべ」って思ってたんだばって、気づいだら「どうせならカッコよぐしたい」って思ってらんず。

今回やったのは、刑務画面に入った時の演出。なんもなしに画面切り替えったら、ただの作業だべ？そごに“ペルソナ5”みてぇなド派手な赤黒の演出をぶち込みたくなったんず。

まずやってみだのは、画面に赤黒の幕をかけて、それがフェードアウトしていくエフェクト。CSSアニメーションで.persona-overlayってクラス作って、背景にグラデーションかけてスライドイン＆フェードアウトさせだんず。

でもな、それがなかなかうまぐいがね。刑務画面の背景が一瞬だけ先に見えでまうんず。タイミングの問題だべなって思って、CSSのanimationのeaseやらforwardsやらいじってもダメ。そしたらふと思った。「これ、**覆うんでなくて最初から覆ってて、開く演出にすればいいんでね？」って。

発想の転換だな。

アニメーションのキーフレームもこう変えだ：

cssコピーする編集する0%   { transform: translateY(0); opacity: 1; }
100% { transform: translateY(-100%); opacity: 0; }

これで“開く”動きになって、背景が見える前に赤い幕が画面を覆ってる状態からスタートできるようになった。

しかもそれだけじゃねぇ。今度は演出終わった後にクリックできなくなる問題が出できた。CSSにpointer-events: none;って書いでるはずなのに、何か残像が操作を邪魔してら。結局、JSのタイマーで.style.display = 'none';ってちゃんと要素ごと非表示にすることで解決。

最後に挑戦したのが、画面横切るグラデーションライン。これがまたクセ者で、無限ループさせると他の処理止まったり、一本だけだと弱かったり。そこで何本も同時に太さやタイミングずらして出すことで、ペルソナっぽい「情報が切り裂かれる」感じが出できた。

---

ここまでやって思ったんず。

プログラミングって、ただ動けばいいってもんじゃねぇ。世界観を作るってのは魂込める作業だ。細けぇとこまでこだわって、「うわ、なんかスゲぇ…」って思わせる。その一瞬の驚きが、ユーザーの心に残るはんで。