Добавьте изображение в кликнутое место Phaser3 - PullRequest
Новая
       10

Добавьте изображение в кликнутое место Phaser3

0 голосов
/ 04 сентября 2018

Я хочу создать игру, подобную игрушке Tic-tac, но не могу установить правильную позицию изображения (внутри функции x() & y()). Нажав на специальную платформу (квадрат), вы хотите поместить x или y внутри этой платформы. В моем случае это всегда создает внутри первой платформы. 

export default class A extends Phaser.Scene {
  constructor () {
    super(SCENE_GAME)
    this.counter = 0
    const gameOptions = {
      tileSize: 200,
    }
    const gameConfig = {
      width: gameOptions.tileSize * 3,
      height: gameOptions.tileSize * 3,
    }
  }

  create = () => {
    this.platformArray = []
    this.platformGroup = this.add.group()
    for (let i = 0; i < 3; i++) {
      this.platformArray[i] = []
      for (let j = 0; j < 3; j++) {
        this.platform = this.add.sprite(j * gameOptions.tileSize + gameOptions.tileSize / 2, i * gameOptions.tileSize + gameOptions.tileSize / 2, 'platform').setInteractive()
        this.platform.on('pointerdown', this.clickCounter, this)
      }
    }
  }

  clickCounter () {
    this.counter++
    if (this.counter % 2 === 1) {
      this.x()
    } else {
      this.y()
    }
  }

  x () {
    this.add.sprite(gameOptions.tileSize / 2, gameOptions.tileSize / 2, 'x')
  }

  y () {
    this.add.sprite(gameOptions.tileSize / 2, gameOptions.tileSize / 2, 'y')
  }

1 Ответ

0 голосов
/ 05 сентября 2018

Причина, по которой они появляются в одном и том же месте, заключается в том, что вы используете tileSize только для позиционирования.

Таким образом, если бы tileSize было 16, x() всегда добавляло бы спрайт в позиции 8, 8.

В вашем for цикле есть это: 

this.platform = this.add.sprite(
    j * gameOptions.tileSize + gameOptions.tileSize / 2,
    i * gameOptions.tileSize + gameOptions.tileSize / 2, 'platform')
 .setInteractive()

Вы можете видеть, что вы берете tileSize и умножаетесь на позицию сетки.

Я бы порекомендовал изменить ваши функции x и y, чтобы они принимали либо число, либо указатель, который должен быть уже доступен в clickCounter(), если вы добавите аргумент (добавив console.log(arguments); в clickCounter() должны выйти из доступных аргументов).

Исходя из положения указателя, вы можете затем выполнить математику, чтобы определить, по какой плитке был нажат.

Другой альтернативой может быть добавление пользовательских свойств к каждому спрайту плиток, например, row и column, для которых установлено соответствующее значение i / j. Кликнувший на спрайт должен быть доступен в clickCounter также как один из аргументов, и тогда вы можете просто получить пользовательские свойства.

Если вы используете TypeScript, вам нужно создать собственный объект, расширяющий Sprite.

...