tempneff

Untitled

Sep 18th, 2020
816
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. //This object is a draggable stretchable rotatable Tilesprite.  It has three parts, a base which is where you drag, a tip which is how you stretch and rotate, the base is the texture that fills between base and tip
  2. class Stretch extends Phaser.GameObjects.TileSprite{
  3.     constructor(config){
  4.         //takes in starting point of base and initial parameters of the tile sprite.  Then texture keys for base, tip, and body.  Then scale but that should be used with caution and will likley need tweaking
  5.         super(config.scene, config.x, config.y, config.width, config.height, config.key, config.baseKey, config.tipKey, config.scale);
  6.         config.scene.add.existing(this);
  7.        
  8.  
  9.         //this object is the tilesprite body itself
  10.         this.setInteractive().setTint(config.tint).setDepth(1).setScale(config.scale);
  11.         //base of the sprite which is how you drag the object around
  12.         var base =  config.scene.add.image(config.x,config.y,config.baseKey).setDepth(2).setInteractive().setTint(config.tint).setScale(config.scale).setRotation(Math.PI/2);
  13.         //tip of the sprite which can be pulledto stech the body
  14.         var tip =  config.scene.add.image(config.x+base.height/2,config.y,config.tipKey).setInteractive().setDepth(3).setTint(config.tint).setScale(config.scale).setRotation(Math.PI/2);
  15.  
  16.         config.scene.input.setDraggable(this);
  17.         config.scene.input.setDraggable(base);
  18.         config.scene.input.setDraggable(tip);
  19.  
  20.  
  21.         //function to stretch the sprite
  22.         tip.on('drag', function (pointer, dragX, dragY) {
  23.             //origin of the tilesprite
  24.             this.setOrigin(0.5, 1);
  25.             //all object turn at this angle which is defined by the pointer
  26.             const angleToPointer = Phaser.Math.Angle.Between(pointer.x, pointer.y, base.x, base.y);
  27.             this.setRotation(angleToPointer-Math.PI/2);
  28.             tip.setRotation(angleToPointer-Math.PI/2);
  29.             base.setRotation(angleToPointer-Math.PI/2);
  30.  
  31.             //defines the length of the tileSprite
  32.             //** config.scale helps keep the objects together but will need tweaking depending on the sprites used */
  33.             //it's better to get the right size asset and use a config.scale = 1
  34.             const distanceToPointer = Phaser.Math.Distance.Between(pointer.x, pointer.y, base.x, base.y);
  35.             this.setSize(config.width, distanceToPointer/config.scale);
  36.  
  37.             //both angle and distance determine the movement of the tip when dragging using major math skills
  38.             tip.x = base.x - distanceToPointer*Math.cos(angleToPointer);
  39.             tip.y = base.y - distanceToPointer*Math.sin(angleToPointer);
  40.         }, this);
  41.  
  42.         //this just moves the
  43.         base.on('drag', function (pointer, dragX, dragY) {
  44.  
  45.             //since the tilesprite starts at the base it can move exatcly with the drag
  46.             this.x = dragX;
  47.             this.y = dragY;
  48.             base.x = dragX;
  49.             base.y = dragY;
  50.             //rotation is related to the angle from before, height is related to distance.  Used these to again determine the movement of the tip when dragging using major math skills
  51.             tip.x = base.x - this.height*config.scale*Math.cos(Math.PI/2+base.rotation);
  52.             tip.y = base.y - this.height*config.scale*Math.sin(Math.PI/2+base.rotation);
  53.         }, this);
  54.     }
  55.  
  56. }
  57.  
RAW Paste Data