- 2008.11.04 Tuesday
- RPGツクール画像を使ってマップスクロール（CSS SPRITE）
- CSS SPRITEというテクニックを使ってマップスクロールを作ってみました。
通常、Webサイトには多数の画像を表示していますが、その画像を一枚の画像としてまとめたものを読み込み、CSSのbackground-imageやbackground-positionを用いて画像の必要な箇所だけマスクのようにして画像を表示するというものです。
DesignWalkerさんによると、YouTubeの背景もこの方法を用いているようです。
これを見ていて、ふと思い出したのが、RPGツクールといわれるゲーム作成ソフトの背景画像。
このような画像を活用するには、CSS SPRITEを活用するといいのではないだろうか？
そう思って作ってみたのがこちら（IE限定。WIN+IE7で動作確認）。
FireFoxでも動かないことはないのですが、非常に重いです。。
まずは、IEだけでの公開です。
単なるRPG系のマップスクロールロジックを作るだけであれば、IMGタグをマップチップの分だけ並べて、JavaScriptで主人公の周囲の情報を取得、その呼応する画像アドレスをSRC属性として書き換えればいいのですが、今回はCSS SPRITEを使っての実装です。
人がテクテク歩く画像の切り替えと、地図背景の切り替えにCSS SPRITEを使用しています。
ちょっと処理が入り組んでいるのでソースの解説は割愛しますが、これを基にゲームを作った人がいたら是非とも教えてください。
参考URL
- coliss：CSS SPRITEのサンプルが多数取り扱われていました。
- エスカフラーチェLLC：体感速度が速くなったという報告がありました。
- PHPプロ：オンラインでの結合ツールの紹介がされてます。
| 開発関連 | 20:38 | comments(1) | trackbacks(0) |