PixiEditorの基本的な使い方

グラフィックツール

この記事では、2Dアートにおける最強ツールを目指している (らしい) PixiEditorの基本的な使い方を説明します。

PixiEditorとは

PixiEditorを一言で説明すると、ピクセル アートからベクター、幅広いアニメーション、プロシージャルアートなど、あらゆる種類の 2D アートの作成を可能にするツールです。

Pixieditorを使うメリット

メリット 詳細
1. オープンソース & 無料 ・誰でも無料で利用可能
・開発が公開されているため安心して長期利用できる
・ユーザーコミュニティによる改善や機能追加が期待できる
2. ピクセルアートと
ベクターアートの両立		 ・ドット絵によるゲーム用のスプライトやアイコンの作成
・ベクター描画：拡大縮小などの変形がやりやすく、UI素材の作成に向いている
・1つのツールで両方扱えるのは珍しい強み
3. ノードベースの
シェーダー編集		 ・SKSLやシェーダーノードを使って、エフェクトや模様を直感的に作成可能
・値の変化をリアルタイムでプレビュー可能
・ゲーム開発で使える「素材づくりの実験場」として便利
4. 軽量かつ直感的な操作性 ・起動が速く、動作が軽い
・ペンツール・レイヤー・カラー選択など基本機能はシンプルでわかりやすい
「ちょっと描いてみたい」時にすぐ使える
5. ゲーム開発に直結する機能 ・ドット絵のアイコンやUI、シェーダーテクスチャ制作まで一貫してできる (かもしれない)
6. クロスプラットフォーム対応 ・Windows / macOS / Linux で利用可能
・学生やインディー開発者も環境を選ばず導入できる
7. 学習・研究用途にも最適 ・ソースコードやシェーダーの仕組みを直接確認できる
・ノードやSKSLの学習素材としても使える
・「シェーダーをどう組むと模様ができるのか」を試行錯誤できる

Pixieditorは 「ドット絵ツールの手軽さ」＋「シェーダーによる表現力」 を両立した珍しいソフトです。 そして無料で利用可能、かつ軽量で導入しやすく、個人制作から学習、ゲーム開発のプロトタイピングまで幅広く活躍します。

公式のトップページを見るとわかるのですが、「Procedural Art」「Pixel Art」「Image Editing」「Vector Art」「Animation」が5つの柱となっています。

ただ使ってみて正直なところ、個々の機能としてはまだ発展途上という印象です。例えばレタッチであればPhotoshop、お絵描きであれば CLIP STUDIO PAINT、ピクセルアートであれば Aseprite、ベクターアートであれば Illustrator、などの代替ツールと呼べるほどにはまだ達していません（これらは高すぎる壁ですが…）。 それとプレビューがすぐに反映されない、ショートカットキーが反応しないときがある、など基本的な動作がやや不安定で、日本語UIに非対応 (2025.8.21時点) というのも、ややデメリットです。

ですが「無料」で使え、かつ起動が早い、またノードベースを採用しているという変わった機能を試したい人にとっては使う価値はあるかなと思います。 例えば一枚絵のイラストの仕上げを調整するときにノードベースでレイヤーを合成するといったこともでき、プレビューを見ながら調整できるメリットがあります。

  • ※ macOS版は実行ファイルの配布にお金がかかるため、支援 (4000円ほど) が推奨されています。ただお金を払わなくてもひとまず使うことはできるようです (おそらく)

新規作成とサンプルファイル

PixiEditorを起動すると、以下のような画面が表示されます。

ここから "New" を選ぶと新規作成ですが、"Example Files" を選ぶと PixiEditorで何ができるのかが理解できるサンプルファイルを開くことができます。 ちなみに有償の支援をすると「Browse Workspace」を選ぶことができて、さらなる特殊なサンプルを見ることができます。

3つの描画モード

ツールアイコンの上あたりにマウスを移動させると「Pixel Art」「Painting」「Vector」の3つの描画モードを選ぶことができます。

この3つの描画モードの違いを理解するために、右上のカラーピッカーから赤色を選択。

この状態で円の描画ツールを使ってそれぞれのモードで円を書いてみます。

描画モード 描画結果 特徴 用途 メリット
Pixel Art 色の境界の補完なし。
ピクセルのエッジを
目立たせる		 スプライトや
アイコン、
レトロアート向け		 補完なしで拡大すれば
拡大してもドット絵の
ギザギザ感が表現可能
Painting アンチエイリアスあり。
エッジを目立たなくする		 イラストやUI素材 滑らかさを表現可能
Vector ラスタライズしない限り
ピクセルのエッジは
表現されない		 一般的なロゴや
アイコン、
幾何学模様やUI		 拡大縮小しても
劣化しない。
(編集後のサイズ
調整が容易)

ベクター図形を Paintingモードの描画方式にする方法

ベクター図形は標準では高解像度モード (High Resolution Preview) となっています。 これを Paintingモードにするには、右上にあるスパナアイコンからギザギザになっている円 (Document Resolution Preview) を選択します。

元の高解像度モード (High Resolution Preview) に戻す場合は、左隣りの円をクリックします。

拡大・縮小・変形

画像や図形を拡大・縮小するには、白い四角をドラッグ操作します。

このとき辺の部分の白い四角あたりにマウスを移動させると左右（上下）の矢印が表示され、斜め方向の変形（シアー）が可能です。

自由変形

自由変形は図形に対して直接行うことはできません。 まず "Selects area" (範囲選択) または "Magic wand" (自動選択) または "Lasso" (投げ縄) で対象を選択します。

その後、[CTRL+T] で 変形モード "Transform select area" にします。

すると [ALT]を押しながらドラッグ操作で自由変形できます。

なお自由変形は、範囲選択が使用可能な「Pixel Art」「Painting」モードのみです。(Vectorモードでは利用不可)

回転

回転は角あたりにマウスを移動させると回転アイコンが表示され、その状態でドラッグすると回転できます。

なお回転軸の指定も可能で、中央の点線の丸をドラッグで回転軸を移動できます。

Pixel Perfectで線を引く方法

Pixel Artでの Penツールには "Pixel Perfect" の設定があります。

Pixel PerfectがOFFの場合は、単純にマウスカーソルの軌跡に沿って線が引かれるため、線が太くなったり細くなったりします。

Pixel PerfectをONにすることで、線が1ドット幅に揃えられるので、キレイな線が引けます

左右対称・上下対称

アイコンやUIなどを作りたい場合、左右対称・上下対称機能を使うと便利です。

対称機能を使いたい場合は、カラーパレット近くにあるスパナアイコンをクリックして「左右対称」「上下対称」モードを有効にします。

特定のピクセルを明るくする・暗くする

Pixel Artモードには Brighter / Darkerツールがあります。

これはハイライトや影をつけるときに便利です。 このツールを選んで画面上部から "Strength" で強度を設定。

左ドラッグ・クリックでピクセルを明るくできます。

なお「右ドラッグ・クリック」で暗くできます。

テキストの描画

テキストは「T」ツールを選択して、キャンバスをドラッグするとTextレイヤーを追加できます。

テキストの位置を調整する場合は「矢印」(Select and transform layer) ツールを選ぶと移動できます。

テキストの設定をする方法

テキストのフォントや文字サイズを変更する場合は「T」ツールを選択すると、画面上部に設定が表示されます。

例えば、 (上下に線の引かれた "A") から文字の高さの間隔を調整できたりします。

日本語テキストを入力する方法

2025.8.21時点では、日本語を直接入力することはできません。(macOSのみの確認なので、別のプラットフォームでは可能かもしれません)

そのためテキストエディタで文字を入力してコピー＆ペーストすると日本語が表示できます。

レイヤー

クリッピングマスク

クリッピングマスクとは、下位のレイヤーを元にマスク処理を行うものです。 例えば以下のように文字が下位のレイヤーであるとします。

画像のレイヤーを右クリックして「Clip to member below」を選択。

すると文字で画像をくり抜くことができました。

レイヤーマスク

クリッピングマスクは下位のレイヤーによってマスクする機能ですが、「レイヤーマスク」はそのレイヤー自身をマスクする機能です。例えば以下のように影を付ける場合、

「影レイヤー」の左側で影の色とマスクする領域を指定し、右側で有効な領域を合成します。右側の塗る部分は、はみ出しても左側で指定した領域でマスクされます。

レイヤーマスクの使い方は以下のようにレイヤーを作成します。

次に "Create mask" アイコンをクリック。

レイヤーマスクが作成されるのでこれをクリックして選択。

塗り潰した領域が影として描画されます。

なおレイヤーマスクを削除したい場合、右クリックで「Delete mask」を選ぶと削除できます。

パレットの作成方法

ドット絵を作るときなどに役立つパレットの作成方法です。

パレットの場所

パレットは右上にある "Palette" タブを選びます。

パレットへの色の追加

パレットに追加したい色の指定はこの部分をクリックして色を選びます。

そして「＋」ボタンをクリックすると、パレットの末尾に色が追加されます。

パレットの保存方法

良い感じのパレットが作れたらこのフロッピーディスクアイコンから保存できます。

なお保存先は PixiEditorが管理しているフォルダに入れるのがおすすめです。場所はこのアイコンをクリック。

パレットブラウザにあるフォルダをクリック。

"Palettes" フォルダに入れておくと良いです。

Palettesフォルダに入れておくことで、パレットブラウザからパレットを選ぶことができます。

パレットブラウザからパレットを読み込むには、ここのチェックマークをクリックします。

Asepriteの初期パレットデータ

Asepriteの初期パレットデータを作成しておいたので添付しておきます。

特定の色を置き換える

例えばこういった画像の「黒 (0, 0, 0)」を別の色に置き換えたいとします。

その場合は、"Pallete" タブを選び、置き換えたい色 (ここでは "0, 0, 0") を作成して、「＋」ボタンでパレットに追加します。

作成したパレットを下のところにドラッグ＆ドロップ。矢印の先の色をクリックして置き換えたい色を選びます。

そして "Replace color" アイコンをクリック。

すると黒が緑色に置き換わりました。

ノードグラフエディタの使い方

ノードグラフエディタは PixiEditor上部にあるこのアイコンをクリックします。

例えばレイヤー構造が以下のようになっているとします。

するとこのようなノードグラフとなります。

ノードグラフでアウトラインをつける

ノードグラフには "Outline" というノードが用意されており、それを使うことでアウトラインをつけられます。

任意のところで右クリック（または [Space]キー) して "Outline" を選択。

Textノードの "Raw" から "Background" に接続、そして Outlineノードの "Output" から "Background" に接続します。

"Raw" というのはレイヤー合成前の画像でありここでは "重音テト" というテキストのみとなります。これに対して Outlineでアウトラインを付与して、Output に出力します。 Outlineノードではアウトラインに関するパラメータを設定できます。ここでは "Tickness" (アウトラインの太さ) を 24px としました。

プレビューのところからも確認できますが、エディタ上部のタブからも最終的な出力結果が見れます。ですが、テキストの表示のみとなってしまいました。

これは "重音テト" というテキストのみを Outputノードに送ってしまったためです。 タブを切り替えた場合は "Graph View" タブをクリックしてノードグラフに戻ります。

画像を合成するには "Merge" ノードを使用します。 右クリックまたは[Space]キーを押してノード作成のポップアップを表示し、"merge" で検索して Merge ノードを追加します。

追加されたMergeノードに対して以下の接続を行います。

  1. Textノードを Mergeノードの "Bottom" に接続
  2. Outlineノードを Mergeノードの "Top" に接続
  3. Mergeノードを Outputノードに接続

Bottomは背面、Topは前面です。アウトラインを適用したテキストを前面にしたいのでこのようなマージ設定となります。

シェーダーを使う

基本を超えているような気がしますがシェーダーの使い方です。 ノードグラフから "Shader" ノードを作成します。

Shaderノードのここをクリックするとシェーダーコードが入力できます。

ラスタースクロールするシェーダーを書いてみました。

uniform shader iImage; // Texture
uniform vec2  iResolution; // 解像度 (width, height)
uniform float time;

half4 main(vec2 p) {
    // UVを求める.
    vec2 uv = p / iResolution;

    // ラスタースクロール.
    float u = uv.x + 0.5 * sin(uv.y * time);
    vec2 uv2 = vec2(u, uv.y);

    //uv2 = fract(uv2); // タイリングする場合はclampではなくfractを使います
    uv2 = clamp(uv2, 0.0, 1.0);

    // ピクセル取り出し.
    vec2 pixel = uv2 * iResolution;
    return iImage.eval(pixel);
}

なお、PixiEditorは GLSL の派生である SKSL を採用しています。 画像データを入力として受け取りたい場合は、iImageとiResolutionをuniform として定義する必要があります。

PixiEditor はレンダリングに Google の Skia グラフィックスライブラリを使っているため、SKSL (Skia Shader Language) を採用しています。 またSKSLは GLSLやHLSLと異なり、1つのシェーダーコードでマルチプラットフォームで動かせるメリットがあります

ノード構成は以下のようになりました。

TimeノードのNormalized Timeを MathノードのMultipleで乗算した値を Shaderのtimeに渡しています。 Timeノードを使う場合は、上にある▶ボタンでアニメーションを開始できます。

実行するとラスタースクロールができました。

Founder's Bundleに含まれるもの

PixiEditorを応援したい人は "Founder's Bundle" (2025.8.23時点で4000円ほど) を購入することで開発を支援できます。

特典1: 特別なワークスペース

これを購入すると含まれるものとしては、Browse workspaceから選べる特別なワークスペースがあります。

  • Reusable Animation: 再利用可能なアニメーションテンプレート。別キャラに簡単に差し替えて使える
  • Block Texture: 立方体（6面テクスチャ）を直接編集できるワークスペース。Minecraftのような ボクセル系ゲーム向けブロックテクスチャを効率的に制作可能
  • Texturing: シームレスに繰り返せるタイルテクスチャを作る専用ワークスペース。シームレステクスチャが作れます
  • Card Builder: トランプやカードゲーム用のカードを作成するためのノードセット。カードの 表・裏・ランク・スート を個別に編集可能なのでカードゲームの素材が作れます

特典2: 20以上のオリジナルパレット

もう1つの特典は20以上のオリジナルパレットがついてきます。

これはドット絵を書くときに便利ですね。

なおPixiEditorは本体は無料としつつ、将来的にはこういった拡張 (Extension) を有料販売して収益化を考えているとのことです。