PixiJS Universeのローンチを発表できることを嬉しく思います。これは、PixiJSの機能をさらに強化し、開発者が素晴らしいゲームやアプリをより簡単に作成できるようにするための取り組みです。
長年にわたり、PixiJSはWebで最も人気のある2Dレンダラーでしたが、「単なるレンダリングエンジン」でした。コミュニティは、開発者がPixiJSを使用してゲームやアプリケーションを構築するのを支援するための多くの優れたツールを作成してきましたが、これらのツールを維持および改善するマンパワーが不足しており、コミュニティの断片化を引き起こしていました。これを解決するために、PlaycoはPixiJSに専任の開発者チームを編成しました。今後12ヶ月で、10以上のプロジェクトを計画しており、この発表では、その一部を紹介します。
フェーズ1
現在、いくつかの新しいプロジェクトに取り組んでおり、1年間で4つのフェーズでリリースしています。現在、フェーズ1の終わりに近づいており、PixiJSのいくつかのエキサイティングな新しいツールとライブラリがリリースされました。
PixiJSウェブサイト
まず、PixiJSの新しいウェブサイトのベータ版をリリースすることを発表できることを嬉しく思います。
現在のドキュメントは、長年にわたる有機的な成長により構造が乏しく、そのためPixiJSドキュメントの大部分は複数のサイトに断片化されています。この新しいウェブサイトでは、必要なすべてを1か所にまとめ、簡単に検索できるようにします。
また、ドキュメントの改善、ガイドとサンプルの追加、および他の言語へのドキュメント翻訳も検討しています。
サイトを改善する方法についてご意見がありましたらお知らせください！
PixiJS React
次はPixiJS Reactです。これは、ReactアプリケーションでPixiJSを使用する方法を提供するライブラリです。PixiJS Reactは、Patrick Brouwerによって作成された`react-pixi`ライブラリの継続であり、PixiJSコミュニティでReactプロジェクトで広く使用されてきました。PixiJSはライブラリのメンテナンスを引き継ぎ、ライブラリの性能、ドキュメント、新機能のサポートを改善することに専念しています。
このライブラリは使いやすいインターフェースを提供し、開発者がPixiJSを使用してReactアプリケーションを簡単に作成できます。このライブラリはPixiJSのコア機能をすべて統合し、サードパーティライブラリのカスタムコンポーネントを作成できます。
PixiJS Open Games
「PixiJS Open Games」という新しいリポジトリをリリースしました。これは、PixiJSを使用してゲームを作成する方法を示すオープンソースゲームのコレクションであり、MITライセンスでリリースされています。これらのゲームの目的は、ゲーム開発にPixiJSを使用する方法のプロフェッショナルな例を提供することです。
リリースされた最初の2つのゲームは、マッチ3ゲームとバブルシューターゲームです。これらのゲームは、ゲーム開発にPixiJSを使用する方法だけでなく、PixiJS UIやAssetPackなどの他のライブラリを使用する方法も示しています。PixiJS LayoutやPixiJS Reactなどの他のライブラリとPixiJSを使用する方法を示す、さらに多くのゲームのリリースを計画しています。
PixiJS Open Gamesは、ゲーム開発にPixiJSを使用する方法を学びたいゲーム開発者にとって貴重なリソースとなることを期待しており、PixiJSを使用して独自のゲームを作成したい開発者にとって素晴らしいインスピレーションの源にもなります。このプロジェクトは、コードを調べたりプロジェクトに貢献したい人のためにGitHubで公開されています。
PixiJS UI & PixiJS Layout
PixiJS UIは、PixiJSを使用して美しく機能的なユーザーインターフェースを作成したい開発者向けの新しいライブラリです。このライブラリには、ボタン、チェックボックス、スライダー、テキスト入力、スクロールビュー、リスト、ラジオボタン、プログレスバーなどのさまざまなコンポーネントが含まれており、ゲームに簡単に統合できます。これらのコンポーネントは高度にカスタマイズ可能であり、ゲームの特定のニーズに合わせて各要素の外観と動作を調整できます。
PixiJS UIはすべてのオープンソースゲームで使用されているため、実際の例として自由に確認してください。
PixiJS Layoutは、開発者としてのあなたの生活をより簡単にできるもう1つのライブラリです。このライブラリを使用すると、PixiJSを使用してレスポンシブなレイアウトを作成できます。つまり、さまざまな画面サイズとアスペクト比に適応するインターフェースを設計できます。PixiJS LayoutはPixiJS UIと連携して機能し、両方のライブラリを組み合わせて、ユーザー入力と画面の変更に対応する複雑で動的なインターフェースを作成できます。
PixiJS Layoutを使用すると、任意の画面サイズまたはデバイスに合わせて調整できるサイズ変更可能なレイアウトを作成できます。つまり、ゲームのインターフェースは、小さなモバイルデバイスから大きなデスクトップディスプレイまで、あらゆるデバイスで素晴らしい見た目になります。
PixiJS Layoutはまだ開発中ですが、今後数週間で準備が整います。
AssetPack
最後に、フェーズ1ではAssetPackを発表します。
アセット管理はアプリケーション開発の重要な部分であり、新しいAssetPackライブラリは、このプロセスを容易にすることを目的としています。AssetPackはフレームワークに依存しないライブラリであり、PixiJS、ThreeJS、Phaserなど、あらゆるフレームワークで使用できます。開発者がアセットを効率的に管理するのに役立つさまざまな機能を提供します。AssetPackの主要な機能は、新しいアセットをオンザフライで自動的に生成する機能です。たとえば、個々の画像のフォルダーを提供すると、スプライトシートが生成され、アプリケーションのパフォーマンスを大幅に向上させることができます。また、ミップマップの生成、フォントのさまざまな形式への変換、オーディオのさまざまな形式への変換、画像の圧縮、JSONの縮小を行うプラグインも提供しています。これらの機能は、開発者がアセットを最適化して、読み込み時間の短縮、パフォーマンスの向上、ユーザーエクスペリエンスの向上に役立ちます。
使用方法の詳細については、すぐに新しいブログ投稿を公開します。多くの便利な機能とフレームワークに依存しない設計を備えています。ただし、今日から取り組みたい場合は、GitHubリポジトリを確認してください。
フェーズ2
フェーズ2はすぐに開始され、PixiJSアプリケーションの作業を容易にすることを目的としています。
PixiJS JumpStart
Jumpstartは、新しいPixiJSアプリケーションの作成プロセスを簡素化するためにPixiJSチームによって開発されている新しいCLIツールです。このツールを使用すると、開発者は複雑なツールの設定や、さまざまなバンドラーやフレームワークの設定について心配する必要がなくなります。ツールがすべてのセットアップを処理するため、アプリケーションの構築に集中できます。
Jumpstartは、Create-React-AppやCreate-Vueなどの他のCLIツールと同様に、フロントエンド開発コミュニティで人気を博しています。このツールは、webpack、parcel、rollupなど、さまざまなバンドラーやフレームワークのテンプレートを提供します。これにより、開発者は、好みのツールやワークフローに関係なく、PixiJSを簡単に開始できます。Jumpstartを使用すると、数分で新しいPixiJSアプリケーションを作成し、すぐに構築を開始できます。
PixiJS Dev Tools
PixiJS devツールは、開発者がPixiJSアプリケーションのデバッグを支援するためにすぐにリリースされる予定のブラウザ拡張機能です。このツールは、開発者がPixiJSの内部動作を理解し、コードを最適化し、ベストプラクティスに従うことを容易にすることを目的としています。アプリケーションが消費しているリソースを診断し、視覚化するために設計されています。
PixiJS Dev Toolsの主要な機能の1つは、PixiJSでのバッチ処理の複雑なプロセスを開発者が理解するのを支援する機能です。バッチ処理は、同じ描画呼び出しで複数のオブジェクトのレンダリングを最適化するために使用される手法です。このプロセスは、特に新しい開発者にとっては理解が複雑になる可能性があります。PixiJS Dev Toolsは、オブジェクトのレンダリングのデバッグと最適化を容易にすることを目的としています。
全体的に、PixiJS Dev Toolsは、開発者がPixiJSを使用して高性能で視覚的に魅力的なアプリケーションを構築することを容易にする強力なツールになります。開発者にPixiJSの内部動作に関するより深い理解を提供することにより、このツールセットは開発者がコードを最適化し、より効率的で魅力的なアプリケーションを作成するのに役立ちます。
フェーズ3
フェーズ3では、長期的なプロジェクトが明らかになります。これらは、PixiJSエコシステムに対する非常にエキサイティングな大きな変更です。
Comet
Cometは、PixiJSを使用してゲームやアプリケーションを設計および作成することをこれまで以上に簡単にできる新しいエディターです。直感的でユーザーフレンドリーなインターフェースにより、このエディターはデザイナーと開発者の両方に魅力的で、両方のグループがより効率的に協力して作業できます。
Cometの注目すべき機能の1つは、シーン、スプライト、アニメーションなどを作成および編集するための視覚的なインターフェースを提供することです。つまり、デザイナーは、コードを1行も記述することなく、複雑なシーンを作成および編集できます。このエディターは、スプライト、アニメーション、その他のゲーム要素を作成するためのさまざまなツールとオプションを提供し、ゲームまたはアプリケーションの作成を簡単に開始できます。
さらに、開発者はランタイムプレーヤー機能を高く評価するでしょう。これにより、独自のアプリケーションでシーンを簡単に再現できます。これにより、設計を簡単にテストおよび反復処理し、最終製品が機能的で視覚的に魅力的なものであることを確認できます。そして、マルチユーザーのリアルタイムコラボレーションにより、Cometはチームが協力して作業し、アセットとアイデアを共有し、記録的な時間で高品質のゲームとアプリケーションを作成することを容易にします。
PixiJS v8
PixiJS v8は、PixiJSを根本から書き直した、次のメジャーリリースとなります。開発チームは長年にわたる豊富な経験を活かし、PixiJSコアエンジンに改良と最適化を加えました。新しいバージョンのPixiJSは、より高速で効率的な設計となっており、v7と比較してレンダリングパフォーマンスが大幅に向上しています（現在約2倍）。
PixiJS v8の最も魅力的な機能の1つは、主要なブラウザベンダーが開発している新しいグラフィックスAPIであるWebGPUのファーストクラスサポートです。これにより、開発者は高度なGPU機能を活用できるようになり、グラフィック負荷の高いアプリケーションのパフォーマンスを大幅に向上させることができます。WebGPUサポートに加えて、バンドルサイズを削減したい開発者のために、キャンバスレンダラー向けにもエンジンを最適化することに注力しました。キャンバスレンダラーもファーストクラスオプションとして利用可能です。
全体として、PixiJS v8は大きな飛躍となります。開発者は、より高速で効率的なエンジンを利用できるようになり、複雑でグラフィック負荷の高いアプリケーションの構築に適したものになります。
フェーズ4
フェーズ4は、PixiJSにとって新たな領域への挑戦であり、厳密な2Dレンダリング以外の分野にも深く踏み込んでいきます。
PixiJS 3D
長年にわたり、Goodboy（現Playco）はPixiJS上に構築されたOdieという内部3Dエンジンを保有していました。このエンジンをオープンソース化することを計画しており、ゲームやアプリケーションで2Dコンテンツと3Dコンテンツをシームレスに混合したいと考えている皆様にとって、これは朗報です。PixiJS 3Dを使用すれば、プロジェクトに3D要素を取り込むためにエンジンやフレームワークを切り替える必要がなくなります。
これは長期的なプロジェクトですが、チームは順調に進捗しており、今年後半にも詳細な情報を共有する予定です。このリリースにより、PixiJSの機能が大幅に拡張され、開発者はアプリケーション構築においてさらに柔軟性を得ることができます。
PixiJSゲームエンジン
最後に、PixiJSゲームエンジンと呼ばれる新しいライブラリに取り組むことを発表できることを嬉しく思います。このゲームエンジンは、2D/3Dゲームエンジンから期待されるすべての機能を提供することを目指しており、ゲーム開発をより簡単かつ効率的にするための多くの機能とツールを提供します。
PixiJSゲームエンジンの機能の一部には、物理エンジン、オーディオ、入力処理、アセットの読み込みと管理、状態管理、アニメーションとトゥイーンなどがあります。
結論
PixiJSコミュニティに提供される新しいプロジェクトとアップデートに関する多くのエキサイティングなニュースを共有しました。今後数ヶ月は多くのことを期待できます。
PixiJSコミュニティ、貢献者、そしてPlaycoの皆様に、これらすべてを実現してくれたことに対して心から感謝申し上げます。これらの新しいツールとリソースを使って皆様が何を作成するのか楽しみです。そして、PixiJSエコシステムのサポートと成長を続けていきます。上記のGitHubリンクをチェックして、PixiJS Universeの今後のアップデートにご注目ください！