Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

タイルの話

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 30-tägigen Testversion von Scribd

Alle anzeigen

タイルの話

  1. 1. タイルの話 東京電機大学理工学部情報科学科OB (99SJ097) Taro Matsuzawa @smellman dendai sie; Talk Live! vol.5
  2. 2. はじめに
  3. 3. プレゼンのファイルが 前日に消滅 なのであまりやる気ないです
  4. 4. 自己紹介(1) • Georepublic シニアエンジニア(本業) • Coaido 技術顧問 (副業) • 日本UNIXユーザ会理事 • OSGeo財団日本支部運営委員 / OSMFJ • C MagazineとかSoftware Designとかオライリー・ ジャパンのFirefox Hacksシリーズとか
  5. 5. 自己紹介(2) • 電大に1999年入学、2014年卒業 • 留年してる • btm, smellman, 組長などと呼ばれる • もじら組というところで組長やってた(過去形) • ブレイクコアガチ勢
  6. 6. 学生時代 • 理工学部 E.S.S (English Speaking Society) 部長 • 卒業後数年で廃部 • 理工学部 コンピュータクラブ所属 • UNIXやってるからという理由で二年生の時に入部 • バイトでデスマーチ
  7. 7. タイルとは
  8. 8. 地図のタイル • Google Mapsとか OpenStreetMapとかいろいろな ところで使われてる技術 • 地図をタイルの用に並べてス ムーズなスクロールやズーム を可能にするというもの http://a.tile.openstreetmap.org/0/0/0.png
  9. 9. アクセス • {z}/{x}/{y}.pngみたいな感じでアクセスするのが最近の流行り z:ズームレベル x: x座標 y: y座標
  10. 10. 座標系 • Web地図では一般的にWeb メル カトルというのが使われる • 左上の緯度経度がだいたい85, -180で右下の緯度経度がだい たい-85, 180となる 85, -180 85, 180 -85, 180 -85, -180
  11. 11. 詳しいことは ググりましょう
  12. 12. 本題
  13. 13. ドラ○エ3の地図を タイルにしてみた
  14. 14. 非現実 • ゲームの地図の座標系は現実の地図とは関係ない • ドットだもん • Leaflet.jsというタイルを表示するライブラリには ゲーム向けの設定が用意されています • L.CRS.Simple
  15. 15. ポイント • 普通のWeb地図はzoom=0で256x256の画像を利用 • L.CRS.Simpleでは zoom=0 では 1x1 の画像 • Rubyでいうところの 2 ** zoom • JavaScriptなら Math.pow(2, zoom) • でもタイルは256x256という単位なのでうまく切り 出す必要がある
  16. 16. 作成(1) • 画像をググって探す • 画像の大きさからズームレベルを算出 • たまたま4096x4096というサイズだったので、 Math.log(4096) / Math.log(2) -> zoom 12がベー スとなる • なお、一枚のタイルで収まるのは zoom 8となる
  17. 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. 18. 作成(3) • タイルを並び替える • convert -crop ではタダの連番になるのでそれを 上手く並べる • 上記までの流れは以下を参考にすれば良い • http://omarriott.com/aux/leaflet-js-non-geographical- imagery/
  19. 19. デモ
  20. 20. 補足 • 仕事ではこんな小さなデータは扱わない • 巨大なSVGが元画像だったりする • 画像に変換すると(Cairoが)死ぬ • phantomjsぶん回してSVGから画像切り出しとかむちゃ くちゃなことを仕事でやってる(昨日見つけた技) • 楽しい!!!!!!!
  21. 21. The End.
  22. 22. おまけ • 作成プログラムのレポジトリ作りました • https://github.com/smellman/make_game_tile_example • 適当に画像を探して試してみてください

×