2022/10/21
こんにちは。影織です。
今回は、主に背景周りのアニメーションに関する話をしています。img-motionの仕様追加について
img-motionで、透明度を調整できるようにするといいよね、という話が出ました。 （※これを書いている現在、無事にimg-motionにその機能が実装されています！） この透明度調整ができるようになったことで、 以下のようなアニメーションを作れるようになりました。 郵便局の封筒の部分と、飛び出す鳥に、透明度を変えるアニメーションをつけています。
背景の見せ方について
背景サイズ
背景画像は、縦の高さは統一で、横のサイズが3種類ほどあります。 このブログでも以前載せた、部屋の画像(1920*1080)を基準として、 横幅が同じまたは、2倍・3倍サイズのシーンを準備しています。 3倍サイズの画像は、どどんとこんな感じです。 かなり圧巻なので、この中をぐるぐる歩き回れるようになるといいなぁと思っています。
背景の動かし方
背景の見せ方として、キャラに追従して画像を動かすか、 ユーザーがカーソルなどで好きに動かせるようにするか、という話が出ました。 追従モードにすると、キャラクターが行けないところを見せることができない、という難点があるものの、 一旦はこのモードを組んで考えることになっていきそうです。 また、ユーザーのブラウザのサイズによっては、見づらくなってしまう可能性もあります。 この辺りも、シーンが組み上がってから、もう少し具体的に検討していきたいですね。
