>_ DevTrendsja

言語

ホーム

言語

セクション

フロントエンド バックエンド モバイル DevOps AI / ML ゲーム開発 ブロックチェーン 組み込み セキュリティ
JavaScript

Universal LPC ピクセルキャラクタージェネレーター — 2Dゲームのスプライトシートを数分で作成する方法

ピクセルRPGのスプライトを描くのは、骨の折れる作業です。数十体の異なるキャラクターに歩行サイクル、剣振り、弓撃、死亡アニメーションが必要になると、作業量は膨大になります。すべてのフレームで衣服、髪型、鎧が正しく重なるようにすることも更难しいです。

2012年、OpenGameArtコミュニティはCreative CommonsおよびMozillaと協力して、Liberated Pixel Cup competitionを開始しました。目標は2Dゲーム用の統一されたオープン graphics標準を確立することでした。このコンペティションはUniversal LPC Spritesheet Character Generatorプロジェクトに進化しました。ウェブアプリケーションと相互互換性のあるスプライトのセットで готовыеヒーローを組み立てられます。

ジェネレーターの動作仕組み

ツールはブラウザで直接動作します。基本的なボディモデルを選択し、衣服や鎧を追加し、发型や武器を選びます。アプリケーションはすべてを正しい順序でレイヤー化し、単一のスプライトシート画像を生成します。

生成されたスプライトの例

このアプローチには2つの主な利点があります:

  • 各ディテールは標準的な動きのセット(歩行、剣攻撃、走行、スイング、ダメージ)で事前アニメーションされています。
  • 異なるLPCスタイルの要素はプロポーションとピクセルグリッドが一致しています。

全身板金鎧と戟を持つ衛兵や麻布シャツを着た農民が必要な場合でも、3回のクリックで готовыеピースから組み立てられます。

ライセンスと法的ニュアンス

プロジェクトの資産は異なる作者が作成したため、異なるライセンスの下に置かれています。単一のスプライトシートには、CC0、CC-By、CC-By-SA、OGA-By、GPLライセンスの資産が重複している場合があります。

オープン graphicsの主な課題は、すべての作者をクレジットする必要があることです。別のアーティストからカスタムひげを、別のアーティストから盾を借りた場合、クレジットでそれらを言及する必要があります。

ジェネレーターの作者たちはこれを更容易にしました。最終画像と一緒に、サービスからは使用されたすべてのレイヤーの作者リストを含むテキストファイルまたはCSVが提供されます。

ライセンスエクスポートのスクリーンショット

ゲームにCREDITS.csvを添付するか、 ingameクレジットメニューに名前を表示するだけです。Steam や App Store などの DRM のあるプラットフォームでのリリースを計画している場合、開発者は CC-By-SA 下の資産にもっと注意し、CC0 または OGA-By のバリアントを選択することをお勧めします。

内部構造

プロジェクトのフロントエンドはViteとTypeScriptで構築されています。興味深い詳細として、要素の色変更システムがあります。

以前、头发や鎧の再色はCanvas APIでピクセルバイピクセルカラー置換を通じてCPUで行われていました。大規模なスプライトシートでは、インターフェースでスライダーを切り替えるときに遅延が発生していました。開発者はこの重要なメカニズムをWebGLシェーダーを使用して書き換えました。

Now the palette is passed to the fragment shader as a texture, and recoloring happens on the GPU. Preview generation time dropped from 200 milliseconds to 90. If the browser or graphics card doesn't support WebGL, the application automatically falls back to the old CPU render.

ブラウザコンソールから直接レンダリングモードを制御できます:

// Проверить текущий режим
getPaletteRecolorConfig();

// Принудительно включить CPU для отладки
setPaletteRecolorMode("cpu");

// Вернуть WebGL
setPaletteRecolorMode("webgl");

パフォーマンス追跡のために、プロファイラーがコードに組み込まれています。ローカル開発モードでは、Canvas上のFPS、メモリ使用量、レイヤー描画時間を測定します。

ローカルセットアップとエンジン統合

ジェネレーターをローカルにデプロイ하거나独自のスプライトを追加したい場合は、プロジェクトはローカルで 쉽게実行できます:

git clone https://github.com/LiberatedPixelCup/Universal-LPC-Spritesheet-Character-Generator.git
cd Universal-LPC-Spritesheet-Character-Generator
npm install
npm run dev

その後、アプリケーションは http://localhost:5173 で利用可能です。

一般的なGodotエンジン向けに、LPCスプライトシートをインポートしてアニメーショントラックに自動的にスライスできる готовые плагины が作成されています(バージョン3.5および4.2向け)。コミュニティはまた、RPG Maker MZ用のスタータープラグインパックを組み立てています。

誰がこのプロジェクト役立つを見つけるか

Universal LPC Spritesheet Generatorは、インディー開発者とゲームジャム参加者に命を救うものです。2Dアーティストの予算がない場合、このツールはプロトタイプや完全なレトロRPGのキャラクターニーズをカバーします。

这里的 graphicsは специфиックで、90年代の16ビットゲームの独自の認識可能なスタイルを持っています。しかし、このスタイルがゲームに合えば、何百もの時間のスプライト作業を節約できます。

関連プロジェクト