2022/10/20
こんにちは。影織です。
今回は、背景をどのように見せるかお話しています。背景を馴染ませる
私は、切り絵のスキャン画像から、周辺の白い部分を切り抜いて、ブラウザで表示する背景を作っているのですが、 どうしても白いシャギーが残ってしまうことがあるんですよね。 試しに、木のスキャン画像の背景に、ベタ塗りの緑色の背景を置いてみたのですが、 画像の周囲にうっすらと白い線が出ているのが見えるでしょうか。この問題については、画像の処理をもう少し丁寧にする、というのに加え、 半透明の背景色を背面に置くことで、色なじみが良くなるようです。なるほど。 背景の色で印象がかなり変わるので、雰囲気に合う色を慎重に選定していきたいところですね。 背景は木立や机など、多いと1シーン10枚くらいのレイヤーに分かれています。 それぞれの画像に対してCSSを入れることができると、棚や窓枠に影をつけたり、色を変えたりすることで、 より立体感のある表現ができそうです。
グローバル座標について
img-motion側では、同じpositionで歩くアニメーションを再生することができますが、 グローバル座標の動きを入れることで、画面の端から端まで歩かせるなどの表現ができるようになります。 キャラクターの移動する頂点ポイントの座標とdurationをデータとして持っておけば、実現できそうです。 ポイント間を直線移動して、移動パスを描くということですね。まとめ
CSSを使うことで、リッチな表現にできそうで楽しみです。 キーフレームアニメーションを使いながら、背景画像のどこかしらが動いている状態にしておくことで、 アナログではなくWebで表現することに意味が出てきそうだと思いました。
おまけ
ラジオの中で触れられていた「波」の表現ですが、 img-motionでうまく作れました！（gif画像なので、ちょっとゆっくりめに再生されています） 波の白い部分をレイヤーで分けて斜めに動かしながら、透明度を変えていくことで、波っぽい動きが実現できました。
