R
roblox-ts•5mo ago
Ego*

Vide creating UI for Multiple entities

so i am using Vide, Charm and Matter in my project, and I would like to have one root for all the UI. The issue is i am not sure how to do that, currently when an enemy is added i call a function 
export const CreateEnemyOverhead = (OverheadProps: EnemyOverheadProps): void => {
    const newEnemies = Remap.set(Enemies(), OverheadProps.EnemyId, {
        HealthAtom: OverheadProps.EnemyHealth,
        Adornee: OverheadProps.Adornee,
    });

    Enemies(newEnemies);
};
export const CreateEnemyOverhead = (OverheadProps: EnemyOverheadProps): void => {
    const newEnemies = Remap.set(Enemies(), OverheadProps.EnemyId, {
        HealthAtom: OverheadProps.EnemyHealth,
        Adornee: OverheadProps.Adornee,
    });

    Enemies(newEnemies);
};
to add the info i need for a certain UI and when the enemies readonly map is updated it would be handled by a vide <For></For> but that can get messy really quickly as soon as i want to create more UIs for the enemies or need to pass more info, since i would just have a duplicate object of the enemy entity, so i am not sure how i could create UI that's not gonna stay for long, like be destroyed after a while, i will need to do that also with towers entities, i don't want to keep creating functions to add certain UI then another function to destroy these UIs, is there a better way to do that ?
9 Replies
Ego*
Ego*OP•5mo ago
root(() => {
    const EnemiesArray = useAtom(Enemies);

    <For
        each={() => {
            return EnemiesArray();
        }}
    >
        {(OverheadProps, EnemyId) => {
            return (
                <billboardgui
                    Parent={PlayerGui.FindFirstChild("EnemiesOverhead")}
                    Adornee={OverheadProps.Adornee as PVInstance}
                    Size={UDim2.fromScale(2, 0.75)}
                    StudsOffset={new Vector3(0, 1.5, 0)}
                >
                    <EnemyHealthUI Health={OverheadProps.HealthAtom} TextType={"Number Only"} />
                </billboardgui>
            );
        }}
    </For>;
});
root(() => {
    const EnemiesArray = useAtom(Enemies);

    <For
        each={() => {
            return EnemiesArray();
        }}
    >
        {(OverheadProps, EnemyId) => {
            return (
                <billboardgui
                    Parent={PlayerGui.FindFirstChild("EnemiesOverhead")}
                    Adornee={OverheadProps.Adornee as PVInstance}
                    Size={UDim2.fromScale(2, 0.75)}
                    StudsOffset={new Vector3(0, 1.5, 0)}
                >
                    <EnemyHealthUI Health={OverheadProps.HealthAtom} TextType={"Number Only"} />
                </billboardgui>
            );
        }}
    </For>;
});
Unknown User
Unknown User•5mo ago
Message Not Public
Sign In & Join Server To View
Ego*
Ego*OP•5mo ago
i did have it like that, but for someone reason it didn't update when something was added to the enemies array (actually it's a map, gotta rename it) making it into a function seems to have made it work also do you think there is a way to make it get the components of the newly created entity without me having to pass them all to a function which will just re-add them to a new map ? if i just pass the components of the entity to the function to put them into the map that would mean i am having 2 different containers (one of them is the matter world and the other is the Map atom that the UI relies on) and i think some stupid things can happen if i use that approach in the long term
Unknown User
Unknown User•5mo ago
Message Not Public
Sign In & Join Server To View
Ego*
Ego*OP•5mo ago
wait lemme try it again
Unknown User
Unknown User•5mo ago
Message Not Public
Sign In & Join Server To View
Ego*
Ego*OP•5mo ago
oh yeah i think i did make that mistake, it's working now just an object of data 
EnemyInfo({
                ModelName: newEnemyInfo.ModelName,
                Speed: newEnemyInfo.Speed,
                MaxHealth: newEnemyInfo.MaxHealth,
                AtomicHealth: HealthAtom,
                IsAir: newEnemyInfo.IsAir,
                Type: newEnemyInfo.Type,
                PathProgress: 0,
                TargetPathProgress: 0,
            }),
EnemyInfo({
                ModelName: newEnemyInfo.ModelName,
                Speed: newEnemyInfo.Speed,
                MaxHealth: newEnemyInfo.MaxHealth,
                AtomicHealth: HealthAtom,
                IsAir: newEnemyInfo.IsAir,
                Type: newEnemyInfo.Type,
                PathProgress: 0,
                TargetPathProgress: 0,
            }),
Unknown User
Unknown User•5mo ago
Message Not Public
Sign In & Join Server To View
Ego*
Ego*OP•5mo ago
i will look into that, maybe i could find a better way also thanks for helping me with the creation of UI

Did you find this page helpful?