Skip to content
This JSX creates map tiles from adobe illustrator CC
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes
LICENSE
README.md
ai2tiles.jsx

README.md

illustrator-to-MapTiles

  • その名前の通り、これはadobe Illustratorから、ZXY方式の地図タイルを出力する、Illustrator拡張スクリプトです
  • 予め地図タイルにあわせた形でデータを作成している必要があります
  • 制作時の左上のXYタイル座標と、制作時にあわせた地図タイルのズームレベルがあればOK
    • 必要なのはz,x,y,z'の4つ
    • z,x,yは制作しているIllustratorの設計データ
    • z'は出力したいズームレベル
  • 出力先のズームレベルを指定すれば、指定のフォルダ内に配置してくれます
  • もちろん、スクリプト実行前のバックアップをお忘れなく
    • 開発者の私は、データの破壊による責任を負いません
  • Illustrator CC 2018での動作は確認していますが、他のバージョンでは不具合があるかもしれません
  • 動作が重いことに注意をお願いします
    • より良い動作の為の改良は大歓迎です

バージョン履歴

  • (2019/08/02)v1.0 完成
  • (2019/08/08)v1.1 一部文言の修正
    • z,x,y,z'のうちz,x,yは制作データ、z'が出力先と強調

前提条件

  • zxy方式の地図タイルに基づくデータを作成している
  • 予め地図タイルにあわせてデータを作成している
  • 出力範囲全体がちょうど収まるアートボードがある
  • ベースにある地図タイルのズームレベルを把握している
    • 256pxのz15地図タイルを128pxにして配置していた場合、z14とみなす
  • 出力範囲左上のタイル座標(x,y)を把握している

導入方法・使い方

  1. スクリプトを実行したいIllustratorデータにおいて、ズームレベル(z)と左上のタイル座標(x,y)を控える
    • ここでのz,x,yは出力前のイラレデータのもの
  2. 本githubの"ai2tiles.jsx"をRAWから名前を付けて保存する
  3. PC内のどこか、もしくはadobe既定のスクリプト保管フォルダに"ai2tiles.jsx"を配置する
  4. スクリプト実行前のIllustratorデータを保存します
  5. スクリプト実行前に、出力範囲全体がちょうど収まるアートボードを選択する(なければこの段階で作成すること)
  6. Illustratorを起動し、ファイル->スクリプトからPC内にあるai2tiles.jsxを指定、実行する
  7. 入力画面で必要事項を入力する
    • スクリプトを実行したいデータのz,x,yを入力する
    • 実行後に出力したいズームレベルを4つ目に入力する
  8. OKを押し、ファイル選択ダイアログで出力先を指定する
  9. しばらく待てば、出力完了!

プログラム設計

変数

doc

sels

artboards

tilesize

  • スクリプト側で256と指定済み

base_tileZ

base_tileX

base_tileY

base_rectX

base_rectY

base_rectW

base_rectH

export_dir

export_z

export_dirXcount

  • 必要なxフォルダ数をはじき出す
  • base_rectWとtilesizeで元データのXフォルダ数を計算
  • その後、export_zとbase_tileZから倍率を算出
  • 倍率をかけ合わせ結果を返す

base_cell

  • base内を256/倍率で区切った際の1枚あたりのタイルサイズ
  • z14からz16を出力するなら、64pxごとに1度区切り、画像出力時に倍率で256pxにするイメージ

tmp

  • 既存のアートボード数
  • スクリプト内で一時的にアートボードを生成することから、これが必要

関数

getRect

  • イラレ向けの数値に変換する

newArtboard

  • 新たなアートボードを作る

exportPNG

  • 指定された情報に基づき、画像を出力していく
  • 内部的には出力用一時アートボードを生成し、出力したい部分へアートボードを移動、画像出力、アートボード移動...を繰り返す

useropt

  • ユーザーにオプション情報を入力してもらう

mkdirZXY

  • 出力先として必要となるフォルダ生成を行う
  • 指定されたzと、その下にxのフォルダを生成する

go

  • スクリプト起動時に、問題がなければ出力の実行を行う
You can’t perform that action at this time.