Asgen

Members
  • Content Count

    2
  • Joined

  • Last visited

  1. Thank you so much! Actually the problem was in the code.
  2. 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. pixi-error.mov