Jump to content

GUI Class hidding what's outside of it


Recommended Posts

Hi,

I've been looking for this type of gui element that hide what's outside of it.

Exemple here:

 

A few servers are using this kind of gui with a new scrolling type.

I'm just curious of what's used to achieve this, how it works.

 

Thanks in advance.

Spoiler

Edited by Metin2 Dev
Core X - External 2 Internal
  • Scream 1
  • Good 1
Link to comment
Share on other sites

Hi,

Thanks for your answer.

 

I'm aware about ListBox and ComboBox.

What I'm asking for is how is made the smooth scrolling and the cut of the components at the top and bottom of the window.

 

 

Thanks again.

Spoiler

Edited by Metin2 Dev
Core X - External 2 Internal
Link to comment
Share on other sites

Bump.

 

In the first place I thought it was some sort of workaround using a list and some "image bar" at the top and bottom of the list.

But in this case, the item would appear outside the window here:

 

Maybe it's just a simple window inside a window moving on height with a custom layer applyed ?

But then, as this new layer would be below the game and the gui, the parent window should be above...

 

What do you think ?

Spoiler

Edited by Metin2 Dev
Core X - External 2 Internal
Link to comment
Share on other sites

Honestly I can't see what are you talking about, i just see a tooltip of a item shown over a list box

25 minutes ago, ElRenardo said:

Bump.

 

In the first place I thought it was some sort of workaround using a list and some "image bar" at the top and bottom of the list.

But in this case, the item would appear outside the window here:

 

Maybe it's just a simple window inside a window moving on height with a custom layer applyed ?

But then, as this new layer would be below the game and the gui, the parent window should be above...

 

What do you think ?

 

Spoiler

Edited by Metin2 Dev
Core X - External 2 Internal
Link to comment
Share on other sites

Oh now I got what you were talking about, classic listbox will scroll for index so first item is always centered and as you scroll you skip from index to index making it centered everytime on the same starting position. If you want to change this you should create a new ui class ListBox in python that will not handle items by index but by height. So for example you declare self.heigth = 0
Then for each list item you are going to append you will have self.height += itemheight. And remember changing every function using index instead of height for actions on the listbox for example:

current list box SetBasePos function
		def SetBasePos(self, basePos, forceRefresh = TRUE):
			if forceRefresh == FALSE and self.basePos == basePos:
				return

			for oldItem in self.itemList[self.baseIndex:self.baseIndex+self.viewItemCount]: #using index here
				oldItem.ResetCurrentHeight()
				oldItem.Hide()

			self.basePos=basePos

			baseIndex = 0					#AND FROM HERE TO END	
			while basePos > 0:																		
				basePos -= self.itemList[baseIndex].GetHeight() / self.stepSize					
				if basePos < 0:														
					self.itemList[baseIndex].SetRemoveTop(self.stepSize * abs(basePos))								
					break																			
				baseIndex += 1																		
			self.baseIndex = baseIndex																

			stepCount = 0																
			self.viewItemCount = 0
			while baseIndex < len(self.itemList):
				stepCount += self.itemList[baseIndex].GetCurrentHeight() / self.stepSize
				self.viewItemCount += 1
				if stepCount > self.viewSteps:
					self.itemList[baseIndex].SetRemoveBottom(self.stepSize * (stepCount - self.viewSteps))
					break
				elif stepCount == self.viewSteps:
					break
				baseIndex += 1

			y = 0
			for newItem in self.itemList[self.baseIndex:self.baseIndex+self.viewItemCount]:
				newItem.SetPosition(0, y)
				newItem.Show()
				y += newItem.GetCurrentHeight()

 

Link to comment
Share on other sites

  • Premium
Spoiler

 

I guess this is what you are searching for. I recently used this technique in my new wiki (ignore the cursor, its position is fucked up in the gif): https://metin2.download/picture/KAC47a5f2jVYlnjMo28490u1Fsm4y11n/.gif
The trick is exactly what you were thinking in your post above: First, you need a main window. We set this window's size to exactly as big as we need. Then lets make another window inside it, and make it as big as we need to store all elements we need in it. Then when you scroll we just have to move this inner window.

But... you have to create a function (obviously this is the hard part of it) that handles the inner window. So basically it hides those parts of the window that is outside of the main window. I've seen some different implementation already, where they did this python side using the SetRenderingRect function, but I would avoid that (like I did) cus it would make the whole code a mess.

Instead, I would recommend you to modify the render functions directly.
What I did was:

  • created a new bool "isInsideRender" which I can set if the window need to check if its outside from its parent
  • created a RECT "render box" where I store how much is the current window is outside from its parent window
  • modified the necessary functions like set size, set position, etc, where I update the render box if the isInsideRender is set
  • modified the necessary windows (image box, textline) renders to render only the visible parts of the window according to the stored data in the render box

Obviously I won't release it (sadly) like I didn't do it in the past ~1 year, but if you have some more questions about it (which is not like "can you show me the exact code") I'm here to help.

Edited by Metin2 Dev
Core X - External 2 Internal
  • Love 3

The one and only UI programming guideline

Link to comment
Share on other sites

Sorry you got it wrong again @OtherChoice but thank you very much for the effort.

 

It's exactly what I'm talking about @masodikbela.

I understand the path now. The problem for me is to modify the render function of all the elements as I don't know how I can avoid the render of the parts outside the window.

Of course the ExpandedImage is already doing so with the RenderingRect function, but now, implement that on every assets... It's more complicated than I thought it would be.

 

Link to comment
Share on other sites

  • Bronze
hace 1 hora, ElRenardo dijo:

Sorry you got it wrong again @OtherChoice but thank you very much for the effort.

 

It's exactly what I'm talking about @masodikbela.

I understand the path now. The problem for me is to modify the render function of all the elements as I don't know how I can avoid the render of the parts outside the window.

Of course the ExpandedImage is already doing so with the RenderingRect function, but now, implement that on every assets... It's more complicated than I thought it would be.

 

If you have Dx9 this link could be usefull: https://stackoverflow.com/questions/14629910/simple-clipping-in-directx-9

  • Good 1
  • Love 2
Link to comment
Share on other sites

I'm not using DX9. But thanks for the research.

 

Of course it could be great to just create a rect and be able to show only what's inside of it even if some other classes render outside.

Isn't that the way the RenderTarget works ?

 

For now I created a rendermode for windows that changes the rect of every child windows to the size of the parent.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now

Announcements



×
×
  • Create New...

Important Information

Terms of Use / Privacy Policy / Guidelines / We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.