使い方

AtlasKit の画面の見かたと、スプライトシートの作成・分割・アニメーションの確認の手順を説明します。上から順に読めば、ひととおり使えるようになります。

画面とショートカットは Mac 版で説明しています。Windows 版では ⌘ を Ctrl に読み替えてください。そのほかの違いは「Windows 版での違い」にまとめています。

画面の構成

AtlasKit のウインドウは、次の 5 つの部分でできています。

• 上部のツールバー：モードの切り替え（Pack / Split / Preview）、画像の追加、取り消し・やり直し、書き出し
• 左：フレーム一覧：読み込んだ画像の一覧。サムネイル、名前、番号、サイズを表示
• 中央：キャンバス：スプライトシートや分割範囲、アニメーションを表示
• 右：インスペクタ：配置・シート・出力などの設定と、結果の表示
• 下：タイムライン：フレームの並びと再生操作

モードは 3 つあります。

Pack と Preview は同じフレーム一覧を使います。Pack で並べたフレームを、そのまま Preview で再生できます。

画像を読み込む

次のいずれかの方法で画像を追加します。

• ツールバー、またはメニューの「ファイル > 画像を追加…」（⌘I）で画像を選ぶ
• 「ファイル > フォルダを追加…」（⇧⌘I）でフォルダを選ぶ。フォルダ内の対応形式の画像をまとめて読み込みます
• Finder（Windows はエクスプローラー）からファイルやフォルダを、ウインドウにドラッグ＆ドロップする
• 空のキャンバスをクリックする

読み込める形式は、PNG（APNG を含む）、JPEG、WebP、GIF、BMP、TIFF、TGA です。アニメーション GIF・APNG・アニメーション WebP は 1 コマずつのフレームに展開され、元のファイル名_0001 の形式の名前が付きます。

読み込めなかったファイルがあると、ウインドウ下部に「問題」が表示されます。クリックすると、ファイルごとの理由を確認できます。

フレームの並びを整える

スプライトシート上の順番は、フレーム一覧の順番です。

• 並び替え：一覧右上のボタンから「並び替え：自然順」「名前順」「逆順」を選びます。自然順では、frame2 が frame10 より前に来ます
• 手動で並び替え：一覧の行をドラッグします。「上へ移動」「下へ移動」でも動かせます
• 複数選択：⌘クリックで 1 つずつ、⇧クリックで範囲を選択します。⌘A ですべてを選択します
• 削除：選択して Delete キーを押すか、「削除」を押します。「すべて削除」で一覧を空にします

操作は「編集 > 取り消す」（⌘Z）、「やり直す」（⇧⌘Z）で元に戻せます。

グリッド配置（Pack）

インスペクタの「レイアウト」で「グリッド」を選ぶと、同じ大きさのマス目にフレームを並べます。キャラクターのアニメーションなど、コマの大きさがそろった素材に向いています（画面は「画像を読み込む」の画像を参照）。

• 配置方向：「横方向」（1 行に並べる）、「縦方向」（1 列に並べる）、「指定列数で折り返し」、「指定行数で折り返し」
• 列数 / 行数：折り返す位置
• セルサイズを自動にする：オンにすると、最も大きいフレームに合わせてセルの大きさを決めます。オフにすると「セル幅」「セル高さ」を指定できます
• セル内の配置：セルより小さいフレームを「左上」「中央」「下中央」のどこに置くか。キャラクターの足元をそろえたいときは「下中央」が便利です

パック配置（Pack）

「パック」を選ぶと、大きさの違う画像を、すき間ができるだけ少なくなるように詰めて配置します。アイテムやアイコンなど、大きさがばらばらな素材に向いています。

• アルゴリズム：配置の方法を 7 種類から選びます（Shelf Packing、Next Fit、First Fit、First Fit Decreasing、Best Fit、Skyline、Maximal Rectangles）。迷ったら Maximal Rectangles か Skyline を試してください
• 回転を許可：すき間が減る場合に、スプライトを時計回りに 90 度回転して配置します。Skyline と Maximal Rectangles で使えます
• 透明な余白をトリム：画像の周りの透明な部分を取り除いてから配置します。元の大きさと位置は JSON に記録されるので、ゲーム上では元どおりの位置に表示できます
• アルファしきい値：トリムするとき、この値以下のアルファ（0〜254）のピクセルを透明とみなします。うっすら残った影などを取り除きたいときに上げます。画像のピクセル自体は変更しません
• 押し出し：各スプライトの端のピクセルを、指定した幅だけ外側に複製します。ゲームで拡大・縮小したときに、隣のスプライトの色がにじむのを防ぎます

回転・トリム・押し出しは、パック配置でだけ使えます。キャンバスには、書き出し結果と同じ状態で表示されます。

アルゴリズムを比較する

「アルゴリズムを比較」を押すと、現在の画像と設定で全アルゴリズムを試し、シートのサイズと使用率を一覧にします。最も使用率の高いものに ★ が付きます。行をクリックすると、そのアルゴリズムに切り替わります。

シートの設定

インスペクタの「シート」で、書き出すスプライトシートの条件を決めます。

• 最大幅 / 最大高さ：シート 1 枚の上限（最大 16384px）。収まらないフレームは、2 枚目以降のシートに配置されます
• マージン：シートの外周の余白
• パディング：スプライト同士の間隔
• 2のべき乗サイズ：シートの幅と高さを 2 のべき乗（256、512、1024…）にします。古い GPU やエンジンで必要な場合に使います
• 正方形：シートを正方形にします
• 背景を透明にする：オフにすると「背景色」を指定できます

「結果」に、シート数、シートのサイズ、使用率（シートのうちスプライトが占める割合）が表示されます。シートが複数になると、キャンバス上部の矢印でシートを切り替えられます。

フレームを選択する

キャンバス上のスプライトか、フレーム一覧の行をクリックすると、そのフレームを選択します。インスペクタの「選択中の画像」に、名前、サイズ、シート上の位置が表示されます。トリムや回転をしている場合は、「トリム後のサイズ」と「回転」も表示されます。

キャンバスをクリックしてから矢印キーを押すと、上下左右の隣のスプライトに選択が移ります。キャンバス左上の「境界線」ボタンで、各スプライトの枠の表示を切り替えられます。

表示を拡大・縮小する

• 拡大 ⌘= ／ 縮小 ⌘- ／ 実際のサイズ ⌘0 ／ 全体を表示 ⌘9。キャンバス右上のボタンでも操作できます（拡大・縮小は 2 倍ずつ）
• トラックパッドのピンチ、または ⌘ を押しながらスクロールすると、ポインタの位置を中心に拡大・縮小できます
• ドラッグまたはスクロールで、表示位置を動かせます
• 全体を表示では、拡大できるときは 2 倍・3 倍などの整数倍で表示するので、ドット絵がにじみません

出力の設定

インスペクタの「出力」で、書き出すファイルを決めます。

• ファイル名：書き出すファイルの名前（拡張子なし）。spritesheet なら spritesheet.png と spritesheet.json を作ります。シートが複数のときは spritesheet_1.png、spritesheet_2.png… になります
• 形式：JSON の形式。「JSON Hash」（フレーム名をキーにしたオブジェクト）か「JSON Array」（配列）。使うエンジンが対応している方を選びます
• JSON メタデータ：JSON を書き出すかどうか
• CSS：Web ページで使える CSS を書き出します。回転またはトリムを使っているときは選べません

書き出す

1. ツールバーの「書き出し…」（⌘E）を押します。
2. 書き出し先のフォルダを選びます。
3. 「書き出しの確認」に、作成するファイルの一覧が表示されます。同じ名前のファイルがある場合は、上書きされるファイルも表示されます。
4. 「書き出す」を押すと書き出します。完了すると、ウインドウ下部の「Finder で表示」（Windows は「エクスプローラーで表示」）から書き出したフォルダを開けます。

元の画像が変更されることはありません。

書き出したファイルを使う

書き出した JSON は、TexturePacker の JSON (Hash) / JSON (Array) と同じ形式です。JSON Hash の例：

{
  "frames": {
    "cloud.png": {
      "frame": { "x": 2, "y": 104, "w": 104, "h": 66 },
      "rotated": true,
      "trimmed": true,
      "spriteSourceSize": { "x": 8, "y": 16, "w": 104, "h": 66 },
      "sourceSize": { "w": 176, "h": 98 }
    }
  },
  "meta": {
    "app": "AtlasKit",
    "version": "1.0.0",
    "image": "spritesheet.png",
    "format": "RGBA8888",
    "size": { "w": 484, "h": 399 },
    "scale": "1"
  }
}

上の数値は説明用の例です。実際の JSON の meta には、AtlasKit の設定を記録した atlaskit も含まれます。

Phaser 3 での読み込み例

// preload
this.load.atlas('items', 'spritesheet.png', 'spritesheet.json');
// create
this.add.image(400, 300, 'items', 'cloud.png');

PixiJS（v8）での読み込み例

import { Assets, Sprite } from 'pixi.js';

const sheet = await Assets.load('spritesheet.json');
const cloud = new Sprite(sheet.textures['cloud.png']);

シートが複数のときは、シートごとに JSON（spritesheet_1.json、spritesheet_2.json…）を書き出します。PixiJS は meta.related_multi_packs を使って、残りのシートも読み込みます。Phaser では、それぞれの JSON を別のアトラスとして読み込んでください。

Split：スプライトシートを分割する

1. ツールバーで「Split」（⌘2）に切り替えます。
2. 「ファイル > シートを開く…」（⌘L）で、分割する画像を開きます。キャンバスへのドラッグ＆ドロップやクリックでも開けます。
3. インスペクタの「グリッド分割」で、分割のしかたを選びます。
   • 列数・行数：横と縦にいくつ並んでいるかを指定します
   • セルサイズ：1 コマの幅と高さを指定します
4. 必要に応じて調整します。
   • 余白 X / 余白 Y：画像の端からコマが始まるまでの余白
   • 間隔 X / 間隔 Y：コマ同士のすき間
   • 空のセルを出力しない：完全に透明なセルを、書き出しから除きます
5. キャンバスの線で分割範囲を確認します。「結果」に、セル数と 1 コマの大きさが表示されます。
6. 「出力」で、ファイル名・開始番号・桁数を決めます。ファイル名が frame、開始番号が 1、桁数が 4 なら、frame_0001.png、frame_0002.png… になります。「JSON メタデータ」をオンにすると、各コマの元の座標を記録した frame.json も書き出します。
7. 「書き出し…」（⌘E）で書き出します。

「フレームとして使用」を押すと、分割したセルをフレーム一覧の末尾に追加します。古いシートを分割して並べ直し、Pack で新しいシートに作り直す、といった使い方ができます。

Preview：アニメーションを確認する

1. ツールバーで「Preview」（⌘3）に切り替えます。フレーム一覧の順番で再生します。
2. 再生・一時停止は、タイムラインのボタンかスペースキーで行います。
3. ← → キーで、1 コマずつ戻したり進めたりできます。タイムラインのフレームをクリックすると、そのコマに移ります。

インスペクタで、次の項目を設定できます。

• 再生：FPS（1〜60）、再生速度（0.25×、0.5×、1×、1.5×、2×、4×）、ループ再生
• 表示：チェッカーボード（オフにすると「背景色」を指定できます）、拡大率

スペースキーでの再生は、Pack モードでも使えます。Pack でフレーム一覧を操作しているときは、← → キーでもコマを移動できます。

プロジェクトを保存する・開く

読み込んだ画像の並びと、すべての設定を、プロジェクトファイル（.atlaskit）として保存できます。

• 保存：「ファイル > プロジェクトを保存」（⌘S）。2 回目以降は同じファイルに上書き保存します。別のファイルに保存するときは「別名でプロジェクトを保存…」（⇧⌘S）
• 開く：「ファイル > プロジェクトを開く…」（⌘O）。Finder（Windows はエクスプローラー）で .atlaskit ファイルをダブルクリックしても開けます
• 新規：「ファイル > 新規プロジェクト」（⌘N）

プロジェクトには画像そのものは含まれず、画像の場所を記録します。画像を移動したり名前を変えたりした場合は、開くときに「… 個のファイルが見つかりません」と表示されます。「ファイルの場所を指定…」で現在のフォルダを選ぶと、同じ名前のファイルを探して関連付けます。「それらを除いて開く」を選ぶと、見つからない画像を除いて開きます。

保存していない変更があるときに、終了する・ウインドウを閉じる・新規作成する・開くといった操作をすると、保存するかどうかを確認します。

なお、Split の「フレームとして使用」で追加したセルは、元のシート上の位置として保存されます。

Windows 版での違い

Windows 版は、キーとメニューの一部が Windows の作法に合わせてあります。機能は Mac 版と同じです。

ショートカット一覧

表示言語を切り替える

メニューの「AtlasKit > 言語 (Language)」（Windows は「表示 > 言語 (Language)」）で、日本語と英語を切り替えられます。初めて起動したときは、Mac の言語設定に合わせます。

困ったときは サポート のよくある質問もご覧ください。