pixijs ダウンロード - pixijs ソースコードのダウンロード

ピクシー

その他のソースコード

8.5.2

ダウンロード

PixiJS — HTML5 作成エンジン

このプロジェクトは、すべてのデバイスで動作する高速で軽量の 2D ライブラリを提供することを目的としています。 PixiJS レンダラーを使用すると、WebGL の事前知識がなくても、誰でもハードウェアアクセラレーションのパワーを享受できます。また、速いです。本当に速いです。

最新の PixiJS ニュースを入手したい場合は、Twitter @PixiJS を気軽にフォローしてください。最新情報をお知らせします。また、画期的な発見があれば当社のサイトにも掲載されるので、ぜひチェックしてください。

私たちは現在 Open Collective の一員となっており、皆様のご支援により PixiJS をさらに改善することができます。寄付するには、下のボタンをクリックしてください。私たちはあなたを永遠に愛します!

PixiJS を何に使用するか、いつ使用するか

PixiJS は、WebGL API を使用したり、ブラウザーやデバイスの互換性に対処したりすることなく、リッチでインタラクティブなグラフィックスとクロスプラットフォームのアプリケーションやゲームを作成できるレンダリングライブラリです。

PixiJS は、WebGL のフォールバックサポートを備えた WebGPU をサポートします。ライブラリとしての PixiJS は、インタラクティブなコンテンツを作成するための素晴らしいツールです。グラフィックスが豊富なインタラクティブな Web サイト、アプリケーション、HTML5 ゲームに使用してください。すぐに使用できるクロスプラットフォーム互換性と正常なデグラデーションにより、やるべき作業が減り、作業がより楽しくなります。ブラウザーの不一致による頭痛の種を回避しながら、高密度で低レベルのコードを深く掘り下げることなく、洗練された洗練されたエクスペリエンスを比較的迅速に作成したい場合は、次のプロジェクトに PixiJS の魔法を散りばめましょう。

想像力を自由に発揮して、成長を促進しましょう!

現在の機能

WebGL レンダラー (自動スマートバッチ処理により、非常に高速なパフォーマンスが可能)
WebGPU レンダラ (最新のブラウザでは初めて!)
キャンバスレンダラー (市内最速!)
フルシーングラフ
非常に使いやすい API (フラッシュ表示リスト API と同様)
テクスチャアトラスのサポート
アセットローダー/スプライトシートローダー
どのレンダラーを使用する必要があるかを自動検出する
フルマウスとマルチタッチ操作
文章
ビットマップフォントテキスト
複数行のテキスト
レンダリングテクスチャ
原始的な描画
マスキング
フィルター
コミュニティでサポートされているプラグイン

反応する
脊椎
フィルター
アニメイト
ライト
UI
レイアウト
GIF
さらに！

設定

PixiJS は簡単に始めることができます。事前に構築されたビルドをダウンロードするだけです。

あるいは、npm を使用して PixiJS をインストールするか、単にコンテンツ配信ネットワーク (CDN) URL を使用して PixiJS を HTML ページに直接埋め込むこともできます。

NPM のインストール

npmでpixi.jsをインストール

デフォルトのエクスポートはありません。 PixiJS をインポートする正しい方法は次のとおりです。

 import * 'pixi.js' から PIXI としてインポートします。

CDN インストール

jsDelivr経由:

または unpkg 経由:

基本的な使用例

import { Application, Sprite, Assets } from 'pixi.js';// アプリケーションは、可能であれば、WebGL を使用してレンダラーを作成します。// キャンバス レンダーへのフォールバックを備えています。また、ティッカーも設定されます。 // およびルート ステージ PIXI.Containerconst app = new Application();// レンダラーが利用可能になるまで待機しますawait app.init();// アプリケーションはキャンバス要素を作成します。 // その後、DOMdocument.body.appendChild(app.canvas) に挿入できます;// 必要なテクスチャをロードしますconst texture = await Assets.load('bunny.png');// これにより、「bunny」からテクスチャが作成されます。 png' imageconst bunny = new Sprite(texture);// bunnybunny.x = app.renderer.width / 2;bunny.y = app.renderer.height / 2;// centerbunny.anchor を中心に回転します.x = 0.5;bunny.anchor.y = 0.5;// 構築中のシーンにバニーを追加しますapp.stage.addChild(bunny);// フレームの更新をリッスンしますapp.ticker.add(() => { //各フレームでウサギを少し回転させます bunny.rotation += 0.01;});