【Tyranoscript】Pixi.jsを呼び出す
はじめに
Tyranoscriptでゲームを作っているけど、一部複雑なミニゲームをPixi.jsで作ってはめ込みたいという場合の導入方法。
Pixi.js本体
Pixi.jsの本体をDLしてきて「data/others/js/」あたりに置く。
GitHubには複数のjsファイルがあるけど、コードの中身を見る必要がなければProduction Buildのpixi.min.jsで良い。
シナリオファイルの設定
シナリオファイル上では、まずloadjsタグでjsファイルを読み込んで、htmlタグで描画領域を確保する。その直後に描画開始の関数initGame()（※後述）を呼び出しておく。
勝ち負けのラベル直後のcmタグはhtmlタグで描画したものをクリアするためのもの。
@loadjs storage="js/pixi.min.js"
@loadjs storage="js/mini_game.js"
[html]
<div id="pixiApp"></div>
<script>
initGame();
</script>
[endhtml]
[s]
*win
; 勝った後の処理
[cm]
勝ち[p]
@jump target="*common"
*lose
; 負けた後の処理
[cm]
負け[p]
@jump target="*common"
*common
; 後続処理
jsファイルの記述
Pixi.jsの後に読み込んでいるmini_game.jsの中身はこんな感じ。
{
let app;
let player;
let enemy;
let elapsed = 0;
// 初期化
function initGame() {
app = new PIXI.Application({ width: 1280, height: 720 });
app.ticker.maxFPS = 60;
app.stage.interactive = true;
document.getElementById("pixiApp").appendChild(app.view);
// 画像ファイルの読み込み
app.loader.add("player", "data/image/game/player.png");
app.loader.add("enemy", "data/image/game/enemy.png");
app.loader.load(setup);
}
// すべての画像ファイルが読み込まれたら
function setup(loader, resources) {
player = new PIXI.Sprite(resources.player.texture);
player.anchor.set(0.5, 0.5);
player.x = 200;
player.y = 300;
app.stage.addChild(player);
enemy = new PIXI.Sprite(resources.enemy.texture);
enemy.anchor.set(0.5, 0.5);
enemy.x = 1280 - 200;
enemy.y = 300;
app.stage.addChild(enemy);
// ゲームループを開始する
app.ticker.add(gameLoop);
}
// ゲームループ
// 引数のdeltaは60fps前提で前回のループから何フレーム経過したかを渡してくれる。
// たとえば60fpsで回せていれば1が入って来るし、30fpsに落ちると2が入って来る。
// 小数で来る場合もあるのでカウンター的に使う場合は注意が必要。
function gameLoop(delta) {
elapsed += delta;
updatePlayer(delta);
updateEnemy(delta);
// 1秒後くらいに勝って終了させる
if (elapsed >= 60) {
endGame(true);
}
}
function updatePlayer(delta) {
// プレイヤーの更新処理
// 右に進む
player.x += 1;
}
function updateEnemy(delta) {
// 敵の更新処理
// 左に進む
enemy.x -= 1;
}
// Pixi.jsの破棄処理
function destroy() {
app.destroy();
app = null;
player.destroy(true);
player = null;
enemy.destroy(true);
enemy = null;
}
// ゲームを終了する
// 引数で勝敗を渡してシナリオのそれぞれのラベルへジャンプする。
function endGame(isWin) {
destroy();
const target = isWin ? "win" : "lose";
tyrano.plugin.kag.stat.is_stop = false; // シナリオが止まっているので動かす。ちゃんとした方法があるかも
tyrano.plugin.kag.ftag.startTag("jump", {
storage: "呼び出し元のシナリオファイル.ks",
target: target,
});
}
// 外部から初期化関数を呼べるようにする。
window.initGame = initGame;
}
動作確認
上記を合わせると以下のような感じになる。
あとはプレイヤーと敵の動きとか、衝突判定とかをゴリゴリ足していく感じ。
あ、ゲーム中に抜けられるとたぶんバグるので、メニューボタンやキーコンフィグは切っておいたほうが良いです。