Thread Tools Display Modes
07-21-17, 09:51 AM   #1
guema
A Deviate Faerie Dragon
Join Date: Aug 2016
Posts: 17
A good overflow-shrinking frame ?

Hello there.

So after weeks and months of test and search, im not able to find a good way to shrink content to a frame.

What i want to do is make a content, any content, even models or other frames (not only textures), only display inside a limited frame, or a texture. All overflowing, i means, part of the child frame out of it's viewport should not be displayed.

Yes, this is what ScrollFrame do. But i have some problems with ScrollFrame. It causes my interface to flicker when i use Hearthstone or Teleportation spell for exemple. This is non-sense, but the Model inside scroll frame cause it.

What i search is only this. A way to Shrink anything to a limited viewport Region but without scaling it down to this region. I want to make an growing frame, and make the content don't be affected by this growing, just be displayed.

Do someone knows an other way to do this ?

The exemple i remember was an kind of D3 orbs addon who could display a 3D model inside and Shrink it when you lose hp or ressources.
  Reply With Quote
07-21-17, 10:10 AM   #2
jeffy162
A Pyroguard Emberseer
 
jeffy162's Avatar
AddOn Author - Click to view addons
Join Date: May 2009
Posts: 2,364
I don't think the D3 orbs "shrink" the resources that are used, I think that it only appears to do that, but what it's really doing is hiding the resources that were used.

There is a forum thread about them from when Zork was working on them, I think.
__________________
Ahhhh, the vagueries of the aging mind. Wait.... What was I saying?


Carbonite <----- GitHub main module (Maps ONLY) download link. The other modules are also available on GitHub.
Carbonite-CLASSIC<----- GitHub link to Carbonite Classic. Thanks to ircdirk for this!
  Reply With Quote
07-21-17, 10:53 AM   #3
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 1,871
I think you're thinking about the SetTexCoord() function but that only works with textures. It allows you to "zoom/size" in/out to a certain area within a texture.
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle, FauxMazzleHUD and Move Pad Plus.

Last edited by Fizzlemizz : 07-21-17 at 10:58 AM.
  Reply With Quote
07-21-17, 11:28 AM   #4
guema
A Deviate Faerie Dragon
Join Date: Aug 2016
Posts: 17
https://www.youtube.com/watch?v=6LEvpbkzYlU

This is RothUI. Uggly bubbles on health/mana bar are models. look, it actually shrinking as the character uses ressources / lose hps.

The background is transparent. There is no apparent illusion, or covering by black texture. Maybe something about multiplying pixels by a mask textures or a filter idk, maybe a scrollframe well used, but there is something very powerful i try to get.

Last edited by guema : 07-21-17 at 11:32 AM.
  Reply With Quote
07-21-17, 01:34 PM   #5
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 1,871
Something like this (adjust the slider below the Warcraft logo)?
Code:
local function SetValue(frame, texture, value)
	local val = value / 100 * 100
	local width = frame:GetWidth()
	local bar = texture
	if val == 0 then val = .01 end
	val = val / 100
	if val > 1 then val = 1 end
	texture:SetWidth(width * val)
	texture:SetTexCoord(0, val, 0, 1)
end

local f = CreateFrame("Frame", nil, UIParent)
f:SetSize(200, 100)
f:SetPoint("CENTER", UIParent)
f.t = f:CreateTexture()
f.t:SetPoint("LEFT", f)
f.t:SetSize(f:GetWidth(), f:GetHeight())
f.t:SetTexture("Interface/Glues/Common/Glues-WoW-Logo")

local s = CreateFrame("Slider", nil, UIParent)
s:SetSize(150, 34)
s:SetBackdrop( { bgFile="Interface/Buttons/UI-SliderBar-Background", edgeFile="Interface/Buttons/UI-SliderBar-Border", tile=true, EdgeSize=8, TileSize=8, insets={ left=3, right=3, top=6, bottom=6 } })
s:SetOrientation("HORIZONTAL")
s:SetPoint("TOP", f, "BOTTOM")
s:SetMinMaxValues(0, 100, 0, -10)
s:SetThumbTexture("Interface/Buttons/UI-SliderBar-Button-Horizontal")
s:SetScript("OnValueChanged", function(self) SetValue(f, f.t, self:GetValue()) end)
s:Show()
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle, FauxMazzleHUD and Move Pad Plus.
  Reply With Quote
07-21-17, 01:57 PM   #6
guema
A Deviate Faerie Dragon
Join Date: Aug 2016
Posts: 17
Originally Posted by Fizzlemizz View Post
Something like this (adjust the slider below the Warcraft logo)?
Code:
local function SetValue(frame, texture, value)
	local val = value / 100 * 100
	local width = frame:GetWidth()
	local bar = texture
	if val == 0 then val = .01 end
	val = val / 100
	if val > 1 then val = 1 end
	texture:SetWidth(width * val)
	texture:SetTexCoord(0, val, 0, 1)
end

local f = CreateFrame("Frame", nil, UIParent)
f:SetSize(200, 100)
f:SetPoint("CENTER", UIParent)
f.t = f:CreateTexture()
f.t:SetPoint("LEFT", f)
f.t:SetSize(f:GetWidth(), f:GetHeight())
f.t:SetTexture("Interface/Glues/Common/Glues-WoW-Logo")

local s = CreateFrame("Slider", nil, UIParent)
s:SetSize(150, 34)
s:SetBackdrop( { bgFile="Interface/Buttons/UI-SliderBar-Background", edgeFile="Interface/Buttons/UI-SliderBar-Border", tile=true, EdgeSize=8, TileSize=8, insets={ left=3, right=3, top=6, bottom=6 } })
s:SetOrientation("HORIZONTAL")
s:SetPoint("TOP", f, "BOTTOM")
s:SetMinMaxValues(0, 100, 0, -10)
s:SetThumbTexture("Interface/Buttons/UI-SliderBar-Button-Horizontal")
s:SetScript("OnValueChanged", function(self) SetValue(f, f.t, self:GetValue()) end)
s:Show()
This is exactly this except what i want can work with a CreateFrame("PlayerModel", nil, UIParent) instead of the Wow logo texture.

Like in the video i linked. in this video, you can see a bubble model receiving the same kind of treatment you show in this exemple.

Thanks anyway for this, will be useful.

Im at the moment trying to make the ScrollFrame work, but it seems it fuck up with Model transform position or camera position...

But im still open for an eventual cleaner way. If someone knows

Tahnk you very much
  Reply With Quote
07-21-17, 02:31 PM   #7
Resike
A Pyroguard Emberseer
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 1,290
I'm not sure what are you trying to do. You want to display a model on a frame, and when you scale/resize the frame you want the model to have the camera position/camera target x, y, z values not to change just making the model smaller/bigger aka scaled?
  Reply With Quote
07-21-17, 03:21 PM   #8
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 1,871
I think he doesn't want the model to scale, just the frame so the model effectivly disapears as the frame gets smaller.

Eg. a portrait side on. As the frame gets smaller (thinner) the nose disapears off the edge, then chin, eyes, ears etc. Effectively using the portrait as a health bar.
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle, FauxMazzleHUD and Move Pad Plus.

Last edited by Fizzlemizz : 07-21-17 at 03:24 PM.
  Reply With Quote
07-21-17, 03:27 PM   #9
guema
A Deviate Faerie Dragon
Join Date: Aug 2016
Posts: 17
Originally Posted by Resike View Post
I'm not sure what are you trying to do. You want to display a model on a frame, and when you scale/resize the frame you want the model to have the camera position/camera target x, y, z values not to change just making the model smaller/bigger aka scaled?
No. See the example. What i want to do is basically this exemple, but with a ModelFrame object instead of a Texture object.

Its like a Viewport who only let me see a specific part of a Model. But a Viewport i can move or resize.

ScrollFrame is really near what i want, except it's full of bug or i don't understand how to make it work correctly.
  Reply With Quote
07-21-17, 03:50 PM   #10
guema
A Deviate Faerie Dragon
Join Date: Aug 2016
Posts: 17
Downloaded Roth UI (Diablo) Galaxy's Revival

Seems Roth UI use a playermodel inside a frame inside a ScrollFrame (Frameseption)

Code:
--scroll frame
local scrollFrame = CreateFrame("ScrollFrame", "$parentScrollFrame", orb)
scrollFrame:SetPoint("BOTTOM")
scrollFrame:SetSize(orb:GetSize())
	
--scroll child
local scrollChild = CreateFrame("Frame",nil,scrollFrame)
scrollChild:SetSize(orb:GetSize())
scrollFrame:SetScrollChild(scrollChild)
	

--orb model
local model = CreateFrame("PlayerModel",nil,scrollChild)
model:SetSize(orb:GetSize())
model:SetPoint("TOP")
model:SetAlpha(orbcfg.model.alpha or 1)
orb.scrollFrame = scrollFrame
going to investigate this.
  Reply With Quote
07-21-17, 04:00 PM   #11
guema
A Deviate Faerie Dragon
Join Date: Aug 2016
Posts: 17
Ok, it seems to work well. Unfortunatly, it's occure the same bug as before. When i click on an item in my bags, all my interface flicker.

I don't like this bug, because it is imo a possible sign of a terrific performance issue...
  Reply With Quote
07-21-17, 05:22 PM   #12
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 1,871
This seems to work for me and I don't have any bag lag problems.
Code:
local function SetValue(frame, texture, value)
	local width = frame.width
	local bar = texture
	if value == 0 then value = 0.01 end
	value = value / 100
	if value > 1 then value = 1 end
	width = width * value
	if width < 0.5 then width = 0.5 end 
	frame:SetWidth(width)
end

local f = CreateFrame("ScrollFrame", nil, UIParent)
f:SetSize(200, 200)
f.width = 200
f:SetPoint("LEFT", UIParent, "CENTER")
f.a = CreateFrame("Frame", nil, f)
f.a:SetSize(200, 200)
f.a:SetPoint("RIGHT", f)
f.t = CreateFrame("PlayerModel", nil, f.a)
f.t:SetSize(200, 200)
f.t:SetPoint("RIGHT", f.a)
f:SetScrollChild(f.a)

local s = CreateFrame("Slider", nil, UIParent)
s:SetSize(150, 34)
s:SetBackdrop( { bgFile="Interface/Buttons/UI-SliderBar-Background", edgeFile="Interface/Buttons/UI-SliderBar-Border", tile=true, EdgeSize=8, TileSize=8, insets={ left=3, right=3, top=6, bottom=6 } })
s:SetOrientation("HORIZONTAL")
s:SetPoint("CENTER", UIParent, 0, -150)
s:SetMinMaxValues(0, 100, 0, -10)
s:SetThumbTexture("Interface/Buttons/UI-SliderBar-Button-Horizontal")
s:SetScript("OnValueChanged", function(self) SetValue(f, f.t, self:GetValue()) end)
s:SetScript("OnEvent", function(self, event) 
		C_Timer.After(2, function() 
			f.t:SetUnit("player")
			f.t:SetPortraitZoom(1)
		end)
	end)
s:RegisterEvent("PLAYER_LOGIN")
s:Show()
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle, FauxMazzleHUD and Move Pad Plus.

Last edited by Fizzlemizz : 07-21-17 at 06:14 PM.
  Reply With Quote
07-21-17, 06:34 PM   #13
guema
A Deviate Faerie Dragon
Join Date: Aug 2016
Posts: 17
Thank you !!!!! i was arriving at the same conclusion. After testing

My flickering problem is not a perf problem :
Try to remove this condition and i think you will have the same
Code:
if width < 0.5 then width = 0.5 end
IMO i think the game doesn't support 0pixel height or width Model Frames.

Letting the slider in position 0 will destroy your interface. Can you confirm ? (/reload if it go insane)

Thank you very much for ur help !!!
  Reply With Quote
07-21-17, 06:43 PM   #14
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 1,871
Originally Posted by guema View Post
Try to remove this condition and i think you will have the same
Code:
if width < 0.5 then width = 0.5 end
With mine (using inventorian) it hides my entire bag frame with the exception of the stack counters but no performance/visual glitch.
I changed the code a little too:
Code:
	width = width * value
	if width < 0.5 then 
		if frame.hidden then return end
		frame:Hide()
		frame.hidden = true
	else
		frame:SetWidth(width)
		if frame.hidden then 
			frame:Show()
			frame.hidden = nil
		end
	end
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle, FauxMazzleHUD and Move Pad Plus.

Last edited by Fizzlemizz : 07-21-17 at 06:47 PM.
  Reply With Quote
07-21-17, 06:49 PM   #15
guema
A Deviate Faerie Dragon
Join Date: Aug 2016
Posts: 17
Yeah, thanks, your code is :

Code:
if "too small to be displayed properly" then "hide it" end
Thanks, was going to do something like this too ^^

About bugs, i fuck up all default UI frames i have seen, like spell book, talent panel, target etc.
I think you can reproduce if you still have any default frame in your UI.

If you can, ill add a warn on gamepedia

Thank you again, it is really kind.
  Reply With Quote
07-21-17, 06:59 PM   #16
Fizzlemizz
I did that?
 
Fizzlemizz's Avatar
Premium Member
AddOn Author - Click to view addons
Join Date: Dec 2011
Posts: 1,871
Certainly lots of interesting effects with things like the map and the game menu when the setting gets below 0.5. It certainly seems to effect every Blizzard UI frame.
__________________
Fizzlemizz
Maintainer of Discord Unit Frames and Discord Art.
Author of FauxMazzle, FauxMazzleHUD and Move Pad Plus.
  Reply With Quote
07-21-17, 07:04 PM   #17
guema
A Deviate Faerie Dragon
Join Date: Aug 2016
Posts: 17
Knew it haha ^^

Ok, thanks, ill add a warning on wowpedia.
  Reply With Quote
07-21-17, 09:59 PM   #18
Gethe
RealUI Developer
 
Gethe's Avatar
Premium Member
Featured
Join Date: Sep 2008
Posts: 942
As an alternative to scrollframes you can use a regular frame and call frame:SetClipsChildren(true). You can see my example addon. This creates it using XML, but the frame method is the same as the xml attribute.


As an aside, one of the UI devs for WoW has mentioned the intention to rewrite scrollframes to instead use this new attribute.
__________________
Knowledge = Power; Be OP


Last edited by Gethe : 07-21-17 at 10:02 PM.
  Reply With Quote
07-22-17, 06:05 AM   #19
guema
A Deviate Faerie Dragon
Join Date: Aug 2016
Posts: 17
Originally Posted by Gethe View Post
As an alternative to scrollframes you can use a regular frame and call frame:SetClipsChildren(true). You can see my example addon. This creates it using XML, but the frame method is the same as the xml attribute.


As an aside, one of the UI devs for WoW has mentioned the intention to rewrite scrollframes to instead use this new attribute.
Wow ! thanks, this is very interesting !
Did not know the existence of this method.
Will give a try

Thank you very much !

Edit: Works like a charm. Adopted. Allow me to remove scrollframe and remove a frame layer. This solution require only one frame and a model frame.

Last edited by guema : 07-22-17 at 06:18 AM.
  Reply With Quote

WoWInterface » Developer Discussions » General Authoring Discussion » A good overflow-shrinking frame ?

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off