New GUI system

Discuss anything that is related to OpenArcanum.
Post Reply
User avatar
Crypton
Arronax's Best Friend
Arronax's Best Friend
Posts: 420
Joined: Wed Jul 08, 2009 5:04 am
Location: Abyss
Contact:

New GUI system

Post by Crypton » Tue Nov 24, 2009 4:47 am

Here is new gui system I've designed, and implemented into OpenArcanum, everything will be dynamic, saved in *.gui files, so anybody can design own GUI or modify existing in any way.

Have a look at example, taken from "game_top.gui" file:

Code: Select all

.AGuiWindow
{
	$name = wnd_top;
	$width = 800;
	$height = 600;
}

.AGuiButton
{
	$parent = wnd_top;
	$name = btn_test;
	$visible = true;
	$enabled = true;
	$animated = true;
	$offset = 10,10;
	$width = 800;
	$height = 600;
	$sprite = acid_scheme.ART;
}
Every class is derived from AGuiWidged, so every class has at least same properties as .AGuiButton.

Its still missing a command execution, but there is rendering and gui loader already implemented, so its possible to start recreating original GUI, if anybody is interested, I can give him full documentation, and application to preview GUI.

Any suggestions are welcomed ;)

User avatar
Crypton
Arronax's Best Friend
Arronax's Best Friend
Posts: 420
Joined: Wed Jul 08, 2009 5:04 am
Location: Abyss
Contact:

Re: GUI Talk - New system

Post by Crypton » Wed Nov 25, 2009 12:09 am

After one day, I've managed to get things work and implement a two in game gui windows, top and bottom.

Preview:
Image

Code: Select all

28.09.2010: - Source code removed...

User avatar
rroyo
Ailing Wolf
Ailing Wolf
Posts: 37
Joined: Thu Aug 13, 2009 8:38 pm

Re: GUI Talk - New system

Post by rroyo » Wed Nov 25, 2009 12:17 am

Looks impressive, Crypton, however - Call me dense if you want - but what is this used for?
Is it an aid to debug the game that's using your new engine?
If you can't go through a problem, go over it, under it, or around it.

User avatar
Crypton
Arronax's Best Friend
Arronax's Best Friend
Posts: 420
Joined: Wed Jul 08, 2009 5:04 am
Location: Abyss
Contact:

Re: GUI Talk - New system

Post by Crypton » Wed Nov 25, 2009 1:20 am

rroyo wrote:Looks impressive, Crypton, however - Call me dense if you want - but what is this used for?
Is it an aid to debug the game that's using your new engine?
Well, my mistake, I didnt described what is this for, now I see.

As you know, in Arcanum, almost everything is hardcoded, not much modder friendly, so its not possible to edit anything easily, without reversing and patching executable directly.

A example posted above, shows that in OpenArcanum, GUI is not hardcoded, its loaded from text files at game startup, so its possible to edit GUI, create new one, or add your own windows and other stuff.

Also, after I finish Lua script implementation, it will be possible to launch a Lua script when you click on some button in game for example, so you can script actions as well.

PS: I will post a preview video from OpenArcanum today/tomorrow so you might check it out.

User avatar
rroyo
Ailing Wolf
Ailing Wolf
Posts: 37
Joined: Thu Aug 13, 2009 8:38 pm

Re: GUI Talk - New system

Post by rroyo » Wed Nov 25, 2009 3:40 am

That is really cool!

And yes, I would like to see this in action.
If you can't go through a problem, go over it, under it, or around it.

User avatar
Crypton
Arronax's Best Friend
Arronax's Best Friend
Posts: 420
Joined: Wed Jul 08, 2009 5:04 am
Location: Abyss
Contact:

Re: GUI Talk - New system

Post by Crypton » Tue Sep 28, 2010 4:17 pm

I just simplified that gui configuration:

Code: Select all

.window
{
	name = wnd_game_bottom;
	visible = true;
	enable = true;
	animate = false;
	offset = 0x440;
	width = 820;
	height = 180;
}

.widget
{
	name = wid_back;
	visible = true;
	enable = true;
	animate = false;
	offset = 0x0;
	sprite = gui/bottom/intbotom.png;
 	onclick = gui/bottom/script.lua;
}
However, I think that probably using Lua for that will be better approach to setup gui, what do you think?

User avatar
Crypton
Arronax's Best Friend
Arronax's Best Friend
Posts: 420
Joined: Wed Jul 08, 2009 5:04 am
Location: Abyss
Contact:

Re: GUI Talk - New system

Post by Crypton » Sun Oct 03, 2010 10:07 am

A small update: I made that gui configuration more object oriented:

Code: Select all

.window
{
    name = wnd_test;
    
    visible = true;
    enabled = true;
    
    offset = 0x0;
    width = 400;
    height = 300;
    
    background.color = #404040;
    background.visible = true;
    
    border.color = #000000;
    border.thickness = 1.0;
    
    font.style = default;
    font.color = #000000;
    
    caption.text = Window;
    caption.font.style = default;
    caption.font.color = #000000;
    caption.background.color = #808080;
    caption.height = 20;
    caption.visible = true;
    caption.align = center;
    caption.border.thickness = 1.0;
    caption.border.color = $Sienna;
}

.button
{
    name = btn_test;
    
    visible = true;
    enabled = true;
    
    offset = 100x100;
    width = 80;
    height = 17;
    
    background.color = #808080;
    background.sprite = art/test.png;
    
    border.color = #000000;
    border.thickness = 1.0;
    
    font.style = default;
    font.color = #000000;
    
    caption.text = Button;
    caption.font.color = #000000;
    caption.align = center;

    event.click = script.lua;
}
Output:
Image

This gui system can be used for both, game and editor/tools. I'll add more components later, now I'll go back to work on client/server architecture.

User avatar
Crypton
Arronax's Best Friend
Arronax's Best Friend
Posts: 420
Joined: Wed Jul 08, 2009 5:04 am
Location: Abyss
Contact:

Re: GUI Talk - New system

Post by Crypton » Sat Jul 02, 2011 2:12 am

Update: I've been working on GUI again, for about two weeks, and I made a lot of progress.

I dropped from using own file format for gui setup, intead of that, I'm using simple ini file. Also it's possible to use XML document if you want, but it's more verbose, and not recommended, since the whole gui system will be binded to lua, which will give you more flexibility when creating new widgets.

Anyway, the current GUI system is way more advanced than the previous one. It's more object oriented (support inheriting properties through states) and provides more features for customizing gui for any application/game.

Here is preview screenshot, which doesn't show much, so I'll make an video later.

Image

And here is configuration file of that gui on screenshot, which may describe more of it's features:

Code: Select all

[ButtonDefaultCursorEnter As State]
background.color = #882222;
border.color = #da6e00;
;background.type = color;
;background.image.source = gfx/splash_screen.png;
;background.image.color = #FFFFFFE0;
;border.thickness = 1.3;
;border.padding = 0.0;
caption.font.color = #888888;

[ButtonDefaultCursorLeave As State]
background.color = #333333;
border.color = #000000;
background.type = color;
;border.thickness = 1.0;
;border.padding = 0.0;
caption.font.color = #000000;

[ButtonDefaultCursorPress As State]
background.color = #880000;

[ButtonDefaultCursorRelease As State]
background.color = #882222;

// SCROLLBAR
[BaseScrollBarArrow As State]
background.color = #564745;
border.color = #1d1e1d;
border.thickness = 1.0;
border.padding = 1.0;

[BaseScrollBarThumb As State]
background.color = #564745;
border.color = #1d1e1d;
border.thickness = 1.0;
;border.padding = 1.5;

[BaseScrollBar As State]
visible = true;
enabled = true;

background.type = color;
background.color = #404040;
border.color = #000000;
border.thickness = 1.0;
border.padding = -1.0;
;border.style = outset;

thumb.state = BaseScrollBarThumb;
arrow[0].state = BaseScrollBarArrow;
arrow[1].state = BaseScrollBarArrow;

// WINDOW
[BaseWindow As State]
visible = true;
enabled = true;
background.visible = true;
background.type = color;
background.color = #222222;
background.image.source = gfx/wood2_worn.bmp;
background.image.color = #FFFFFF80;
background.gradient.color[0] = #666666;
background.gradient.color[1] = #221f1c;

border.color = #000000;
border.thickness = 1.0;
border.padding = 0.0;
border.style = outset;
font.style = default;
font.color = #000000;

caption.font.style = casablanca16;
caption.font.color = #000000;
caption.background.color = #333333;
caption.height = 21;
caption.visible = true;
caption.alignment = center-center;
caption.border.thickness = 1.0;
caption.border.color = #000000;
caption.border.style = inset;

// BUTTON
[BaseButton As State]
visible = true;
enabled = true;

background.type = color;
background.gradient.color[0] = #808080;
background.gradient.color[1] = #000000;
background.color = #333333;
background.chamfer = (16, 4, 4, 16);
;background.image.source = art/test.png;
border.color = #000000;
border.thickness = 1.3;
;border.padding = 1.0;
border.chamfer = (16, 4, 4, 16);
border.style = solid;

font.style = default;
font.color = #000000;
caption.font.color = #000000;
caption.font.style = zurich16;
caption.alignment = center-center;

event.cursorEnter.state = ButtonDefaultCursorEnter;
event.cursorLeave.state = ButtonDefaultCursorLeave;
event.cursorPress.state = ButtonDefaultCursorPress;
event.cursorRelease.state = ButtonDefaultCursorRelease;

// EDITBOX
[BaseEditBox As State]
visible = true;
enabled = true;

background.type = color;
background.color = #404040;

border.color = #000000;
border.thickness = 1.0;
border.style = inset;

font.style = default;
font.color = #000000;

caption.font.color = #000000;
caption.font.style = default;
caption.alignment = top-center;

// CHECKBOX
[BaseCheckBox As State]
state = BaseEditBox;
border.style = solid;
box.border.style = solid;
box.border.color = #000000;
box.border.thickness = 1.0;
;box.border.padding = 1;
box.background.type = color;
box.background.color = #666666;
caption.text = CheckBox;
caption.alignment = center-left;

///////////////////////////////////////////////////////////////////////////////////////////////

[gameTop As Window]
state = BaseWindow;
floating = true;
geometry = (0, 0, 400, 300);
caption.text = Window;
background.image.repeat = x+y;
background.image.filter = linear;

[button1 As Button]
state = BaseButton;
parent = gameTop;
geometry = (50, 100, 80, 30);
caption.text = Button;

event.cursorPress.script = script.lua;
;cursor.image.source = art/test.png;

[button2 As Button]
state = BaseButton;
parent = gameTop;
geometry = (50, 140, 80, 30);
caption.text = Clickie;
chamfer = (0, 8, 0, 0);

[button3 As Button]
state = BaseButton;
parent = gameTop;
geometry = (150, 100, 80, 30);
caption.text = Clickie;
chamfer = (0, 0, 0, 0);
border.style = outset;

[button3 As Button]
state = BaseEditBox;
parent = gameTop;
geometry = (150, 140, 80, 17);
caption.text = EditBox;
border.style = inset;
caption.alignment = center-left;

[scroll As ScrollBar]
state = BaseScrollBar;
parent = gameTop;
geometry = (50, 200, 335, 15);

[imageWin As Window]
state = BaseWindow;
caption.height = 100;
caption.text = Patern Window;

floating = true;
geometry = (200, 200, 400, 400);
background.type = color+image;
background.color = #222222;
background.image.source = gfx/wood2.bmp;
background.image.repeat = x+y;
;background.image.filter = linear;

[gredientWin As Window]
state = BaseWindow;
caption.height = 21;
caption.text = Gradient Window;

floating = true;
geometry = (250, 250, 200, 200);
background.type = gradient;
background.color = #222222;
background.type = gradient;
background.image.color = #FFFFFF80;
background.gradient.color[0] = #666666;
background.gradient.color[1] = #221f1c;


[loginDlg As Window]
state = BaseWindow;
caption.visible = false;

floating = true;
geometry = (200, 200, 280, 480);
background.type = image;
background.image.source = gui/dlg_login.png;
background.image.color = #FFFFFFF0;
border.visible = false;

[checkBox As CheckBox]
state = BaseCheckBox;
parent = gameTop;
geometry = (15, 50, 80, 15);

////////////////////////////////////////////////////////////////////////////////
// INGAME - BOTTOM
// This command window can be found at bottom of screen, in game, while playing.
////////////////////////////////////////////////////////////////////////////////

[ArcButtonOnCursorEnter As State]
background.image.frame = 2;

[ArcButtonOnCursorLeave As State]
background.image.frame = 0;

[ArcButtonOnCursorPress As State]
background.image.frame = 1;

[ArcButtonOnCursorRelease As State]
background.image.frame = 2;

[ArcButtonEventStates As State]
event.cursorEnter.state = ArcButtonOnCursorEnter;
event.cursorLeave.state = ArcButtonOnCursorLeave;
event.cursorPress.state = ArcButtonOnCursorPress;
event.cursorRelease.state = ArcButtonOnCursorRelease;

[ArcBaseButton As State]
state = ArcButtonEventStates;
background.type = image;
border.visible = false;

[ArcBaseRoundButton As State]
state = ArcBaseButton;
width = 39;
height = 39;

[ArcBaseSquareButton As State]
state = ArcBaseButton;
width = 34;
height = 34;

[ArcBaseLittleButton As State]
state = ArcBaseButton;
width = 23;
height = 23;

[ArcBaseVial As State]
width = 28;
height = 96;
background.type = image;
border.visible = false;
background.image.animated = true;
;background.image.fps = 5;
background.image.interval = random(4000, 15000);

[ArcBaseWindow As State]
state = BaseWindow;
caption.visible = false;
floating = true;
background.type = image;
background.image.color = #FFFFFFF0;
border.visible = false;

[InGameBottom\wndMain As Window]
state = ArcBaseWindow;
geometry = (0, 440, 820, 180);
background.image.source = gui/intbottom.png;

[InGameBottom\btnCombat As Button]
state = ArcBaseRoundButton;
parent = InGameBottom\wndMain;
offset = (96, 25);
background.image.source = gfx/interface/combat_button.art;

[InGameBottom\btnCommonSkill As Button]
state = ArcBaseRoundButton;
parent = InGameBottom\wndMain;
offset = (703, 25);
background.image.source = gfx/interface/char_common_skills.art;

[InGameBottom\btnSpellSkill As Button]
state = ArcBaseRoundButton;
parent = InGameBottom\wndMain;
offset = (659, 63);
background.image.source = gfx/interface/char_spells_skills.art;

[InGameBottom\btnTechSkill As Button]
state = ArcBaseRoundButton;
parent = InGameBottom\wndMain;
offset = (703, 108);
background.image.source = gfx/interface/char_tech_skills.art;

[InGameBottom\wgtRedVial As Widget]
state = ArcBaseVial;
parent = InGameBottom\wndMain;
offset = (24, 35);
background.image.source = gfx/interface/redvial.art;
;background.image.frame = random(0, 14);

[InGameBottom\wgtBlueVial As Widget]
state = ArcBaseVial;
parent = InGameBottom\wndMain;
offset = (764, 35);
background.image.source = gfx/interface/bluvial.art;
;background.image.frame = random(0, 14);

[InGameBottom\lblTest As Label]
parent = InGameBottom\wndMain;
geometry = (280, 80, 250, 60);
;border.visible = false;
border.style = solid;
border.thickness = 1.0;
;background.visible = false;
background.color = #888888;
text = OpenArcanum;
font.style = morpheus30;
font.color = $DarkOrange;


////////////////////////////////////////////////////////////////////////////////
// INGAME - TOP
// This command window can be found at top of screen, in game, while playing.
////////////////////////////////////////////////////////////////////////////////

[InGameTop\wndMain As Window]
state = ArcBaseWindow;
geometry = (0, 0, 802, 46);
background.image.source = gui/inttop5.png;

[InGameTop\wndTimeSlider As Widget]
state = ArcBaseButton;
parent = InGameTop\wndMain;
geometry = (645, 7, 384, 29);
background.image.source = gfx/interface/clk_timestrip.art;
depth = -1;

[InGameTop\btnChar As Button]
state = ArcBaseSquareButton;
parent = InGameTop\wndMain;
offset = (5, 5);
background.image.source = gfx/interface/char_but.art;

[InGameTop\btnLog As Button]
state = ArcBaseSquareButton;
parent = InGameTop\wndMain;
offset = (42, 5);
background.image.source = gfx/interface/log_but.art;

[InGameTop\btnTownMap As Button]
state = ArcBaseSquareButton;
parent = InGameTop\wndMain;
offset = (79, 5);
background.image.source = gfx/interface/tmap_but.art;

[InGameTop\btnWorldMap As Button]
state = ArcBaseSquareButton;
parent = InGameTop\wndMain;
offset = (79, 5);
background.image.source = gfx/interface/wmap_but.art;
visible = false;

[InGameTop\btnInventory As Button]
state = ArcBaseSquareButton;
parent = InGameTop\wndMain;
offset = (116, 5);
background.image.source = gfx/interface/invn_but.art;

[InGameTop\btnSpell1 As Button]
state = ArcBaseSquareButton;
parent = InGameTop\wndMain;
offset = (282, 6);
background.image.source = gfx/interface/splslt1.art;

[InGameTop\btnSpell2 As Button]
state = ArcBaseSquareButton;
parent = InGameTop\wndMain;
offset = (332, 6);
background.image.source = gfx/interface/splslt2.art;

[InGameTop\btnSpell3 As Button]
state = ArcBaseSquareButton;
parent = InGameTop\wndMain;
offset = (382, 6);
background.image.source = gfx/interface/splslt3.art;

[InGameTop\btnSpell4 As Button]
state = ArcBaseSquareButton;
parent = InGameTop\wndMain;
offset = (432, 6);
background.image.source = gfx/interface/splslt4.art;

[InGameTop\btnSpell5 As Button]
state = ArcBaseSquareButton;
parent = InGameTop\wndMain;
offset = (482, 6);
background.image.source = gfx/interface/splslt5.art;

[InGameTop\btnFate As Button]
state = ArcBaseLittleButton;
parent = InGameTop\wndMain;
offset = (159, 11);
background.image.source = gfx/interface/lilgrnbut.art;

[InGameTop\btnSleep As Button]
state = ArcBaseLittleButton;
parent = InGameTop\wndMain;
offset = (606, 11);
background.image.source = gfx/interface/lilgrnbut.art;

[InGameTop\wgtLoadIndicator As Widget]
;state = ArcButton;
parent = InGameTop\wndMain;
geometry = (751, 60, 40, 50);
background.image.source = gfx/interface/loadindicator.art;
background.type = image;
background.image.frame = 0;
background.image.animated = true;
background.image.interval = 1000;
background.image.fps = 5;




Post Reply