From 890e52008a8bd6c2d310b1656e60ced7a41f5742 Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 7 Feb 2014 07:32:11 +0000 Subject: [PATCH] Mouse callback tests. --- examples/wip/mouse.js | 102 ++++++++++++++++++++++++++ examples/wip/mouse2.js | 106 +++++++++++++++++++++++++++ src/gameobjects/GameObjectFactory.js | 20 +---- src/gameobjects/Image.js | 10 +-- src/gameobjects/RenderTexture.js | 4 +- 5 files changed, 214 insertions(+), 28 deletions(-) create mode 100644 examples/wip/mouse.js create mode 100644 examples/wip/mouse2.js diff --git a/examples/wip/mouse.js b/examples/wip/mouse.js new file mode 100644 index 00000000..6735d71d --- /dev/null +++ b/examples/wip/mouse.js @@ -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() { + +} diff --git a/examples/wip/mouse2.js b/examples/wip/mouse2.js new file mode 100644 index 00000000..0b0afa79 --- /dev/null +++ b/examples/wip/mouse2.js @@ -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() { + +} diff --git a/src/gameobjects/GameObjectFactory.js b/src/gameobjects/GameObjectFactory.js index 0077ee4e..16f06485 100644 --- a/src/gameobjects/GameObjectFactory.js +++ b/src/gameobjects/GameObjectFactory.js @@ -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) { diff --git a/src/gameobjects/Image.js b/src/gameobjects/Image.js index 0db20710..64a9dfa0 100644 --- a/src/gameobjects/Image.js +++ b/src/gameobjects/Image.js @@ -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", { diff --git a/src/gameobjects/RenderTexture.js b/src/gameobjects/RenderTexture.js index d05cefba..1fb002d9 100644 --- a/src/gameobjects/RenderTexture.js +++ b/src/gameobjects/RenderTexture.js @@ -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); };