はじめに
引き続きPixi.jsでゲームを作っています。
忘れやすいので学んだことを記録しようと思ったのですが、いま触っているもの(ver4)と、最新版(ver8)では記述の仕方が全然違う!
これでは最新版を使っている他の人の役には立てなそうです。
まぁいっか!自分に向けて書こう。
ということで、Pixi.jsのバージョンによる記載の違いについてのメモです。
Pixi.jsのver4と最新版(ver8)の記載の違い
いま触っているもの(ver4)
上記のリンクにPixi.jsのver4で5円玉のpngファイルを表示するスクリプトを書きました。
ソースは下記のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asepriteアニメーション Pixi.js</title>
<script src="../../pixi.min.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
<script>
// Pixi.jsのアプリケーションを作成
const app = new PIXI.Application({
width: 360,
height: 548,
backgroundColor: 0xcccccc, // 背景色を設定
})
// appをbodyに追加
document.body.appendChild(app.view);
// loaderでファイルを読み込む
PIXI.loader
.add('goen', 'goen.png')
.load(onAssetsLoaded); // ロード後に実行される処理
// ロード後に実行される処理
function onAssetsLoaded(loader, resources) {
// スプライトを定義
const spriteG = PIXI.Sprite.from(resources.goen.texture);
spriteG.anchor.set(0.5); // 中心位置
spriteG.x = app.screen.width / 2; // x座標:画面サイズ横の半分
spriteG.y = app.screen.height / 2; // y座標:画面サイズ縦の半分
spriteG.scale.x = 4; // 画像を横幅4倍の大きさで表示
spriteG.scale.y = 4; // 画像を縦幅4倍の大きさで表示
app.stage.addChild(spriteG); // 画面に表示
}
</script>
</body>
</html>
最新版(ver8)
上記のリンクにPixi.jsのver8で5円玉のpngファイルを表示するスクリプトを書きました。
見た目はさきほどのver4と全く一緒ですよね。
そしてソースは下記のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asepriteアニメーション Pixi.js</title>
<script src="./v8/pixi.min.js"></script>
</head>
<body style="margin: 0; overflow: hidden;">
<script>
// Pixi.jsのアプリケーションを作成
const app = new PIXI.Application()
app
// 最初に初期化をする必要があるみたい
.init({
width: 360,
height: 548,
backgroundColor: 0xcccccc, // 背景色を設定
})
// 初期化完了後にappをbodyに追加しないとエラーになる
.then(async () => {
// canvas要素をbodyに追加
document.body.appendChild(app.view);
// loaderではなくAssetsでファイルを読み込む
await PIXI.Assets.add({ alias: 'goen', src: 'goen.png' });
// Assetsのロードをして変数に入れる
const texturesPromise = PIXI.Assets.load(['goen']);
// ロードが完了したら中の処理を実行する
texturesPromise.then((textures) => {
// スプライトを定義
const spriteG = PIXI.Sprite.from(textures.goen);
spriteG.anchor.set(0.5); // 中心位置
spriteG.x = app.screen.width / 2; // x座標:画面サイズ横の半分
spriteG.y = app.screen.height / 2; // y座標:画面サイズ縦の半分
spriteG.scale = 4; // 画像を4倍の大きさで表示(scale.x, scale.yはなくなったっぽい?)
app.stage.addChild(spriteG); // 画面に表示
});
});
</script>
</body>
</html>
ざっくり違い
全然違う!別のライブラリを使っているかのように違う。
最初のbodyにcanvasを追加する記載から違うため、ver4用に作ったスクリプトを最新版(ver8)のPixi.jsで動かそうとすると、下記のようなエラーがでます。>Uncaught TypeError: Cannot read properties of undefined (reading 'canvas')
最新版では定義したappに対して、「.init({})」内にサイズや背景色を記載してから、「.then(async()=>{})」で初期化完了後にbodyにcanvasを追加する必要があります。
// Pixi.jsのアプリケーションを作成
const app = new PIXI.Application()
// appについて
app
// 最初に初期化をする必要があるみたい
.init({
width: 360,
height: 548,
backgroundColor: 0xcccccc, // 背景色を設定
})
// 初期化完了後にappをbodyに追加しないとエラーになる
.then(async () => {
// canvas要素をbodyに追加
document.body.appendChild(app.view);
});
画像を表示するのも、ファイルをロードする処理が別物になりました。
ver4では「PIXI.loader」の「.add(‘goen’, ‘goen.png’)」でファイルを読み込み、読み込み完了後に実行する処理を「.load(onAssetsLoaded)」のように記載していました。
ver8では「PIXI.Assets」の「.add({ alias: ‘goen’, src: ‘goen.png’ })」でファイルを読み込み、読み込み完了後に実行される処理は「.load([‘goen’]).then((textures) => { //ここに記載})」みたいに記載するみたいです。
(また、前段の処理のasync()内に記載しているため、PIXI.Assetsを読み込む際にawaitをつけないとエラーになるとか。罠が多い。)
// loaderではなくAssetsでファイルを読み込む
await PIXI.Assets.add({ alias: 'goen', src: 'goen.png' });
// Assetsのロードをして変数に入れる
const texturesPromise = PIXI.Assets.load(['goen']);
// ロードが完了したら中の処理を実行する
texturesPromise.then((textures) => {
// スプライトを定義
const spriteG = PIXI.Sprite.from(textures.goen);
spriteG.anchor.set(0.5); // 中心位置
spriteG.x = app.screen.width / 2; // x座標:画面サイズ横の半分
spriteG.y = app.screen.height / 2; // y座標:画面サイズ縦の半分
spriteG.scale = 4; // 画像を4倍の大きさで表示(scale.x, scale.yはなくなったっぽい?)
app.stage.addChild(spriteG); // 画面に表示
});
また、スプライトの定義についても微妙に違いがあります。
画像を拡大する場合、ver4ではscale.xとscale.yで縦・横それぞれの倍率を記載して設定していましたが、ver8ではscaleで縦・横の倍率を一度に記載して設定するみたいです。逆に縦だけ何倍とかできなくなったのかしら。やり方が分からなかった。
まとめ
私は引き続きver4でゲームを作ろうと思います!ver8を学び直すのは嫌だ!
今回は、Pixi.jsのver4とver8の書き方の違いについて少し記録しました。
次回以降はver4でゲームを制作する際に学んだことを記録していこうと思います。
コメント