Ticker error sometimes appears, sometimes doesn't

[Asgen]

Hi there!

I'm new in Pixi, trying to make kinda concentration game. I implementing a game in Vue.js. 

I did first step of the game - the demonstration. It randomly shows some sprites on a grid.

Sometimes demonstration complete successfully and sometimes - not. An error appear for some reason. 

Here an error 

Uncaught TypeError: Cannot set property 'texture' of undefined
    at VueComponent.playDemo (lamps.vue?d061:128)
    at TickerListener.eval (lamps.vue?d061:222)
    at TickerListener.emit (ticker.es.js?e3e9:132)
    at Ticker.update (ticker.es.js?e3e9:584)
    at Ticker._tick (ticker.es.js?e3e9:334)

I also attach a video.

Here the vue component with PIXI. It's messy I know, I just  wanna know how things works for now

<template>
  <canvas />
</template>

<script>
import * as PIXI from 'pixi.js'

export default {
  name: 'LampsGame',
  data() {
    return {
      LEVEL: 3,
      ROWS: 4,
      COLS: 4,
      GAP: 5,
      SPRITE_WIDTH: 50,
      SPRITE_HEIGHT: 50,
      app: null,
      container: null,
      sprites: [],
      grayLampTexture: null,
      yellowLampTexture: null,
      demoElementShown: 0,
      demoCurrentElement: null,
      canShowDemo: true,
      currentDemoStep: 0,
      shownLamps: [],
      correctLamps: [],
      errorLamps: [],
      delta: 0,
      seconds: 0
    }
  },
  computed: {
    SEQUENCE() {
      return this.LEVEL + 1
    },
    ELEMENTS() {
      return this.ROWS * this.COLS
    },
    demoSequence() {
      const list = []
      while (list.length < this.SEQUENCE) {
        const random = this.getRandom(0, this.ELEMENTS)
        if (list.indexOf(random) === -1) {
          list.push(random)
        }
      }
      return list
    }
  },

  mounted() {
    // Для работы PIXI dev tools в хроме
    PIXI.useDeprecated()
    window.__PIXI_INSPECTOR_GLOBAL_HOOK__ &&
      window.__PIXI_INSPECTOR_GLOBAL_HOOK__.register({ PIXI: PIXI })
    // ----

    const canvas = document.querySelector('canvas')

    this.app = new PIXI.Application({
      view: canvas,
      width: 400,
      height: 400,
      backgroundColor: 0x1099bb
    })
    const gameContainer = document.querySelector('#gameContainer')
    gameContainer.appendChild(this.app.view)

    this.container = new PIXI.Container()
    this.container.sortableChildren = true

    // Move container to the center
    this.container.x = this.app.screen.width / 2
    this.container.y = this.app.screen.height / 2

    this.app.stage.addChild(this.container)

    // Loader
    const loader = PIXI.Loader.shared
    // Добавляем изображение в loader. Первый параметр - alias для ресурса
    loader.add('grayLampTexture', require('@/assets/games/lamps/state-1.png'))
    loader.add('yellowLampTexture', require('@/assets/games/lamps/state-2.png'))
    loader.add('greenLamp', require('@/assets/games/lamps/state-3.png'))
    loader.add('redLamp', require('@/assets/games/lamps/state-4.png'))

    loader.onProgress.add(this.handleLoadProgress)
    loader.onLoad.add(this.handleLoadAsset)
    loader.onError.add(this.handleLoadError)
    loader.onComplete.add(this.handleLoadComplete)

    loader.load()
  },
  methods: {
    playDemo(delta) {
      this.seconds += (1 / 60) * delta
      const currentTime = Math.floor(this.seconds)

      // Last step
      if (
        this.demoElementShown === this.demoSequence.length &&
        currentTime >= this.currentDemoStep
      ) {
        this.demoCurrentElement.texture = this.grayLampTexture
        return
      }

      if (
        this.canShowDemo &&
        this.demoElementShown < this.demoSequence.length &&
        this.currentDemoStep === 0
      ) {
        //debugger
        this.canShowDemo = false
        this.currentDemoStep += 1
        const spriteIndexToShowZ = this.demoSequence[this.currentDemoStep - 1]

        this.demoCurrentElement = this.sprites[spriteIndexToShowZ]
        this.demoCurrentElement.texture = this.yellowLampTexture

        this.demoElementShown += 1
      } else if (
        this.canShowDemo &&
        this.demoElementShown < this.demoSequence.length &&
        this.currentDemoStep === currentTime
      ) {
        //debugger
        this.demoCurrentElement.texture = this.grayLampTexture

        this.currentDemoStep += 1
        this.demoElementShown += 1
        const spriteIndexToShowX = this.demoSequence[this.currentDemoStep - 1]
        this.demoCurrentElement = this.sprites[spriteIndexToShowX]
        this.demoCurrentElement.texture = this.yellowLampTexture
        this.canShowDemo = true
      } else if (
        currentTime > 0 &&
        currentTime === this.currentDemoStep &&
        this.demoElementShown < this.demoSequence.length
      ) {
        //debugger
        this.demoCurrentElement.texture = this.grayLampTexture

        this.currentDemoStep += 1
        this.demoElementShown += 1
        const spriteIndexToShowX = this.demoSequence[this.currentDemoStep - 1]
        this.demoCurrentElement = this.sprites[spriteIndexToShowX]
        this.demoCurrentElement.texture = this.yellowLampTexture
        this.canShowDemo = true
      }
    },
    /**
     * Колбэк загрузки ресурсов
     * @param {object} loader - загрузчик
     * @returns {void}
     */
    handleLoadProgress(loader) {
      console.log(loader.progress + '% loaded')
    },
    /**
     * Колбэк загрузки ресурсов
     * @param {object} loader - загрузчик
     * @param {object} resource - загруженный ресурс
     * @returns {void}
     */
    handleLoadAsset(loader, resource) {
      console.log('asset loaded ' + resource.name)
    },
    /**
     * Колбэк загрузки ресурсов
     * @returns {void}
     */
    handleLoadError() {
      console.error('load error')
    },
    /**
     * Колбэк загрузки ресурсов
     * @param {object} loader - загрузчик
     * @returns {void}
     */
    handleLoadComplete(loader) {
      console.log(loader + '----load complete')

      this.grayLampTexture = loader.resources.grayLampTexture.texture
      this.yellowLampTexture = loader.resources.yellowLampTexture.texture
      //const greenLamp = loader.resources.greenLamp.texture
      //const redLamp = loader.resources.redLamp.texture

      // Create a 5x5 grid of sprites
      for (let i = 0; i < this.ELEMENTS; i++) {
        const lampSprite = new PIXI.Sprite(this.grayLampTexture)
        lampSprite.width = this.SPRITE_WIDTH
        lampSprite.height = this.SPRITE_HEIGHT
        lampSprite.anchor.set(0.5)
        lampSprite.x = (i % this.ROWS) * (this.SPRITE_WIDTH + this.GAP)
        lampSprite.y = Math.floor(i / this.ROWS) * (this.SPRITE_HEIGHT + this.GAP)
        lampSprite.interactive = true
        lampSprite.buttonMode = true

        this.sprites.push(lampSprite)

        lampSprite.on('mousedown', () => this.onLampClick(lampSprite))

        this.container.addChild(lampSprite)

        // Center lampSprite sprite in local container coordinates
        this.container.pivot.x = (this.container.width - this.SPRITE_WIDTH) / 2
        this.container.pivot.y = (this.container.height - this.SPRITE_HEIGHT) / 2
      }
      // Listen for animate update
      // Delta is the deltaTime. Could be usefull for smoth animation
      this.app.ticker.add(delta => {
        this.playDemo(delta)
      })
    },
    /**
     * Обработчик нажатия на элемент
     * @param {object} sprite - элемент
     * @returns {void}
     */
    onLampClick(sprite) {
      //console.log('sdfg')
      //this.isdown = true
      //this.texture = textureButtonDown
      //sprite.zIndex = 100
      sprite.texture = this.yellowLampTexture
    },
    /**
     * Returns a random integer between min (inclusive) and max (inclusive).
     * The value is no lower than min (or the next integer greater than min
     * if min isn't an integer) and no greater than max (or the next integer
     * lower than max if max isn't an integer).
     * Using Math.round() will give you a non-uniform distribution!
     * @param {number} min - min value
     * @param {number} max - max value
     * @returns {number}
     */
    getRandom(min, max) {
      min = Math.ceil(min)
      max = Math.floor(max)
      return Math.floor(Math.random() * (max - min + 1)) + min
    }
  }
}
</script>

 

Will be very appreciated for help.

[ivan.popelyshev]

It looks like general application debug problem. Add if's for NULL's where you access "texture" field, place breakpoints inside those ifs, find why are you trying to call "null.texture".

Also, beware of vue stuff that observes fields, or you'll have a problem like this: https://github.com/pixijs/pixi-spine/issues/358

Also, usually you can get faster help at russian-speaking html5 gamedev channels: https://t.me/gamedevforweb and https://t.me/webgl_ru

Edited October 15, 2020 by ivan.popelyshev

[Asgen]

On 10/15/2020 at 6:37 PM, ivan.popelyshev said:

It looks like general application debug problem. Add if's for NULL's where you access "texture" field, place breakpoints inside those ifs, find why are you trying to call "null.texture".

Also, beware of vue stuff that observes fields, or you'll have a problem like this: https://github.com/pixijs/pixi-spine/issues/358

Also, usually you can get faster help at russian-speaking html5 gamedev channels: https://t.me/gamedevforweb and https://t.me/webgl_ru

Thank you so much! Actually the problem was in the code.