this.load.multiatlas('cityscene', 'assets/cityscene.json', "assets")

this.add.sprite(0, 0, 'cityscene', 'background.png')

let frameNames = this.anims.generateFrameNames('cityscene', { start: 1, end: 8, zeroPad: 4, prefix:'capguy/walk/', suffix:'.png' });

this.anims.create({ key: 'walk', frames: frameNames, frameRate: 10, repeat: -1 });

capguy.anims.play('walk')

function resize(){
    let canvas = document.querySelector("canvas");
    let windowWidth = window.innerWidth;
    let windowHeight = window.innerHeight;
    let windowRatio = windowWidth / windowHeight;
    let 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";
    }
}

this.tweens.timeline({
  targets: this.add.image(100, 100, 'block'), // sprite的也是ok的
  ease: 'Linear',
  duration: 3000,
  loop: 4, // 动画循环播放次数
  yoyo: true, // 动画往返播放 等于倒放
  totalDuration: 2000, // 总动画时长
  repeatDelay: 1000, // 动画播放 延迟 但是需要注意的是 这个延迟的yoyo：true的时候，动画来回 才算一次Delay
  hold: 1000, // 保持动画结束的画面时间，随后yoyo为true的话，动画会往返跑，但是回到开始的动画，不会保持该画面。 
    // 开始动画 ---> 结束动画 --->hold保持结束动画时长 ---> 开始动画
  alpha: 1, // 透明度
  delay: i * 50, // 动画第一次开始的延迟时间 仅触发一次
  completeDelay: 5000, // 动画结束方法onComplete() 延迟执行
  easeParams: [ 1.70158 ], // ease的额外参数 1.70158 是当ease: 'Back' 的时候 的默认参数
  flipX: true, // 翻转 在yoyo为True的时候 返回会翻转 在repeart: 大于1 或者-1的时候 单数次数会翻转 http://labs.phaser.io/view.html?src=src\tweens\flipx.js
  tweens:[{
    x: 100, // 这是target的x坐标
    yoyo: true, // 动画往返播放 
  }, {
    y: 100, // 这是target的y坐标
    offset: 3000 // 这是动画时间的进行偏差值 0 表示同时进行上一个动画和这个动画 1500 表示上一个动画进行到一半的时候 这个动画也跟着上 
    // 3000就表示等上一个动画走完再走这个动画了 确切来说 就是 下一个动画的活动时间 数值可改 0到无限
  }]
})

offset: '-=500' // starts 500ms before previous tween ends

let timeLine = this.tweens.timeline({})
timeLine.add({
  targets: this.add.image(100, 100, 'block')
  x: 600,
  ease: 'Power1',
  duration: 3000
})
timeLine.add({
  targets: this.add.image(100, 100, 'block')
  y: 600,
  ease: 'Power1',
  duration: 3000
})
timeLine.play() // 启动动画

this.tweens.timeline({
  tweens:[
  {
    targets: this.add.image(100, 100, 'block')
  }
  ]
})

function preload() {
  this.load.image('block', 'assets/sprites/pinkBlock50x50.png')
}

let blocks = this.add.group({key: ''block', repeat: 107, setScale: {x: 0.3, y:0.3}) // 添加成组的图片 重复103次 block图片
// 这里的setScale 是用来作为cell的间距的
Phaser.Actions.GridAlign(blocks.getChildren(), {
  width: 12, // 正如grid-template那样的width 代表行个数 可以不填写height 就如css-grid
  height: 10, // 正如grid-template那样的height 代表列个数 可以不填写width 就如css-grid
  cellWidth: 20, // item的width
  cellHeight: 20,  // item的height
  x: 70, // top align
  y: 60, // left align
  // https://photonstorm.github.io/phaser3-docs/global.html#GridAlignConfig
})

let i = 0

blocks.children.iterate((child) => {
  this.tweens.add({
    targets: child,
    scaleX: 1, // 恢复缩放原来的尺寸
    scaleY: 1, // as the same
    _ease: '', // 暂不知道 _ease的作用
    ease: 'Sine.easeInOut',
    duration: 300, // 动画时间
    delay: i * 50, // 动画第一次开始的延迟时间 仅触发一次
    repeat: -1, // -1 无限重复
    paused: true, // 动画不会开始 调用 .play() 方法将启动
    yoyo: true,
    hold: 1000, // 保持动画结束的画面时间，随后yoyo为true的话，动画会往返跑，但是回到开始的动画，不会保持该画面。 
    // 开始动画 ---> 结束动画 --->hold保持结束动画时长 ---> 开始动画
    repeatDelay: 1000 // 动画播放 延迟 但是需要注意的是 这个延迟的yoyo：true的时候，动画来回 才算一次Delay
  })
})

i++

if (i % 12 === 0) i = 0

let a = [0, 90, 180, 270]
blocks.children.iterate((child) => {
  child.angle = Phaser.Math.RND.pick(a) // 随机选择数组的方法
  
  this.tweens.add({
    targets: child,
    ease: 'Power1',
    duration: 250,
    delay: (Math.random() * 6000),
    repeatDelay: 3000 + (Math.random() * 6000),
    repeat: -1,
    angle: {
      getEnd (target, key, value) {
        let a = 90
        
        if (Math.random() > .5) {
          a = 180
          return target.angle + a
        } else {
          return target.angle - a
        }
      },
      getStart (target, key, value) { // 假如不设置getStart 则会告诉Phaser: 嘿帮我把这个方框旋转多少度 
        return target.angle // 假如设置了getStart return target.angle 则告诉Phaser: 嘿你从方框的原始角度开始，旋转到那个角度
      }
    }
  })
})

props:{ x:{value() => {}, ease: ''}, y:{value() => {}, ease: ''} }

let maker = this.add.image(400, 300, './bollShadow.png')
let img = this.add.image(400, 300, './boll.png')

this.input.on('pointerdown', (pointer) => {
  marker.serPosition(poniter.x, pointer.y)
})

let tween = this.tweens.add({
  targets: img,
  props: {
    x: {
      value () {
        return maker.x
      },
      ease: 'Power1'
    },
    y: {
      value () {
        return maker.y
      },
      ease: 'Power1'
    }
  },
  duration: 500,
  yoyo: true,
  repeat: -1
})

props:{x:{value:{getEnd() => {}, getStart() => {}}, ease:'', tweensConfig}}

let destX = 600

let tween = this.tweens.add({
  targets: imgae,
  props: {
    y: {
      value: 500,
      duration: 8000,
      ease: 'Power1'
    },
    x: {
      duration: 400,
      yoyo: true,
      repeat: 8,
      easeL 'Sine.easeInOut',
      value: { // value: '-=100' 这样就相对自身走100了
        getEnd (target, key, value) {
          destX -= 30
          return destX
        },
        getStart (target, key, value) {
          return value + 30
        }
      }
    }
  }
})

{
  ease: 'Back',
  easeParams: [ 3.2 ],
  x: 600, // 注意是按照总的canvas的作为地点标记
  y: 150, // 注意是按照总的canvas的作为地点标记
  angle: {
    getEnd () {
      return 90
    }
  }
}

{
  props: {
    x: { value: 700, duration: 4000 },
    y: { value: 500, duration: 8000 }
  },
  yoyo: true,
  repeat: -1
}

x: { value: 700, duration: 4000, flipX: true }

{
    onComplete: methodsName,
    onCompleteParams: [ image ] // 传进去targets 作为MethodsName的第三个参数
}

methodsName (tween, targets, myImage) {
    myImage.setScale(2)
}

let downButton = this.add.image(70, 530, 'down').setInteractive()
let upButton = this.add.image(730, 530, 'up').setInteractive()
// setInteractive()
// https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Image.html
let tweens = this.tweens

this.input.on('gameobjectup', (pointer, gameobject) => {
// Scales the time applied to this Tween. A value of 1 runs in real-time. A value of 0.5 runs 50% slower, and so on. Value isn't used when calculating total duration of the tween, it's a run-time delta adjustment only.
// 1 代表真实运行速度 倍数形式 动画的duration不会受到影响，这仅仅是在运行时的调整。
  if (gameobject === downButton && tweens.timeScale > 0) {
    tweens.pauseAll()
  } else if (gameobject === upButton && tweens.timeScale < 9.9) {
    tweens.resumeAll()
   
  }
})

lottie.loadAnimation({
        container: this.$refs.animationHeart, // the dom element that will contain the animation
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: path.join(__dirname, './4265-favoriete-producten.json') // the path to the animation json
      })

var text = new PointText({
    point: view.center,
	justification: 'center',
	fontSize: 10,
	fillColor: 'red'
})
text.content = 'asd'