Custom Achievement UI/Animation

[B0XSHARK]

Hello! I just wanted to know how to do the badge thing like how doors does it. They have custom badge UI, and I was wondering how could I do that? This is the first time I’ve seen a game do it before.

Thanks

[GuySalami]

What I’ve done is make a main function for badges (sometimes in a main script or in a separate script), and when it gets called (main script), or called with a bindable event (separate script), it then send a ui with the text I want, usually the badge title and description, as well as an image, then award the badge to the player.

EDIT: here are some resources, HasBadge (don’t want to send it twice), AwardBadge (actual function to tell Roblox they get a badge, use this after sending the ui animation), and GetBadgeInfoAsync (gets the badge info, so you can set the text).

[bluebxrrybot (blueberry)]

On the client, use game.StarterGui:SetCore("BadgesNotificationsActive", false) to turn off the original badge UI. Then, use a remote event to tell the client to start your custom badge UI animation. To get the info of the badge, I recommend using the Badges API.

https://badges.roblox.com/docs/

You need to use a proxy to interact with roblox api through roblox, I recommend roproxy.com.
That means, the url will translate to:

local url = "https://badges.roproxy.com/v1/universes/"..game.GameId.."/badges?limit=50"
local data = game.HttpService:JSONDecode(game.HttpService:GetAsync(url))
warn(data) --> {...}

This returns the data for all the badges in your game. Use this data for every player so you don’t need to get it again every time.

[GuySalami]

Just to clarify somethings, you should not use a proxy for this, especially when you don’t have to (see this).

An alternative is to make a dictionary, set the keys to all the badges you will use in the notification, then call the GetBadgeInfoAsync for every key in the dictionary, setting their values to {Name: "", Description: "", ImageId: ""}, then you can use this dictionary for the ui.