Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-12-18 00:53:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

added: Rope debug, segments, updateAnimation

Browse source
This commit is contained in:
jdowell 2014-07-15 14:01:15 -05:00
parent 5a35e1a61d
commit 6432817c7f
8 changed files with 81 additions and 236 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
demo/assets/snake.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 47 KiB

17
demo/demo.js
View file

@ -1,17 +0,0 @@
var game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.AUTO, '',{preload: preload, create: create, update:update});
var rope;
function preload() {
console.log('preload');
game.load.image('snake', 'assets/snake.png');
}
function create() {
console.log('create');
rope = game.add.rope(0,this.game.world.centerY,'snake');
}
function update() {
}

186
demo/index.html
View file

@ -1,186 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="../src/physics/p2/p2.js"></script>
<script src="../src/pixi/Pixi.js"></script>
<script src="../src/pixi/core/Point.js"></script>
<script src="../src/pixi/core/Rectangle.js"></script>
<script src="../src/pixi/core/Polygon.js"></script>
<script src="../src/pixi/core/Circle.js"></script>
<script src="../src/pixi/core/Ellipse.js"></script>
<script src="../src/pixi/core/Matrix.js"></script>
<script src="../src/pixi/display/DisplayObject.js"></script>
<script src="../src/pixi/display/DisplayObjectContainer.js"></script>
<script src="../src/pixi/display/Sprite.js"></script>
<script src="../src/pixi/display/SpriteBatch.js"></script>
<script src="../src/pixi/filters/FilterBlock.js"></script>
<script src="../src/pixi/text/Text.js"></script>
<script src="../src/pixi/text/BitmapText.js"></script>
<script src="../src/pixi/display/Stage.js"></script>
<script src="../src/pixi/utils/Utils.js"></script>
<script src="../src/pixi/utils/EventTarget.js"></script>
<script src="../src/pixi/utils/Polyk.js"></script>
<script src="../src/pixi/renderers/webgl/utils/WebGLShaderUtils.js"></script>
<script src="../src/pixi/renderers/webgl/shaders/PixiShader.js"></script>
<script src="../src/pixi/renderers/webgl/shaders/PixiFastShader.js"></script>
<script src="../src/pixi/renderers/webgl/shaders/StripShader.js"></script>
<script src="../src/pixi/renderers/webgl/shaders/PrimitiveShader.js"></script>
<script src="../src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js"></script>
<script src="../src/pixi/renderers/webgl/utils/WebGLGraphics.js"></script>
<script src="../src/pixi/renderers/webgl/WebGLRenderer.js"></script>
<script src="../src/pixi/renderers/webgl/utils/WebGLBlendModeManager.js"></script>
<script src="../src/pixi/renderers/webgl/utils/WebGLMaskManager.js"></script>
<script src="../src/pixi/renderers/webgl/utils/WebGLStencilManager.js"></script>
<script src="../src/pixi/renderers/webgl/utils/WebGLShaderManager.js"></script>
<script src="../src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js"></script>
<script src="../src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js"></script>
<script src="../src/pixi/renderers/webgl/utils/WebGLFilterManager.js"></script>
<script src="../src/pixi/renderers/webgl/utils/FilterTexture.js"></script>
<script src="../src/pixi/renderers/canvas/utils/CanvasMaskManager.js"></script>
<script src="../src/pixi/renderers/canvas/utils/CanvasTinter.js"></script>
<script src="../src/pixi/renderers/canvas/CanvasRenderer.js"></script>
<script src="../src/pixi/renderers/canvas/CanvasGraphics.js"></script>
<script src="../src/pixi/primitives/Graphics.js"></script>
<script src="../src/pixi/extras/Strip.js"></script>
<script src="../src/pixi/extras/Rope.js"></script>
<script src="../src/pixi/extras/TilingSprite.js"></script>
<script src="../src/pixi/textures/BaseTexture.js"></script>
<script src="../src/pixi/textures/Texture.js"></script>
<script src="../src/pixi/textures/RenderTexture.js"></script>
<script src="../src/Phaser.js"></script>
<script src="../src/utils/Utils.js"></script>
<script src="../src/geom/Circle.js"></script>
<script src="../src/geom/Point.js"></script>
<script src="../src/geom/Rectangle.js"></script>
<script src="../src/geom/Line.js"></script>
<script src="../src/geom/Ellipse.js"></script>
<script src="../src/geom/Polygon.js"></script>
<script src="../src/core/Camera.js"></script>
<script src="../src/core/State.js"></script>
<script src="../src/core/StateManager.js"></script>
<script src="../src/core/ArrayList.js"></script>
<script src="../src/core/LinkedList.js"></script>
<script src="../src/core/Signal.js"></script>
<script src="../src/core/SignalBinding.js"></script>
<script src="../src/core/Filter.js"></script>
<script src="../src/core/Plugin.js"></script>
<script src="../src/core/PluginManager.js"></script>
<script src="../src/core/Stage.js"></script>
<script src="../src/core/Group.js"></script>
<script src="../src/core/World.js"></script>
<script src="../src/core/Game.js"></script>
<script src="../src/core/ScaleManager.js"></script>
<script src="../src/input/Input.js"></script>
<script src="../src/input/Key.js"></script>
<script src="../src/input/Keyboard.js"></script>
<script src="../src/input/Mouse.js"></script>
<script src="../src/input/MSPointer.js"></script>
<script src="../src/input/Pointer.js"></script>
<script src="../src/input/Touch.js"></script>
<script src="../src/input/Gamepad.js"></script>
<script src="../src/input/SinglePad.js"></script>
<script src="../src/input/GamepadButton.js"></script>
<script src="../src/input/InputHandler.js"></script>
<script src="../src/gameobjects/Events.js"></script>
<script src="../src/gameobjects/GameObjectCreator.js"></script>
<script src="../src/gameobjects/GameObjectFactory.js"></script>
<script src="../src/gameobjects/BitmapData.js"></script>
<script src="../src/gameobjects/Sprite.js"></script>
<script src="../src/gameobjects/Image.js"></script>
<script src="../src/gameobjects/TileSprite.js"></script>
<script src="../src/gameobjects/Rope.js"></script>
<script src="../src/gameobjects/Text.js"></script>
<script src="../src/gameobjects/BitmapText.js"></script>
<script src="../src/gameobjects/Button.js"></script>
<script src="../src/gameobjects/Graphics.js"></script>
<script src="../src/gameobjects/RenderTexture.js"></script>
<script src="../src/gameobjects/SpriteBatch.js"></script>
<script src="../src/gameobjects/RetroFont.js"></script>
<script src="../src/gameobjects/Particle.js"></script>
<script src="../src/system/Canvas.js"></script>
<script src="../src/system/Device.js"></script>
<script src="../src/system/RequestAnimationFrame.js"></script>
<script src="../src/math/Math.js"></script>
<script src="../src/math/RandomDataGenerator.js"></script>
<script src="../src/math/QuadTree.js"></script>
<script src="../src/net/Net.js"></script>
<script src="../src/tween/TweenManager.js"></script>
<script src="../src/tween/Tween.js"></script>
<script src="../src/tween/Easing.js"></script>
<script src="../src/time/Time.js"></script>
<script src="../src/time/Timer.js"></script>
<script src="../src/time/TimerEvent.js"></script>
<script src="../src/animation/AnimationManager.js"></script>
<script src="../src/animation/Animation.js"></script>
<script src="../src/animation/Frame.js"></script>
<script src="../src/animation/FrameData.js"></script>
<script src="../src/animation/AnimationParser.js"></script>
<script src="../src/loader/Cache.js"></script>
<script src="../src/loader/Loader.js"></script>
<script src="../src/loader/LoaderParser.js"></script>
<script src="../src/sound/Sound.js"></script>
<script src="../src/sound/SoundManager.js"></script>
<script src="../src/utils/Debug.js"></script>
<script src="../src/utils/Color.js"></script>
<script src="../src/physics/Physics.js"></script>
<script src="../src/particles/Particles.js"></script>
<script src="../src/particles/arcade/ArcadeParticles.js"></script>
<script src="../src/particles/arcade/Emitter.js"></script>
<script src="../src/tilemap/Tile.js"></script>
<script src="../src/tilemap/Tilemap.js"></script>
<script src="../src/tilemap/TilemapLayer.js"></script>
<script src="../src/tilemap/TilemapParser.js"></script>
<script src="../src/tilemap/Tileset.js"></script>
<script src="../src/physics/arcade/World.js"></script>
<script src="../src/physics/arcade/Body.js"></script>
<script src="../src/physics/p2/World.js"></script>
<script src="../src/physics/p2/FixtureList.js"></script>
<script src="../src/physics/p2/PointProxy.js"></script>
<script src="../src/physics/p2/InversePointProxy.js"></script>
<script src="../src/physics/p2/Body.js"></script>
<script src="../src/physics/p2/BodyDebug.js"></script>
<script src="../src/physics/p2/Spring.js"></script>
<script src="../src/physics/p2/Material.js"></script>
<script src="../src/physics/p2/ContactMaterial.js"></script>
<script src="../src/physics/p2/CollisionGroup.js"></script>
<script src="../src/physics/p2/DistanceConstraint.js"></script>
<script src="../src/physics/p2/GearConstraint.js"></script>
<script src="../src/physics/p2/LockConstraint.js"></script>
<script src="../src/physics/p2/PrismaticConstraint.js"></script>
<script src="../src/physics/p2/RevoluteConstraint.js"></script>
<script src="../src/physics/arcade/World.js"></script>
<script src="../src/physics/arcade/Body.js"></script>
<script src="../src/physics/ninja/World.js"></script>
<script src="../src/physics/ninja/Body.js"></script>
<script src="../src/physics/ninja/AABB.js"></script>
<script src="../src/physics/ninja/Tile.js"></script>
<script src="../src/physics/ninja/Circle.js"></script>
</head>
<body>
<script src="demo.js"></script>
</body>
</html>

4
src/gameobjects/GameObjectCreator.js
View file

@ -170,9 +170,9 @@ Phaser.GameObjectCreator.prototype = {
* @param {string|number} frame - If this Rope is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index. * @param {string|number} frame - If this Rope is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.
* @return {Phaser.Rope} The newly created rope object. * @return {Phaser.Rope} The newly created rope object.
*/ */
rope: function (x, y, width, height, key, frame) { rope: function (x, y, key, frame, points) {
return new Phaser.Rope(this.game, x, y, width, height, key, frame); return new Phaser.Rope(this.game, x, y, key, frame, points);
}, },

4
src/gameobjects/GameObjectFactory.js
View file

@ -213,11 +213,11 @@ Phaser.GameObjectFactory.prototype = {
* @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group. * @param {Phaser.Group} [group] - Optional Group to add the object to. If not specified it will be added to the World group.
* @return {Phaser.TileSprite} The newly created tileSprite object. * @return {Phaser.TileSprite} The newly created tileSprite object.
*/ */
rope: function (x, y, width, height, key, frame, group) { rope: function (x, y, key, frame, points, group) {
if (typeof group === 'undefined') { group = this.world; } if (typeof group === 'undefined') { group = this.world; }
return group.add(new Phaser.Rope(this.game, x, y, width, height, key, frame)); return group.add(new Phaser.Rope(this.game, x, y, key, frame, points));
}, },

90
src/gameobjects/Rope.js
View file

@ -18,15 +18,12 @@
* @param {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the Rope during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture. * @param {string|Phaser.RenderTexture|Phaser.BitmapData|PIXI.Texture} key - This is the image or texture used by the Rope during rendering. It can be a string which is a reference to the Cache entry, or an instance of a RenderTexture or PIXI.Texture.
* @param {string|number} frame - If this Rope is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index. * @param {string|number} frame - If this Rope is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.
*/ */
Phaser.Rope = function (game, x, y, key, frame) { Phaser.Rope = function (game, x, y, key, frame, points) {
this.points = []; this.points = [];
this.count = 0; this.points = points;
var length = 918/20; this._hasUpdateAnimation = false;
for (var i = 0; i < 20; i++) { this._updateAnimationCallback = null;
this.points.push(new Phaser.Point(i * length, 0));
}
console.log('points:', this.points);
x = x || 0; x = x || 0;
y = y || 0; y = y || 0;
key = key || null; key = key || null;
@ -266,13 +263,8 @@ Phaser.Rope.prototype.preUpdate = function() {
* @memberof Phaser.Rope * @memberof Phaser.Rope
*/ */
Phaser.Rope.prototype.update = function() { Phaser.Rope.prototype.update = function() {
if(this._hasUpdateAnimation) {
this.count += 0.1; this.updateAnimation.call(this);
for (var i = 0; i < this.points.length; i++) {
this.points[i].y = Math.sin(i * 0.5 + this.count) * 20;
//this.points[i].x = i * length + Math.cos(i *0.3 + this.count) * 20;
} }
}; };
@ -303,20 +295,6 @@ Phaser.Rope.prototype.postUpdate = function() {
} }
}; };
/**
* Sets this Rope to automatically scroll in the given direction until stopped via Rope.stopScroll().
* The scroll speed is specified in pixels per second.
* A negative x value will scroll to the left. A positive x value will scroll to the right.
* A negative y value will scroll up. A positive y value will scroll down.
*
* @method Phaser.Rope#autoScroll
* @memberof Phaser.Rope
*/
Phaser.Rope.prototype.autoScroll = function(x, y) {
this._scroll.set(x, y);
};
@ -603,7 +581,7 @@ Object.defineProperty(Phaser.Rope.prototype, "frameName", {
}); });
/** /**
* An Rope that is fixed to the camera uses its x/y coordinates as offsets from the top left of the camera. These are stored in Rope.cameraOffset. * A Rope that is fixed to the camera uses its x/y coordinates as offsets from the top left of the camera. These are stored in Rope.cameraOffset.
* Note that the cameraOffset values are in addition to any parent in the display list. * Note that the cameraOffset values are in addition to any parent in the display list.
* So if this Rope was in a Group that has x: 200, then this will be added to the cameraOffset.x * So if this Rope was in a Group that has x: 200, then this will be added to the cameraOffset.x
* *
@ -775,6 +753,60 @@ Object.defineProperty(Phaser.Rope.prototype, "y", {
}); });
/**
* A Rope will call it's updateAnimation function on each update loop if it has one
*
* @name Phaser.Rope#updateAnimation
* @property {function} updateAnimation - Set to a function if you'd like the rope to animate during the update phase. Set to false or null to remove it.
*/
Object.defineProperty(Phaser.Rope.prototype, "updateAnimation", {
get: function () {
return this._updateAnimation;
},
set: function (value) {
if(value && typeof value === 'function') {
this._hasUpdateAnimation = true;
this._updateAnimation = value;
} else {
this._hasUpdateAnimation = false;
this._updateAnimation = null;
}
}
});
/**
* The segments that make up the rope body as an array of Phaser.Rectangles
*
* @name Phaser.Rope#segments
* @property {array} updateAnimation - Returns an array of Phaser.Rectangles that represent the segments of the given rope
*/
Object.defineProperty(Phaser.Rope.prototype, "segments", {
get: function() {
var segments = [];
var index, x1, y1, x2, y2, width, height, rect;
for(var i = 0; i < this.points.length; i++) {
index = i * 4;
x1 = this.verticies[index];
y1 = this.verticies[index + 1];
x2 = this.verticies[index + 4];
y2 = this.verticies[index + 3];
width = Phaser.Math.difference(x1,x2);
height = Phaser.Math.difference(y1,y2);
x1 += this.world.x;
y1 += this.world.y;
rect = new Phaser.Rectangle(x1,y1, width, height);
segments.push(rect);
}
return segments;
}
});
/** /**
* @name Phaser.Rope#destroyPhase * @name Phaser.Rope#destroyPhase
* @property {boolean} destroyPhase - True if this object is currently being destroyed. * @property {boolean} destroyPhase - True if this object is currently being destroyed.

15
src/utils/Debug.js
View file

@ -431,6 +431,21 @@ Phaser.Utils.Debug.prototype = {
this.rectangle(bounds, color, filled); this.rectangle(bounds, color, filled);
},
/**
* Renders the Rope's segments. Note: This is really expensive as it has to calculate new segments everytime you call it
*
* @method Phaser.Utils.Debug#ropeSegments
* @param {Phaser.Rope} rope - The rope to display the segments of.
* @param {string} [color] - Color of the debug info to be rendered (format is css color string).
* @param {boolean} [filled=true] - Render the rectangle as a fillRect (default, true) or a strokeRect (false)
*/
ropeSegments: function(rope, color, filled) {
var segments = rope.segments;
segments.forEach(function(segment) {
this.rectangle(segment, color, filled);
}, this);
}, },
/** /**

1
tasks/manifests/phaser.json
View file

@ -45,6 +45,7 @@
"src/gameobjects/Sprite.js", "src/gameobjects/Sprite.js",
"src/gameobjects/Image.js", "src/gameobjects/Image.js",
"src/gameobjects/TileSprite.js", "src/gameobjects/TileSprite.js",
"src/gameobjects/Rope.js",
"src/gameobjects/Text.js", "src/gameobjects/Text.js",
"src/gameobjects/BitmapText.js", "src/gameobjects/BitmapText.js",
"src/gameobjects/Button.js", "src/gameobjects/Button.js",