User:Raiguard/Tutorial:Modding tutorial/GUI/Style guide - Revision history

Raiguard: Dialog row micro

2020-07-14T18:29:39Z

Dialog row micro

← Older revision		Revision as of 18:29, 14 July 2020
Line 47:		Line 47:
	If you add multiple content panes, add them to a flow element with <code>horizontal_spacing</code> or <code>vertical_spacing</code> set to <code>12</code>.		If you add multiple content panes, add them to a flow element with <code>horizontal_spacing</code> or <code>vertical_spacing</code> set to <code>12</code>.

	=== Toolbar ===		=== Dialog Row ===

			The dialog row is the row of buttons at the bottom of a dialog window. Generally, a window will have one or two of these, but more can be added if necessary.

			The game uses a left-to-right methodology for its navigation. Therefore, the leftmost dialog button is the "back" or "cancel" action, while the rightmost is the "confirm" action. Because dialogs have an actual "confirm" action, changes to the content of the dialog should not be saved until the "confirm" button is clicked and the window closed.

			TODO list styles

			== Toolbar ==

	Toolbars are a great place to keep a content pane's "title" as well as tools used in that pane. You can see two examples of toolbars in the Recipe Book screenshot above.		Toolbars are a great place to keep a content pane's "title" as well as tools used in that pane. You can see two examples of toolbars in the Recipe Book screenshot above.

Raiguard: Toolbar micro

2020-07-10T20:55:11Z

Toolbar micro

← Older revision		Revision as of 20:55, 10 July 2020
Line 51:		Line 51:
	Toolbars are a great place to keep a content pane's "title" as well as tools used in that pane. You can see two examples of toolbars in the Recipe Book screenshot above.		Toolbars are a great place to keep a content pane's "title" as well as tools used in that pane. You can see two examples of toolbars in the Recipe Book screenshot above.

	Toolbars are created using the <code>subheader_frame</code> style. ~~Toolbars '''must''' be placed in~~ a ~~content pane with~~ the <code>inside_shallow_frame</code> ~~style~~ (no padding)~~. Toolbars always take up~~ the ~~entire width~~ of the ~~content~~ pane ~~they are located in~~.		Toolbars are created using the <code>subheader_frame</code> style. There are a few locations where they are acceptable:

			* At the top of an <code>inside_shallow_frame</code> (no padding)
			* At the top of an <code>inside_deep_frame</code> (usually above a tabbed pane)
			* Below the tab row in a tabbed pane. In this case, use a custom style TODO SHOW STYLE

Raiguard: More content frame, start on toolbar

2020-07-10T18:29:24Z

More content frame, start on toolbar

← Older revision		Revision as of 18:29, 10 July 2020
Line 1:		Line 1:
			'''THIS PAGE IS A WORK IN PROGRESS'''


	This style guide is designed to give you an overview of the precepts and specific element styles used to create 0.18-esque GUIs. This guide is not to be taken as gospel - the contents are merely suggestions to help you improve your interfaces.		This style guide is designed to give you an overview of the precepts and specific element styles used to create 0.18-esque GUIs. This guide is not to be taken as gospel - the contents are merely suggestions to help you improve your interfaces.

Line 5:		Line 8:
	== Window ==		== Window ==

	[[File:GUI tutorial window types.png\|~~frame\|Examples of standard~~ vs. dialog windows.]]		[[File:GUI tutorial window types.png\|Standard vs. dialog windows.]]

	Windows are created using the default frame style. Because of this, you ~~don't actually~~ need to specify a style when creating the element.		Windows are created using the default frame style. Because of this, you need not specify a style when creating the element.

	For windows that contain multiple sub-windows (e.g. most windows that hold a character inventory) <code>outer_frame</code> is used as the outer frame and <code>inner_frame_in_outer_frame</code> is used for each internal window.		For windows that contain multiple sub-windows (e.g. most windows that hold a character inventory) <code>outer_frame</code> is used as the outer frame and <code>inner_frame_in_outer_frame</code> is used for each internal window.
Line 18:		Line 21:
	=== Titlebar ===		=== Titlebar ===

	[[File:GUI tutorial dialog types.png~~\|frame~~\|Draggable vs. non-draggable windows.]]		[[File:GUI tutorial dialog types.png\|Draggable vs. non-draggable windows.]]

	Each non-compact window '''must''' have a titlebar. All titlebars include a '''title''', and for windows that are meant to be draggable, the titlebar includes a drag handle. '''Standard''' windows also include a close button. Other frame action buttons may be added to the left of the close button, but should be used sparingly.		Each non-compact window '''must''' have a titlebar. All titlebars include a '''title''', and for windows that are meant to be draggable, the titlebar includes a drag handle. '''Standard''' windows also include a close button. Other frame action buttons may be added to the left of the close button, but should be used sparingly.
Line 24:		Line 27:
	Titlebars are created using a simple '''horizontal flow''' with no special edits - the default style is perfect for this case.		Titlebars are created using a simple '''horizontal flow''' with no special edits - the default style is perfect for this case.

	* The title text is a <code>label</code> using the <code>frame_title</code> style.		* The title text is a <code>label</code> using the <code>frame_title</code> style. Set <code>ignored_by_interaction</code> on this element, so the dragging functionality will work.
	* The "drag handle" is an <code>empty-widget</code> element with the <code>draggable_space_header</code> style. You will need to apply <code>horizontally_stretchable</code> to the element's style, and set the <code>height</code> to <code>24</code>. If adding a close button or other frame action button, set the <code>right_margin</code> to <code>4</code>.		* The "drag handle" is an <code>empty-widget</code> element with the <code>draggable_space_header</code> style. You will need to apply <code>horizontally_stretchable</code> to the element's style, and set the <code>height</code> to <code>24</code>. If adding a close button or other frame action button, set the <code>right_margin</code> to <code>4</code>. This element also requires <code>ignored_by_interaction</code> to be true, so the dragging functionality will work.
	* Close buttons, or any other frame action buttons you are adding, are created with <code>sprite-button</code> using the <code>frame_action_button</code> style. The default sprite should be colored (RGB) <code>227,227,227</code>, and the hovered and clicked sprites should be colored (RGB) <code>29,29,29</code>. Custom frame action sprites should be 26x26 with a 3px padding around the edges, making for a file size of 32x32. As of the time of writing, the base game does not use mipmaps for these icons, but it would probably be a good idea to add them to your own icons just in case.		* Close buttons, or any other frame action buttons you are adding, are created with <code>sprite-button</code> using the <code>frame_action_button</code> style. The default sprite should be colored (RGB) <code>227,227,227</code>, and the hovered and clicked sprites should be colored (RGB) <code>29,29,29</code>. Custom frame action sprites should be 26x26 with a 3px padding around the edges, making for a file size of 32x32. As of the time of writing, the base game does not use mipmaps for these icons, but it would probably be a good idea to add them to your own icons just in case.
	* When creating draggable windows, <code>drag_target</code> should be set on the flow element that comprises the titlebar, not the "drag handle" itself.		* When creating draggable windows, <code>drag_target</code> should be set on the '''flow element''' that comprises the titlebar, not the "drag handle" itself.
	* If your window is not in <code>screen</code> or is otherwise non-draggable, '''DO NOT''' add a drag handle. Instead, use an <code>empty-widget</code> with <code>horizontally_stretchable</code> enabled.		* If your window is not in <code>screen</code> or is otherwise non-draggable, '''DO NOT''' add a drag handle. Instead, use an <code>empty-widget</code> with <code>horizontally_stretchable</code> enabled.

	=== Content frame ===		=== Content frame ===

	Each non-compact window '''must''' have a "content frame" (the light grey pane seen in the above screenshots). This is where the meat of your interface will go.		[[File:GUI tutorial content frame with padding.png\|An example of <code>inside_shallow_frame_with_padding</code>, demonstrating the built-in 12px padding.]]

			Each non-compact window '''must''' have at least one "content frame" (the light grey pane seen in the above screenshots). This is where the meat of your interface will go.

			Content frames are created using the <code>inside_shallow_frame_with_padding</code> style. This will give you 12px of padding in the frame. If you need to have zero padding (i.e. for adding a scroll pane or a toolbar), use <code>inside_shallow_frame</code> instead.

			It is good practice to separate different "purposes" in a GUI with different content panes. For example, Recipe Book uses different content panes for search and information:

			TODO add image

	~~Content frames are created using the~~ <code>~~inside_shallow_frame_with_padding~~</code> ~~style. This will give you 12px of padding in the frame. If you need~~ to ~~have zero padding, use~~ <code>~~inside_shallow_frame~~</code> ~~instead~~.		If you add multiple content panes, add them to a flow element with <code>horizontal_spacing</code> or <code>vertical_spacing</code> set to <code>12</code>.

	~~[[File:GUI tutorial content frame with padding.png\|frame\|An example of <code>inside_shallow_frame_with_padding</code>, demonstrating the built-in 12px padding.]]~~		=== Toolbar ===

			Toolbars are a great place to keep a content pane's "title" as well as tools used in that pane. You can see two examples of toolbars in the Recipe Book screenshot above.

	'''~~TO BE CONTINUED~~'''		Toolbars are created using the <code>subheader_frame</code> style. Toolbars '''must''' be placed in a content pane with the <code>inside_shallow_frame</code> style (no padding). Toolbars always take up the entire width of the content pane they are located in.

Raiguard: standalone_inner_frame_in_outer_frame no longer exists

2020-07-02T05:02:16Z

standalone_inner_frame_in_outer_frame no longer exists

← Older revision		Revision as of 05:02, 2 July 2020
Line 7:		Line 7:
	[[File:GUI tutorial window types.png\|frame\|Examples of standard vs. dialog windows.]]		[[File:GUI tutorial window types.png\|frame\|Examples of standard vs. dialog windows.]]

	Windows are created using ~~<code>standalone_inner_frame_in_outer_frame</code>~~. For windows that contain multiple sub-windows (e.g. most windows that hold a character inventory) <code>outer_frame</code> is used as the outer frame and <code>inner_frame_in_outer_frame</code> is used for each internal window.		Windows are created using the default frame style. Because of this, you don't actually need to specify a style when creating the element.

			For windows that contain multiple sub-windows (e.g. most windows that hold a character inventory) <code>outer_frame</code> is used as the outer frame and <code>inner_frame_in_outer_frame</code> is used for each internal window.

	Generally there are three kinds of windows:		Generally there are three kinds of windows:

Bilka: Bilka moved page Tutorial:Modding tutorial/GUI/Style guide to User:Raiguard/Tutorial:Modding tutorial/GUI/Style guide without leaving a redirect: WIP pages must be in your userspace

2020-06-11T09:14:37Z

Bilka moved page Tutorial:Modding tutorial/GUI/Style guide to User:Raiguard/Tutorial:Modding tutorial/GUI/Style guide without leaving a redirect: WIP pages must be in your userspace

← Older revision		Revision as of 09:14, 11 June 2020
(No difference)

Raiguard: Rework titlebar and content frame explanations, add more images.

2020-05-30T03:35:48Z

Rework titlebar and content frame explanations, add more images.

← Older revision		Revision as of 03:35, 30 May 2020
Line 4:		Line 4:

	== Window ==		== Window ==

			[[File:GUI tutorial window types.png\|frame\|Examples of standard vs. dialog windows.]]

	Windows are created using <code>standalone_inner_frame_in_outer_frame</code>. For windows that contain multiple sub-windows (e.g. most windows that hold a character inventory) <code>outer_frame</code> is used as the outer frame and <code>inner_frame_in_outer_frame</code> is used for each internal window.		Windows are created using <code>standalone_inner_frame_in_outer_frame</code>. For windows that contain multiple sub-windows (e.g. most windows that hold a character inventory) <code>outer_frame</code> is used as the outer frame and <code>inner_frame_in_outer_frame</code> is used for each internal window.

	~~[[File~~:~~GUI style guide window~~ and titlebar.~~png]]~~		Generally there are three kinds of windows:
			* '''Standard''' windows have a close button in the top-right corner, and are opened/closed manually either by clicking something or using a hotkey.
			* '''Dialog''' windows have a row of dialog buttons along the bottom, and do ''not'' have a close button. These are used when there is a clear hierarchy of actions - you go "back" to the previous action, or you "confirm" the current action. These windows '''must''' have a "Back" button in the bottom-left corner, and '''may''' have a "Confirm" button in the bottom-right corner. Other buttons on the bottom row are optional and should be used sparingly.
			* '''Compact''' windows have neither a titlebar nor a dialog row. These are usually mini-GUIs that are opened/closed automatically as a result of some user action. There are no set rules for these kinds of GUIs, it entirely depends on what they're used for.

	=== Titlebar ===		=== Titlebar ===

	~~Each window should usually have a titlebar~~. ~~Setting <code>caption</code> on a <code>~~frame~~</code> element will automatically create the titlebar for you~~. ~~In cases where all you need is a title, this is fine~~.		[[File:GUI tutorial dialog types.png\|frame\|Draggable vs. non-draggable windows.]]

	~~However~~, for ~~non-dialog~~ windows, ~~you will need to add~~ a close button to the ~~titlebar. This necessitates creating your own titlebar instead~~ of ~~using~~ the ~~frame's built-in one. For this reason~~, ~~I usually never set <code>caption</code> on frames~~.		Each non-compact window '''must''' have a titlebar. All titlebars include a '''title''', and for windows that are meant to be draggable, the titlebar includes a drag handle. '''Standard''' windows also include a close button. Other frame action buttons may be added to the left of the close button, but should be used sparingly.

	Titlebars are created using a simple '''horizontal flow''' with no special edits - the default style is perfect for this case.		Titlebars are created using a simple '''horizontal flow''' with no special edits - the default style is perfect for this case.
Line 20:		Line 25:
	* The "drag handle" is an <code>empty-widget</code> element with the <code>draggable_space_header</code> style. You will need to apply <code>horizontally_stretchable</code> to the element's style, and set the <code>height</code> to <code>24</code>. If adding a close button or other frame action button, set the <code>right_margin</code> to <code>4</code>.		* The "drag handle" is an <code>empty-widget</code> element with the <code>draggable_space_header</code> style. You will need to apply <code>horizontally_stretchable</code> to the element's style, and set the <code>height</code> to <code>24</code>. If adding a close button or other frame action button, set the <code>right_margin</code> to <code>4</code>.
	* Close buttons, or any other frame action buttons you are adding, are created with <code>sprite-button</code> using the <code>frame_action_button</code> style. The default sprite should be colored (RGB) <code>227,227,227</code>, and the hovered and clicked sprites should be colored (RGB) <code>29,29,29</code>. Custom frame action sprites should be 26x26 with a 3px padding around the edges, making for a file size of 32x32. As of the time of writing, the base game does not use mipmaps for these icons, but it would probably be a good idea to add them to your own icons just in case.		* Close buttons, or any other frame action buttons you are adding, are created with <code>sprite-button</code> using the <code>frame_action_button</code> style. The default sprite should be colored (RGB) <code>227,227,227</code>, and the hovered and clicked sprites should be colored (RGB) <code>29,29,29</code>. Custom frame action sprites should be 26x26 with a 3px padding around the edges, making for a file size of 32x32. As of the time of writing, the base game does not use mipmaps for these icons, but it would probably be a good idea to add them to your own icons just in case.
	* <code>drag_target</code> should be set ~~for both~~ the "drag handle" ~~'''and''' the title text, to keep consistency with the base game~~.		* When creating draggable windows, <code>drag_target</code> should be set on the flow element that comprises the titlebar, not the "drag handle" itself.
	* If your window is not in <code>screen</code> or is otherwise non-draggable, '''DO NOT''' add a drag handle. Instead, use an <code>empty-widget</code> with <code>horizontally_stretchable</code> enabled.		* If your window is not in <code>screen</code> or is otherwise non-draggable, '''DO NOT''' add a drag handle. Instead, use an <code>empty-widget</code> with <code>horizontally_stretchable</code> enabled.

	=== Content frame ===		=== Content frame ===

	~~The game~~'~~s GUI style dictates that most windows should~~ have ~~an inner~~ content frame, seen in the above ~~screenshot as~~ the ~~light grey pane~~. ~~For this, use~~ <code>inside_shallow_frame_with_padding</code>, or <code>inside_shallow_frame</code> ~~if you wish to manage~~ the ~~paddings yourself~~.		Each non-compact window '''must''' have a "content frame" (the light grey pane seen in the above screenshots). This is where the meat of your interface will go.

			Content frames are created using the <code>inside_shallow_frame_with_padding</code> style. This will give you 12px of padding in the frame. If you need to have zero padding, use <code>inside_shallow_frame</code> instead.

			[[File:GUI tutorial content frame with padding.png\|frame\|An example of <code>inside_shallow_frame_with_padding</code>, demonstrating the built-in 12px padding.]]


	'''TO BE CONTINUED'''		'''TO BE CONTINUED'''

Raiguard: Initial stub page.

2020-05-29T00:39:47Z

Initial stub page.

New page

This style guide is designed to give you an overview of the precepts and specific element styles used to create 0.18-esque GUIs. This guide is not to be taken as gospel - the contents are merely suggestions to help you improve your interfaces.

This style guide assumes you know how to create GUIs, assign styles to elements, and edit styles. If you do not know these things, this guide won't be of much use to you.

== Window ==

Windows are created using <code>standalone_inner_frame_in_outer_frame</code>. For windows that contain multiple sub-windows (e.g. most windows that hold a character inventory) <code>outer_frame</code> is used as the outer frame and <code>inner_frame_in_outer_frame</code> is used for each internal window.

[[File:GUI style guide window and titlebar.png]]

=== Titlebar ===

Each window should usually have a titlebar. Setting <code>caption</code> on a <code>frame</code> element will automatically create the titlebar for you. In cases where all you need is a title, this is fine.

However, for non-dialog windows, you will need to add a close button to the titlebar. This necessitates creating your own titlebar instead of using the frame's built-in one. For this reason, I usually never set <code>caption</code> on frames.

Titlebars are created using a simple '''horizontal flow''' with no special edits - the default style is perfect for this case.

* The title text is a <code>label</code> using the <code>frame_title</code> style.
* The "drag handle" is an <code>empty-widget</code> element with the <code>draggable_space_header</code> style. You will need to apply <code>horizontally_stretchable</code> to the element's style, and set the <code>height</code> to <code>24</code>. If adding a close button or other frame action button, set the <code>right_margin</code> to <code>4</code>.
* Close buttons, or any other frame action buttons you are adding, are created with <code>sprite-button</code> using the <code>frame_action_button</code> style. The default sprite should be colored (RGB) <code>227,227,227</code>, and the hovered and clicked sprites should be colored (RGB) <code>29,29,29</code>. Custom frame action sprites should be 26x26 with a 3px padding around the edges, making for a file size of 32x32. As of the time of writing, the base game does not use mipmaps for these icons, but it would probably be a good idea to add them to your own icons just in case.
* <code>drag_target</code> should be set for both the "drag handle" '''and''' the title text, to keep consistency with the base game.
* If your window is not in <code>screen</code> or is otherwise non-draggable, '''DO NOT''' add a drag handle. Instead, use an <code>empty-widget</code> with <code>horizontally_stretchable</code> enabled.

=== Content frame ===

The game's GUI style dictates that most windows should have an inner content frame, seen in the above screenshot as the light grey pane. For this, use <code>inside_shallow_frame_with_padding</code>, or <code>inside_shallow_frame</code> if you wish to manage the paddings yourself.

'''TO BE CONTINUED'''