タイルの話東京電機大学理工学部情報科学科OB (99SJ097)

Taro Matsuzawa @smellman dendai sie; Talk Live! vol.5

はじめに

プレゼンのファイルが前日に消滅

なのであまりやる気ないです

自己紹介(1)• Georepublic シニアエンジニア(本業)

• Coaido 技術顧問 (副業)

• 日本UNIXユーザ会理事

• OSGeo財団日本支部運営委員 / OSMFJ

• C MagazineとかSoftware Designとかオライリー・ジャパンのFirefox Hacksシリーズとか

自己紹介(2)• 電大に1999年入学、2014年卒業

• 留年してる

• btm, smellman, 組長などと呼ばれる

• もじら組というところで組長やってた(過去形)

• ブレイクコアガチ勢

学生時代• 理工学部 E.S.S (English Speaking Society) 部長

• 卒業後数年で廃部

• 理工学部 コンピュータクラブ所属

• UNIXやってるからという理由で二年生の時に入部

• バイトでデスマーチ

タイルとは

地図のタイル

• Google Mapsとか OpenStreetMapとかいろいろなところで使われてる技術

• 地図をタイルの用に並べてスムーズなスクロールやズームを可能にするというもの

http://a.tile.openstreetmap.org/0/0/0.png

アクセス• {z}/{x}/{y}.pngみたいな感じでアクセスするのが 近の流行り

z:ズームレベル x: x座標 y: y座標

座標系

• Web地図では一般的にWeb メルカトルというのが使われる

• 左上の緯度経度がだいたい85, -180で右下の緯度経度がだいたい-85, 180となる

85, -180

-85, 180

85, 180

-85, -180

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

本題

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

非現実

• ゲームの地図の座標系は現実の地図とは関係ない

• ドットだもん

• Leaflet.jsというタイルを表示するライブラリにはゲーム向けの設定が用意されています

• L.CRS.Simple

ポイント• 普通のWeb地図はzoom=0で256x256の画像を利用

• L.CRS.Simpleでは zoom=0 では 1x1 の画像

• Rubyでいうところの 2 ** zoom

• JavaScriptなら Math.pow(2, zoom)

• でもタイルは256x256という単位なのでうまく切り出す必要がある

作成(1)• 画像をググって探す

• 画像の大きさからズームレベルを算出

• たまたま4096x4096というサイズだったので、 Math.log(4096) / Math.log(2) -> zoom 12がベースとなる

• なお、一枚のタイルで収まるのは zoom 8となる

作成(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

作成(3)• タイルを並び替える

• convert -crop ではタダの連番になるのでそれを上手く並べる

• 上記までの流れは以下を参考にすれば良い

• http://omarriott.com/aux/leaflet-js-non-geographical-imagery/

デモ

補足• 仕事ではこんな小さなデータは扱わない

• 巨大なSVGが元画像だったりする

• 画像に変換すると(Cairoが)死ぬ

• phantomjsぶん回してSVGから画像切り出しとかむちゃくちゃなことを仕事でやってる(昨日見つけた技)

• 楽しい！！！！！！！

The End.

おまけ

• 作成プログラムのレポジトリ作りました

• https://github.com/smellman/make_game_tile_example

• 適当に画像を探して試してみてください