PIXEL TILE & MAP EDITOR

タイルを描いて、
すぐ置いてみよう。

Chipicoは、タイルチップ作成とタイルマップ編集をひとつにつないだ無料のブラウザツールです。インストールは不要。ピクセルアートで描いたタイルを、すぐマップで試せます。

ブラウザで動作・無料・開発中

Chipicoでタイルを編集している画面

FEATURE OVERVIEW

Chipicoでできること

タイルを描くための機能と、マップで試すための機能をひとつにまとめています。

  1. 01

    ピクセルを描く

    鉛筆・消しゴム・塗りつぶし・アウトラインを使ってタイルを描画。保存したパレットも使えます。

  2. 02

    タイルを構成する

    アニメーションやグループを登録し、タイルセット内の構成を整理できます。

  3. 03

    マップで確認する

    マップ編集でタイルを配置し、ゲーム内での見え方に近い状態を確かめられます。

ADVERTISEMENT

ここは将来の広告・おしらせスペースです。

WORKSPACES

2つの作業画面

描画用のタイル編集と、配置確認用のマップ編集を切り替えて使います。

Chipicoの新規プロジェクト設定画面
01 / PROJECT SETTINGS

プロジェクトの
基本設定

新規作成時に言語とタイル1マスのピクセル数を選択します。作品ごとの作業データは .chip として保存します。

02 / TILE EDITOR

タイルを描くための
編集画面

レイヤーを使った描画、パレット管理、選択範囲のコピー・切り取り・貼り付け、色置換などの編集機能を備えています。

Chipicoのタイル編集画面
Chipicoのマップ編集画面
03 / MAP EDITOR

タイルを並べて
見た目を確認

作成中のタイルセットをパレットとして使い、マップ上へ配置できます。描画内容の確認と修正をスムーズに行えます。

EXPORT FOR GODOT

Godotへ持っていこう。

PNGタイルセットとGodot用のタイル情報を書き出せます。ゲームのなかで、Chipicoで作ったタイルを使うための最短コースです。

  1. メニューからGodot用に書き出す
  2. PNGと .tres を同じフォルダへ保存する
  3. Godotのプロジェクトへ入れて使う

アニメのコマ時間も書き出されます。Godot側でさらに調整することもできます。

Godotで読み込む手順を見る →
EXPORTPNG
+ .tres

FEATURE REFERENCE

機能リファレンス

Chipicoで扱える主な機能と、データの扱いをまとめています。

1

タイル編集モード

タイルセットのピクセルを描くためのメイン画面です。タイルごとの絵を、レイヤーを使って編集します。

パレット

描画色・背景色の選択、色の入れ替え、スウォッチの追加・削除、16色〜64色のプリセットに対応します。画像から色を抽出してパレットを作ることや、現在のパレットをAsepriteなどで開けるGPL形式で保存することもできます。

ナビゲーター

キャンバス全体を縮小表示し、いま見ている範囲を確認するためのパネルです。ナビゲーター上の表示範囲を操作して、編集したい場所へ移動できます。ズーム操作と組み合わせて、細部の描画と全体確認を切り替えます。

レイヤー

タイル編集用のレイヤーは、追加・複製・結合・削除・内容のクリアに対応します。レイヤーごとに表示を切り替えられるため、下絵・地面・装飾などを分けて管理できます。結合は選択中のレイヤーを直下の表示中レイヤーへまとめます。

描画ツール

選択
矩形選択、投げ輪選択、自動選択。選択範囲はコピー、切り取り、貼り付け、移動、変形の対象になります。
ペン/消しゴム
ピクセルを描く・消す基本ツール。どちらもブラシサイズを選べます。
アウトライン
不透明ピクセルの輪郭に線を追加します。内側・外側、方向、タイル境界の連結を設定できます。
ディザブラシ
粒状のパターンで描画します。ブラシサイズと密度を設定できます。
スポイト
キャンバス上の色を取得して描画色にします。
移動/パン
選択範囲を移動する操作と、キャンバス表示を動かす操作を切り替えます。
塗りつぶし/同色置換
つながった領域を塗りつぶす、またはクリックした色を描画色へ一括置換します。
直線/曲線
直線または曲線を描画します。
図形
矩形・円・投げ縄・多角形を、輪郭または塗りつぶしで描画します。
2

マップ編集モード

タイルセットを使って、マップ上にタイルを配置する画面です。タイル編集で変更した内容は、このモードの配置用パレットへすぐ反映されます。

ナビゲーター(スタンプパレット)

マップ編集モードでは、右側のナビゲーター領域が配置用のスタンプパレットとして働きます。タイルセット内のマスを選んで、マップへ置くタイルを決めます。マップ全体を確認するためのナビゲーション操作も行えます。

レイヤー

マップ用レイヤーは最大5枚です。追加・複製・結合・削除・レイヤー全体のクリアに対応し、表示の切り替えもできます。地面、壁、装飾、前景などを分けて重ねるための仕様です。結合は選択中レイヤーを直下の表示中レイヤーへまとめます。

3

タイル構成モード

タイルセットのなかにあるアニメーションとグループを登録・整理するための設定画面です。絵を描く画面ではなく、作成済みのタイルをどのように扱うかを定義するモードです。

目的

アニメーションは複数のマスをコマとして登録し、タイルが動く順番を定義します。グループはChipico内で複数のタイルをまとめて扱いやすくするための整理機能です。

操作

アニメまたはグループを新規作成し、一覧から選択して編集します。名称変更、複製、削除ができ、アニメではコマの追加・並べ替え・個別削除とプレビュー確認ができます。

アニメ画像として保存

選択中のアニメーションは、設定したコマ時間とループでアニメ画像として保存できます。形式は WebP(推奨)、GIF、APNGから選択でき、書き出し倍率も設定できます。短い動きの確認用素材や紹介用画像を作るための機能です。

グループはChipico内でタイルを整理するための機能です。Godot用の出力データには反映されません。

FAQ

Chipicoについて

タイルチップ作成ツールを探している人から、よく聞かれる内容です。

Chipicoは無料で使えますか?

はい。Chipicoはブラウザで使える無料のタイルチップ作成・タイルマップ編集ツールです。

インストールは必要ですか?

不要です。対応ブラウザでChipicoのページを開けば、そのまま作業を始められます。

Godot用のタイルセットを作れますか?

できます。PNGタイルセットとGodot用の .tres ファイルを書き出せます。PNGと .tres は同じフォルダに保存して使用してください。

アニメーションタイルは作れますか?

タイル構成モードでアニメーションを設定し、プレビューで確認できます。選択したアニメはWebP、GIF、APNGのアニメ画像として保存することもできます。

グループはGodotの出力に使えますか?

グループはChipico内でタイルを整理するための機能です。Godot用の出力データには反映されません。

READY?

最初のタイルを
描いてみよう。

Chipicoを開く ↗