本日、Web開発者向けの資産管理・最適化ツールであるAssetPack 1.0 を発表できることを大変嬉しく思います。
Web開発の世界では、アセットの管理と最適化には、しばしば多大な手作業が必要です。開発者は、画像が圧縮され、音声ファイルが最適化され、フォントが効率的にロードされるようにする必要があります。特に、多くのアセットを持つ大規模なプロジェクトに取り組む場合、このプロセスは時間がかかり、エラーが発生しやすい可能性があります。この課題に対処するため、AssetPack は、これらのタスクの多くを自動化する構成可能なアセットパイプラインを提供し、開発者がプロジェクト内のアセットをより簡単に管理およびデプロイできるようにします。
AssetPackとは？
AssetPackは、Webプロジェクトにおけるアセットの管理、最適化、デプロイを効率化するために設計されたツールです。フレームワークに依存せず、PixiJS、Three.js、Phaserなど、あらゆるフレームワークで使用できます。AssetPackはプラグインベースのシステムを採用しており、必要に応じてアセット処理をカスタマイズするための独自のプラグインを作成できます。
AssetPackには、次のプラグインが付属しています。
- キャッシュバスティング：クライアントが常に最新版のアセットをロードするように、アセットURLに一意のハッシュを自動的に付加します。
- 圧縮：sharpを使用して画像を圧縮し、webp/avif画像の作成とpng/jpgの圧縮によるファイルサイズの縮小を可能にします。
- TexturePacker：画像からスプライトシートを自動的に生成します。
- ミップマップ：テクスチャのレンダリングパフォーマンスを向上させるために、ミップマップ（例：2倍、1倍、0.5倍など）を生成します。
- Spine：
.atlasファイルのミップマップを作成して、Spineアニメーションを最適化します。 - オーディオ/FFmpeg：FFmpegを使用して、オーディオファイルを目的の形式とビットレートに変換します。
- JSON：JSONファイルを縮小してサイズを削減します。
- Webfont：すべてのフォントファイルをWOFF2形式に変換し、SDFおよびMSDFフォント生成用のプラグインも提供します。
- マニフェスト：読み込みを容易にするために、すべてのアセットURLを含むマニフェストファイルを生成します。これはPixiJSの
Assetsローダーで使用できます。
上記のプラグインは、AssetPackが実行できることのほんの一例です。独自のプラグインを作成して、AssetPackの機能をさらに拡張できます。
AssetPackの主な機能
キャッシュとCI
AssetPackはアセットをインテリジェントにキャッシュし、各アセットを一度だけ変換します。これにより、冗長な処理が削減され、ビルド時間が短縮され、不要なオーバーヘッドなしで常に最新版のアセットを使用できます。
これは継続的インテグレーション（CI）環境に最適です。AssetPackを使用すると、未加工のアセットをリポジトリにコミットし、ビルドプロセスの一部として変換できます。これにより、最小限の手動操作で、アセットが常に最適化され、最新の状態に保たれます。詳細については、こちらのGithub Actionの例を参照してください。
パフォーマンス
AssetPackは、大量のアセットを処理するように設計されており、利用可能な最も高速なツールを使用しています。これにより、アセットパイプラインが最新のWeb開発の要求に対応し、最適化されたアセットを迅速かつ効率的に配信できます。
ウォッチモード
ウォッチモードでは、AssetPackはアセットをリアルタイムで監視し、ファイルの追加または削除に応じて更新します。このライブ更新機能により、開発が効率化され、アセット処理を手動でトリガーすることなく、変更をすぐに確認できます。キャッシングシステムと組み合わせることで、ウォッチモードでは必要なアセットのみが変換され、ビルド時間が最小限に抑えられます。
タグシステム
AssetPackのタグ駆動システムにより、アセット管理が直感的かつ柔軟になります。フォルダまたはファイルにタグ（例：スプライトシートを作成する場合は{tps}）を追加するだけで、特定の処理ルールを簡単に適用できます。この機能により、複雑なアセットワークフローが簡略化され、カスタマイズが向上します。
AssetPackの使用方法
インストール
AssetPackをインストールするには、@assetpack/coreパッケージをインストールする必要があります。
npm install --save-dev @assetpack/core
AssetPackには、Node.jsバージョン20以降が必要です。パッケージマネージャーが警告する場合は、アップグレードしてください。
設定
AssetPackを設定するには、最適化するアセットと最適化方法を定義する設定ファイルを作成する必要があります。
まず、プロジェクトのルートに.assetpack.jsファイルを作成します。このファイルは、次のプロパティを持つオブジェクトをエクスポートする必要があります。
// .assetpack.js
import { pixiPipes } from '@assetpack/core';
export default {
entry: './raw-assets',
output: './public/assets',
pipes: [
/* If you are using AssetPack with PixiJS, you can use the `pixiPipes` function
* to add a pre-configured set of plugins, with an opinionated
* set of defaults for PixiJS.
*/
...pixiPipes()
],
};
設定オプションの完全なリストについては、APIリファレンスページを参照してください。
次に、AssetPackを実行するには、CLIを使用するか、プログラムで実行するか、Viteのようなビルドツールを使用できます。
AssetPackには、使用できる組み込みプラグインが多数あります。プラグインの完全なリストについては、プラグインページを参照してください。
オープンソースゲーム
AssetPackは、すでにオープンソースのゲームリポジトリで使用されています。アセット管理にAssetPackを活用しているゲームを確認してください。これらの例は、実世界のシナリオにおけるAssetPackのパワーと柔軟性を示しています。
結論
AssetPackは、Webプロジェクトでアセットを管理および最適化するのに役立つ強力なツールです。AssetPackは、アセット管理に関わる多くのタスクを自動化することで、時間と労力を節約し、優れたWebエクスペリエンスの構築に集中できます。AssetPackが皆様のプロジェクトで役立つことを願っており、皆様がAssetPackで作成するものを見るのを楽しみにしています！
私たちは、AssetPackの継続的な改善に取り組んでおり、皆様からのフィードバックは非常に貴重です。問題が発生した場合や、新機能に関する提案がある場合は、Discordに連絡するか、GitHubリポジトリでIssueをオープンしてください。
🌐 接続を維持しましょう
最新のアップデートについては、ZyieとPixiJSをソーシャルメディアでフォローしてください。リアルタイムでのディスカッションとサポートについては、Discordの活気のあるコミュニティに参加してください。