mirror of
https://github.com/photonstorm/phaser
synced 2024-12-18 00:53:42 +00:00
added: Rope debug, segments, updateAnimation
This commit is contained in:
jdowell
parent
5a35e1a61d
commit
6432817c7f
8 changed files with 81 additions and 236 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 47 KiB |
17
demo/demo.js
17
demo/demo.js
|
|
@ -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
186
demo/index.html
|
|
@ -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>
|
||||
|
|
@ -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.
|
||||
* @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);
|
||||
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
* @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; }
|
||||
|
||||
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));
|
||||
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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|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.count = 0;
|
||||
var length = 918/20;
|
||||
for (var i = 0; i < 20; i++) {
|
||||
this.points.push(new Phaser.Point(i * length, 0));
|
||||
}
|
||||
console.log('points:', this.points);
|
||||
this.points = points;
|
||||
this._hasUpdateAnimation = false;
|
||||
this._updateAnimationCallback = null;
|
||||
x = x || 0;
|
||||
y = y || 0;
|
||||
key = key || null;
|
||||
|
|
@ -266,13 +263,8 @@ Phaser.Rope.prototype.preUpdate = function() {
|
|||
* @memberof Phaser.Rope
|
||||
*/
|
||||
Phaser.Rope.prototype.update = function() {
|
||||
|
||||
this.count += 0.1;
|
||||
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;
|
||||
|
||||
if(this._hasUpdateAnimation) {
|
||||
this.updateAnimation.call(this);
|
||||
}
|
||||
|
||||
};
|
||||
|
|
@ -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.
|
||||
* 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
|
||||
* @property {boolean} destroyPhase - True if this object is currently being destroyed.
|
||||
|
|
|
|||
|
|
@ -431,6 +431,21 @@ Phaser.Utils.Debug.prototype = {
|
|||
|
||||
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);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -45,6 +45,7 @@
|
|||
"src/gameobjects/Sprite.js",
|
||||
"src/gameobjects/Image.js",
|
||||
"src/gameobjects/TileSprite.js",
|
||||
"src/gameobjects/Rope.js",
|
||||
"src/gameobjects/Text.js",
|
||||
"src/gameobjects/BitmapText.js",
|
||||
"src/gameobjects/Button.js",
|
||||
|
|
|
|||
Loading…
Reference in a new issue