Webブラウザ上でインタラクティブなコンテンツを出す仕組みとして近年HTML５がよくつかわれています。
WebGLで描画できるフレームワークを探していたところ、Pixi.Jsというものをみつけました。
今回、技術検証も含めてPixi.Jsで簡易的な○×をゲームを作ってみます。
まずは導入
npm install pixi.js
もちろんコンテンツネットワークからももってくることができます。
<script src = " https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"> </script >
とくに、CDNなら問題ないのですが、
Bundleをダウンロードしてインポートしたとき、どのjsを呼びだせばいいんじゃ？
と悩む人も多いと思います。
\node_modules\pixi.js\dist
というディレクトリの中に
pixi.jsとpixi.min.jsがありました。
最小限のコンテンツがpixi.min.jsでフルに使いたいならpixi.jsで良いかと
どちらにどの機能があるのか一覧を載せているDocumentが見当たりませんでした。
とりあえず、落ちていたコードを拾い集めてタイトル画面とボタンだけ作ってみました。
あとで整形出術が必要です。
ゲームシーンの作り方については、こちらを参考
シーンの作成
#scenesmanager-class
<body>
<div id="pixiview"></div>
<script src="../pixi/pixi.min.js"></script>
<script>
const app = new PIXI.Application({
width: 800, height: 600, backgroundColor: 0x1099bb, resolution: window.devicePixelRatio || 1,});
document.body.appendChild(app.view);
const container = new PIXI.Container();
app.stage.addChild(container);
// Create a new texture
const texture = PIXI.Texture.from('img/logo2.png');
const logo2 = new PIXI.Sprite(texture);
container.addChild(logo2);
// Move container to the center
container.x = app.screen.width / 4;
container.y = app.screen.height / 12;
//以下ボタン サンプルからそのまま なんでテクスチャアトラスで読み込まんの？
//ついでに長いのであとでボタンクラスとか作る。
var textureButton = PIXI.Texture.fromImage('img/start_button1.png');
var textureButtonDown = PIXI.Texture.fromImage('img/start_button2.png');
var textureButtonOver = PIXI.Texture.fromImage('img/start_button3.png');
var button = new PIXI.Sprite(textureButton);
button.buttonMode = true;
button.x = app.screen.width / 3;
button.y = app.screen.height / 1.4;
// make the button interactive...
button.interactive = true;
button.buttonMode = true;
button
.on('pointerdown', onButtonDown)
.on('pointerup', onButtonUp)
.on('pointerupoutside', onButtonUp)
.on('pointerover', onButtonOver)
.on('pointerout', onButtonOut);
app.stage.addChild(button);
function onButtonDown() {
this.isdown = true;
this.texture = textureButtonDown;
this.alpha = 1;
}
function onButtonUp() {
this.isdown = false;
if (this.isOver) {
this.texture = textureButtonOver;
}
else {
this.texture = textureButton;
}
}
function onButtonOver() {
this.isOver = true;
if (this.isdown) {
return;
}
this.texture = textureButtonOver;
}
function onButtonOut() {
this.isOver = false;
if (this.isdown) {
return;
}
this.texture = textureButton;
}
</script>
</body>
*はまりどころ
ローカルに置いてある画像はなぜかChromeでは表示されません。
Firefoxで表示することもできますが、不安定なようです。
Chrome ServerというChromeアプリを使うことで、
⇒Pixiの仕様上ローカルの画像はセキュリティ的ななにかにより、表示できません。