User:Dem1se - Revision history

imported>Dem1se: Still fixing that same error -_-

2021-11-12T07:15:07Z

Still fixing that same error -_-

← Older revision		Revision as of 07:15, 12 November 2021
Line 1:		Line 1:
	Hey! I've made some [ https://www.nexusmods.com/stardewvalley/mods/6215/ mods ], and you can find me on Discord at Dem1se # 7 9 9 0		Hey! I've made some [https://www.nexusmods.com/stardewvalley/mods/6215/ mods], and you can find me on Discord at Dem1se # 7 9 9 0

	= Getting Started with Making UIs =		= Getting Started with Making UIs =

imported>Dem1se: fix formatting error

2021-11-12T07:14:33Z

fix formatting error

← Older revision		Revision as of 07:14, 12 November 2021
Line 1:		Line 1:
	Hey! I've made some [ https://www.nexusmods.com/stardewvalley/mods/6215/ \| mods ], and you can find me on Discord at Dem1se # 7 9 9 0		Hey! I've made some [ https://www.nexusmods.com/stardewvalley/mods/6215/ mods ], and you can find me on Discord at Dem1se # 7 9 9 0

	= Getting Started with Making UIs =		= Getting Started with Making UIs =

imported>Dem1se: Add small line about self

2021-11-12T07:13:58Z

Add small line about self

← Older revision		Revision as of 07:13, 12 November 2021
Line 1:		Line 1:
			Hey! I've made some [ https://www.nexusmods.com/stardewvalley/mods/6215/ \| mods ], and you can find me on Discord at Dem1se # 7 9 9 0

	= Getting Started with Making UIs =		= Getting Started with Making UIs =

imported>Dem1se: typo fixes

2021-11-12T07:08:48Z

typo fixes

← Older revision		Revision as of 07:08, 12 November 2021
Line 55:		Line 55:

	// 4. initialize and lay out all the declared UI components		// 4. initialize and lay out all the declared UI components
	TitleLabel = new ClickableComponent(new Rectangle(XPos + 200, YPos + 96, UIwidth - 400, 64), ~~"~~Some Title~~"~~);		TitleLabel = new ClickableComponent(new Rectangle(XPos + 200, YPos + 96, UIwidth - 400, 64), "Some Title");
	...		...
	}		}

imported>Dem1se: Add small comment from previous list

2021-11-12T07:08:07Z

Add small comment from previous list

← Older revision		Revision as of 07:08, 12 November 2021
Line 37:		Line 37:

	<syntaxhighlight lang="c#">		<syntaxhighlight lang="c#">
			// 1. Create your new UI class
	public class MyUserInterface : IClickableMenu		public class MyUserInterface : IClickableMenu
	{		{

imported>Dem1se: Fix typos

2021-11-12T07:06:59Z

Fix typos

← Older revision		Revision as of 07:06, 12 November 2021
Line 28:		Line 28:
	## Usually this means creating fields like, e.g., OkButton or Title, etc. of types <code>ClickableTextureComponent</code> and <code>ClickableComponent</code> (both of which are under the <code>StartdewValley.Menus</code> namespace).		## Usually this means creating fields like, e.g., OkButton or Title, etc. of types <code>ClickableTextureComponent</code> and <code>ClickableComponent</code> (both of which are under the <code>StartdewValley.Menus</code> namespace).
	# Initialize all the declared UI elements, either in constructor or in a method called by the constructor.		# Initialize all the declared UI elements, either in constructor or in a method called by the constructor.
	# Override ~~method~~ in the <code>IClickableMenu</code> abstract class, to add desired behaviour to the UI.		# Override methods in the <code>IClickableMenu</code> abstract class, to add desired behaviour to the UI.
	## Behaviour like handling clicks on the UI, reacting to cursor hovering over any element. Both of those are handled by the methods <code>void receiveLeftClick(...)</code> and <code>void performHoverAction(...)</code>.		## Behaviour like handling clicks on the UI, reacting to cursor hovering over any element. Both of those are handled by the methods <code>void receiveLeftClick(...)</code> and <code>void performHoverAction(...)</code>.
	# Override the <code>void draw(...)</code> method to draw all the UI and UI elements you declared and set up, to the screen.		# Override the <code>void draw(...)</code> method to draw all the UI and UI elements you declared and set up, to the screen.
	## This method is called by Stardew Valley's draw code every render tick whenever your UI is actively displayed.		## This method is called by Stardew Valley's draw code every render tick whenever your UI is actively displayed.
	## The latter statements draw '''over''' the earlier ~~statment~~'s output. So things like the cursor should always be drawn at last so they are on top of everything else.		## The latter statements draw '''over''' the earlier statement's output. So things like the cursor should always be drawn at last so they are on top of everything else.

	===== General Code Structure =====		===== General Code Structure =====

imported>Dem1se: Fix typos, mention anchors

2021-11-12T07:05:56Z

Fix typos, mention anchors

← Older revision		Revision as of 07:05, 12 November 2021
Line 127:		Line 127:
	=== The Screen Positions ===		=== The Screen Positions ===

	The number literals used in the UI element initializations and to define the UI ~~dialog~~'s ~~contants~~ are pixel values that represent the UI's [[Modding:Modder_Guide/Game_Fundamentals#Positions \| positions]] in the screen.		The number literals used in the UI element initializations and to define the UI dialogue's constants are pixel values that represent the UI's [[Modding:Modder_Guide/Game_Fundamentals#Positions \| positions]] in the screen.

			The positions are describing where to place the top left corner (anchor) of the UI element, dialogue boxes, etc.

	The top-left corner of the screen is (0, 0) and increases across to the right and downwards.		The top-left corner of the screen is (0, 0) and increases across to the right and downwards.

imported>Dem1se: Slightly edit the comments to cross reference the previous list

2021-11-12T07:02:09Z

Slightly edit the comments to cross reference the previous list

imported>Dem1se: Edit section sub heading

2021-11-12T06:58:14Z

Edit section sub heading

← Older revision		Revision as of 06:58, 12 November 2021
Line 34:		Line 34:
	## The latter statements draw '''over''' the earlier statment's output. So things like the cursor should always be drawn at last so they are on top of everything else.		## The latter statements draw '''over''' the earlier statment's output. So things like the cursor should always be drawn at last so they are on top of everything else.

	===== ~~The general code layout will look something like this:~~ =====		===== General Code Structure =====

	<syntaxhighlight lang="c#">		<syntaxhighlight lang="c#">

imported>Dem1se: Add the rest of Additional info subsections

2021-11-12T06:52:48Z

Add the rest of Additional info subsections

← Older revision		Revision as of 06:52, 12 November 2021
Line 174:		Line 174:
	\| StardewValley.BellsAndWhistles		\| StardewValley.BellsAndWhistles
	\|}		\|}

			=== Available IClickableMenu Methods to Override ===

			Just like for UI components, the best way to find the complete list of all the UI / graphics components you can use in your UI is to decompile Stardew Valley yourself and looking at what's available. I'll still list a few fundamental methods that every UI will use, and might even find to be enough usually:

			{\| class="wikitable"
			! '''Method Name'''
			! '''Purpose'''
			\|-
			\| recieveLeftClick
			\| Used to respond to clicks on the UI.
			\|-
			\| performHoverAction
			\| Used to perform actions when mouse hovers over the UI
			\|-
			\| draw
			\| Used to specify how to draw/render the UI to screen
			\|-
			\| gameWindowSizeChanged
			\| Used to rescale the UI to fit the screen again, when the resolution of the window changes.
			\|}

			=== Using Custom Image Assets for UI ===

			Since you'll want to load custom pixel art for buttons and other UI elements, follow this wiki article section on how to [[Modding:Modder_Guide/APIs/Content#Read_assets \| read assets]].

			=== Using Game Textures for UI ===

			You can use sprites from the game's sprite sheets, this has some advantages to it; Using vanilla game textures makes your UIs feel a lot more cohesive with the game and give a vanilla feel to it.

			To understand what textures are available, you need to unpack the game's content packs (.XNB files). See this wiki article on how to [[Modding:Editing_XNB_files#Unpack_game_files \| unpack the game files]].

			Once you've taken a look at the textures that are available, you can use this method to get the Texture2D output of that sprite from the sheet:

			<syntaxhighlight lang="c#">
			// returns an OkButton
			Game1.getSourceRectForStandardTileSheet(Game1.mouseCursors, 46)

			// returns a cancel button
			Game1.getSourceRectForStandardTileSheet(Game1.mouseCursors, 47)
			</syntaxhighlight>

← Older revision		Revision as of 07:02, 12 November 2021
Line 39:		Line 39:
	public class MyUserInterface : IClickableMenu		public class MyUserInterface : IClickableMenu
	{		{
	// Some of the constants you'll use to relatively lay out all the UI elements		// 2. Some of the constants you'll use to relatively lay out all the UI elements
	int UIWidth = 632;		int UIWidth = 632;
	int UIHeight = 600;		int UIHeight = 600;
Line 45:		Line 45:
	int YPos = (Game1.viewport.Height / 2) - UIHeight;		int YPos = (Game1.viewport.Height / 2) - UIHeight;

	// Declare all the UI elements		// 3. Declare all the UI elements
	ClickableComponent TitleLabel;		ClickableComponent TitleLabel;
	...		...
Line 53:		Line 53:
	base.initialize(XPos, YPos, UIWidth, UIHeight);		base.initialize(XPos, YPos, UIWidth, UIHeight);

	// initialize and lay out all the declared UI components		// 4. initialize and lay out all the declared UI components
	TitleLabel = new ClickableComponent(new Rectangle(XPos + 200, YPos + 96, UIwidth - 400, 64), "Some Title");		TitleLabel = new ClickableComponent(new Rectangle(XPos + 200, YPos + 96, UIwidth - 400, 64), "Some Title");
	...		...
	}		}

	// The method invoked when the player left-clicks on the menu.		// 5. The method invoked when the player left-clicks on the menu.
	public override void receiveLeftClick(int x, int y, bool playSound = true)		public override void receiveLeftClick(int x, int y, bool playSound = true)
	{		{
Line 70:		Line 70:
	...		...

	// Render the UI that has been set up to the screen.		// 6. Render the UI that has been set up to the screen.
	// Gets called automatically every render tick when this UI is active		// Gets called automatically every render tick when this UI is active
	public override void draw(SpriteBatch b)		public override void draw(SpriteBatch b)