タッチでウサギがシュートするJavascript。
ウサギが人参を打ち出すPIXIJSがあったので、それを参考に、Electronでウサギが小さなウサギを発射するアプリを書いてみます。 参考元はココ「Rotate towards mouse and shoot in that direction」
セットアップ
コマンド打ってelectronのプロジェクトを生成します。
npm install -g electron-forge
electron-forge init bunnyShoot
cd bunnyShoot
npm install --save pixi.js
ファイル構成
今回実装するのは、3ファイル index.html, index.js, app.js あとは、バニーの画像をassetsフォルダの下に置いています。
実装
index.js
これは、electron-forgeで自動生成されるソース。
import { app, BrowserWindow } from 'electron';
// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) { // eslint-disable-line global-require
app.quit();
}
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
const createWindow = () => {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
});
// and load the index.html of the app.
mainWindow.loadURL(`file://${__dirname}/index.html`);
// Open the DevTools.
mainWindow.webContents.openDevTools();
// Emitted when the window is closed.
mainWindow.on('closed', () => {
// Dereference the window object, usually you would store windows
// in an array if your app supports multi windows, this is the time
// when you should delete the corresponding element.
mainWindow = null;
});
};
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow);
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On OS X it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
// On OS X it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (mainWindow === null) {
createWindow();
}
});
index.html
自動生成されるソースですが、app.jsを読み込むように1行追加
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
bunny!!!
<script src="app.js"></script>
</body>
</html>
app.js
ウサギのPIXIJS
import * as PIXI from 'pixi.js'
var renderer = PIXI.autoDetectRenderer(200, 200,{backgroundColor : 0x1099bb});
document.body.appendChild(renderer.view);
var stage = new PIXI.Container();
var texture = PIXI.Texture.fromImage('assets/bunny.png');
var bulletTex = PIXI.Texture.fromImage('assets/bunny.png');
bulletTex.rotation = Math.PI * 0.5;
var bunny = new PIXI.Sprite(texture);
bunny.anchor.x = 0.5;
bunny.anchor.y = 0.5;
bunny.position.x = 50;
bunny.position.y = 50;
var background = new PIXI.Graphics();
background.beginFill(0x123456);
background.drawRect(0,0,800,600);
background.endFill();
stage.addChild(background);
stage.addChild(bunny);
stage.interactive = true;
stage.on("mousedown", function(e){
shoot(bunny.rotation, {
x: bunny.position.x+Math.cos(bunny.rotation)*20,
y: bunny.position.y+Math.sin(bunny.rotation)*20
});
})
var bullets = [];
var bulletSpeed = 5;
function shoot(rotation, startPosition){
var bullet = new PIXI.Sprite(bulletTex);
bullet.position.x = startPosition.x;
bullet.position.y = startPosition.y;
bullet.rotation = rotation;
bullet.scale.x = 0.5;
bullet.scale.y = 0.5;
stage.addChild(bullet);
bullets.push(bullet);
}
function rotateToPoint(mx, my, px, py){
var self = this;
var dist_Y = my - py;
var dist_X = mx - px;
var angle = Math.atan2(dist_Y,dist_X);
return angle;
}
animate();
function animate() {
requestAnimationFrame(animate);
bunny.rotation = rotateToPoint(renderer.plugins.interaction.mouse.global.x, renderer.plugins.interaction.mouse.global.y, bunny.position.x, bunny.position.y);
for(var b=bullets.length-1;b>=0;b--){
bullets[b].position.x += Math.cos(bullets[b].rotation)*bulletSpeed;
bullets[b].position.y += Math.sin(bullets[b].rotation)*bulletSpeed;
}
renderer.render(stage);
}
動作確認
これで、このコマンドをうてば、electronが起動します。
electron-forge start