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

Just started gui system...


Blitzbat

3,066 views

 Share

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.

 Share

9 Comments


Recommended Comments

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:

Link to comment

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.

Link to comment

@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?

Link to comment

@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.

Link to comment

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! ;)

Link to comment
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...