10/08
_ [DQ9] 地図画像の作り方
台風直撃が気になる中、ちょっとしたJavaScriptの小ネタ更新を。
[宝の地図画像作成] ページで作った地図、右クリックで保存しようとしてもできないのが、ちょっとした欠点です。ブラウザ全体をキャプチャしてください、という。
どうしてそうなっているかというと、これって JavaScript で1枚の画像ファイルを作っているわけではなくて、全く同じ画像ファイルを (15*2)^2 = 900枚、それぞれ一部だけの表示を並べているから、です。
もう少し詳細を書くと、 8*8 のDIV 要素内に背景画像を指定して、CSS の background_position で表示する場所を切り替えています。そして地図をテキストで描いて「作成」ボタンを押すと、background_position だけを入れ替えている、という仕組みです。10枚の切り出しイメージがこちらの画像の通り。
こうすると重たいかもと心配していました。最初はマラソンツールの素材作成は Photoshop あたりで作った方が良いかなと。でも、やってみると iPhone で動く程度には軽かったですし、せっかくだからともう少し調整して公開してみた、というわけでした。
ところで、カテゴリがDQ9なのかJavaScriptなのかRPGツクールなのかと言われると、きっとごちゃまぜ(汗)。