How do i make an item GUI system with Object-Oriented-Programming?

Help and Feedback Scripting Support
, , ,
#1

Hi, i’m making a powerup system for my game. When a powerup is collected by the player, it appears in one of the unoccupied slots in this GUI:
image
I’ve already made it work with regular programming, but i’m wondering how i could make it work using Object-Oriented Programming, if i even do need to use it for this.

1 Like
#2

For this problem try to think as if you were to upscale the system and add like 1000x powerups instead of 3.

In both ui modules fusion and rpact you would consider 1 powerup icon as a component / object which would be just 1 circle ui with a number attached. Then you can easily clone it 1000x times.

https://elttob.uk/Fusion/0.4/tutorials/best-practices/components/

https://roblox.github.io/roact/guide/components/

2 Likes
#3

I like what @dthecoolest is suggesting here, a component for each powerup slot would be principally DRY code.

If you choosing to use OOP, prefer composition over inheritance. This will let you more easily decouple behaviours, and potentially build specific components for each composed class.

Let’s say we built a ‘Powerup’ class that accepts a string name, and our fire sling powerup needs a GUI.

First, build the FireSling powerup class:

local FireSling = {}
FireSling.__index = FireSling

function FireSling.new()
    local self = setmetatable({}, FireSling)
    self.powerup = Powerup.new("Fire Sling") -- we are composing the Powerup class

    return self
end

function FireSling:execute()
    self.powerup:execute() -- running some base behaviour
end

Now for the GUI, we need to build a component for the power class we composed.

Here I’ll show a Vide component, as it’s my favourite library. I recommend you check it out!

local root = vide.root
local source = vide.source
local create = vide.create

-- let's define our source to hold what's in slot 1
local slot1 = source()

-- let's create our component
function PowerupButton(powerup_slot)
    return create "TextLabel" {
        -- ...

        -- Implicit effect for Text, uses powerup_slot as a dependency
        Text = function()
            local powerup = powerup_slot()

            return if powerup then powerup.name else "none"
        end
    }
end

-- needs to be in a vide root for it to track effects
root(function()
    -- build our component, giving the slot1 source
    local slot1_button = PowerupButton(slot1)
    slot1_button.Parent = ...
end)


-- create that fire sling powerup
local fire_sling = FireSling.new()

-- update the slot with the composed class
slot1(fire_sling.powerup)

Now our GUI will reactively update whenever the slot1 source is updated.

We can easily expand this system to any amount of powerups and slots!

3 Likes
#4

How would i do this with pre-exisitng GUIs instead of creating new ones every time ?

#5

How exactly would i do this with pre-exisitng GUIs instead of creating new ones every time ?

#6

You can either:

  • write vide code to replicate the pre-existing GUI
  • use a plugin such as Codify to turn the pre-exisiting GUI into code
  • use vide.apply to apply over existing instances
vide.apply(preexisting_instance)({
    ...
    Text = ...
})