日日是Oracle APEX: Pixi.jsのアニメーションをOracle APEXのアプリケーションに表示する

2024年12月23日月曜日

Pixi.jsのアニメーションをOracle APEXのアプリケーションに表示する

Pixi.jsのアニメーションをOracle APEXのアプリケーションに表示してみます。Pixi.jsのTutorialsにあるGetting startedの表示に取り組みます。

Pixi.jsのライブラリはESモジュールとして読み込みます。ライブラリの読み込みからアニメーションの描画を行うコードは別のファイルに記述し、Oracle APEXのページにはコードを一切埋め込まないようにします。

作成したAPEXのアプリケーションは以下のように動作します。Pixi.jsのGetting Startedにはありませんが、アニメーションの開始と終了をするボタンを付けています。

以下より簡単に実装について紹介します。ボタンの実装についてはLottieのアニメーションの記事と同じなので省略します。

空のAPEXアプリケーションを作成します。名前はPlay Pixi.jsとしました。

ホーム・ページにPixi.jsのアニメーションを表示する領域を作成します。

静的コンテンツのリージョンを作成し、ソースのHTMLコードとして以下を記述します。

<div id="container" style="width: 400px; height: 400px;"></div>

Getting startedのアニメーションを描画するDIV要素になります。余計な装飾を除くために、外観のテンプレートにBlank with Attributes (No Grid)を選択しています。

ページ・プロパティのJavaScriptのファイルURLに以下を記述します。

[module,defer]#APP_FILES#app#MIN#.js

HTMLヘッダーにimportmapを記述します。

<script type="importmap">
    {
        "imports": {
            "pixi.js": "https://cdn.jsdelivr.net/npm/pixi.js@8.6.6/+esm"
        }
    }
</script>

静的アプリケーション・ファイルとしてapp.js（およびミニファイしたapp.min.js）を作成します。内容として以下を記述します。ほとんどPixi.jsのGetting startedそのままですが、TickerPluginを明示的にextensionsに追加しているのと、アニメーションをHTML要素に表示するように変更しています。また、ボタンの処理も加えています。

	import { Application, Assets, Sprite, extensions, TickerPlugin } from 'pixi.js';

	(async () =>
	{
	/*
	* TickerPluginを明示的に組み込む。
	* 表示領域をdocument.bodyからHTML要素のcontainerに変更する。
	*/
	extensions.add(TickerPlugin);
	const container = document.getElementById("container");

	// Create a new application
	const app = new Application();

	// Initialize the application
	// await app.init({ background: '#1099bb', esizeTo: window });
	await app.init({ background: '#1099bb', esizeTo: container });

	// 初期化されたappを確認する。
	apex.debug.info(app);

	// Append the application canvas to the document body
	// document.body.appendChild(app.canvas);
	container.appendChild(app.canvas);

	// Load the bunny texture
	const texture = await Assets.load('https://pixijs.com/assets/bunny.png');

	// Create a bunny Sprite
	const bunny = new Sprite(texture);

	// Center the sprite's anchor point
	bunny.anchor.set(0.5);

	// Move the sprite to the center of the screen
	bunny.x = app.screen.width / 2;
	bunny.y = app.screen.height / 2;

	app.stage.addChild(bunny);

	// Listen for animate update
	app.ticker.add((time) =>
	{
	// Just for fun, let's rotate mr rabbit a little.
	// * Delta is 1 if running at 100% performance *
	// * Creates frame-independent transformation *
	bunny.rotation += 0.1 * time.deltaTime;
	});

	/*
	* メソッドの一部をボタンに割り付ける。
	*/
	const controlElm = document.getElementById('controls');
	const controls = apex.actions.createContext('controls', controlElm);

	controls.add([
	{
	name: "START",
	action: (event, element, args) => {
	app.start();
	}
	},
	{
	name: "STOP",
	action: (event, element, args) => {
	app.stop();
	}
	}
	]);
	})();