TIC-80 スプライトエディタの使い方

TIC-80のスプライトエディタは、8x8ピクセルのドット絵を作成するためのツールです。レトロゲームの雰囲気を持つグラフィックを簡単に作ることができます。

スプライトエディタを開く

エディタの起動方法:

💡 ヒント: ESC キーでコンソールに戻ることができます。

基本的な描画ツール

ペンツール

左クリックで1ピクセルずつ描画します。最も基本的なツールです。

使い方: マウスをドラッグして線を描く

塗りつぶしツール

同じ色の領域を一度に塗りつぶします。

ショートカット: B キー

選択ツール

矩形選択でコピー・貼り付け・移動ができます。

ショートカット: S キー

消しゴム

右クリックで透明色(色番号0)で描画します。

使い方: 右クリック + ドラッグ

カラーパレット

TIC-80は16色のパレットを使用します。色をクリックして選択します。

デフォルトパレット(SWEETIE-16):

色の選択方法:

便利なショートカット

基本操作

  • Ctrl+Z - 元に戻す
  • Ctrl+Y - やり直し
  • Ctrl+C - コピー
  • Ctrl+V - 貼り付け

スプライト操作

  • H - 水平反転
  • V - 垂直反転
  • R - 90度回転
  • Delete - クリア

ナビゲーション

  • Tab - 次のスプライト
  • Shift+Tab - 前のスプライト
  • PgUp/PgDn - スプライトページ切替

スプライトの管理

スプライトバンクについて

  1. TIC-80では最大512個のスプライト(8x8ピクセル)を保存可能
  2. スプライトは0〜511の番号で管理
  3. 1画面に32×16個のスプライトを表示
  4. 複数のスプライトを組み合わせて大きなキャラクターを作成可能
💡 プロのテクニック: キャラクターのアニメーションは、連続したスプライト番号に配置すると管理しやすくなります。

実践的なワークフロー

キャラクター作成の手順

  1. 下絵を描く: まず大まかな形をペンツールで描きます
  2. 色を塗る: 塗りつぶしツールで基本色を入れます
  3. 陰影を追加: より暗い色で影を、明るい色でハイライトを追加
  4. 細部の調整: 1ピクセル単位で微調整を行います
  5. アニメーション: 次のスプライトにコピーして、少しずつ変化させます

コード内での使用例:

// スプライト0番を座標(100, 50)に表示
spr(0, 100, 50)

// 2x2の大きなスプライト(スプライト1〜4を使用)
spr(1, 50, 50, 0, 1, 0, 0, 2, 2)

// アニメーション(フレームカウンタで切り替え)
let frame = Math.floor(time() / 200) % 4
spr(frame, player.x, player.y)

トラブルシューティング

よくある問題と解決方法