PixiJSでブラウザゲーム 01基本編
PixiJSという2D WebGLレンダリングライブラリを使い、HTMLでブラウザゲームを作る「基本」のメモです。
サンプルコードでは、ゲーム画面を作成し、ゲーム画面内でキャラアイコンをアニメーションさせています。
目次:
前提
- PixiJS v5.2.1
サンプルコード
01-animation.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>アニメーション</title>
</head>
<body>
<div>
<button class="btn btn-primary" onclick="play(event)">アニメ再生</button>
<button class="btn btn-primary" onclick="stop(event)">アニメ停止</button>
<button class="btn btn-primary" onclick="change(event)">一瞬猫化</button>
</div>
<div id="game"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.1/pixi.min.js" integrity="sha256-LzClwveZCCIyst3+wITowZNFFwZnm5NZKeNUkSmuAEI=" crossorigin="anonymous"></script>
<script type="text/javascript">
// pixiアプリケーションのインスタンスを生成
const pixiApp = new PIXI.Application({
width: 512,
height: 512,
antialiasing: true,
transparent: false,
resolution: 1
});
let gameScene; // ゲームシーン
let dungeon; // ダンジョン背景
let anim1; // キャラアイコン
// #game要素にpixiApp.view追加
document.querySelector("#game").appendChild(pixiApp.view);
PIXI.Loader.shared
// リソースを登録
// 第一引数は任意のキー、第二引数は実体パス
.add("chara-1", "https://i.imgur.com/JNGbC6F.png")
.add("chara-2", "https://i.imgur.com/H9smyaD.png")
.add("chara-3", "https://i.imgur.com/xT6FStW.png")
.add("explorer", "https://i.imgur.com/rWus6RK.png")
.add("cat", "https://i.imgur.com/Fk2JkI5.png")
.add("dungeon", "https://i.imgur.com/EzpxVBZ.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup(loader, res) {
// ゲームシーンを作成
gameScene = new PIXI.Container();
pixiApp.stage.addChild(gameScene);
// ダンジョン作成(ここで画面の大枠サイズを確定)
dungeon = new PIXI.Sprite(PIXI.utils.TextureCache["dungeon"]);
gameScene.addChild(dungeon);
// アニメーションを作成してシーンに追加
anim1 = createAnim([
"chara-1", // chara-1
"chara-2", // chara-2
"chara-3", // chara-3
]);
anim1.x = (gameScene.width / 2) - anim1.width;
anim1.y = (gameScene.height / 2) - (anim1.height / 2);
anim1.vx = 0;
anim1.vy = 0;
anim1.play();
gameScene.addChild(anim1);
}
/**
* アニメーションスプライトオブジェクトを作成
* @param {Array<String>} imgs - imageパスの配列
* @param {Object} opts - [OPTIONAL] オプション @see PIXI.extras.AnimatedSprite
* @return {AnimatedSprite}
*/
function createAnim(imgs, opts) {
const textureArray = [];
for (let i = 0; i < imgs.length; i++) {
let texture = PIXI.Texture.from(imgs[i]);
textureArray.push(texture);
};
const animatedSprite = new PIXI.AnimatedSprite(textureArray);
animatedSprite.animationSpeed = (opts && opts.animationSpeed) ? opts.animationSpeed : 0.1;
return animatedSprite;
}
/** anim1停止 */
function stop(e) {
anim1.stop();
}
/** anim1再生 */
function play(e) {
anim1.play();
}
/** anim1一瞬猫化 */
function change(e) {
// アイコンの位置を取得
const x = anim1.x;
const y = anim1.y;
// アイコンを非表示
anim1.visible = false;
// 猫アイコンを取得
const sprite = new PIXI.Sprite(PIXI.utils.TextureCache["cat"]);
// 猫アイコンの位置をセット
sprite.x = x;
sprite.y = y;
// 猫アイコンをゲームシーンに追加
gameScene.addChild(sprite);
// 1秒後に猫アイコンを壊して元のアイコンを再表示
setTimeout(() => {
sprite.destroy();
anim1.visible = true;
}, 1000)
}
</script>
</body>
</html>TIP: 画像読込で403エラー
ローカル環境だと画像の読み込みで403エラーが出る場合があるかもしれませんが、これはimgur.comが 127.0.0.1 からのアクセスを許可していないためです。403エラーが出た場合は127.0.0.1以外のURL(例えば http://localhost/ や http://<グローバルIPアドレス>/ など)でアクセスしてみてください。
実行
ひとこと
なんとなく2Dゲームっぽいガワが出来ました。 次回はゲームシーンの切り替えを実現してみたいと思います。
宣伝: PixiJSを使ったブラウザゲーム開発なら田中ソフトウェアラボにご相談ください！