Answers for "Curve EaseIn In Phaser.io 3"

Curve EaseIn In Phaser.io 3

var game;
 
window.onload = function() {
    var gameConfig = {
        type: Phaser.WEBGL,
        width: 600,
        height: 600,
        backgroundColor: 0x000000,
        scene: [playGame]
    };
    game = new Phaser.Game(gameConfig);
    window.focus()
    resize();
    window.addEventListener("resize", resize, false);
}
 
class playGame extends Phaser.Scene{
    constructor(){
        super("PlayGame");
    }
    preload(){
        this.load.image("point", "point.png");
    }
    create(){
        var pointColors = ["0x00ff00", "0x008800", "0x880000", "0xff0000"];
        this.bezierGraphics = this.add.graphics();
        this.pointsArray = [];
        for(var i = 0; i < 4; i++){
            var draggablePoint = this.add.image(Phaser.Math.Between(100, game.config.width - 100), Phaser.Math.Between(100, game.config.height - 100), "point");
            draggablePoint.setTint(pointColors[i]);
            draggablePoint.setInteractive();
            this.pointsArray[i] = draggablePoint;
        }
        this.bezierCurve = new Phaser.Curves.CubicBezier(this.pointsArray[0], this.pointsArray[1], this.pointsArray[2], this.pointsArray[3]);
        this.input.setDraggable(this.pointsArray);
        this.input.on("drag", function (pointer, gameObject, posX, posY){
            gameObject.x = posX;
            gameObject.y = posY;
            this.drawBezier();
        }, this);
        this.movingPoint = this.add.image(0, 0, "point");
        this.movingPoint.scaleX = 0.5;
        this.movingPoint.scaleY = 0.5;
        this.drawBezier();
        var tweenObject = {
            val: 0
        }
        this.tweens.add({
            targets: tweenObject,
            val: 1,
            duration: 2000,
            yoyo: true,
            repeat: -1,
            ease: "Sine.easeInOut",
            callbackScope: this,
            onUpdate: function(tween, target){
                var position = this.bezierCurve.getPoint(target.val);
                this.movingPoint.x = position.x;
                this.movingPoint.y = position.y;
            }
        });
      }
      drawBezier(){
          this.bezierGraphics.clear();
          this.bezierGraphics.lineStyle(4, 0xffffff);
          this.bezierCurve.draw(this.bezierGraphics);
          this.bezierGraphics.lineStyle(2, 0x00ff00);
          this.bezierGraphics.beginPath();
          this.bezierGraphics.moveTo(this.pointsArray[0].x, this.pointsArray[0].y);
          this.bezierGraphics.lineTo(this.pointsArray[1].x, this.pointsArray[1].y);
          this.bezierGraphics.strokePath();
          this.bezierGraphics.lineStyle(2, 0xff0000);
          this.bezierGraphics.beginPath();
          this.bezierGraphics.moveTo(this.pointsArray[2].x, this.pointsArray[2].y);
          this.bezierGraphics.lineTo(this.pointsArray[3].x, this.pointsArray[3].y);
          this.bezierGraphics.strokePath();
      }
}
 
function resize() {
    var canvas = document.querySelector("canvas");
    var windowWidth = window.innerWidth;
    var windowHeight = window.innerHeight;
    var windowRatio = windowWidth / windowHeight;
    var gameRatio = game.config.width / game.config.height;
    if(windowRatio < gameRatio){
        canvas.style.width = windowWidth + "px";
        canvas.style.height = (windowWidth / gameRatio) + "px";
    }
    else{
        canvas.style.width = (windowHeight * gameRatio) + "px";
        canvas.style.height = windowHeight + "px";
    }
}