Xprite ヘルプ

ユーザーガイド

保存と復元

ファイル → 名前を付けて保存 には 2 つの保存先があります。

  • ブラウザ:プロジェクトはこの端末のこのブラウザにだけ保存され、同期されません。あとでホームの 最近使ったファイル から開き直せます。
  • ファイルマネージャー:プロジェクトを .aseprite または .png ファイルとして端末に保存します。あとで ファイル → 開く... で開き直せます。ブラウザに保存ダイアログがない場合は、ファイルがダウンロードされます。

名前を付けて保存の保存先オプション。

サイトデータを消去すると、ブラウザ内のプロジェクトと復元用バックアップの両方が削除されます。端末やブラウザを変える前、またはデータを消去する前に、ファイルマネージャー にコピーを保存してください。

「変更はこのブラウザに保存されていません。」と表示されたら、プロジェクトを開いたまま 保存を再試行 を選ぶか、名前を付けて保存 → ファイルマネージャー でファイルとしてコピーを保存してください。

初期設定では、Xprite は 2 分ごとに復元データを保存し、編集したスプライトのデータを 7 日間保持します。どちらも 編集 → 環境設定 → ファイル で変更できます。ブラウザが突然閉じた場合は、ホームで ファイルを復元... を選び、以前のセッション から作業を復元してください。

ブラウザ内のコピーを削除するには、まずプロジェクトを閉じ、最近使ったファイル でそのメニューを開いて ブラウザのコピーを削除 を選びます。ブラウザ内のプロジェクト、キャッシュされた画像、復元用バックアップが削除されます。端末に保存したファイルには影響しません。

ファイルを開く・エクスポートする

ファイル → 開く... で開けるもの:

  • Aseprite プロジェクト(.ase、.aseprite)。レイヤー、フレーム、タグも読み込まれます。
  • PNG や JPEG など、ブラウザがデコードできる形式の画像。
  • アニメーション GIF と WebP。各フレームがフレームとして読み込まれます。

スプライトシートを開くには、ファイル → スプライトシートをインポート を使い、Xprite が各フレームを見つけられるようにフレームの範囲を設定します。

Aseprite プロジェクトは幅・高さとも 32,768 ピクセルまで、フレームは 4,096 まで、レイヤーは 256 まで扱えます。Xprite は Aseprite のすべての機能をまだ実装しておらず、Aseprite のスクリプトや拡張機能も実行できないため、Aseprite とまったく同じようには開けないプロジェクトもあります。

写真や、ドット絵ではない可能性がある画像を開くと、画像をドット絵化 ダイアログが表示されます。

  • 幅と高さ(1〜16,384)と色数(2〜256)を設定し、ドット絵化してインポート を選びます。
  • そのまま読み込むには 元のまま を選びます。

エクスポートのオプションはすべて ファイル → エクスポート にあります。

  • 名前を付けてエクスポート...:1 枚の画像は PNG、JPEG、WebP、アニメーションは GIF、APNG、WebP。
  • スプライトシートをエクスポート:PNG。必要に応じて JSON データ も出力できます。
  • タイルセットをエクスポート:PNG。現在のレイヤーがタイルマップレイヤーのときに使えます。

ブラウザによっては JPEG や WebP をエクスポートできず、「このブラウザではJPEGを利用できません」や「このブラウザではWebPを利用できません」と表示されます。その場合は PNG でエクスポートしてください。

「ファイルを開けませんでした。」と表示されたら、次の順に確認してください。

  • ファイルが Aseprite プロジェクト、またはブラウザが対応している画像形式であること。
  • ファイルが完全で、ダウンロードやコピーの途中で壊れていないこと。
  • Aseprite プロジェクトが上記のサイズ、フレーム数、レイヤー数の上限内であること。

ワークスペースを整える

ドキュメントタブの横にある ワークスペースのレイアウト でパネルを配置します。

ワークスペースのレイアウトボタン。

  • パネルのハンドルやタブをドラッグし、ドロップガイドに合わせると、パネルをドッキングしたり、横に並べたり、タブとしてまとめたりできます。
  • パネルのハンドルやタブのメニューを開くと、フローティングにしたり ボタンに折りたたむ ことができます。

自動 はウィンドウの空きスペースに合わせてレイアウトを選びます。

配置を保存するには 現在のレイアウトを保存… を使います。保存済みレイアウトを選んだ状態で変更するとそのレイアウトが更新されるので、元の配置を残したい場合は先に新しいコピーとして保存してください。

ワークスペースのレイアウト一覧。

コントロールの表示と非表示

メニューバーとツールバーの表示切り替えは 表示 → 表示 にあります。

表示 → 表示メニュー。

メニューバーを非表示にした後は、ドキュメントタブの左にある メニュー から 表示 → 表示 を開き直せます。ツールオプションのツールバーを非表示にした後は、選択中のツールをクリックすると設定が開きます。

収まりきらないツールは、ツールレールに沿ってスワイプすると表示できます。横向きのレールはマウスホイールやトラックパッドでもスクロールできます。

マウス、トラックパッド、ショートカット

初期設定では、マウスホイールでキャンバスをズーム、トラックパッドの 2 本指スライドでスクロール、ピンチでズームします。

端末の判別が正しくない場合は、編集 → 環境設定 → エディタ → ホイールのデバイス で マウスホイール または トラックパッド を選んでください。キャンバスのホイールズームと 2 本指スライドのズーム設定も同じ項目にあります。

ブラウザや OS がすでにそのショートカットを使っている場合は、メニューやショートカットツールバーを使うか、編集 → キーボードショートカット で割り当てを変更してください。

指とペン

初期設定のジェスチャー:

  • 2 本指でドラッグ:キャンバスをスクロールします。
  • 2 本指でピンチ:ズームします。指を離すとズーム倍率にスナップします。
  • 2 本指でタップ:元に戻します。
  • 3 本指でタップ:やり直します。
  • 2 本または 3 本の指を置いたままにする:元に戻す・やり直しを繰り返します。
  • 1 本指で長押し:色を取得します。

ペンを使うまでは指で描画できます。ペンを使った後は、指でスクロールし、ペンで描画します。

指で常に描画する、または常にスクロールするには、編集 → 環境設定 → タッチ → 1本指の操作 でモードを選びます。この項目では、ピンチズーム、元に戻す・やり直しのジェスチャー、色の取得、長押しの時間も設定できます。

タッチの環境設定。

ショートカットツールバー

表示 → 表示 → ショートカットツールバー で表示できます。方向ボタンで選択範囲を 1 ピクセルずつ移動でき、縦横比を固定、中心から描画、ドラッグで複製 は対応するキーボードの修飾キーの代わりになります。

選択範囲を移動する 4 つのボタン。

左から縦横比を固定、ドラッグで複製、中心から描画。

矩形選択、楕円形選択、投げ縄が 置き換え または 交差 モードのとき、選択範囲の外をタップすると選択が解除されます。指がスクロールに設定されていても使えます。ドラッグした場合はキャンバスがスクロールします。

外部の画像を貼り付ける

他のアプリから画像を貼り付けるには、ブラウザのクリップボード権限が必要な場合があります。

貼り付けに失敗する場合は、画像をファイルとして開き、Xprite 内で目的のプロジェクトにコピーしてください。

画面から色を取得する

Alt(Mac では Option)を押しながら描画色または背景色のボタンをクリックすると、エディターの外から色を取得できます。

描画色と背景色のボタン。

画面からの色の取得には、デスクトップ版の Chrome または Edge で、Xprite を HTTPS または localhost で開いている必要があります。ブラウザが対応していない場合は、画像を Xprite で開き、そこから色を取得してください。

デスクトップに追加してオフラインで使う

  • Chrome または Edge:ヘルプ → デスクトップに追加 を選びます。項目がない場合は、ブラウザのメニューの アプリをインストール を使います。
  • Mac の Safari:ファイル → Dock に追加… を選びます。
  • iPhone・iPad の Safari:共有 をタップし、ホーム画面に追加 を選びます。共有 はページメニューの中にある場合があります。

Chrome のアドレスバーにあるインストールボタン。

オフラインで使う前に、オンラインの状態で一度エディターを開いてください。オフラインで開けない場合は、ネットワークに接続してもう一度開いてください。

あつ森のマイデザインをエクスポート

ファイル → エクスポート… で エクスポート形式 → ゲームとクラフト → あつまれ どうぶつの森 を選びます。元画像のマスをクリックすると、その QR コードが選択されます。選択したマスの右端、下端、右下の角にカーソルを合わせてドラッグするとサイズを変更できます。グリッドの原点をドラッグするとグリッドを移動でき、間隔のハンドルは上または左に表示されます。ハンドルはカーソルを合わせると表示されます。タッチスクリーンでは端をタップしてハンドルを表示してからドラッグします。数値は左側で入力することもできます。

スプライトを共有する

ファイル → 共有... を選び、リンクをコピー でリンクを送るか、QRコードを保存 を選びます。相手がリンクを開くかコードを読み取ると、スプライトが表示されます。スプライトはリンクの #share= 以降の部分に圧縮して含まれます。リンクは端末上で作成され、サーバーには何もアップロードされません。

  • リンク全体を知っている人は誰でもスプライトを開けます。リンクに有効期限はなく、取り消すこともできません。
  • 1,800 文字を超えるリンクには、チャットアプリによっては途中で切れることがあるという警告が表示されます。8,192 文字を超えるリンクは作成できません。
  • スプライトが大きすぎる場合は、現在のフレームや表示中のレイヤーだけを共有するか、ファイルをエクスポートして送ってください。
  • リンクが QR コードには長すぎる場合は、リンクのコピーだけが使えます。

描画リプレイ

スプライト → 描画過程 → 録画を開始 で録画を始めます。終わったら 録画を終了 でリプレイを開くか、録画を再開 で追加します。

録画を見るには 描画過程のリプレイ… を開きます。

  • エクスポート… で .xprite-replay ファイルとして保存でき、あとで リプレイを開く… で再生できます。
  • エクスポートボタンのドロップダウンにある キャンバスGIFをエクスポート… でアニメーション GIF を作成できます。

リプレイはブラウザ内のプロジェクトと一緒に保存されますが、PNG や Aseprite ファイルには含まれません。ブラウザや端末を変える前に、.xprite-replay ファイルを別途エクスポートしてください。

ブラウザと端末

ファイルの読み書き、クリップボード、画面からの色の取得は、ブラウザが対応・許可している機能に左右されます。Xprite には最低ブラウザバージョンはありません。代わりに 編集 → 環境設定 → 診断 を開き、ブラウザの互換性チェック を確認してください。チェックマークはその機能に対応していることを示します。

環境設定の診断ページ:ブラウザの互換性チェックに File System Access、OPFS、IndexedDB、Web Workers など 8 項目が並び、すべてにチェックが付いている。

チェックに失敗したときの動作:

  • ⚠️ File System Access・開く:ブラウザ標準のファイル選択が代わりに使われます。
  • ⚠️ File System Access・保存:ファイルマネージャー は代わりにファイルをダウンロードします。
  • ⚠️ OPFS プロジェクトストレージ:ブラウザ内のプロジェクトは代わりに IndexedDB に保存されます。
  • ❌ IndexedDB:最近使ったファイルを保存できません。
  • ❌ Web Workers:リンク共有とロスレス WebP のエクスポートが使えません。
  • ⚠️ CompressionStream:.aseprite ファイルが非圧縮で保存され、サイズが大きくなります。

よく表示されるメッセージ:

  • 「このブラウザでは共有を利用できません。」:ブラウザが Web Workers に対応していません。ファイルをエクスポートして送ってください。
  • 「IndexedDBを利用できないため、このブラウザでは最近使ったファイルを記録できません。」:ブラウザがサイトのストレージを無効化または制限しています。ファイルマネージャー に保存してください。
  • 「別のブラウザタブが最近使ったファイルの保存領域を使用中です。」:Xprite が複数のタブで開かれています。他のタブを閉じてからもう一度お試しください。
  • 「Asepriteのキャンバスがブラウザのリソース上限を超えています」:Aseprite プロジェクトのキャンバスが大きすぎて、ブラウザで処理できません。

キャンバスが大きく、フレームやレイヤーが多いほどメモリを多く使います。スマホやタブレットはパソコンよりメモリが少ないため、大きなプロジェクトは開けなかったり動作が遅くなったりしやすくなります。

よくある質問

Xprite は無料ですか?

はい。Xprite は無料のオープンソースです。エディターのコードは GPL-2.0-only、再利用可能な UI パッケージは MIT ライセンスです。

アカウントは必要ですか?

いいえ。ページを開けばすぐに描き始められます。アカウントはなく、作品がアカウントに同期されることもありません。

作品はサーバーにアップロードされますか?

いいえ。編集、保存、共有はすべてブラウザ内で行われ、Xprite には作品を保存するサーバーがありません。ネットワークに送られるのはページのアクセス解析と送信されたフィードバックだけで、どちらにも作品は含まれません。プライバシーについて と Xprite のしくみ をご覧ください。

Xprite と Aseprite の関係は?

Xprite は Aseprite のインターフェースと操作感に倣っていますが、独立したプロジェクトです。Aseprite や Igara Studio S.A. とは提携しておらず、承認も受けていません。

表示言語を変えるには?

初期設定ではブラウザの言語に合わせて表示されます。変更するには 編集 → 環境設定 → 一般 → 言語 を開きます。

作品が消えてしまいました。どうすればいいですか?

まずホームの 最近使ったファイル を確認してください。見つからない場合は ファイルを復元... を選び、以前のセッション を確認してください。詳しくは 保存と復元 をご覧ください。

問題を報告する

ヘルプ → 不具合・ご要望 か、ホーム右側の フィードバック を選んでください。GitHub Issues で issue を作成することもできます。ブラウザ、端末、問題が起きるまでの手順をお書きください。

診断ログが必要な場合は、編集 → 環境設定 → 診断 からエクスポートしてください。エディターのエラーダイアログにもエクスポートボタンがあります。