Jump to content
  • entries
    2
  • comments
    12
  • views
    4,271

Just started gui system...


After a few days of trying to integrate cegui into leadwerk I've decided to develop my own gui system in leadwerks.

It will be a full skinable gui system. Today I finished the imageset loader to define imagesets.

Imagesets are described in xml.

Here is an example:

 

<?xml version="1.0" encoding="utf-8" ?>
<guiconfig>
<imagesets>		
	<imageset name="window">
		<image relation="topLeft" width="10" height="10">
			<![CDATA[abstract::windowTopLeft.dds]]>
		</image>
		<image relation="topRight" width="10" height="10">
			<![CDATA[abstract::windowTopRight.dds]]>
		</image>
		<image relation="bottomRight" width="10" height="10">
			<![CDATA[abstract::windowBottomRight.dds]]>
		</image>			
		<image relation="bottomLeft" width="10" height="10">
			<![CDATA[abstract::windowBottomLeft.dds]]>
		</image>			
		<image relation="top" width="2" height="10">
			<![CDATA[abstract::windowTop.dds]]>
		</image>
		<image relation="left" width="10" height="2">
			<![CDATA[abstract::windowLeft.dds]]>
		</image>
		<image relation="right" width="10" height="2">
			<![CDATA[abstract::windowRight.dds]]>
		</image>				
		<image relation="bottom" width="2" height="10">
			<![CDATA[abstract::windowBottom.dds]]>
		</image>			
		<image relation="fill" width="10" height="10">
			<![CDATA[abstract::windowFill.dds]]>
		</image>
	</imageset>

</imagesets>
</guiconfig>

 

This is a sample for defining a window imageset.

 

And here is the result after adding a window (It's programmer art :))

 

blogentry-125-12637618734928_thumb.jpg

 

So the next task is to handle input for moving or scaling elements.

 

TODO:

I must find a way to tile seamless textures for the fill texture.

9 Comments


Recommended Comments

Canardia

Posted

Couldn't the frame be done with scalable vector graphics instead of using bitmaps?

With bitmaps it will look quite different on 640x480 and 1920x1080 displays.

Of course you can scale bitmaps also, but then you need some good algorithm that it doesn't look like it was scaled in PaintBrush :unsure:

Rick

Posted

With the way he has it setup, you scale the edges and the corners stay the same. Scaling the edges doesn't mess anything up.

 

Are you using C++ for this? If so I have a pretty neat event system you might be interested in. It allows for event programming similar to C# where class methods can be used for events.

Blitzbat

Posted

@Lumooja:

Yes sure. But the only bitmaps that are scaled are the top left right and bottom lines.

They are 2 px images.

 

@Rick:

No I'm using blitzmax at the moment. But i can write an implementation of it?

Roland

Posted

I applause the use of XML for it;

Rick

Posted

@Blitzbat, no I seem to remember that BMax doesn't have the needed features to get this working. The system uses templates to make it work.

 

The code is sort of complex to understand but easy to use, if that makes sense. Defining an event and using it is super easy, but looking at how it works under the hood can seem confusing.

 

I'll see if I can find it now. Been awhile since I used it.

L B

Posted

Wow, I have the same system in C#. Called it Facewerk.

Josh

Posted

This is how I would do it. I will keep an eye on this.

Rick

Posted

Oh, you got me thinking now. Another Thingoid is bouncing around in my head. A GUI Thingoid that you drag into your scene. You give it an xml file that describes all the GUI elements you want in your scene and it displays it. Also allows you to send messages to it to pass along information to the GUI elements. Work must begin instantly! ;)

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...