画像拡大時のピンボケをうまく活用する

今日はenchant.jsでの画像拡大機能のちょっとした技の紹介です。

まず基本的なこととしてenchant.jsではSpriteクラスのscaleX、scaleYプロパティーの値を変更すると画像を拡大縮小させることができます。単純にこれだけなのですごく便利なんですが、残念なことに拡大すると画像が少しボケます。なのでボケるのが嫌な場合は大きい画像を用意して切り替えたりする必要があると思います。

しかし、このピンボケなんですが、これは画像の拡大率が大きくなればなるほどボケも大きくなります。めっちゃ拡大するとめっちゃボケます。

通常なら困る現象ですが、この現象を逆手にとって逆に利用してやります(*´ω`)

その例がこちら。

背景をボケさせることによって夜景の光の漏れる感じをうまく表現しています。

さらに拡大率をもっと上げるとこうなります。

上のゲームの背景がそうです。ドットが完全にぼやけてわからないほどにボケまくってます。ボケが良い感じに雲やガスのようになってくれています。

 

こんな感じで拡大時に起こるボケも逆にうまく利用して演出に使うことができます。

またこの技を使うことで本来なら大きい画像が必要なところを小さい画像にできるのでデータ容量も小さく済みます。容量が減ればローディング時間が短くなるのでとてもありがたいです(*´ω`)

 

短所は長所にもなりえるって感じですね(´∀`)

「そうなってしまう」ってことがわかってるならあえて「そうしてやる」っていうのも方法論としてはありってわけです。こういう技も積極的に使っていきたいですね( `ー´)ノ

コメントを残す

メールアドレスが公開されることはありません。