GUI2: draw buttons procedurally and increase default size

data/gui/widget/button_default.cfg

@@ -3,7 +3,115 @@
 ### Definition of the default button.
 ###
 
-#define _GUI_RESOLUTION RESOLUTION MIN_WIDTH DEFAULT_WIDTH HEIGHT EXTRA_WIDTH EXTRA_HEIGHT FONT_SIZE BASE_NAME SUFFIX IPF
+#define _GUI_BORDER_COLOR_ALPHA ALPHA
+"162, 127, 68, {ALPHA}" #enddef
+
+#define _GUI_BORDER_COLOR_DARK_ALPHA ALPHA
+"114, 79, 46, {ALPHA}" #enddef
+
+#define _GUI_POINT X Y COLOR
+	[line]
+		x1 = {X}
+		y1 = {Y}
+		x2 = {X}
+		y2 = {Y}
+
+		thickness = 1
+		color = {COLOR}
+	[/line]
+#enddef
+
+#define _GUI_STATE BACKGROUND_IMAGE BORDER_COLOR BORDER_COLOR_DARK HIGHLIGHT_LINE_COLOR IPF
+	[image]
+		w = "(width)"
+		h = "(height)"
+		name = "buttons/button_normal/{BACKGROUND_IMAGE}.png{IPF}"
+	[/image]
+
+	[rectangle]
+		x = 0
+		y = 0
+		w = "(width)"
+		h = "(height)"
+
+		border_thickness = 1
+		border_color = {BORDER_COLOR}					
+	[/rectangle]
+
+	[rectangle]
+		x = 1
+		y = 1
+		w = "(width - 2)"
+		h = "(height - 2)"
+
+		border_thickness = 1
+		border_color = "1, 10, 16, 255"
+	[/rectangle]
+
+	#
+	# Darken borders along the left and bottom
+	#
+
+	[line]
+		x1 = 0
+		y1 = 0
+		x2 = 0
+		y2 = "(height - 1)"
+
+		thickness = 1
+		color = {BORDER_COLOR_DARK}
+	[/line]
+
+	[line]
+		x1 = 0
+		y1 = "(height - 1)"
+		x2 = "(width - 1)"
+		y2 = "(height - 1)"
+
+		thickness = 1
+		color = {BORDER_COLOR_DARK}
+	[/line]
+
+	#
+	# Tint lines on the top and right
+	#
+
+	[line]
+		x1 = 3
+		y1 = 2
+		x2 = "(width - 3)"
+		y2 = 2
+
+		thickness = 1
+		color = {HIGHLIGHT_LINE_COLOR}
+	[/line]
+
+	[line]
+		x1 = "(width - 3)"
+		y1 = 2
+		x2 = "(width - 3)"
+		y2 = "(height - 4)"
+
+		thickness = 1
+		color = {HIGHLIGHT_LINE_COLOR}
+	[/line]
+
+	#
+	# Round the corners
+	#
+
+	{_GUI_POINT 0             0              ("")}
+	{_GUI_POINT 0             "(height - 1)" ("")}
+	{_GUI_POINT "(width - 1)" 0              ("")}
+	{_GUI_POINT "(width - 1)" "(height - 1)" ("")}
+
+	{_GUI_POINT 1             1              {BORDER_COLOR     }}
+	{_GUI_POINT 1             "(height - 2)" {BORDER_COLOR_DARK}}
+	{_GUI_POINT "(width - 2)" 1              {BORDER_COLOR     }}
+	{_GUI_POINT "(width - 2)" "(height - 2)" {BORDER_COLOR_DARK}}
+#enddef
+
+#define _GUI_RESOLUTION RESOLUTION MIN_WIDTH DEFAULT_WIDTH HEIGHT EXTRA_WIDTH EXTRA_HEIGHT FONT_SIZE IPF ALPHA
 	[resolution]
 
 		{RESOLUTION}
@@ -25,11 +133,9 @@
 
 			[draw]
 
-				[image]
-					w = "(width)"
-					h = "(height)"
-					name = "buttons/{BASE_NAME}{SUFFIX}.png{IPF}"
-				[/image]
+				{_GUI_STATE "background"
+					({_GUI_BORDER_COLOR_ALPHA      {ALPHA}})
+					({_GUI_BORDER_COLOR_DARK_ALPHA {ALPHA}}) ("21, 79, 109, 255") {IPF}}
 
 				{GUI__CENTERED_TEXT ({FONT_SIZE}) () ({GUI__FONT_COLOR_ENABLED__TITLE})}
 
@@ -41,11 +147,9 @@
 
 			[draw]
 
-				[image]
-					w = "(width)"
-					h = "(height)"
-					name = "buttons/{BASE_NAME}{SUFFIX}.png~GS(){IPF}"
-				[/image]
+				{_GUI_STATE "background"
+					({_GUI_BORDER_COLOR_ALPHA      {ALPHA}})
+					({_GUI_BORDER_COLOR_DARK_ALPHA {ALPHA}}) ("1, 10, 16, 255") "~GS(){IPF}"}
 
 				{GUI__CENTERED_TEXT ({FONT_SIZE}) () ({GUI__FONT_COLOR_DISABLED__TITLE})}
 
@@ -57,11 +161,9 @@
 
 			[draw]
 
-				[image]
-					w = "(width)"
-					h = "(height)"
-					name = "buttons/{BASE_NAME}-pressed{SUFFIX}.png{IPF}"
-				[/image]
+				{_GUI_STATE "background-pressed"
+					({_GUI_BORDER_COLOR_ALPHA      {ALPHA}})
+					({_GUI_BORDER_COLOR_DARK_ALPHA {ALPHA}}) ("1, 10, 16, 255") {IPF}}
 
 				{GUI__CENTERED_TEXT ({FONT_SIZE}) () ({GUI__FONT_COLOR_ENABLED__TITLE})}
 
@@ -73,11 +175,9 @@
 
 			[draw]
 
-				[image]
-					w = "(width)"
-					h = "(height)"
-					name = "buttons/{BASE_NAME}-active{SUFFIX}.png{IPF}"
-				[/image]
+				{_GUI_STATE "background-active"
+					({_GUI_BORDER_COLOR_ALPHA      {ALPHA}})
+					({_GUI_BORDER_COLOR_DARK_ALPHA {ALPHA}}) ("12, 108, 157, 255") {IPF}}
 
 				{GUI__CENTERED_TEXT ({FONT_SIZE}) () ({GUI__FONT_COLOR_ENABLED__TITLE})}
 
@@ -93,7 +193,7 @@
 	id = "default"
 	description = "Default button"
 
-	{_GUI_RESOLUTION () 40 108 22 13 4 ({GUI_NORMAL__FONT_SIZE__SMALL}) "button_normal/button_H22" () ()}
+	{_GUI_RESOLUTION () 40 112 26 13 4 ({GUI_NORMAL__FONT_SIZE__SMALL}) () 255}
 
 [/button_definition]
 
@@ -102,7 +202,7 @@
 	id = "large"
 	description = "Large button"
 
-	{_GUI_RESOLUTION () 80 216 44 26 4 ({GUI_NORMAL__FONT_SIZE__LARGE}) "button_normal/button_H22" "@2x" ()}
+	{_GUI_RESOLUTION () 40 116 30 13 4 ({GUI_NORMAL__FONT_SIZE__SMALL}) () 255}
 
 [/button_definition]
 
@@ -111,8 +211,12 @@
 	id = "transparent"
 	description = "Default transparent button"
 
-	{_GUI_RESOLUTION () 40 108 22 13 4 ({GUI_NORMAL__FONT_SIZE__SMALL}) "button_normal/button_H22" () "~O(65%)"}
+	{_GUI_RESOLUTION () 40 112 26 13 4 ({GUI_NORMAL__FONT_SIZE__SMALL}) "~O(65%)" 165}
 
 [/button_definition]
 
+#undef _GUI_BORDER_COLOR_ALPHA
+#undef _GUI_BORDER_COLOR_DARK_ALPHA
+#undef _GUI_POINT
+#undef _GUI_STATE
 #undef _GUI_RESOLUTION