[Tutorial] Pop-Up MOD (OTClient + TFS 1.4)

A mod that, when triggered, displays a popup on the screen with an image, text, and a sound. The sound is optional — you can choose to use only the image and text if you prefer.

💻Client Side

Create a folder inside the client's 'mods' folder named popup_mod. Inside it, create the following subfolders: img for images and soundsfor sound effects. In the root of the popup_mod folder, create the following files: popup_mod.lua, popup_mod.otmod, and popup_mod.otui

Inside the 'img' folder, place the images with a size of 32x32 pixels in .png format. By default, the mod will display them at 64x64 pixels. You can change this on line 28 of the Lua file by modifying: iconSize = { width = 64, height = 64 },to adjust the size or zoom as needed. Inside the 'sounds' folder, you can add sound effects in .ogg format. For example: 'error sound.ogg'. The system supports spaces in file names.

🔧 About the Configurations:

The popup behavior, appearance, and layout are fully customizable in the config section of the popup_mod.lua file. Here’s what each option does:

  • displayTime – Duration the popup stays on screen (in milliseconds). Example: 3000 = 3 seconds.

  • interactive – If set to true, the popup can be clicked or interacted with. Default is false (just displays).

  • fadeOut – Controls the fade-out effect:

    • enabled – Turn fade-out on/off (true or false).

    • duration – Total fade-out time in milliseconds (500 = half a second).

    • interval – Speed of fade steps (50 milliseconds).

  • position – Defines where the popup appears on the screen:

    • top – Distance from the top (pixels).

    • right – Distance from the right (pixels).

  • spacing – Space between multiple popups (in pixels).

  • maxPopups – Maximum number of popups shown at the same time.

  • maxPopupsBehavior – What happens when the limit is reached:

    • 'remove_oldest' – Removes the oldest popup.

    • 'ignore' – Ignores new popups until space is available.

  • size – Popup window size:

    • width – Width in pixels (600).

    • height – Height in pixels (80).

  • iconSize – Size of the image/icon:

    • width and height – Default 64x64 (can be adjusted for zoom or fit).

  • image – Image appearance:

    • opacity – Transparency level (1.0 = fully visible).

    • smooth – If true, enables smooth scaling of images.

  • text – Text styling:

    • fontSize – Size of the text (16).

    • color – Color of the text (#FFFFFF for white).

    • align – Text alignment ('left' by default).

    • margin – Inner spacing around the text (left, right, top, bottom in pixels).

    • position – Text position relative to the image (relativeTo = 'right' with a distance = 10).

    • wrap – If true, enables text wrapping.

    • maxHeight – Limits text height (0 means no limit).

  • backgroundColor – Background color of the popup (#000000b0 = semi-transparent black).

💻Server Side

Navigate to: Server\data\lib\compat\compat.lua Then, add the following code at the very end of the file:

function Player.sendPopupMessage(self, ...)
    local buffer = table.concat({...}, ",")
    self:sendExtendedOpcode(55, buffer)
end

Example 1 – With sound, image, and text:

player:sendPopupMessage("sound=error", "bucket", "You don't have enough water.")

🔊 Sound: error 🖼️ Image: bucket 📝 Text: "You don't have enough water."

  • The sound is located in the sounds folder with the .ogg extension.

  • The image is located in the img folder with the .png extension.

Example 2 – With image and text only (no sound):

player:sendPopupMessage("bucket", "You don't have enough water.")

🖼️ Image: bucket 📝 Text: "You don't have enough water."

  • The image is located in the img folder with the .png extension.

🔥 RevScript Example – Check Money and Show Popup if Not Enough:

local popupItem = 26453 -- Item ID to trigger the popup
local requiredMoney = 10000 -- Money required (in gold coins)
local popupAction = Action()

function popupAction.onUse(player, item, fromPosition, target, toPosition, isHotkey)
    if player:getMoney() < requiredMoney then
        player:sendPopupMessage("sound=no money", "money", "You don't have enough money.")
        return true
    end

    -- If the player has enough money, you can do something here.
    player:sendTextMessage(MESSAGE_EVENT_ADVANCE, "You have enough money!") 
    -- Or remove money, give an item, etc.

    return true
end


I hope this helps anyone who needs it! 😄 If you'd like to support me, here are my details:

💖 PayPal: darcio1989@gmail.com 💸 PIX: (14) 99665-9919

Any help is greatly appreciated! Thank you so much for your support! 🙏✨

Atualizado