Rope

Introduction

Manipulate the vertices of images, built-in game object of phaser.

  • Author: Richard Davey

WebGL only

It only works in WebGL render mode.

Usage

Load texture

scene.load.image(key, url);

Reference: load image

Add object

var rope = scene.add.rope(x, y, texture, frame, points, horizontal);
// var rope = scene.add.rope(x, y, texture, frame, points, horizontal, colors, alphas);
  • points :
    • A number : Segments to split the texture frame into.
    • 2 : Rope
    • An number array : An array containing the vertices data.
  • horizontal :
    • true : Vertices of this Rope be aligned horizontally.
    • false : Vertices of this Rope be aligned vertically.
  • colors : An optional array containing the color data for this Rope. One color value per pair of vertices.
  • alphas : An optional array containing the alpha data for this Rope. One alpha value per pair of vertices.

Add rope from JSON

var rope = scene.make.rope({
    x: 0,
    y: 0,
    key: '',
    frame: null,
    horizontal: true,
    points: undefined,
    colors: undefined,
    alphas: undefined,

    // angle: 0,
    // alpha: 1
    // flipX: true,
    // flipY: true,

    add: true
});

Custom rope class

  • Define class
    class MyRope extends Phaser.GameObjects.Rope {
        constructor(scene, x, y, texture, frame, points, horizontal, colors, alphas) {
            super(scene, x, y, texture, frame, points, horizontal, colors, alphas);
            // ...
            scene.add.existing(this);
        }
        // ...
    
        // preUpdate(time, delta) {}
    }
    
    • scene.add.existing(gameObject) : Adds an existing Game Object to this Scene.
      • If the Game Object renders, it will be added to the Display List.
      • If it has a preUpdate method, it will be added to the Update List.
  • Create instance
    var rope = new MyRope(scene, x, y, texture, frame, points, horizontal);
    

Origin

A Ropes origin is always 0.5 x 0.5 and cannot be changed.

Set vertices

Set vertices via

rope.setPoints(points);
// rope.setPoints(points, colors, alphas);
  • points :
    • A number : Segments to split the texture frame into.
    • 2 : Rope
    • An number array : An array containing the vertices data.
  • colors : An optional array containing the color data for this Rope. One color value per pair of vertices.
  • alphas : An optional array containing the alpha data for this Rope. One alpha value per pair of vertices.

Also change horizontal mode :

  • Change vertical rope to horizontal rope, do nothing if rope is horizontal mode already
    rope.setHorizontal(points);
    // rope.setHorizontal(points, colors, alphas);
    
  • Change horizontal rope to vertical rope, do nothing if rope is vertical mode already
    rope.setVertical(points);
    // rope.setVertical(points, colors, alphas);
    

Or set rope.points directly :

  1. Change rope.points
    • Horizontal rope : rope.points[i].y = newY
    • Vertical rope : rope.points[i].x = newX
  2. Call rope.setDirty(), or rope.updateVertices()

Each point is relative to position of rope object, get points of world via

var worldX = rope.points[i].x + rope.x;
var worldY = rope.points[i].y + rope.y;

Play animation

rope.play(key);
// rope.play(key, ignoreIfPlaying, startFrame);
  • ignoreIfPlaying : If an animation is already playing then ignore this call. Default value is false.
  • startFrame : Optionally start the animation playing from this frame index. Default value is 0.

Alpha

  • Single alpha
    rope.setAlphas(alpha);
    
  • Top - bottom alpha
    rope.setAlphas(topAlpha, bottomAlpha);
    
  • Alpha array for each point
    rope.setAlphas(alphaArray);
    
    • alphaArray : Array of alpha value.

Color tint

  • Single color tint
    rope.setColors(color);
    
  • Color tint array for each point
    rope.setAlphas(colorArray);
    
    • colorArray : Array of color tint value.

Tint fill mode

Sets the tint fill mode.

rope.setTintFill(mode);
  • mode :
    • 0 : Additive tint, blends the vertices colors with the texture. Default behavior.
    • 1 : Fill tint with alpha.
    • 2 : Fill tint without alpha.

Flip

rope.flipX = flip;
rope.flipY = flip;

If this Game Object has a physics body, it will not change the body. This is a rendering toggle only.

Debug

Draw debug mesh each render tick.

rope.setDebug(graphic);
// rope.setDebug(graphic, callback);
  • graphic : Graphics game object
  • callback : Callback of rendering debug graphics (default callback)
    function(rope, meshLength, verts) {
        // var graphic = rope.debugGraphic;
    }
    
    • rope : Rope instance.
    • meshLength : The number of mesh vertices in total.
    • verts : An array of the translated vertex coordinates.

Note

Clear Debug graphics (rope.debugGraphic.clear()) during scene's update stage (scene.update() { })