mirror of
https://github.com/wassname/phaser.git
synced 2026-07-07 00:06:37 +08:00
Merge branch 'gamepadsupport' of https://github.com/karlmacklin/phaser into karlmacklin-gamepadsupport
Conflicts: README.md
This commit is contained in:
photonstorm
@@ -0,0 +1,93 @@
|
||||
// Try this demo on Chrome with an XBOX 360 controller.
|
||||
// Use left and right triggers.
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update:update });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.spritesheet('controller-indicator', 'assets/misc/controller-indicator.png', 16,16);
|
||||
|
||||
}
|
||||
|
||||
var leftTriggerButton;
|
||||
var leftTriggerGfx;
|
||||
var rightTriggerGfx;
|
||||
|
||||
var indicator;
|
||||
|
||||
function create() {
|
||||
|
||||
game.stage.backgroundColor = '#736357';
|
||||
game.input.gamepad.start();
|
||||
|
||||
setupScene();
|
||||
|
||||
/*
|
||||
Here we see two ways to get similar result. Left trigger is via 'hotkey button' style and using Phaser Signals.
|
||||
Right trigger is via callbacks. NOTE the difference in the callback functions - right trigger must make a check
|
||||
for which button we're listening to.
|
||||
*/
|
||||
|
||||
leftTriggerButton = game.input.gamepad.pad1.addButton(Phaser.Gamepad.XBOX360_LEFT_TRIGGER);
|
||||
leftTriggerButton.onDown.add(onLeftTrigger);
|
||||
leftTriggerButton.onUp.add(onLeftTrigger);
|
||||
leftTriggerButton.onFloat.add(onLeftTrigger);
|
||||
|
||||
game.input.gamepad.pad1.addCallbacks(this, {
|
||||
onFloat:onRightTrigger,
|
||||
onUp: onRightTrigger,
|
||||
onDown: onRightTrigger
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
function onLeftTrigger(button, value) {
|
||||
leftTriggerGfx.clear();
|
||||
leftTriggerGfx.beginFill(0xFF700B, 1);
|
||||
leftTriggerGfx.lineStyle(2, 0xFFFFFF, 1);
|
||||
leftTriggerGfx.drawRect(0, -value*500, 50, value*500 + 5);
|
||||
leftTriggerGfx.endFill();
|
||||
}
|
||||
|
||||
function onRightTrigger(buttonCode,value) {
|
||||
if(buttonCode !== Phaser.Gamepad.XBOX360_RIGHT_TRIGGER) {
|
||||
return;
|
||||
}
|
||||
|
||||
rightTriggerGfx.clear();
|
||||
rightTriggerGfx.beginFill(0xFF700B, 1);
|
||||
rightTriggerGfx.lineStyle(2, 0xFFFFFF, 1);
|
||||
rightTriggerGfx.drawRect(0, -value*500, 50, value*500 + 5);
|
||||
rightTriggerGfx.endFill();
|
||||
}
|
||||
|
||||
function update() {
|
||||
// Pad "connected or not" indicator
|
||||
if(game.input.gamepad.supported && game.input.gamepad.active && game.input.gamepad.pad1.connected) {
|
||||
indicator.animations.frame = 0;
|
||||
} else {
|
||||
indicator.animations.frame = 1;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function setupScene() {
|
||||
indicator = game.add.sprite(10,10, 'controller-indicator');
|
||||
indicator.scale.x = indicator.scale.y = 2;
|
||||
indicator.animations.frame = 1;
|
||||
|
||||
leftTriggerGfx = game.add.graphics(300,550);
|
||||
leftTriggerGfx.beginFill(0xFF700B, 1);
|
||||
leftTriggerGfx.lineStyle(2, 0xFFFFFF, 1);
|
||||
leftTriggerGfx.drawRect(0, 0, 50, 5);
|
||||
leftTriggerGfx.endFill();
|
||||
|
||||
rightTriggerGfx = game.add.graphics(450,550);
|
||||
rightTriggerGfx.beginFill(0xFF700B, 1);
|
||||
rightTriggerGfx.lineStyle(2, 0xFFFFFF, 1);
|
||||
rightTriggerGfx.drawRect(0, 0, 50, 5);
|
||||
rightTriggerGfx.endFill();
|
||||
}
|
||||
|
||||
@@ -0,0 +1,189 @@
|
||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
|
||||
|
||||
function preload() {
|
||||
game.load.spritesheet('start-input-button', 'assets/buttons/gamepad-input-start.png', 168,70);
|
||||
game.load.image('reset-buttons','assets/buttons/gamepad-reset-buttons.png');
|
||||
}
|
||||
|
||||
var startInputButton;
|
||||
var resetButton;
|
||||
|
||||
var supportedText;
|
||||
var activeText;
|
||||
var gamepadCountText;
|
||||
|
||||
var pad1;
|
||||
var pad1Text;
|
||||
var pad2;
|
||||
var pad2Text;
|
||||
var pad3;
|
||||
var pad3Text;
|
||||
var pad4;
|
||||
var pad4Text;
|
||||
|
||||
var activityPad1Text;
|
||||
var activityPad2Text;
|
||||
var activityPad3Text;
|
||||
var activityPad4Text;
|
||||
var activityGlobalText;
|
||||
|
||||
var pad1StateText;
|
||||
var pad2StateText;
|
||||
var pad3StateText;
|
||||
var pad4StateText;
|
||||
|
||||
function create() {
|
||||
|
||||
game.stage.backgroundColor = '#222222';
|
||||
startInputButton = game.add.button(625, 5, 'start-input-button', onStartInput, this, 0, 0, 0);
|
||||
resetButton = game.add.button(425, 5, 'reset-buttons', onResetButtons, this);
|
||||
|
||||
pad1 = game.input.gamepad.pad1;
|
||||
pad2 = game.input.gamepad.pad2;
|
||||
pad3 = game.input.gamepad.pad3;
|
||||
pad4 = game.input.gamepad.pad4;
|
||||
|
||||
setupText();
|
||||
}
|
||||
|
||||
function onStartInput() {
|
||||
if(game.input.gamepad.active) {
|
||||
game.input.gamepad.stop();
|
||||
startInputButton.setFrames(0,0,0);
|
||||
} else {
|
||||
game.input.gamepad.start();
|
||||
startInputButton.setFrames(1,1,1);
|
||||
}
|
||||
}
|
||||
|
||||
function onResetButtons() {
|
||||
game.input.gamepad.reset();
|
||||
}
|
||||
|
||||
function update() {
|
||||
supportedText.setText('Gamepad supported in this browser: '+game.input.gamepad.supported);
|
||||
activeText.setText('Gamepad input active: '+game.input.gamepad.active);
|
||||
gamepadCountText.setText('Gamepads connected: '+game.input.gamepad.padsConnected);
|
||||
|
||||
updatePadStatusText(pad1._rawPad, pad1Text, 1);
|
||||
updatePadStatusText(pad2._rawPad, pad2Text, 2);
|
||||
updatePadStatusText(pad3._rawPad, pad3Text, 3);
|
||||
updatePadStatusText(pad4._rawPad, pad4Text, 4);
|
||||
|
||||
updatePadsButtonsAxes(pad1._rawPad, pad1StateText, 1);
|
||||
updatePadsButtonsAxes(pad2._rawPad, pad2StateText, 2);
|
||||
updatePadsButtonsAxes(pad3._rawPad, pad3StateText, 3);
|
||||
updatePadsButtonsAxes(pad4._rawPad, pad4StateText, 4);
|
||||
}
|
||||
|
||||
function updatePadStatusText(rawPad, padText, num) {
|
||||
if(rawPad) {
|
||||
padText.setText('Pad '+num+': [ index: '+rawPad['index']+' | id: '+rawPad['id']
|
||||
+' | timestamp: '+rawPad['timestamp']+']'
|
||||
+' | buttons: '+rawPad.buttons.length
|
||||
+' | axes: '+rawPad.axes.length
|
||||
);
|
||||
} else {
|
||||
padText.setText('Pad '+num+': Not connected');
|
||||
}
|
||||
}
|
||||
|
||||
function updatePadsButtonsAxes(rawPad, padStateText, num) {
|
||||
if(rawPad) {
|
||||
var txt = 'Pad '+num+' buttons/axes: \n';
|
||||
for (var i = 0; i < rawPad.buttons.length; i += 1) {
|
||||
txt += 'Button '+i+': '+rawPad.buttons[i]+'\n';
|
||||
}
|
||||
for (var i = 0; i < rawPad.axes.length; i += 1) {
|
||||
txt += 'Axis '+i+': '+rawPad.axes[i]+'\n';
|
||||
}
|
||||
padStateText.setText(txt);
|
||||
}
|
||||
}
|
||||
|
||||
function setupText() {
|
||||
|
||||
var style = { font: "12px Arial", fill: "#ffffff", align: "left" };
|
||||
var tinyStyle = { font: "10px Arial", fill: "#ffffff", align: "left" };
|
||||
supportedText = game.add.text(10, 10, 'Gamepad supported in this browser: '+game.input.gamepad.supported, style);
|
||||
activeText = game.add.text(10, 30, 'Gamepad input active: '+game.input.gamepad.active, style);
|
||||
gamepadCountText = game.add.text(10, 50, 'Gamepads connected: '+game.input.gamepad.padsConnected, style);
|
||||
pad1StateText = game.add.text(10, 300, 'Pad 1 buttons/axes: ', tinyStyle);
|
||||
pad2StateText = game.add.text(200, 300, 'Pad 2 buttons/axes: ', tinyStyle);
|
||||
pad3StateText = game.add.text(390, 300, 'Pad 3 buttons/axes: ', tinyStyle);
|
||||
pad4StateText = game.add.text(580, 300, 'Pad 4 buttons/axes: ', tinyStyle);
|
||||
|
||||
// Setting up infotext and callbacks for all separate four gamepads
|
||||
|
||||
pad1 = game.input.gamepad.pad1;
|
||||
pad1Text = game.add.text(10, 80, 'Pad 1: ', style);
|
||||
pad2 = game.input.gamepad.pad2;
|
||||
pad2Text = game.add.text(10, 100, 'Pad 2: ', style);
|
||||
pad3 = game.input.gamepad.pad3;
|
||||
pad3Text = game.add.text(10, 120, 'Pad 3: ', style);
|
||||
pad4 = game.input.gamepad.pad4;
|
||||
pad4Text = game.add.text(10, 140, 'Pad 4: ', style);
|
||||
|
||||
activityPad1Text = game.add.text(10, 180, 'Last activity pad 1: ', style);
|
||||
addPadCallbacks(pad1, activityPad1Text, 1);
|
||||
|
||||
activityPad2Text = game.add.text(10, 200, 'Last activity pad 2: ', style);
|
||||
addPadCallbacks(pad2, activityPad2Text, 2);
|
||||
|
||||
activityPad3Text = game.add.text(10, 220, 'Last activity pad 3: ', style);
|
||||
addPadCallbacks(pad3, activityPad3Text, 3);
|
||||
|
||||
activityPad4Text = game.add.text(10, 240, 'Last activity pad 4: ', style);
|
||||
addPadCallbacks(pad4, activityPad4Text, 4);
|
||||
|
||||
activityGlobalText = game.add.text(10, 270, 'Last activity all pads: ', style);
|
||||
|
||||
|
||||
|
||||
// Here we're setting callbacks that will trigger from ALL gamepads connected
|
||||
game.input.gamepad.addCallbacks(this, {
|
||||
onConnect: function(padIndex){
|
||||
activityGlobalText.setText('Last activity all pads: Connected with pad index '+padIndex);
|
||||
},
|
||||
onDisconnect: function(padIndex){
|
||||
activityGlobalText.setText('Last activity all pads: Disconnected with pad index '+padIndex);
|
||||
},
|
||||
onDown: function(buttonCode, value, padIndex){
|
||||
activityGlobalText.setText('Last activity all pads: Pad index '+padIndex+' buttonCode: '+buttonCode+' | value: '+value);
|
||||
},
|
||||
onUp: function(buttonCode, value, padIndex){
|
||||
activityGlobalText.setText('Last activity all pads: Pad index '+padIndex+' buttonCode: '+buttonCode+' | value: '+value);
|
||||
},
|
||||
onAxis: function(axisState, padIndex) {
|
||||
activityGlobalText.setText('Last activity all pads: Pad index '+padIndex+': axis '+axisState.axis+': '+axisState.value);
|
||||
},
|
||||
onFloat: function(buttonCode, value, padIndex) {
|
||||
activityGlobalText.setText('Last activity all pads: Pad index '+padIndex+' buttonCode: '+buttonCode+' | value (float): '+value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
function addPadCallbacks(pad, text, index) {
|
||||
pad.addCallbacks(this, {
|
||||
onConnect: function(){
|
||||
text.setText('Last activity pad '+index+': Connected');
|
||||
},
|
||||
onDisconnect: function(){
|
||||
text.setText('Last activity pad '+index+': Disconnected');
|
||||
},
|
||||
onDown: function(buttonCode, value){
|
||||
text.setText('Last activity pad '+index+': buttonCode: '+buttonCode+' | value: '+value);
|
||||
},
|
||||
onUp: function(buttonCode, value){
|
||||
text.setText('Last activity pad '+index+': buttonCode: '+buttonCode+' | value: '+value);
|
||||
},
|
||||
onAxis: function(axisState) {
|
||||
text.setText('Last activity pad '+index+': axis '+axisState.axis+': '+axisState.value);
|
||||
},
|
||||
onFloat: function(buttonCode, value) {
|
||||
text.setText('Last activity pad '+index+': buttonCode: '+buttonCode+' | value (float): '+value);
|
||||
}
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update:update });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.image('phaser', 'assets/sprites/phaser-dude.png');
|
||||
game.load.image('logo', 'assets/sprites/phaser_tiny.png');
|
||||
game.load.image('pineapple', 'assets/sprites/pineapple.png');
|
||||
game.load.spritesheet('controller-indicator', 'assets/misc/controller-indicator.png', 16,16);
|
||||
|
||||
}
|
||||
|
||||
var button1;
|
||||
var button2;
|
||||
var button3;
|
||||
|
||||
var indicator;
|
||||
|
||||
function update() {
|
||||
// Pad "connected or not" indicator
|
||||
if(game.input.gamepad.supported && game.input.gamepad.active && game.input.gamepad.pad1.connected) {
|
||||
indicator.animations.frame = 0;
|
||||
} else {
|
||||
indicator.animations.frame = 1;
|
||||
}
|
||||
}
|
||||
|
||||
function create() {
|
||||
|
||||
game.stage.backgroundColor = '#736357';
|
||||
|
||||
game.input.gamepad.start();
|
||||
|
||||
|
||||
indicator = game.add.sprite(10,10, 'controller-indicator');
|
||||
indicator.scale.x = indicator.scale.y = 2;
|
||||
indicator.animations.frame = 1;
|
||||
|
||||
// Here we create 3 "hotkey buttons" for Gamepad #1, buttons 0-2 and bind them all to their own functions
|
||||
|
||||
button1 = game.input.gamepad.pad1.addButton(Phaser.Gamepad.BUTTON_0);
|
||||
button1.onDown.add(addPhaserDude, this);
|
||||
|
||||
button2 = game.input.gamepad.pad1.addButton(Phaser.Gamepad.BUTTON_1);
|
||||
button2.onDown.add(addPhaserLogo, this);
|
||||
|
||||
button3 = game.input.gamepad.pad1.addButton(Phaser.Gamepad.BUTTON_2);
|
||||
button3.onDown.add(addPineapple, this);
|
||||
|
||||
}
|
||||
|
||||
function addPhaserDude () {
|
||||
game.add.sprite(game.world.randomX, game.world.randomY, 'phaser');
|
||||
}
|
||||
|
||||
function addPhaserLogo () {
|
||||
game.add.sprite(game.world.randomX, game.world.randomY, 'logo');
|
||||
}
|
||||
|
||||
function addPineapple () {
|
||||
game.add.sprite(game.world.randomX, game.world.randomY, 'pineapple');
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update:update });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.image('phaser', 'assets/sprites/phaser-dude.png');
|
||||
game.load.image('melon', 'assets/sprites/melon.png');
|
||||
game.load.spritesheet('controller-indicator', 'assets/misc/controller-indicator.png', 16,16);
|
||||
|
||||
}
|
||||
|
||||
var pad1;
|
||||
var pad2;
|
||||
|
||||
var indicator1;
|
||||
var indicator2;
|
||||
|
||||
var player1;
|
||||
var player2;
|
||||
|
||||
var melon;
|
||||
|
||||
|
||||
function create() {
|
||||
|
||||
game.stage.backgroundColor = '#736357';
|
||||
game.input.gamepad.start();
|
||||
|
||||
|
||||
indicator1 = game.add.sprite(10,10, 'controller-indicator');
|
||||
indicator1.scale.x = indicator1.scale.y = 2;
|
||||
indicator1.animations.frame = 1;
|
||||
|
||||
indicator2 = game.add.sprite(10,50, 'controller-indicator');
|
||||
indicator2.scale.x = indicator2.scale.y = 2;
|
||||
indicator2.animations.frame = 1;
|
||||
|
||||
player1 = game.add.sprite(300, 300, 'phaser');
|
||||
player1.anchor.setTo(0.5,0.5);
|
||||
|
||||
player2 = game.add.sprite(450, 300, 'phaser');
|
||||
player2.anchor.setTo(0.5,0.5);
|
||||
|
||||
// This little melon dude is controlled by all gamepads!
|
||||
melon = game.add.sprite(375, 350, 'melon');
|
||||
melon.anchor.setTo(0.5,0.5);
|
||||
|
||||
pad1 = game.input.gamepad.pad1;
|
||||
pad2 = game.input.gamepad.pad2;
|
||||
}
|
||||
|
||||
function update() {
|
||||
// Pad "connected or not" indicator
|
||||
if(game.input.gamepad.supported && game.input.gamepad.active && game.input.gamepad.pad1.connected) {
|
||||
indicator1.animations.frame = 0;
|
||||
} else {
|
||||
indicator1.animations.frame = 1;
|
||||
}
|
||||
if(game.input.gamepad.supported && game.input.gamepad.active && game.input.gamepad.pad2.connected) {
|
||||
indicator2.animations.frame = 0;
|
||||
} else {
|
||||
indicator2.animations.frame = 1;
|
||||
}
|
||||
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_LEFT) || pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) < -0.1)
|
||||
{
|
||||
player1.x--;
|
||||
}
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_RIGHT) || pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) > 0.1)
|
||||
{
|
||||
player1.x++;
|
||||
}
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_UP) || pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_Y) < -0.1)
|
||||
{
|
||||
player1.y--;
|
||||
}
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_DOWN) || pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_Y) > 0.1)
|
||||
{
|
||||
player1.y++;
|
||||
}
|
||||
|
||||
if (pad2.isDown(Phaser.Gamepad.XBOX360_DPAD_LEFT) || pad2.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) < -0.1)
|
||||
{
|
||||
player2.x--;
|
||||
}
|
||||
if (pad2.isDown(Phaser.Gamepad.XBOX360_DPAD_RIGHT) || pad2.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) > 0.1)
|
||||
{
|
||||
player2.x++;
|
||||
}
|
||||
if (pad2.isDown(Phaser.Gamepad.XBOX360_DPAD_UP) || pad2.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_Y) < -0.1)
|
||||
{
|
||||
player2.y--;
|
||||
}
|
||||
if (pad2.isDown(Phaser.Gamepad.XBOX360_DPAD_DOWN) || pad2.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_Y) > 0.1)
|
||||
{
|
||||
player2.y++;
|
||||
}
|
||||
|
||||
|
||||
// isDown on game.input.gamepad checks ALL gamepad buttons
|
||||
if (game.input.gamepad.isDown(Phaser.Gamepad.XBOX360_DPAD_LEFT))
|
||||
{
|
||||
melon.x--;
|
||||
}
|
||||
if (game.input.gamepad.isDown(Phaser.Gamepad.XBOX360_DPAD_RIGHT))
|
||||
{
|
||||
melon.x++;
|
||||
}
|
||||
if (game.input.gamepad.isDown(Phaser.Gamepad.XBOX360_DPAD_UP))
|
||||
{
|
||||
melon.y--;
|
||||
}
|
||||
if (game.input.gamepad.isDown(Phaser.Gamepad.XBOX360_DPAD_DOWN))
|
||||
{
|
||||
melon.y++;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
@@ -0,0 +1,335 @@
|
||||
// Try this demo on Chrome with an XBOX 360 controller.
|
||||
// Steer with left analog, accelerate/brake with analog triggers,
|
||||
// fire with A and steer turret with left and right 'bumper' (shoulder) buttons.
|
||||
|
||||
EnemyTank = function (index, game, player, bullets) {
|
||||
|
||||
var x = game.world.randomX;
|
||||
var y = game.world.randomY;
|
||||
|
||||
this.game = game;
|
||||
this.health = 3;
|
||||
this.player = player;
|
||||
this.bullets = bullets;
|
||||
this.fireRate = 1000;
|
||||
this.nextFire = 0;
|
||||
this.alive = true;
|
||||
|
||||
this.shadow = game.add.sprite(x, y, 'enemy', 'shadow');
|
||||
this.tank = game.add.sprite(x, y, 'enemy', 'tank1');
|
||||
this.turret = game.add.sprite(x, y, 'enemy', 'turret');
|
||||
|
||||
this.shadow.anchor.setTo(0.5, 0.5);
|
||||
this.tank.anchor.setTo(0.5, 0.5);
|
||||
this.turret.anchor.setTo(0.3, 0.5);
|
||||
|
||||
this.tank.name = index.toString();
|
||||
this.tank.body.immovable = true;
|
||||
this.tank.body.collideWorldBounds = true;
|
||||
this.tank.body.bounce.setTo(1, 1);
|
||||
|
||||
this.tank.angle = game.rnd.angle();
|
||||
|
||||
game.physics.velocityFromRotation(this.tank.rotation, 100, this.tank.body.velocity);
|
||||
|
||||
};
|
||||
|
||||
EnemyTank.prototype.damage = function() {
|
||||
|
||||
this.health -= 1;
|
||||
|
||||
if (this.health <= 0)
|
||||
{
|
||||
this.alive = false;
|
||||
|
||||
this.shadow.kill();
|
||||
this.tank.kill();
|
||||
this.turret.kill();
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
};
|
||||
|
||||
EnemyTank.prototype.update = function() {
|
||||
|
||||
this.shadow.x = this.tank.x;
|
||||
this.shadow.y = this.tank.y;
|
||||
this.shadow.rotation = this.tank.rotation;
|
||||
|
||||
this.turret.x = this.tank.x;
|
||||
this.turret.y = this.tank.y;
|
||||
this.turret.rotation = this.game.physics.angleBetween(this.tank, this.player);
|
||||
|
||||
if (this.game.physics.distanceBetween(this.tank, this.player) < 300)
|
||||
{
|
||||
if (this.game.time.now > this.nextFire && this.bullets.countDead() > 0)
|
||||
{
|
||||
this.nextFire = this.game.time.now + this.fireRate;
|
||||
|
||||
var bullet = this.bullets.getFirstDead();
|
||||
|
||||
bullet.reset(this.turret.x, this.turret.y);
|
||||
|
||||
bullet.rotation = this.game.physics.moveToObject(bullet, this.player, 500);
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
|
||||
|
||||
function preload () {
|
||||
|
||||
game.load.atlas('tank', 'assets/games/tanks/tanks.png', 'assets/games/tanks/tanks.json');
|
||||
game.load.atlas('enemy', 'assets/games/tanks/enemy-tanks.png', 'assets/games/tanks/tanks.json');
|
||||
game.load.image('logo', 'assets/games/tanks/logo-gamepad.png');
|
||||
game.load.image('bullet', 'assets/games/tanks/bullet.png');
|
||||
game.load.image('earth', 'assets/games/tanks/scorched_earth.png');
|
||||
game.load.spritesheet('kaboom', 'assets/games/tanks/explosion.png', 64, 64, 23);
|
||||
game.load.spritesheet('controller-indicator', 'assets/misc/controller-indicator.png', 16,16);
|
||||
|
||||
}
|
||||
|
||||
var land;
|
||||
|
||||
var shadow;
|
||||
var tank;
|
||||
var turret;
|
||||
|
||||
var enemies;
|
||||
var enemyBullets;
|
||||
var explosions;
|
||||
|
||||
var logo;
|
||||
|
||||
var currentSpeed = 0;
|
||||
var cursors;
|
||||
|
||||
var bullets;
|
||||
var fireRate = 200;
|
||||
var nextFire = 0;
|
||||
|
||||
var indicator;
|
||||
var pad1;
|
||||
|
||||
var turretOffset = 0;
|
||||
|
||||
function create () {
|
||||
|
||||
// Resize our game world to be a 2000 x 2000 square
|
||||
game.world.setBounds(-1000, -1000, 2000, 2000);
|
||||
|
||||
// Our tiled scrolling background
|
||||
land = game.add.tileSprite(0, 0, 800, 600, 'earth');
|
||||
land.fixedToCamera = true;
|
||||
|
||||
// The base of our tank
|
||||
tank = game.add.sprite(0, 0, 'tank', 'tank1');
|
||||
tank.anchor.setTo(0.5, 0.5);
|
||||
tank.animations.add('move', ['tank1', 'tank2', 'tank3', 'tank4', 'tank5', 'tank6'], 20, true);
|
||||
// tank.play('move');
|
||||
|
||||
// This will force it to decelerate and limit its speed
|
||||
tank.body.drag.setTo(200, 200);
|
||||
tank.body.maxVelocity.setTo(400, 400);
|
||||
tank.body.collideWorldBounds = true;
|
||||
|
||||
// Finally the turret that we place on-top of the tank body
|
||||
turret = game.add.sprite(0, 0, 'tank', 'turret');
|
||||
turret.anchor.setTo(0.3, 0.5);
|
||||
|
||||
// The enemies bullet group
|
||||
enemyBullets = game.add.group();
|
||||
enemyBullets.createMultiple(100, 'bullet');
|
||||
enemyBullets.setAll('anchor.x', 0.5);
|
||||
enemyBullets.setAll('anchor.y', 0.5);
|
||||
enemyBullets.setAll('outOfBoundsKill', true);
|
||||
|
||||
// Create some baddies to waste :)
|
||||
enemies = [];
|
||||
|
||||
for (var i = 0; i < 20; i++)
|
||||
{
|
||||
enemies.push(new EnemyTank(i, game, tank, enemyBullets));
|
||||
}
|
||||
|
||||
// A shadow below our tank
|
||||
shadow = game.add.sprite(0, 0, 'tank', 'shadow');
|
||||
shadow.anchor.setTo(0.5, 0.5);
|
||||
|
||||
// Our bullet group
|
||||
bullets = game.add.group();
|
||||
bullets.createMultiple(30, 'bullet');
|
||||
bullets.setAll('anchor.x', 0.5);
|
||||
bullets.setAll('anchor.y', 0.5);
|
||||
bullets.setAll('outOfBoundsKill', true);
|
||||
|
||||
// Explosion pool
|
||||
explosions = game.add.group();
|
||||
|
||||
for (var i = 0; i < 10; i++)
|
||||
{
|
||||
var explosionAnimation = explosions.create(0, 0, 'kaboom', [0], false);
|
||||
explosionAnimation.anchor.setTo(0.5, 0.5);
|
||||
explosionAnimation.animations.add('kaboom');
|
||||
}
|
||||
|
||||
tank.bringToTop();
|
||||
turret.bringToTop();
|
||||
|
||||
logo = game.add.sprite(0, 200, 'logo');
|
||||
logo.fixedToCamera = true;
|
||||
|
||||
game.camera.follow(tank);
|
||||
game.camera.deadzone = new Phaser.Rectangle(150, 150, 500, 300);
|
||||
game.camera.focusOnXY(0, 0);
|
||||
|
||||
pad1 = game.input.gamepad.pad1;
|
||||
pad1.addCallbacks(this, {onDown:function(){
|
||||
removeLogo();
|
||||
}});
|
||||
|
||||
indicator = game.add.sprite(10,10, 'controller-indicator');
|
||||
indicator.scale.x = indicator.scale.y = 2;
|
||||
indicator.animations.frame = 1;
|
||||
indicator.fixedToCamera = true;
|
||||
|
||||
game.input.gamepad.start();
|
||||
|
||||
// showing you can set the deadZone for all pads
|
||||
// you can also set it like game.input.gamepad.pad1.deadZone = 0.25
|
||||
// default is 0.26 and is sensible enough for an xbox 360 controller as the
|
||||
// axes seems to hickup at quite high values at times (your mileage may vary)
|
||||
game.input.gamepad.setDeadZones(0.25);
|
||||
}
|
||||
|
||||
function removeLogo () {
|
||||
|
||||
game.input.onDown.remove(removeLogo, this);
|
||||
logo.kill();
|
||||
|
||||
}
|
||||
|
||||
function update () {
|
||||
|
||||
// Pad "connected or not" indicator
|
||||
if(game.input.gamepad.supported && game.input.gamepad.active && pad1.connected) {
|
||||
indicator.animations.frame = 0;
|
||||
} else {
|
||||
indicator.animations.frame = 1;
|
||||
}
|
||||
|
||||
game.physics.collide(enemyBullets, tank, bulletHitPlayer, null, this);
|
||||
|
||||
for (var i = 0; i < enemies.length; i++)
|
||||
{
|
||||
if (enemies[i].alive)
|
||||
{
|
||||
enemies[i].update();
|
||||
game.physics.collide(tank, enemies[i].tank);
|
||||
game.physics.collide(bullets, enemies[i].tank, bulletHitEnemy, null, this);
|
||||
}
|
||||
}
|
||||
|
||||
if (pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) < -0.3)
|
||||
{
|
||||
tank.angle -= 4 * -pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X);
|
||||
}
|
||||
if (pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) > 0.3)
|
||||
{
|
||||
tank.angle += 4 * pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X);
|
||||
}
|
||||
|
||||
var rightTriggerValue = pad1.buttonValue(Phaser.Gamepad.XBOX360_RIGHT_TRIGGER);
|
||||
if(rightTriggerValue && rightTriggerValue > 0) {
|
||||
currentSpeed = 300 * rightTriggerValue;
|
||||
} else {
|
||||
if (currentSpeed > 0)
|
||||
{
|
||||
currentSpeed -= 4;
|
||||
}
|
||||
}
|
||||
|
||||
var leftTriggerValue = pad1.buttonValue(Phaser.Gamepad.XBOX360_LEFT_TRIGGER);
|
||||
if(leftTriggerValue && leftTriggerValue > 0) {
|
||||
currentSpeed = 150 * -leftTriggerValue;
|
||||
} else {
|
||||
if (currentSpeed < 0)
|
||||
{
|
||||
currentSpeed += 4;
|
||||
currentSpeed = (currentSpeed > 0) ? 0 : currentSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
// if (currentSpeed > 0)
|
||||
// {
|
||||
game.physics.velocityFromRotation(tank.rotation, currentSpeed, tank.body.velocity);
|
||||
// }
|
||||
|
||||
land.tilePosition.x = -game.camera.x;
|
||||
land.tilePosition.y = -game.camera.y;
|
||||
|
||||
// Position all the parts and align rotations
|
||||
shadow.x = tank.x;
|
||||
shadow.y = tank.y;
|
||||
shadow.rotation = tank.rotation;
|
||||
|
||||
turret.x = tank.x;
|
||||
turret.y = tank.y;
|
||||
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_LEFT_BUMPER)) {
|
||||
turretOffset -= 3;
|
||||
}
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_RIGHT_BUMPER)) {
|
||||
turretOffset += 3;
|
||||
}
|
||||
|
||||
turret.rotation = tank.rotation;
|
||||
turret.angle += turretOffset;
|
||||
// turret.rotation = game.physics.angleToPointer(turret);
|
||||
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_A))
|
||||
{
|
||||
fire();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function bulletHitPlayer (tank, bullet) {
|
||||
|
||||
bullet.kill();
|
||||
|
||||
}
|
||||
|
||||
function bulletHitEnemy (tank, bullet) {
|
||||
|
||||
bullet.kill();
|
||||
|
||||
var destroyed = enemies[tank.name].damage();
|
||||
|
||||
if (destroyed)
|
||||
{
|
||||
var explosionAnimation = explosions.getFirstDead();
|
||||
explosionAnimation.reset(tank.x, tank.y);
|
||||
explosionAnimation.play('kaboom', 30, false, true);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function fire () {
|
||||
|
||||
if (game.time.now > nextFire && bullets.countDead() > 0)
|
||||
{
|
||||
nextFire = game.time.now + fireRate;
|
||||
|
||||
var bullet = bullets.getFirstDead();
|
||||
|
||||
bullet.reset(turret.x, turret.y);
|
||||
bullet.rotation = turret.rotation;
|
||||
game.physics.velocityFromAngle(bullet.angle, 1000, bullet.body.velocity);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.image('phaser', 'assets/sprites/phaser-dude.png');
|
||||
game.load.spritesheet('controller-indicator', 'assets/misc/controller-indicator.png', 16,16);
|
||||
}
|
||||
|
||||
var sprite;
|
||||
|
||||
var pad1;
|
||||
|
||||
var indicator;
|
||||
|
||||
function create() {
|
||||
|
||||
game.stage.backgroundColor = '#736357';
|
||||
|
||||
sprite = game.add.sprite(300, 300, 'phaser');
|
||||
sprite.anchor.setTo(0.5,0.5);
|
||||
|
||||
indicator = game.add.sprite(10,10, 'controller-indicator');
|
||||
indicator.scale.x = indicator.scale.y = 2;
|
||||
indicator.animations.frame = 1;
|
||||
|
||||
game.input.gamepad.start();
|
||||
|
||||
// To listen to buttons from a specific pad listen directly on that pad game.input.gamepad.padX, where X = pad 1-4
|
||||
pad1 = game.input.gamepad.pad1;
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
// Pad "connected or not" indicator
|
||||
if(game.input.gamepad.supported && game.input.gamepad.active && pad1.connected) {
|
||||
indicator.animations.frame = 0;
|
||||
} else {
|
||||
indicator.animations.frame = 1;
|
||||
}
|
||||
|
||||
// Controls
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_LEFT) || pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) < -0.1)
|
||||
{
|
||||
sprite.x--;
|
||||
}
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_RIGHT) || pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_X) > 0.1)
|
||||
{
|
||||
sprite.x++;
|
||||
}
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_UP) || pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_Y) < -0.1)
|
||||
{
|
||||
sprite.y--;
|
||||
}
|
||||
if (pad1.isDown(Phaser.Gamepad.XBOX360_DPAD_DOWN) || pad1.axis(Phaser.Gamepad.XBOX360_STICK_LEFT_Y) > 0.1)
|
||||
{
|
||||
sprite.y++;
|
||||
}
|
||||
if (pad1.justPressed(Phaser.Gamepad.XBOX360_A))
|
||||
{
|
||||
sprite.angle += 5;
|
||||
}
|
||||
if (pad1.justReleased(Phaser.Gamepad.XBOX360_B))
|
||||
{
|
||||
sprite.scale.x += 0.01;
|
||||
sprite.scale.y = sprite.scale.x;
|
||||
}
|
||||
|
||||
if(pad1.connected) {
|
||||
var rightStickX = pad1.axis(Phaser.Gamepad.XBOX360_STICK_RIGHT_X);
|
||||
var rightStickY = pad1.axis(Phaser.Gamepad.XBOX360_STICK_RIGHT_Y);
|
||||
|
||||
if(rightStickX) {
|
||||
sprite.x += rightStickX * 10;
|
||||
}
|
||||
if(rightStickY) {
|
||||
sprite.y += rightStickY * 10;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,68 @@
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
var ufo;
|
||||
var ufoSpeed = 200;
|
||||
|
||||
function preload() {
|
||||
game.world.setBounds(0,0,800, 600);
|
||||
game.load.image('ufo', 'assets/sprites/ufo.png');
|
||||
}
|
||||
|
||||
function create() {
|
||||
// Create a ufo sprite as player.
|
||||
ufo = game.add.sprite(320, 240, 'ufo');
|
||||
ufo.anchor.setTo(0.5, 0.5);
|
||||
|
||||
// Use Austin Hallock's HTML5 Virtual Game Controller
|
||||
// https://github.com/austinhallock/html5-virtual-game-controller/
|
||||
// Note: you must also require gamecontroller.js on your host page.
|
||||
|
||||
// Init game controller with left thumb stick
|
||||
GameController.init({
|
||||
left: {
|
||||
type: 'joystick',
|
||||
joystick: {
|
||||
touchStart: function() {
|
||||
// Don't need this, but the event is here if you want it.
|
||||
},
|
||||
touchMove: function(joystick_details) {
|
||||
game.input.joystickLeft = joystick_details;
|
||||
},
|
||||
touchEnd: function() {
|
||||
game.input.joystickLeft = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
right: {
|
||||
// We're not using anything on the right for this demo, but you can add buttons, etc.
|
||||
// See https://github.com/austinhallock/html5-virtual-game-controller/ for examples.
|
||||
type: 'none'
|
||||
}
|
||||
});
|
||||
|
||||
// This is an ugly hack to get this to show up over the Phaser Canvas
|
||||
// (which has a manually set z-index in the example code) and position it in the right place,
|
||||
// because it's positioned relatively...
|
||||
// You probably don't need to do this in your game unless your game's canvas is positioned in a manner
|
||||
// similar to this example page, where the canvas isn't the whole screen.
|
||||
$('canvas').last().css('z-index', 20);
|
||||
$('canvas').last().offset( $('canvas').first().offset() );
|
||||
}
|
||||
|
||||
function update() {
|
||||
// Check key states every frame.
|
||||
if (game.input.joystickLeft) {
|
||||
// Move the ufo using the joystick's normalizedX and Y values,
|
||||
// which range from -1 to 1.
|
||||
ufo.body.velocity.setTo(game.input.joystickLeft.normalizedX * 200, game.input.joystickLeft.normalizedY * ufoSpeed * -1);
|
||||
}
|
||||
else {
|
||||
ufo.body.velocity.setTo(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
function render() {
|
||||
game.debug.renderText('Use the virtual joystick to move the UFO.', 20, 20);
|
||||
game.debug.renderText('This requires touch events, so try on your phone.', 20, 40);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user