Adding an item with ui selection

Phaser 3
1

I’ve been working on an idea for a game but ran into a problem. The goal is to add an item to the inventory and have it update,. If I click the button in my codepen demo, I can add an item to the inventory. What I’m having trouble with is handling with the selection, it neither operates the way I want it to. I’d prefer to stay in its original state, unselected, not greyed out.

I’ve been following a video tutorial.

I made a code pen to demonstrate this problem. here

Any help or suggestions would be much appreciated!

class ToolInventoryScene extends Phaser.Scene {
  constructor() {
    super("ToolInventoryScene")
    this.rows = 1
    this.uiScale = 1.5
    this.gridSpacing = 4
    this.margin = 8
    this._tileSize = 32
    this.inventorySlots = []
  }
  preload() {
    this.load.atlas("items", "https://i.ibb.co/L8YLMvt/tools.png", json)
  }
  init(data) {
    this.inventory = data.inventory
    this.maxColumns = data.inventory.maxColumns
    this.maxRows = data.inventory.maxRows
  }
  get tileSize() {
    return this._tileSize * this.uiScale
  }
  refresh() {
    for (let index=0; index < this.maxColumns * this.rows; index++) {
      let x = this.margin + this.tileSize / 2 + (index * (this.tileSize + this.gridSpacing)) + 90;
      let y = this.margin + this.tileSize / 2
      let inventorySlot = this.add.sprite(x,y, "items", "panel.png")
      inventorySlot.setScale(this.uiScale)
      let item = this.inventory.getItem(index)
      if (item) {
        inventorySlot.item = this.add.sprite(inventorySlot.x, inventorySlot.y, "items", items[item.name].frame)
      }
      this.inventorySlots.push(inventorySlot)
    } 
    this.updateSelected()
         
  }
  create() {
    
    this.button = this.add.sprite(30,30, "items", "fire.png").setInteractive()
    this.button.on("pointerdown", () => {
    console.log("clicked")
      console.log(this.inventory)
      this.inventory.addItem({name: "Short Sword", quantity: 1})
      this.refresh()
      console.log(this.inventory.items)
    })
    this.input.keyboard.on("keydown-ONE", () => {
      this.inventorySlots[0].tint = 0xffff00
      this.inventorySlots[1].tint = 0xfffff
    })    
    this.input.keyboard.on("keydown-TWO", () => {
      this.inventorySlots[1].tint = 0xffff00
      this.inventorySlots[0].tint = 0xfffff
    })
    this.refresh()    
  }
  updateSelected() {
    for (let i= 0; i < this.maxColumns; i++) {
      this.inventorySlots[i].tint = this.inventory.selected === i ? 0xffff00 : 0xfffff
    }
  }
}
2

refresh() is creating new sprites each time.

1 Like
3

I can see that I’m creating new sprites, with whats inside the refresh function, I’m not suprised seeing as I had no idea what I was doing at time. I’m quite unsure how to solve this problem. How would I update the scene without creating new sprites? Would I have to change everything about the code? Or is there some logic I’m missing?

Edit:

So I’m continuing this video tutorial and they’re using the observer pattern. I think I continue this video because this may solve my problem.

Edit again:

In the tutorial, they created a destroyInventorySlot function that is set early in the refresh() function. I’m going to update my codepen to reflect. Also your additions have helped me learn something new. Thanks a lot for the help once again.

1 Like