Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Loading in …3
×
1 of 22

タイルの話

3

Share

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

タイルの話

  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 • 適当に画像を探して試してみてください

×