mirror of
https://github.com/wassname/phaser.git
synced 2026-08-11 11:23:06 +08:00
Added optional "pixel perfect" input checks and tested against static sprites, animated sprites, physics sprites and sprites positioned outside the screen (needing camera shift to appear).
This commit is contained in:
Richard Davey
@@ -22,10 +22,13 @@
|
||||
|
||||
function create() {
|
||||
|
||||
// var tempSprite = game.add.sprite(game.world.randomX, game.world.randomY, game.rnd.pick(images));
|
||||
// var tempSprite = game.add.sprite(game.world.randomX, game.world.randomY, 'atari1');
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
}
|
||||
|
||||
function render() {
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,79 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>phaser.js - a new beginning</title>
|
||||
<?php
|
||||
require('js.php');
|
||||
?>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
function preload() {
|
||||
|
||||
// Lots of assets
|
||||
game.load.image('stars', 'assets/misc/starfield.jpg');
|
||||
game.load.image('atari1', 'assets/sprites/atari130xe.png');
|
||||
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
|
||||
|
||||
}
|
||||
|
||||
var s;
|
||||
var p;
|
||||
|
||||
function create() {
|
||||
|
||||
// Make our world big ...
|
||||
game.world.setSize(4000, 2000);
|
||||
|
||||
// Scrolling background
|
||||
s = game.add.tileSprite(0, 0, 800, 600, 'stars');
|
||||
s.scrollFactor.setTo(0, 0);
|
||||
|
||||
// Now let's create loads of stuff moving around it
|
||||
for (var i = 0; i < 250; i++)
|
||||
{
|
||||
var temp = game.add.sprite(game.world.randomX, game.world.randomY, 'mushroom');
|
||||
temp.autoCull = true;
|
||||
}
|
||||
|
||||
p = game.add.sprite(200, 200, 'atari1');
|
||||
p.body.velocity.setTo(200 + Math.random() * 100, 200 + Math.random() * 100);
|
||||
p.body.bounce.setTo(1, 1);
|
||||
p.body.collideWorldBounds = true;
|
||||
|
||||
game.camera.follow(p);
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
if (!game.camera.atLimit.x)
|
||||
{
|
||||
s.tilePosition.x -= p.body.deltaX();
|
||||
}
|
||||
|
||||
if (!game.camera.atLimit.y)
|
||||
{
|
||||
s.tilePosition.y -= p.body.deltaY();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
game.debug.renderCameraInfo(game.camera, 32, 32);
|
||||
game.debug.renderText('Sprites rendered: ' + game.world.currentRenderOrderID, 32, 100);
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>phaser.js - a new beginning</title>
|
||||
<?php
|
||||
require('js.php');
|
||||
?>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.image('bunny', 'assets/sprites/bunny.png');
|
||||
|
||||
}
|
||||
|
||||
var b;
|
||||
|
||||
function create() {
|
||||
|
||||
b = game.add.sprite(game.world.centerX, game.world.centerY, 'bunny');
|
||||
b.anchor.setTo(0.5, 0.5);
|
||||
|
||||
// Listen for input events on this sprite
|
||||
b.inputEnabled = true;
|
||||
|
||||
// Check the pixel data of the sprite
|
||||
b.input.pixelPerfect = true;
|
||||
|
||||
// Enable the hand cursor
|
||||
b.input.useHandCursor = true;
|
||||
|
||||
b.events.onInputOver.add(overSprite, this);
|
||||
b.events.onInputOut.add(outSprite, this);
|
||||
|
||||
}
|
||||
|
||||
function overSprite() {
|
||||
console.log('over');
|
||||
}
|
||||
|
||||
function outSprite() {
|
||||
console.log('out');
|
||||
}
|
||||
|
||||
function update() {
|
||||
b.angle += 0.1;
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
game.debug.renderSpriteInputInfo(b, 32, 32);
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,69 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>phaser.js - a new beginning</title>
|
||||
<?php
|
||||
require('js.php');
|
||||
?>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
|
||||
|
||||
}
|
||||
|
||||
var b;
|
||||
|
||||
function create() {
|
||||
|
||||
b = game.add.sprite(game.world.centerX, game.world.centerY, 'mummy');
|
||||
b.anchor.setTo(0.5, 0.5);
|
||||
b.scale.setTo(6, 6);
|
||||
b.animations.add('walk');
|
||||
b.animations.play('walk', 5, true);
|
||||
|
||||
// Listen for input events on this sprite
|
||||
b.inputEnabled = true;
|
||||
|
||||
// Check the pixel data of the sprite
|
||||
b.input.pixelPerfect = true;
|
||||
|
||||
// Enable the hand cursor
|
||||
b.input.useHandCursor = true;
|
||||
|
||||
b.events.onInputOver.add(overSprite, this);
|
||||
b.events.onInputOut.add(outSprite, this);
|
||||
|
||||
}
|
||||
|
||||
function overSprite() {
|
||||
console.log('over');
|
||||
}
|
||||
|
||||
function outSprite() {
|
||||
console.log('out');
|
||||
}
|
||||
|
||||
function update() {
|
||||
// b.angle += 0.1;
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
game.debug.renderSpriteInputInfo(b, 32, 32);
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,118 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>phaser.js - a new beginning</title>
|
||||
<?php
|
||||
require('js.php');
|
||||
?>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
|
||||
game.load.image('stars', 'assets/misc/starfield.jpg');
|
||||
|
||||
}
|
||||
|
||||
var b;
|
||||
var camSpeed = 8;
|
||||
var s;
|
||||
|
||||
function create() {
|
||||
|
||||
// Make our world big ...
|
||||
game.world.setSize(4000, 2000);
|
||||
|
||||
// Scrolling background
|
||||
s = game.add.tileSprite(0, 0, 800, 600, 'stars');
|
||||
s.scrollFactor.setTo(0, 0);
|
||||
|
||||
b = game.add.sprite(200, 200, 'mummy');
|
||||
b.anchor.setTo(0.5, 0.5);
|
||||
b.scale.setTo(6, 6);
|
||||
b.animations.add('walk');
|
||||
b.animations.play('walk', 5, true);
|
||||
b.body.velocity.setTo(50, 0);
|
||||
|
||||
// Listen for input events on this sprite
|
||||
b.inputEnabled = true;
|
||||
|
||||
// Check the pixel data of the sprite
|
||||
b.input.pixelPerfect = true;
|
||||
|
||||
// Enable the hand cursor
|
||||
b.input.useHandCursor = true;
|
||||
|
||||
b.events.onInputOver.add(overSprite, this);
|
||||
b.events.onInputOut.add(outSprite, this);
|
||||
|
||||
}
|
||||
|
||||
function overSprite() {
|
||||
console.log('over');
|
||||
}
|
||||
|
||||
function outSprite() {
|
||||
console.log('out');
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
|
||||
{
|
||||
game.camera.x -= camSpeed;
|
||||
|
||||
if (!game.camera.atLimit.x)
|
||||
{
|
||||
s.tilePosition.x += camSpeed;
|
||||
}
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
|
||||
{
|
||||
game.camera.x += camSpeed;
|
||||
|
||||
if (!game.camera.atLimit.x)
|
||||
{
|
||||
s.tilePosition.x -= camSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
|
||||
{
|
||||
game.camera.y -= camSpeed;
|
||||
|
||||
if (!game.camera.atLimit.y)
|
||||
{
|
||||
s.tilePosition.y += camSpeed;
|
||||
}
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
|
||||
{
|
||||
game.camera.y += camSpeed;
|
||||
|
||||
if (!game.camera.atLimit.y)
|
||||
{
|
||||
s.tilePosition.y -= camSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
game.debug.renderSpriteInputInfo(b, 32, 32);
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,106 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>phaser.js - a new beginning</title>
|
||||
<?php
|
||||
require('js.php');
|
||||
?>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
function preload() {
|
||||
|
||||
// Lots of assets
|
||||
game.load.image('stars', 'assets/misc/starfield.jpg');
|
||||
game.load.image('atari1', 'assets/sprites/atari130xe.png');
|
||||
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
|
||||
|
||||
}
|
||||
|
||||
var camSpeed = 8;
|
||||
var s;
|
||||
|
||||
function create() {
|
||||
|
||||
// Make our world big ...
|
||||
game.world.setSize(4000, 2000);
|
||||
|
||||
// Scrolling background
|
||||
s = game.add.tileSprite(0, 0, 800, 600, 'stars');
|
||||
s.scrollFactor.setTo(0, 0);
|
||||
|
||||
// Now let's create loads of stuff moving around it
|
||||
for (var i = 0; i < 50; i++)
|
||||
{
|
||||
var temp = game.add.sprite(game.world.randomX, game.world.randomY, 'mushroom');
|
||||
temp.body.velocity.setTo(50 + Math.random() * 90, 50 + Math.random() * 90);
|
||||
temp.body.bounce.setTo(1, 1);
|
||||
temp.body.collideWorldBounds = true;
|
||||
|
||||
var temp = game.add.sprite(game.world.randomX, game.world.randomY, 'atari1');
|
||||
temp.body.velocity.setTo(10 + Math.random() * 90, 10 + Math.random() * 90);
|
||||
temp.body.bounce.setTo(1, 1);
|
||||
temp.body.collideWorldBounds = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
|
||||
{
|
||||
game.camera.x -= camSpeed;
|
||||
|
||||
if (!game.camera.atLimit.x)
|
||||
{
|
||||
s.tilePosition.x += camSpeed;
|
||||
}
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
|
||||
{
|
||||
game.camera.x += camSpeed;
|
||||
|
||||
if (!game.camera.atLimit.x)
|
||||
{
|
||||
s.tilePosition.x -= camSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
|
||||
{
|
||||
game.camera.y -= camSpeed;
|
||||
|
||||
if (!game.camera.atLimit.y)
|
||||
{
|
||||
s.tilePosition.y += camSpeed;
|
||||
}
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
|
||||
{
|
||||
game.camera.y += camSpeed;
|
||||
|
||||
if (!game.camera.atLimit.y)
|
||||
{
|
||||
s.tilePosition.y -= camSpeed;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
game.debug.renderCameraInfo(game.camera, 32, 32);
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user