Sign in to follow this  
Asgen

Ticker error sometimes appears, sometimes doesn't

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites
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. 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.