dendai sie; Talk Live! vol.5 で発表したタイル及びゲームタイルの話です。

1. タイルの話
東京電機大学理工学部情報科学科OB (99SJ097)
Taro Matsuzawa @smellman
dendai sie; Talk Live! vol.5

2. はじめに

3. プレゼンのファイルが
前日に消滅
なのであまりやる気ないです

4. 自己紹介(1)
• Georepublic シニアエンジニア(本業)
• Coaido 技術顧問 (副業)
• 日本UNIXユーザ会理事
• OSGeo財団日本支部運営委員 / OSMFJ
• C MagazineとかSoftware Designとかオライリー・
ジャパンのFirefox Hacksシリーズとか

5. 自己紹介(2)
• 電大に1999年入学、2014年卒業
• 留年してる
• btm, smellman, 組長などと呼ばれる
• もじら組というところで組長やってた(過去形)
• ブレイクコアガチ勢

6. 学生時代
• 理工学部 E.S.S (English Speaking Society) 部長
• 卒業後数年で廃部
• 理工学部 コンピュータクラブ所属
• UNIXやってるからという理由で二年生の時に入部
• バイトでデスマーチ

7. タイルとは

8. 地図のタイル
• Google Mapsとか
OpenStreetMapとかいろいろな
ところで使われてる技術
• 地図をタイルの用に並べてス
ムーズなスクロールやズーム
を可能にするというもの
http://a.tile.openstreetmap.org/0/0/0.png

9. アクセス
• {z}/{x}/{y}.pngみたいな感じでアクセスするのが最近の流行り
z:ズームレベル
x: x座標
y: y座標

10. 座標系
• Web地図では一般的にWeb メル
カトルというのが使われる
• 左上の緯度経度がだいたい85,
-180で右下の緯度経度がだい
たい-85, 180となる
85, -180
85, 180
-85, 180
-85, -180

11. 詳しいことは
ググりましょう

12. 本題

13. ドラ○エ3の地図を
タイルにしてみた

14. 非現実
• ゲームの地図の座標系は現実の地図とは関係ない
• ドットだもん
• Leaflet.jsというタイルを表示するライブラリには
ゲーム向けの設定が用意されています
• L.CRS.Simple

15. ポイント
• 普通のWeb地図はzoom=0で256x256の画像を利用
• L.CRS.Simpleでは zoom=0 では 1x1 の画像
• Rubyでいうところの 2 ** zoom
• JavaScriptなら Math.pow(2, zoom)
• でもタイルは256x256という単位なのでうまく切り
出す必要がある

16. 作成(1)
• 画像をググって探す
• 画像の大きさからズームレベルを算出
• たまたま4096x4096というサイズだったので、
Math.log(4096) / Math.log(2) -> zoom 12がベー
スとなる
• なお、一枚のタイルで収まるのは zoom 8となる

17. 作成(2)
• 画像をリサイズ
• zoom = 10 なら 2 ** (10 - 12) = 0.25 倍なので
1024 x 1024
• convert -resize 1024x1024 base.png resize.png
• 画像を256x256で切り出す
• convert -crop 256x256 +repage resize.png crop_
%d.png

18. 作成(3)
• タイルを並び替える
• convert -crop ではタダの連番になるのでそれを
上手く並べる
• 上記までの流れは以下を参考にすれば良い
• http://omarriott.com/aux/leaflet-js-non-geographical-
imagery/

19. デモ

20. 補足
• 仕事ではこんな小さなデータは扱わない
• 巨大なSVGが元画像だったりする
• 画像に変換すると(Cairoが)死ぬ
• phantomjsぶん回してSVGから画像切り出しとかむちゃ
くちゃなことを仕事でやってる(昨日見つけた技)
• 楽しい！！！！！！！

21. The End.

22. おまけ
• 作成プログラムのレポジトリ作りました
• https://github.com/smellman/make_game_tile_example
• 適当に画像を探して試してみてください