JavaScriptでPixiを使う方法-フロントエンドQ&A-php.cn

ステップ 1: Pixi.js をダウンロードする

ステップ 2: HTML ファイルに Pixi.js への参照を追加する

ステップ 3: Pixi.js アプリケーションを作成する

ステップ 4: 単純な形状を描画する

ステップ 5: 図形にインタラクティブ性を追加する

ステップ 6: アプリケーションを実行する

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptでPixiを使う方法

PHPz

May 20, 2023 pm 10:41 PM

Pixi.js は、2D ゲームやインタラクティブなアプリケーションを作成するための軽量の JavaScript ライブラリです。その API はシンプルで使いやすく、開発者がゲームやアプリケーションの美しいインターフェイスとユーザーエクスペリエンスをより速く簡単に作成できるようにする多くのツールと機能を提供します。

ここで、Pixi.js を使用して単純な対話型アプリケーションを作成する方法を見てみましょう。

ステップ 1: Pixi.js をダウンロードする

Pixi.js を使用するには、まずローカルコンピューターにダウンロードする必要があります。最新版のライブラリファイルは公式サイト（https://www.pixijs.com/）からダウンロードできます。ダウンロードが完了したら、それを解凍し、js ファイルをプロジェクトに追加します。

ステップ 2: HTML ファイルに Pixi.js への参照を追加する

次に、HTML ファイルに Pixi.js への参照を追加します。以下に示すように、script タグを使用して、Pixi.js を HTML ファイルに追加できます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>使用Pixi.js创建交互式应用程序</title>
    <script src="pixi.min.js"></script>
</head>
<body>
    <div id="app"></div>
</body>
</html>

ログイン後にコピー

上記の例では、Pixi.js ファイルを、次の script タグの src 属性として HTML に追加しました。ファイル。また、アプリケーションを表示するために使用される ID「app」を持つ div 要素も追加しました。

ステップ 3: Pixi.js アプリケーションを作成する

Pixi.js への参照を HTML ファイルに追加したので、Pixi.js アプリケーションの構築を開始しましょう。このアプリケーションでは、インタラクションを含む単純な形状を描画します。

まず、Pixi アプリケーションのインスタンスを作成し、HTML ドキュメントに追加する必要があります。次のコードを使用してこれを行うことができます。

// 创建一个应用程序实例
const app = new PIXI.Application({ width: 800, height: 600 });
 
// 将应用程序实例添加到我们的HTML文档中
document.getElementById('app').appendChild(app.view);

ログイン後にコピー

上記のコードでは、new PIXI.Application({width: 800, height: 600}) ステートメントを使用して 800 を作成しました。幅 600 ピクセル、高さ 600 ピクセルの Pixi アプリケーションの例。次に、document.getElementById('app').appendChild(app.view) ステートメントを使用して、このインスタンスを HTML ドキュメントに追加しました。

ステップ 4: 単純な形状を描画する

Pixi アプリケーションインスタンスを作成したので、キャンバス上に単純な形状を描画する必要があります。幅 200 ピクセル、高さ 100 ピクセルの長方形を描画します。このタスクは、次のコードを使用して実行できます。

// 创建一个矩形形状
const rectangle = new PIXI.Graphics();
rectangle.beginFill(0xFF0000);
rectangle.drawRect(0, 0, 200, 100);
rectangle.endFill();
 
// 将矩形形状添加到舞台上
app.stage.addChild(rectangle);

ログイン後にコピー

上記のコードでは、最初に「rectangle」という名前の PIXI.Graphics オブジェクトを作成します。 rectangle.beginFill(0xFF0000) ステートメントを使用して、四角形の塗りつぶしの色を赤に設定します。次に、rectangle.drawRect(0, 0, 200, 100) ステートメントを使用して、グラフィック上に四角形を描画します。最後に、rectangle.endFill() ステートメントを使用して、グラフィックの描画を終了します。

ステップ 5: 図形にインタラクティブ性を追加する

単純な図形を描画したので、それにインタラクティブ機能を追加して、よりインタラクティブにしてみましょう。ユーザーがマウスポインターを四角形の上に置くとズームインし、マウスボタンを押すとズームアウトできるようにします。これらの効果は、次のコードを使用して実現できます。

// 将形状设置为可交互
rectangle.interactive = true;
 
// 当鼠标指针悬停在矩形上时放大它
rectangle.on('mouseover', function() {
    rectangle.scale.set(1.2);
});
 
// 当鼠标按钮被按下时缩小它
rectangle.on('mousedown', function() {
    rectangle.scale.set(1);
});

ログイン後にコピー

上記のコードでは、まず rectangle.interactive プロパティを true に設定して、応答性の高いユーザーインタラクションを実現します。イベント。次に、rectangle.on('mouseover', function(){}) ステートメントを使用して、マウスポインターが四角形上にあるときに発生する「mouseover」イベントにコールバック関数を追加します。このイベントが発生すると、rectangle.scale.set(1.2) ステートメントを使用して、四角形を元のサイズの 1.2 倍に拡大します。

同様に、rectangle.on('mousedown', function(){}) ステートメントを使用して、マウスボタンが押されたときに発生する「mousedown」イベントにコールバック関数を追加します。を押しました。このイベントが発生すると、rectangle.scale.set(1) ステートメントを使用して、四角形を元のサイズに縮小します。

ステップ 6: アプリケーションを実行する

これで、Pixi.js アプリケーションが完成しました。これを実行するには、ブラウザで HTML ファイルを開くだけです。マウスポインタを長方形の上に置くと、元のサイズの 1.2 倍に拡大されます。マウスボタンを押すと元のサイズに縮小します。

Pixi.js は、2D ゲームやインタラクティブなアプリケーションを作成するための優れた JavaScript ライブラリです。 Pixi.js を使用すると、複雑なインタラクションデザインをアプリケーションに簡単に追加でき、優れたユーザーエクスペリエンスを提供できるため、高品質のブラウザアプリケーションの作成に最適です。

以上がJavaScriptでPixiを使う方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。