How to Add Vignette to Modded Character?

[AXYER]

   Hi all!

   I am extremely new to the world of Don’t Starve Together modding, and definitely need a lot of help.

   I’d like to ask: How would one go about adding a vignette to the screen? Namely one that does NOT obscure the hud, day-night timer, inventory, etc.

   Much appreciated!!! Thank you!!!

[oregu]

I would try adding a widget to the under_root of the playerhud.

widget file (scripts/widgets/yourunderlay.lua) ... i used nutrient vision as a template.

Spoiler

local Widget = require "widgets/widget"
local Image = require "widgets/image"

Assets = -- Must be in modmain as well
{    
	Asset("ATLAS", "images/screens.xml"),
	Asset("IMAGE", "images/yourunderlay.tex"),
}

local YourUnderlay =  Class(Widget, function(self, owner, modname, MODROOT)
    self.owner = owner
    Widget._ctor(self, "YourUnderlay")

    self:SetClickable(false)

    self.bg = self:AddChild(Image("images/screens.xml", "yourunderlay.tex"))
    self.bg:SetVRegPoint(ANCHOR_MIDDLE)
    self.bg:SetHRegPoint(ANCHOR_MIDDLE)
    self.bg:SetVAnchor(ANCHOR_MIDDLE)
    self.bg:SetHAnchor(ANCHOR_MIDDLE)
    self.bg:SetScaleMode(SCALEMODE_FILLSCREEN)
    self.bg:SetTint(1,1,1,0.75)

    self:Hide()

    self.inst:ListenForEvent("yourhudvisible", function(owner, data) self:Toggle(data.enabled) end, TheWorld)
    if owner then
		if owner:IsValid() then -- Make some check whether to enable during init....
			self:Toggle(true)
		end
    end
end)

function YourUnderlay:Toggle(show)
    if show and not self.shown then
        self:Show()
    elseif not show and self.shown then
        self:Hide()
    end
    self.shown = show
end

return YourUnderlay

modmain (or something similar)

Spoiler

local YourUnderlay = require"widgets/yourunderlay"  
AddClassPostConstruct("screens/playerhud", function(self)
	self.under_root:AddChild(YourHud(ThePlayer, modname, MODROOT))
end)

what are your results with that?..

if you need to convert a png to a .tex file i usually use https://forums.kleientertainment.com/files/file/73-handsome-matts-tools/ or something similar

Edited April 8, 2025 by oregu

[RexySeven]

3 hours ago, oregu said:

I would try adding a widget to the under_root of the playerhud.

widget file (scripts/widgets/yourunderlay.lua) ... i used nutrient vision as a template.

  Reveal hidden contents

local Widget = require "widgets/widget"
local Image = require "widgets/image"

Assets = -- Must be in modmain as well
{    
	Asset("ATLAS", "images/screens.xml"),
	Asset("IMAGE", "images/yourunderlay.tex"),
}

local YourUnderlay =  Class(Widget, function(self, owner, modname, MODROOT)
    self.owner = owner
    Widget._ctor(self, "YourUnderlay")

    self:SetClickable(false)

    self.bg = self:AddChild(Image("images/screens.xml", "yourunderlay.tex"))
    self.bg:SetVRegPoint(ANCHOR_MIDDLE)
    self.bg:SetHRegPoint(ANCHOR_MIDDLE)
    self.bg:SetVAnchor(ANCHOR_MIDDLE)
    self.bg:SetHAnchor(ANCHOR_MIDDLE)
    self.bg:SetScaleMode(SCALEMODE_FILLSCREEN)
    self.bg:SetTint(1,1,1,0.75)

    self:Hide()

    self.inst:ListenForEvent("yourhudvisible", function(owner, data) self:Toggle(data.enabled) end, TheWorld)
    if owner then
		if owner:IsValid() then -- Make some check whether to enable during init....
			self:Toggle(true)
		end
    end
end)

function YourUnderlay:Toggle(show)
    if show and not self.shown then
        self:Show()
    elseif not show and self.shown then
        self:Hide()
    end
    self.shown = show
end

return YourUnderlay

modmain (or something similar)

  Hide contents

local YourUnderlay = require"widgets/yourunderlay"  
AddClassPostConstruct("screens/playerhud", function(self)
	self.under_root:AddChild(YourHud(ThePlayer, modname, MODROOT))
end)

what are your results with that?..

if you need to convert a png to a .tex file i usually use https://forums.kleientertainment.com/files/file/73-handsome-matts-tools/ or something similar

Is it possible to change overlay's opacity? 
I tried with self.alpha: but it didn't work for me. 

[oregu]

When it comes to the image widget, r,g,b,a is handled by self.tint or the SetTint fn.

If you wanna change just the alpha you would do

local tint = {unpack(self.bg.tint)}

tint[4] = 0.5

self.bg:SetTint(unpack(tint))

unpack converts the table values as arguments. i unpacked to create a table because i wanted to make a new table without changing the previous table.

if you were to do local tint = WHITE and then tint[4] = .5, it would make everything that uses WHITE (a constant that means {1,1,1,1}) as a color less opaque as well, which we dont want. which is usually why i do

local tint = {unpack(WHITE)} instead, for example.

also another tip, if u want a custom color as a tint, it may be easier to do

local tint = RGB(255,255,255) tint[4] = 0.5 (tint[4] is 1 by default)

Edited April 8, 2025 by oregu