画像拡大時のピンボケをうまく活用する【enchant.js】

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

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

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

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

その例がこちら。

アクションゲーム制作再開。
思い付きで背景つけてみたらいい感じ
enchant.jsの拡大したらピンボケするのが逆にいい味だしとる😃 pic.twitter.com/q3wVqqYHqr

— いんわん＠寒さにすこぶる弱い (@inwan78) February 11, 2019

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

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

新作ゲーム公開しました。
レトロ風の縦シューティングゲームです。
スマホでもパソコンでも遊べます。
全４ステージ。10分くらいでクリアできます。https://t.co/0wKAECRRHK#gamedev #indiegame pic.twitter.com/KIhSKScQXv

— いんわん＠寒さにすこぶる弱い (@inwan78) April 24, 2019

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

 

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

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

 

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

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