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

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

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

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

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

その例がこちら。

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

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

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

 

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

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

 

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

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

どのゲームで遊ぶ?

enchant.jsでこんなのもできるのか?と試したテストゲーム。
同色のブロックを4つ以上つなげると消える落ちもの系パズルゲームです。連鎖で高得点を狙おう!
ブロックに挟まれないように画面上部にあるゴール目指すゲーム。めちゃくちゃ難しいです。
定番ゲームのマインスイーパーです。出てきた数字から爆弾の位置を推測します

コメント欄

※コメントはまだありません※

コメントを残す

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

ゲームタグ一覧

ゲーム開発の参考書(amazon)

HTML5 ゲーム開発の教科書 スマホゲーム制作のための基礎講座
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング[改訂版] (Future Coders(NextPublishing))
改訂2版 はじめて学ぶ enchant.jsゲーム開発