feature image

2026年9月22日 | ブログ記事

PixelComposerを使ってみよう！

夏のブログリレー ドット絵
Mimi_year icon Mimi_year
tobuhitodesu icon tobuhitodesu

この記事は夏のブログリレー36日目の記事です。

目次

PixelComposerについて

前半部分は「PixelComposerとはそもそも何か？」「どんなことができるのか？」「始めてみたいけど何すればいいのかようわからん」という人に向けた内容です！
執筆はMimiが担当します。よろしくお願いします。
(ちなみに以前にもPixelComposerブログを出しているので、是非こちらもご覧ください)

公式の説明

Pixel Composer is a node based VFX compositor for pixel art. Using nodes to pass data and apply different effects. It also support keyframe-based animation with timeline.

PixelComposerはピクセルアートのためのノードベースのVFXコンポジター
と公式ドキュメントで言っています。

blenderのGeometryノードやUnityのShaderGraphを触ったことがある人ならわかると思いますが、

処理を連鎖的に組み合わせて複雑な処理を実現する が根本的なアイディアです。

例えば

例えば上の画像は

  1. 円を一つ用意して大きくする
  2. 更に内側にもう一つ円を用意し、1の円より少しタイミングを遅らせて大きくする
  3. 1の円を2の円で削る
  4. ↑でできた画像を複製する(配列として持つ)
  5. 回転や位置、色がランダムになるようにする(インデックスごとにバラバラな値を持つ)
  6. 一つ一つにアウトラインをつける
  7. 複製したものを少しづつタイミングをずらしながら一気に生成する

という風に、処理が連鎖されてできています！

今回はそんなPixelComposerについて

  1. 基本的なこと
  2. PixelComposerにおけるボーンアニメーション

をまとめた記事となっています！

サクッと作れる表現

爆発・衝撃波

explode-1
--------2026-09-22-003303
衝撃波も兼ねた簡単な爆発表現なら
①円を膨らませる
②その内側に少し遅れて円を膨らませる
で作ることが出来ます。前後にパーティクルを置いてあげるとちょっと見栄えが良くなるかも

水・液体表現

waterball
--------2026-09-20-072645
Displacementノードという歪み処理ができるノードを使った屈折表現や、Blur+Thresholdで液体っぽい表現を作ることが出来ます。

炎の模様表現

fire
--------2026-09-20-073333
ノイズをつかってゆらゆら揺れる表現を作ることが出来ます。それを上にスクロールさせることで炎が上がっていくような表現が作れます。

3D的な表現

moutain
--------2026-09-22-003507
なんとPixelComposer内で3Dモデルを読み込んだり生成し、カメラで写したものを画像として扱ったりできます。スゴイ！

このように、色んなノードを組み合わせる事で簡単に色々な表現ができるのがPixelComposer(というかコンポジットツール全般)の強みです。

PixelComposerを始めるにあたって

PixelComposer興味あるよ！という方に向けて、いくつかのノード群の特徴をまとめます！

Generate(生成)

万物の祖です！
Generateという名前の通り、生成ができます。
何が生成できるのかというと

など、万物を生成できます。
(一応Luaでスクリプトも書けるんですが、)数式的な処理が面倒なぶんこういった素材が充実してるのがアツい所です。

Transform(変形)

モーショングラフィックスっぽいことやるならコイツです。
Transformというノード群があるのになぜかTransformという単一のノードがあります。しかもこのノードは結構他のノードの機能を包含してる。

僕はこんな感じでいっぱいキーフレーム打って使うことが多いです。

パラメータについて
PixelComposerにはノードのパラメータについて色々機能があります！

アニメーション
アニメーション機能があり、キーフレームを打って値の制御が出来たりします！

使い方は、パラメータの右側にある電源ボタンみたいなマークを押して、値を変えたいフレームで値を変えるだけ！
キーフレームの値から補完してくれます。イージングもある。

パラメータの公開
ちなみに電源ボタンみたいなものの右側にあるアイコンをクリックすると、そのパラメータをノードの入力として公開できます。嬉しい。

Filter(加工)

画像全体への加工を扱えるノード群です。

など、本当に色々あります(本当に色々ある。)

個人的超便利Filterノードは

です。特にColorizeはいつも使ってる。

大体この3種類のノードを使い、
Generateで生成→Transform・パラメータのアニメーションで動かす→Filterで加工
の一連の流れでそれっぽいものは出来上がって、嬉しい気持ちになります。

他にも、3D系のノードやシミュレーション系のノードなど様々なノードがあるので、手を動かしてみると良いかもしれません！

前半のまとめ

PixelComposerで作れる「ボーンアニメーション」紹介のコーナー

執筆担当代わりましてここからは飛ぶ人がお送りします！
私の担当分では、PixelComposer（以下、見出しとか以外ではルコンポと略します）の活用方法の一つとして「ボーンアニメーション」を作成する手法とかを解説します。
レイヤー分けされた1枚のイラストから

こんなのとか

こんなのが作れます！
画像の各レイヤーのパーツを回転させたり位置を変えたりするアニメーションを、パーツごとにボーンに対応させてそのボーンを動かすことでアニメーションが作れちゃいます！

しかも、上の二つのアニメーションに使用している特殊なノードは3つだけなので以外と使うハードルは低いかも！？

そんなルコンポでのボーンアニメーションの世界に、そろりそろりと参ります！

PixelComposerでの「ボーンアニメーション」

ボーンアニメーション（スケルタルアニメーション） とはざっくり言うと「骨格と関節となるボーンとジョイントを動かして作ったアニメーションに、表面の見た目を適用して動きを作るアニメーション」です！
　ルコンポでもそんなボーンアニメーションを行うためのノードシリーズである「Armature」シリーズがあります

たくさんある

ノードごとに役割は決まっており、「ボーンを作成する」「ボーンに動きをつける」「ボーンに画像を設定する」「ボーン情報を統合する」「ボーンに様々な情報を付加する」など様々なノードが存在します
全部紹介しているとブログがもう一本書けてしまうので、今回のこのコーナーでは

の3つのノードにフォーカスして最小限の構成でのボーンアニメーション作成について解説を行います

この3つのノードで作れちゃうんです

出力はボーンデータではなくあくまでスプライトシートやGifで、複雑なボーンアニメーションやメッシュ変形による3Dライクな表現は苦手ですが、かなり簡単に最低限のアニメーションを作成することができます！

ルコンポのここが強い！ここが弱い！

ボーンアニメーションとなると、Unityで直接作ったりSpineなど他のソフトによる制作したりする方が様々な利点があるように思えます。
実際、ゲーム内で動的にボーンを管理できたり、作ったアニメーション情報をjsonファイルでUnity等のゲームエンジンに直接インポートできたりと、UnityとかSpineの方が正直優秀な部分が多いです…

まぁあくまで「ルコンポでついでにこういうこともできるんだな」程度で考えると良いかもしれません

ルコンポのボーンアニメーションのここが強い！

ルコンポのボーンアニメーションのここが弱い！

アニメーションの作り方

さて、使用するノードの紹介とやり方解説のコーナーです
このソフト、Ctrl+Zが不自然な戻り方をするうえにCtrl+Yを押しても元に戻らないです！まるで現実なので気をつけてください！ リアリティ溢れるソフトですね
あんまり日本語で解説してる記事がないのと独学なので、とんちんかんな方法でやってるかもですが許してください
まぁ我流ってかっこいいしな、漢我流もかっこいいしな

やり方はこんな感じ↓の流れです、一個一個解説していきます

やり方の手順

  1. 動かしたいイラストを用意
  2. ルコンポにイラストをインポート
  3. ボーンの骨格作成
  4. 各ノード接続
  5. ボーンにイラストの各パーツを割り当て
  6. 動きを作成
  7. エクスポートして完成！

0.動かしたいイラストを用意

レイヤー分けを意識して描きましょう
ポイントとしては「関節」「骨格」を意識してレイヤー分けを行うと良いです
例えば人間の腕を動かしたい場合、「肩」「肘」「手首」が関節（ジョイント）に対応して「二の腕」「前腕」「手のひら」が骨格（ボーン）に対応します
その骨格（ボーン）を動かしたときに回転する関節（ジョイント）を一個のまとめたレイヤーにすると画像の適用がやりやすいです
例えば「肩+二の腕」「肘+前腕」「手首+手のひら」など

↑のイラストでは「足の根元の関節」と「足の上側」を一個のレイヤーにしてます

イラスト部分は気合で作ってください、熱血🔥

1.ルコンポにイラストをインポート

ルコンポにインポートするには、ノードを用いてイラストをインポートします

1-1.Aseperiteファイルをインポートする場合

操作するノード：ASE File In

  1. 上のバーの「Graph→Add Node」もしくはShift+Aでノード追加ウィンドウを出す
  2. 「ASE File In」を検索
  3. インポートしたいAsepriteファイルを選ぶ
  4. インポートしたらノードをクリックして画面右のインスペクター上で「layers」の欄の右端の「Generate layers」をクリック


    ↑の右端
    この時「Use Cell Dimension」は必ずFalseにすること！ これをしないと出力されたレイヤーがそのレイヤーの描画範囲にCropされるので、ボーンに適用するときに大変です、すごく
  5. 全てのレイヤーが別々のノードとして出力される
  6. 必要な場合はレイヤー名をパーツごとにわかりやすい名前にする

俺Boneのスペルずっと間違ってて面白いw

1-2.pngファイルをインポートする場合

Asepriteファイルを扱えるソフトを持っていないor宗教上の理由でpngしか扱えない人向けです

操作するノード：Image

  1. 上のバーの「Graph→Add Node」もしくはShift+Aでノード追加ウィンドウを出す
  2. 「Image」を検索
  3. インポートしたいpngファイルを選ぶ
  4. 気合のインポート作業、気合ンポート作業をする
  5. 全てのレイヤーが別々のノードとして出力される
  6. 必要な場合はレイヤー名をパーツごとにわかりやすい名前にする

pngでやる人向けの注意として、この後の作業の時に便利なので以下のことをやっておくといいです

また、統合した1枚絵からCropしてパーツ分けするのは、ボーンへの適用の際に位置がめちゃめちゃになって不便なのでオススメしません （1敗）

2. ボーンの骨格作成

ボーンの作成です、初見だと分からない要素多めなので丁寧丁寧丁寧に描くと決めていたよ

2-1.ノードを出す

操作するノード：Armature Create

  1. 上のバーの「Graph→Add Node」もしくはShift+Aでノード追加ウィンドウを出す
  2. 「Armature Create」を検索

クリックして画面に出たらオッケーです

2-2.ボーンを作成する

操作するノード：Armature Create

  1. プレビューに表示するため、AsepriteならASE File Inの、pngならレイヤー統合されたノードをダブルクリック
    これをやることでプレビューにレイヤー統合されたイラストを表示でき、ボーンを置く基準にできます（これをやらないと何もない画面にボーンを置くことになる）
  2. Armature Createをクリック
    ダブルクリックするとプレビューが消えるので注意！
  3. プレビュー画面を見て、Add Boneのうち「Add Control Bone」をクリックしてControl Boneを重心の位置に追加

    通常のBoneは骨格と関節なのですが、Control Boneはイメージで言うと「重心」の要素でControl Boneを親にもつ子ボーンはその重心の動きに合わせて制御できます（超重要）
    これの何が嬉しいかは実際のアニメーション制作でわかります！
    ジャンプだったり体が傾く動きだったり歩きのように微妙な重心の変化が起こるアニメーションでは、Control Boneを設定しないと自然な動きにするためにいちいち重心の移動に合わせてボーン一つ一つの位置を調整しないといけません
    しかし、Control BoneがあるとControl Boneの位置を重心の動きに合わせて上下させると、それに子ボーンが追従してくれます！
    親子関係にあるボーンは、デフォルトだと親のボーンが動くと子のボーンも追従して動きます！この動くか動かないかの追従関係は一応Armature Bindで変えられますが、親子関係自体の変更は後からできない（たぶん）ので注意！


    これのおかげで角度や位置の微調整だけでアニメーションが作れるようになります！
    このControl Boneから色んなボーンを生やすので中心（人物キャラクターなら腰くらい？）の位置に置いておくと良いです
  4. Add BoneでControl Boneからドラックしてボーンを追加

    こんな感じControl Boneから生やしてください
    ボーンの位置や大きさは後からいじれます
  5. Control Boneの開始点と関節の位置が一致していない場合、Detach Boneでボーンの開始点側の関節の位置をControl Boneから離す

    こいつをクリックして選んで

    離したいボーンの根元からドラックすると分離できます！
    これの何が嬉しいかというと、余計なボーンを追加せずに、最小限の数でボーンのジョイントの位置設定ができるので後々アニメーションさせるときに管理するボーンの数が減ります！
  6. Move Selectionでボーンの終点側の関節の位置を調整

    これでジョイントの位置を調整します
  7. Add Boneで追加のボーンをどんどん追加してDetach BoneやMove Selectionでジョイントの位置調整！


    これでボーンが配置できました！ジョイントの位置がイラストの関節or動かしたいものの終点の位置になるように調整するとアニメーションが作りやすいです（重要）
    また、ボーンのコピペ機能は無いのですが、Mirror Bonesでボーンを複製した後に複製したやつをもう一回複製するとミラーのミラーなので実質的なコピペができます（超裏技）


    ↑のミラーしたボーンを更にミラーしてもう片方の足のボーンを作っています
    上にはみ出た一回目のミラーは削除しましょう
  8. Boneの名前の変更をしておく
    インスペクター上で変えられるので変えて起きましょう、後で地獄を見ますよ（暗黒微笑）

3. 各ノード接続

操作するノード：ASE File Inから出力したASE layer（もしくはImage）、Armature Create、Armature Pose、Armature Bind、Export

  1. 上のバーの「Graph→Add Node」もしくはShift+Aでノード追加ウィンドウを出す
  2. 「Armature Pose、Armature Bind、Export」を検索



    ExportはクリックするとExportのウィンドウがいきなり出ますがキャンセルをクリックするとノードが追加されます
  3. 各ノードを以下の様に繋ぎ合わせる

    Armature Create→Armature Pose

    Armature Pose→Armature Bind

    ASE layer（もしくはImage）→Armature Bind
    レイヤーが下側の物から接続すること！ Armature Bindのインスペクター上でレイヤーが追加されて行っている部分がいわゆる「レイヤーの上下関係」を表しており、後に追加されたものは最終出力でレイヤーの上側に配置されてしまいます！

    後から変更することもできますが、「ボーンへの適用後にここをいじるとボーンの適用関係まで変わります！なんでやねん！」地獄を見ないようここでレイヤーの上下関係は整えておきましょう（1敗）

    Armature Bind→Export（ここだけ全部終わった後につなげてるので既に完成してますが気にしないでください）

4. ボーンにイラストの各パーツを割り当て

操作するノード：Armature Bind

  1. Armature Bindのインスペクターをクリックして開く
  2. インスペクターのレイヤー欄から、適用したいボーンにレイヤーをドラック＆ドロップ


    上記のように適用すると画像の位置がずれて表示されますが、これはボーンの中心位置に合わせて適用されるためです
    これは後で直せるので一旦全てのレイヤーを適用しましょう
  3. ずれたレイヤーをプレビュー上で直す


    ドラックして直せます
    元のイラストと同じ縦横サイズであれば枠に合わせるだけでオッケーです
    ここで最初のASE File InでレイヤーごとにUse Cell DimensionをTrueにしていたりpngでレイヤーをCropで切り出すと位置調整が大変なんですね（1敗）

    一回位置調整したやつを再度選択しないように矢印マークをクリックするとそのレイヤーの位置調整がオフになるので、有効活用しながら全てのレイヤーを位置調整しましょう

    できたー！

ここまでができれば、同じボーンで別のアニメーションを作る際は接続したノードやプロジェクト自体をコピペして5.動きを作成からやればいけます！嬉しい～～～～

5. 動きを作成

ついに動きを作成します！結構泥臭い作業なので耐えましょう
また、ここからはArmature Bindをダブルクリックしてプレビューに表示させましょう

操作するノード：Armature Pose

  1. 時間に合わせてアニメーションさせたいボーンの「Toggle Animation」をクリックしてオンにする

    オンでない場合、Armature Poseでは時間に関係ない変化として全てのフレームに適用されます
  2. 画面下側のタイムラインのうち変化の最終地点にしたいフレームを選ぶ


    15フレームを選びました
  3. そのフレームを選択した状態でインスペクター上の数値を変えるorArmature Poseのプレビュー上でボーン直接動かす

    上記の画像では「gun」ボーンが1フレームのx=0,y=0,rot=0,sx=1（大きさ）から15フレームのx=0,y=0,rot=30,sx=1（大きさ）まで変更されています
    これにより左下の再生ボタンを押すかスペースキーを押して再生すると2~14フレームではrotの値が0から30が滑らかに変わるように適用されます
    この時タイムラインに追加される四角のマークをキーフレームといいます
    ドラックで位置調整などができたり、キーフレームをダブルクリックしながら左右にドラックすると滑らかに変化する数値の度合いをタイムライン上で変更できたり、タイムライン左側のボーンの部分の波みたいなマークをクリックして変化の仕方を変えられたりします
    アニメーション再生する速度やフレームの長さを変更したい場合はタイムライン右下の歯車マークから変えられます
  4. この作業を繰り返し、アニメーションを作成する

    後は気合です
    上記の画像は先に添付したこのアニメーションのキーフレームです

    あるボーンの動きを別のボーンにコピペしたいときは、1行（1種類のボーンのタイムライン上のキーフレーム）を選択して別のボーンのコピペしたいフレーム列、コピペしたいボーン行の部分をクリックしてCtrl+Vしてください
    しっかり選ばないと、コピー元のボーンにキーフレームが張り付けられてしまいます
    また、複数行を選択してコピペはできないので注意してください

6. エクスポートして完成！

Expotノードのインスペクターからファイルの保存先、ファイル名、アニメーションのファイルFormat（TypeからAnimationにしましょう）、ファイル形式、主力サイズなどの設定をします
その後インスペクター右上の「再生ボタンみたいな緑色の三角」を押してエクスポートです

初見でわかるか～w

いかがだったでしょうか。
どうしてもルコンポでボーンアニメーションを作りたいという情熱をお持ちの人はどんどん開拓していってください！（他人任せ）

おわりに

読んでくださりありがとうございました！かなりボリューミーな記事になってしまいましたが、ここまで読んでくれたあなたなら大丈夫。PixelComposerと共に日々を歩んでいきましょう。

Pixel Composer on Steam
A Node-based pixel art generator, editor, and VFX compositor. Create beautiful and complex effects in a non-destructive manner. Pixel Composer comes with a powerful graph system that supports multiple image manipulation, feedback effects, loop, physics, and fluid simulation.
STEAM

次のブログリレーの記事の担当者は@2251799813685248です。

Mimi_year icon
この記事を書いた人
Mimi_year

25B。ゲーム班。甘いものが好き。

tobuhitodesu icon
この記事を書いた人
tobuhitodesu

23Bの熱野頂点です。ドット絵とか描きます。飛びます。

この記事をシェア

このエントリーをはてなブックマークに追加
共有

関連する記事

2025年9月15日
traPでの一年半を振り返る〜全班所属の体験記(?)〜
gurukun41 icon gurukun41
2024年9月17日
1か月でゲームを作った #BlueLINE
Komichi icon Komichi
2025年9月18日
泥タブに夢と希望を見出した男の物語 【Lenovo Yoga Tab Plus】
mutv625 icon mutv625
2025年4月6日
グラフィック班の活動紹介 2025
madara16877 icon madara16877
2024年8月21日
【最新版 / 入門】JUCEを使ってVSTプラグインを作ろう！！！！【WebView UI】
kashiwade icon kashiwade
2023年3月20日
traPグラフィック班の活動紹介(Ver.2023)
NABE icon NABE 他
記事一覧 タグ一覧 Google アナリティクスについて 特定商取引法に基づく表記