mirror of
https://github.com/wassname/phaser.git
synced 2026-07-08 00:10:32 +08:00
Mouse callback tests.
This commit is contained in:
@@ -0,0 +1,102 @@
|
||||
function distanceBetween(point1, point2) {
|
||||
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
|
||||
}
|
||||
function angleBetween(point1, point2) {
|
||||
return Math.atan2( point2.x - point1.x, point2.y - point1.y );
|
||||
}
|
||||
|
||||
var isDrawing, lastPoint;
|
||||
|
||||
|
||||
|
||||
// var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
|
||||
var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.image('mushroom', 'assets/sprites/chunk.png');
|
||||
|
||||
}
|
||||
|
||||
var mushroom;
|
||||
var texture;
|
||||
var image;
|
||||
|
||||
var down;
|
||||
var p;
|
||||
|
||||
function create() {
|
||||
|
||||
texture = game.add.renderTexture(800, 600, 'mousetrail', true);
|
||||
|
||||
// We create a sprite (rather than using the factory) so it doesn't get added to the display, as we only need its texture data.
|
||||
mushroom = new Phaser.Sprite(game, 0, 0, 'mushroom');
|
||||
mushroom.anchor.setTo(0.5, 0.5);
|
||||
|
||||
// This is the sprite that is drawn to the display. We've given it the renderTexture as its texture.
|
||||
image = game.add.image(0, 0, texture);
|
||||
|
||||
domElement = document.getElementById('phaser-example');
|
||||
|
||||
p = new Phaser.Point();
|
||||
|
||||
domElement.addEventListener('mousemove', onMouseMove, true);
|
||||
domElement.addEventListener('mousedown', onMouseDown, true);
|
||||
// domElement.addEventListener('mouseout', onMouseOut, true);
|
||||
domElement.addEventListener('mouseup', onMouseUp, true);
|
||||
|
||||
texture.render(mushroom, p, false);
|
||||
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
isDrawing = true;
|
||||
lastPoint = { x: e.clientX, y: e.clientY };
|
||||
}
|
||||
|
||||
function onMouseUp(e) {
|
||||
isDrawing = false;
|
||||
}
|
||||
|
||||
function onMouseMove(e) {
|
||||
|
||||
if (!isDrawing) return;
|
||||
|
||||
var currentPoint = { x: e.clientX, y: e.clientY };
|
||||
var dist = distanceBetween(lastPoint, currentPoint);
|
||||
var angle = angleBetween(lastPoint, currentPoint);
|
||||
|
||||
for (var i = 0; i < dist; i+=5) {
|
||||
x = lastPoint.x + (Math.sin(angle) * i) - 25;
|
||||
y = lastPoint.y + (Math.cos(angle) * i) - 25;
|
||||
p.set(x, y);
|
||||
texture.render(mushroom, p, false);
|
||||
|
||||
// ctx.beginPath();
|
||||
// ctx.arc(x+10, y+10, 20, false, Math.PI * 2, false);
|
||||
// ctx.closePath();
|
||||
// ctx.fill();
|
||||
// ctx.stroke();
|
||||
}
|
||||
|
||||
lastPoint = currentPoint;
|
||||
|
||||
}
|
||||
|
||||
function tint() {
|
||||
|
||||
image.tint = Math.random() * 0xFFFFFF;
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
// if (down)
|
||||
// {
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
function distanceBetween(point1, point2) {
|
||||
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
|
||||
}
|
||||
function angleBetween(point1, point2) {
|
||||
return Math.atan2( point2.x - point1.x, point2.y - point1.y );
|
||||
}
|
||||
|
||||
var isDrawing, lastPoint;
|
||||
|
||||
|
||||
|
||||
// var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
|
||||
var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update, render: render });
|
||||
|
||||
function preload() {
|
||||
|
||||
game.load.image('mushroom', 'assets/sprites/chunk.png');
|
||||
|
||||
}
|
||||
|
||||
var mushroom;
|
||||
var texture;
|
||||
var image;
|
||||
|
||||
var down;
|
||||
var p;
|
||||
|
||||
function create() {
|
||||
|
||||
texture = game.add.renderTexture(800, 600, 'mousetrail', true);
|
||||
|
||||
// We create a sprite (rather than using the factory) so it doesn't get added to the display, as we only need its texture data.
|
||||
mushroom = new Phaser.Sprite(game, 0, 0, 'mushroom');
|
||||
mushroom.anchor.setTo(0.5, 0.5);
|
||||
|
||||
// This is the sprite that is drawn to the display. We've given it the renderTexture as its texture.
|
||||
image = game.add.image(0, 0, texture);
|
||||
|
||||
domElement = document.getElementById('phaser-example');
|
||||
|
||||
p = new Phaser.Point();
|
||||
|
||||
// domElement.addEventListener('mousemove', onMouseMove, true);
|
||||
// domElement.addEventListener('mousedown', onMouseDown, true);
|
||||
// // domElement.addEventListener('mouseout', onMouseOut, true);
|
||||
// domElement.addEventListener('mouseup', onMouseUp, true);
|
||||
|
||||
game.input.mouse.mouseDownCallback = onMouseDown;
|
||||
game.input.mouse.mouseUpCallback = onMouseUp;
|
||||
game.input.mouse.mouseMoveCallback = onMouseMove;
|
||||
|
||||
texture.render(mushroom, p, false);
|
||||
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
isDrawing = true;
|
||||
lastPoint = { x: e.clientX, y: e.clientY };
|
||||
}
|
||||
|
||||
function onMouseUp(e) {
|
||||
isDrawing = false;
|
||||
}
|
||||
|
||||
function onMouseMove(e) {
|
||||
|
||||
if (!isDrawing) return;
|
||||
|
||||
var currentPoint = { x: e.clientX, y: e.clientY };
|
||||
var dist = distanceBetween(lastPoint, currentPoint);
|
||||
var angle = angleBetween(lastPoint, currentPoint);
|
||||
|
||||
for (var i = 0; i < dist; i+=5) {
|
||||
x = lastPoint.x + (Math.sin(angle) * i) - 25;
|
||||
y = lastPoint.y + (Math.cos(angle) * i) - 25;
|
||||
p.set(x, y);
|
||||
texture.render(mushroom, p, false);
|
||||
|
||||
// ctx.beginPath();
|
||||
// ctx.arc(x+10, y+10, 20, false, Math.PI * 2, false);
|
||||
// ctx.closePath();
|
||||
// ctx.fill();
|
||||
// ctx.stroke();
|
||||
}
|
||||
|
||||
lastPoint = currentPoint;
|
||||
|
||||
}
|
||||
|
||||
function tint() {
|
||||
|
||||
image.tint = Math.random() * 0xFFFFFF;
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
// if (down)
|
||||
// {
|
||||
// }
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
}
|
||||
@@ -77,24 +77,6 @@ Phaser.GameObjectFactory.prototype = {
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* DEPRECATED - will be removed in Phaser 1.2
|
||||
* Create a new Sprite with specific position and sprite sheet key that will automatically be added as a child of the given parent.
|
||||
*
|
||||
* @method Phaser.GameObjectFactory#child
|
||||
* @param {Phaser.Group} group - The Group to add this child to.
|
||||
* @param {number} x - X position of the new sprite.
|
||||
* @param {number} y - Y position of the new sprite.
|
||||
* @param {string|RenderTexture} [key] - The image key as defined in the Game.Cache to use as the texture for this sprite OR a RenderTexture.
|
||||
* @param {string|number} [frame] - If the sprite uses an image from a texture atlas or sprite sheet you can pass the frame here. Either a number for a frame ID or a string for a frame name.
|
||||
* @returns {Phaser.Sprite} the newly created sprite object.
|
||||
*/
|
||||
child: function (group, x, y, key, frame) {
|
||||
|
||||
return group.create(x, y, key, frame);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Create a tween object for a specific object. The object can be any JavaScript object or Phaser object such as Sprite.
|
||||
*
|
||||
@@ -299,7 +281,7 @@ Phaser.GameObjectFactory.prototype = {
|
||||
if (typeof addToCache === 'undefined') { addToCache = false; }
|
||||
if (typeof key === 'undefined' || key === '') { key = this.game.rnd.uuid(); }
|
||||
|
||||
var texture = new Phaser.RenderTexture(this.game, key, width, height);
|
||||
var texture = new Phaser.RenderTexture(this.game, width, height, key);
|
||||
|
||||
if (addToCache)
|
||||
{
|
||||
|
||||
@@ -402,7 +402,7 @@ Phaser.Image.prototype.bringToTop = function(child) {
|
||||
/**
|
||||
* Indicates the rotation of the Sprite, in degrees, from its original orientation. Values from 0 to 180 represent clockwise rotation; values from 0 to -180 represent counterclockwise rotation.
|
||||
* Values outside this range are added to or subtracted from 360 to obtain a value within the range. For example, the statement player.angle = 450 is the same as player.angle = 90.
|
||||
* If you wish to work in radians instead of degrees use the property Sprite.rotation instead. Working in radians is also faster on mobile devices where Object.defineProperty is expensive to call.
|
||||
* If you wish to work in radians instead of degrees use the property Sprite.rotation instead. Working in radians is also a little faster as it doesn't have to convert the angle.
|
||||
*
|
||||
* @name Phaser.Image#angle
|
||||
* @property {number} angle - The angle of this Image in degrees.
|
||||
@@ -509,10 +509,8 @@ Object.defineProperty(Phaser.Image.prototype, "inCamera", {
|
||||
});
|
||||
|
||||
/**
|
||||
* .
|
||||
*
|
||||
* @name Phaser.Image#frame
|
||||
* @property {boolean} frame - .
|
||||
* @property {number} frame - Gets or sets the current frame index and updates the Texture for display.
|
||||
*/
|
||||
Object.defineProperty(Phaser.Image.prototype, "frame", {
|
||||
|
||||
@@ -540,10 +538,8 @@ Object.defineProperty(Phaser.Image.prototype, "frame", {
|
||||
});
|
||||
|
||||
/**
|
||||
* .
|
||||
*
|
||||
* @name Phaser.Image#frameName
|
||||
* @property {boolean} frameName - .
|
||||
* @property {string} frameName - Gets or sets the current frame by name and updates the Texture for display.
|
||||
*/
|
||||
Object.defineProperty(Phaser.Image.prototype, "frameName", {
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
* @param {number} [width=100] - The width of the render texture.
|
||||
* @param {number} [height=100] - The height of the render texture.
|
||||
*/
|
||||
Phaser.RenderTexture = function (game, key, width, height) {
|
||||
Phaser.RenderTexture = function (game, width, height, key) {
|
||||
|
||||
/**
|
||||
* @property {Phaser.Game} game - A reference to the currently running game.
|
||||
@@ -30,7 +30,7 @@ Phaser.RenderTexture = function (game, key, width, height) {
|
||||
*/
|
||||
this.type = Phaser.RENDERTEXTURE;
|
||||
|
||||
PIXI.RenderTexture.call(this, width, height, renderer);
|
||||
PIXI.RenderTexture.call(this, width, height);
|
||||
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user