TODO.md

@@ -1,11 +1,10 @@
 # Specific projects
 
 ## Now:
+- renderer scenes
 - outfitter
 
 ## Small jobs
-- Fix window resizing
-- Debug: show mouse position
 - 🌟 Better planet desc formatting
 - Procedural suns
 - 🌟 Back arrow -> reverse

assets

@@ -1 +1 @@
-Subproject commit e5898796144c7590c3cf18e14867a5ec47637fd4
+Subproject commit 481c1071a5c08124535daef78d746f6ec58c056e

content/sprite.toml

@@ -94,9 +94,6 @@ file = "ui/landscape-mask.png"
 [sprite."ui::outfitbg"]
 file = "ui/outfit-bg.png"
 
-[sprite."ui::outfitterbox"]
-file = "ui/outfitter-box.png"
-
 [sprite."ui::shopsepbar"]
 file = "ui/shop-sep-bar.png"
 

content/ui.toml

@@ -1,10 +1,12 @@
 [ui.status]
 
 # TODO: unified color value
+# TODO: anchor
 # TODO: bar type: linear/radial
 # TODO: bar as ui util struct
 # TODO: mouse collider
 # TODO: modular UI (how?)
+# TODO: textbox configuration
 
 # shield_bar.pos = [-19, -19]
 # shield_bar.diameter = 182
@@ -22,59 +24,19 @@
 
 [ui.landed]
 frame.sprite = "ui::planet"
-frame.rect.pos = [0.0, 0.0]
-frame.rect.dim = [800.0, 800.0]
-frame.rect.anchor_self = "center"
-frame.rect.anchor_parent = "center"
+frame.pos = [0.0, 0.0]
+frame.dim = [800.0, 800.0]
 
 landscape.mask = "ui::landscapemask"
-landscape.rect.pos = [-350.0, 282.8]
-landscape.rect.dim = [537.5, 270.31]
-landscape.rect.anchor_self = "northwest"
-landscape.rect.anchor_parent = "center"
-
+landscape.pos = [32.0, 75.0]
+landscape.dim = [344.0, 173.0]
+landscape.loc_div = 512
 
 button.sprite = "ui::planet::button"
-button.rect.pos = [178.12, 254.6]
-button.rect.dim = [175.16, 38.437]
-button.rect.anchor_self = "northwest"
-button.rect.anchor_parent = "center"
+button.pos = [356, 90]
+button.dim = [113.569, 20]
+button.loc_div = 512
 button.on_mouse_enter.edge = "on:top"
 button.on_mouse_enter.duration = 0.1
 button.on_mouse_leave.edge = "off:top"
 button.on_mouse_leave.duration = 0.1
-
-planet_name.rect.pos = [-143.89, 273]
-planet_name.rect.dim = [121.98, 18.094]
-planet_name.rect.anchor_self = "northwest"
-planet_name.rect.anchor_parent = "center"
-planet_name.font_size = 19
-planet_name.line_height = 19
-planet_name.align = "center"
-
-planet_desc.rect.pos = [-358.43, -32]
-planet_desc.rect.dim = [673.91, 153.75]
-planet_desc.rect.anchor_self = "northwest"
-planet_desc.rect.anchor_parent = "center"
-planet_desc.font_size = 16
-planet_desc.line_height = 18
-planet_desc.align = "left"
-
-
-[ui.outfitter]
-
-se_box.sprite = "ui::outfitterbox"
-se_box.rect.pos = [-10.0, -10.0]
-se_box.rect.dim = [512.0, 337.0]        # todo: auto aspect
-se_box.rect.anchor_self = "southwest"
-se_box.rect.anchor_parent = "southwest"
-
-exit_button.sprite = "ui::button"
-exit_button.rect.pos = [279.07, 135.38]
-exit_button.rect.dim = [173.44, 45.01]
-exit_button.rect.anchor_self = "northwest"
-exit_button.rect.anchor_parent = "southwest"
-exit_button.on_mouse_enter.edge = "on:top"
-exit_button.on_mouse_enter.duration = 0.1
-exit_button.on_mouse_leave.edge = "off:top"
-exit_button.on_mouse_leave.duration = 0.1

crates/content/src/part/ui.rs

@@ -1,6 +1,5 @@
 use anyhow::{Context, Result};
 use nalgebra::{Point2, Vector2};
-use serde::Deserialize;
 
 use crate::{handle::SpriteHandle, Content, ContentBuildContext, SectionEdge};
 
@@ -15,7 +14,6 @@ pub(crate) mod syntax {
 	#[derive(Debug, Deserialize)]
 	pub struct Ui {
 		pub landed: UiLanded,
-		pub outfitter: UiOutfitter,
 	}
 
 	#[derive(Debug, Deserialize)]
@@ -23,22 +21,17 @@ pub(crate) mod syntax {
 		pub frame: UiSprite,
 		pub landscape: UiSprite,
 		pub button: UiSprite,
-		pub planet_name: UiText,
-		pub planet_desc: UiText,
 	}
 
 	#[derive(Debug, Deserialize)]
-	pub struct UiOutfitter {
-		pub se_box: UiSprite,
-		pub exit_button: UiSprite,
-	}
-
-	#[derive(Debug, Deserialize)]
-	pub struct UiRect {
+	pub struct UiSprite {
+		pub sprite: Option<String>,
 		pub pos: [f32; 2],
 		pub dim: [f32; 2],
-		pub anchor_self: super::UiPositionAnchor,
-		pub anchor_parent: super::UiPositionAnchor,
+		pub loc_div: Option<f32>,
+		pub mask: Option<String>,
+		pub on_mouse_enter: Option<EdgeSpec>,
+		pub on_mouse_leave: Option<EdgeSpec>,
 	}
 
 	#[derive(Debug, Deserialize)]
@@ -47,53 +40,15 @@ pub(crate) mod syntax {
 		pub duration: f32,
 	}
 
-	#[derive(Debug, Deserialize)]
-	pub struct UiText {
-		pub rect: UiRect,
-		pub font_size: f32,
-		pub line_height: f32,
-		pub align: super::UiTextAlign,
-	}
-
-	impl UiText {
-		pub fn build(
-			self,
-			_build_context: &ContentBuildContext,
-			_ct: &Content,
-		) -> Result<super::UiTextConfig> {
-			let rect = {
-				super::UiRect {
-					pos: Point2::new(self.rect.pos[0], self.rect.pos[1]),
-					dim: Vector2::new(self.rect.dim[0], self.rect.dim[1]),
-					anchor_self: self.rect.anchor_self,
-					anchor_parent: self.rect.anchor_parent,
-				}
-			};
-
-			return Ok(super::UiTextConfig {
-				rect,
-				font_size: self.font_size,
-				line_height: self.line_height,
-				align: self.align,
-			});
-		}
-	}
-
-	#[derive(Debug, Deserialize)]
-	pub struct UiSprite {
-		pub sprite: Option<String>,
-		pub rect: UiRect,
-		pub mask: Option<String>,
-		pub on_mouse_enter: Option<EdgeSpec>,
-		pub on_mouse_leave: Option<EdgeSpec>,
-	}
-
 	impl UiSprite {
 		pub fn build(
 			self,
 			build_context: &ContentBuildContext,
 			ct: &Content,
 
+			// If true, this ui sprite will be positioned relative to another
+			is_child: bool,
+
 			// If true, fail if self.sprite is missing.
 			// If false, fail if self.sprite exists.
 			// This is false for sprites that may change---for example, planet landscapes
@@ -157,12 +112,19 @@ pub(crate) mod syntax {
 				}
 			};
 
+			let d = self.loc_div.unwrap_or(1.0);
+
 			let rect = {
-				super::UiRect {
-					pos: Point2::new(self.rect.pos[0], self.rect.pos[1]),
-					dim: Vector2::new(self.rect.dim[0], self.rect.dim[1]),
-					anchor_self: self.rect.anchor_self,
-					anchor_parent: self.rect.anchor_parent,
+				if is_child {
+					super::UiSpriteRect::Relative {
+						pos: Point2::new(self.pos[0], self.pos[1]) / d,
+						dim: Vector2::new(self.dim[0], self.dim[1]) / d,
+					}
+				} else {
+					super::UiSpriteRect::Absolute {
+						pos: Point2::new(self.pos[0], self.pos[1]) / d,
+						dim: Vector2::new(self.dim[0], self.dim[1]) / d,
+					}
 				}
 			};
 
@@ -177,42 +139,6 @@ pub(crate) mod syntax {
 	}
 }
 
-/// How to align text in a text box
-#[derive(Debug, Deserialize, Clone, Copy)]
-pub enum UiTextAlign {
-	/// Center-align
-	#[serde(rename = "center")]
-	Center,
-
-	/// Left-align
-	#[serde(rename = "left")]
-	Left,
-}
-
-/// How to position a UI sprite
-#[derive(Debug, Deserialize, Clone, Copy)]
-pub enum UiPositionAnchor {
-	/// Anchored at center
-	#[serde(rename = "center")]
-	Center,
-
-	/// Anchored at top-left
-	#[serde(rename = "northwest")]
-	NorthWest,
-
-	/// Anchored at top-right
-	#[serde(rename = "northeast")]
-	NorthEast,
-
-	/// Anchored at bottom-left
-	#[serde(rename = "southwest")]
-	SouthWest,
-
-	/// Anchored at bottom-right
-	#[serde(rename = "southeast")]
-	SouthEast,
-}
-
 /// UI Configuration
 #[derive(Debug, Clone)]
 pub struct Ui {
@@ -224,35 +150,54 @@ pub struct Ui {
 
 	/// Test button
 	pub landed_button: UiSpriteConfig,
-
-	/// Landed planet name
-	pub landed_planet_name: UiTextConfig,
-
-	/// Landed planet description
-	pub landed_planet_desc: UiTextConfig,
-
-	/// Outfitter exit button
-	pub outfitter_exit_button: UiSpriteConfig,
-
-	/// Outfitter south-east box
-	pub outfitter_se_box: UiSpriteConfig,
 }
 
 /// A UI sprite's position
 #[derive(Debug, Clone)]
-pub struct UiRect {
+pub enum UiSpriteRect {
+	/// Positioning relative to a parent sprite
+	Relative {
+		// Note that both pos and dim include transparent pixels,
+		// of this sprite AND its parent.
+
+		// We use the top left corner here because that's how inkscape
+		// positions its objects. This makes it very easy to compute position.
+		// TODO: maybe add anchors here too?
+		/// The position of this sprite's northeast corner, relative to its parent's NE corner.
+		/// Positive X is right, positive Y is down.
+		pos: Point2<f32>,
+
+		/// This sprite's w and h, as a fraction of the parent's width and height.
+		dim: Vector2<f32>,
+	},
+
+	/// Absolute positioning
+	Absolute {
 		/// The position of the center of this sprite, in logical pixels,
 		/// with 0, 0 at the center of the screen
-	pub pos: Point2<f32>,
+		pos: Point2<f32>,
 
 		/// This sprite's w and h, in logical pixels.
-	pub dim: Vector2<f32>,
+		dim: Vector2<f32>,
+	},
+}
 
-	/// The point on this sprite that pos is anchored to
-	pub anchor_self: UiPositionAnchor,
+impl UiSpriteRect {
+	/// Get this rectangle's position
+	pub fn get_pos(&self) -> &Point2<f32> {
+		match self {
+			Self::Relative { pos, .. } => pos,
+			Self::Absolute { pos, .. } => pos,
+		}
+	}
 
-	/// The point on the parent that pos is relative to
-	pub anchor_parent: UiPositionAnchor,
+	/// Get this rectangle's dimensions
+	pub fn get_dim(&self) -> &Vector2<f32> {
+		match self {
+			Self::Relative { dim, .. } => dim,
+			Self::Absolute { dim, .. } => dim,
+		}
+	}
 }
 
 /// A single UI sprite instance
@@ -265,7 +210,7 @@ pub struct UiSpriteConfig {
 	pub mask: Option<SpriteHandle>,
 
 	/// This sprite's position and size
-	pub rect: UiRect,
+	pub rect: UiSpriteRect,
 
 	/// Animation edge to take when mouse enters this sprite
 	pub on_mouse_enter: Option<SectionEdge>,
@@ -274,22 +219,6 @@ pub struct UiSpriteConfig {
 	pub on_mouse_leave: Option<SectionEdge>,
 }
 
-/// A UI text box
-#[derive(Debug, Clone)]
-pub struct UiTextConfig {
-	/// Text box location and dimensions
-	pub rect: UiRect,
-
-	/// Text box font size
-	pub font_size: f32,
-
-	/// Text box line height
-	pub line_height: f32,
-
-	/// Text box alignment
-	pub align: UiTextAlign,
-}
-
 impl crate::Build for Ui {
 	type InputSyntaxType = syntax::Ui;
 
@@ -302,39 +231,18 @@ impl crate::Build for Ui {
 			landed_frame: ui
 				.landed
 				.frame
-				.build(build_context, ct, true)
-				.with_context(|| format!("in ui config (landed_frame)"))?,
+				.build(build_context, ct, false, true)
+				.with_context(|| format!("in ui config (frame)"))?,
 			landed_landscape: ui
 				.landed
 				.landscape
-				.build(build_context, ct, false)
-				.with_context(|| format!("in ui config (landed_landscape)"))?,
+				.build(build_context, ct, true, false)
+				.with_context(|| format!("in ui config (image)"))?,
 			landed_button: ui
 				.landed
 				.button
-				.build(build_context, ct, true)
-				.with_context(|| format!("in ui config (landed_button)"))?,
-			landed_planet_name: ui
-				.landed
-				.planet_name
-				.build(build_context, ct)
-				.with_context(|| format!("in ui config (landed_planet_name)"))?,
-			landed_planet_desc: ui
-				.landed
-				.planet_desc
-				.build(build_context, ct)
-				.with_context(|| format!("in ui config (landed_planet_desc)"))?,
-
-			outfitter_exit_button: ui
-				.outfitter
-				.exit_button
-				.build(build_context, ct, true)
-				.with_context(|| format!("in ui config (outfitter_exit_button)"))?,
-			outfitter_se_box: ui
-				.outfitter
-				.se_box
-				.build(build_context, ct, true)
-				.with_context(|| format!("in ui config (outfitter_se_box)"))?,
+				.build(build_context, ct, true, true)
+				.with_context(|| format!("in ui config (button)"))?,
 		});
 
 		return Ok(());

crates/render/shaders/include/anchor.wgsl

@@ -7,7 +7,6 @@ fn anchor(
 	dim: vec2<f32>,      // Sprite dimensions (width, height)
 ) -> vec2<f32> {
 
-	// TODO: remove, do in ui rust lib
 	var trans: vec2<f32> = vec2(0.0, 0.0);
 	let window_dim = (
 		vec2(global_data.window_size_w, global_data.window_size_h) /

crates/render/shaders/ui.wgsl

@@ -4,7 +4,7 @@ struct InstanceInput {
 	@location(2) anchor: u32,
 	@location(3) position: vec2<f32>,
 	@location(4) angle: f32,
-	@location(5) dim: vec2<f32>,
+	@location(5) size: f32,
 	@location(6) color_transform: vec4<f32>,
 	@location(7) texture_index: vec2<u32>,
 	@location(8) texture_fade: f32,
@@ -44,26 +44,30 @@ fn transform_vertex(
 	texture_index: u32,
 ) -> vec4<f32> {
 	
-	// Window size in logical pixels
 	let window_dim = (
 		vec2(global_data.window_size_w, global_data.window_size_h)
 		/ global_data.window_scale
 	);
 	
-	let scale = instance.dim.y / window_dim.y;
+	let scale = instance.size / window_dim.y;
+	let aspect = (
+		global_atlas[instance.texture_index.x].width /
+		global_atlas[instance.texture_index.x].height
+	);
 
+	// Apply scale and sprite aspect
+	// Note that our mesh starts centered at (0, 0). This is important!
 	var pos: vec2<f32> = vec2(
-		vertex_position.x * scale * (instance.dim.x / instance.dim.y),
+		vertex_position.x * scale * aspect,
 		vertex_position.y * scale
 	);
 
+	// Apply rotation (and adjust sprite angle, since sprites point north)
 	pos = mat2x2(
 		vec2(cos(instance.angle - 1.5708), sin(instance.angle - 1.5708)),
 		vec2(-sin(instance.angle - 1.5708), cos(instance.angle - 1.5708))
 	) * pos;
 
-	// Apply rotation (and adjust sprite angle, since sprites point north)
-
 	// Correct for screen aspect, preserving height
 	pos = vec2(
 		pos.x / global_data.window_aspect,
@@ -73,7 +77,7 @@ fn transform_vertex(
 	pos = pos + anchor(
 		instance.anchor,
 		instance.position,
-		instance.dim
+		vec2(instance.size * aspect, instance.size)
 	);
 
 	return vec4<f32>(pos, 0.0, 1.0);
@@ -86,6 +90,9 @@ fn vertex_main(
 ) -> VertexOutput {
 	var out: VertexOutput;
 
+	// TODO: this will break if we try to use texture 0.
+	// implement animations for ui sprites & fix that here.
+
 	// Pick texture size by the size of the visible texture
 	// (texture index 0 is special, it's the "hidden" texture)
 	if instance.texture_index.x == 0u && instance.texture_index.y == 0u {

crates/render/src/ui/scenes/flying/radar.rs

@@ -63,7 +63,7 @@ impl Radar {
 			anchor: PositionAnchor::NwNw.to_int(),
 			position: [10.0, -10.0],
 			angle: 0.0,
-			dim: [sprite.aspect * radar_size, radar_size],
+			size: radar_size,
 			color: [1.0, 1.0, 1.0, 1.0],
 			texture_index: [texture_a, texture_a],
 			texture_fade: 1.0,
@@ -96,7 +96,7 @@ impl Radar {
 						+ (d * (radar_size / 2.0)))
 						.into(),
 					angle: o.angle,
-					dim: [sprite.aspect * size, size],
+					size,
 					color: [0.5, 0.5, 0.5, 1.0],
 					texture_index: [texture_a, texture_a],
 					texture_fade: 1.0,
@@ -154,7 +154,7 @@ impl Radar {
 					anchor: PositionAnchor::NwC.to_int(),
 					position: position.into(),
 					angle: player_ship.rigidbody.rotation().angle(),
-					dim: [sprite.aspect * size, size],
+					size,
 					color,
 					texture_index: [texture_a, texture_a],
 					texture_fade: 1.0,
@@ -186,7 +186,7 @@ impl Radar {
 				)
 				.into(),
 				angle: to_radians(90.0),
-				dim: [sprite.aspect * size, size],
+				size,
 				color,
 				texture_index: [texture_a, texture_a],
 				texture_fade: 1.0,
@@ -201,7 +201,7 @@ impl Radar {
 				)
 				.into(),
 				angle: to_radians(180.0),
-				dim: [sprite.aspect * size, size],
+				size,
 				color,
 				texture_index: [texture_a, texture_a],
 				texture_fade: 1.0,
@@ -216,7 +216,7 @@ impl Radar {
 				)
 				.into(),
 				angle: to_radians(270.0),
-				dim: [sprite.aspect * size, size],
+				size,
 				color,
 				texture_index: [texture_a, texture_a],
 				texture_fade: 1.0,
@@ -231,7 +231,7 @@ impl Radar {
 				)
 				.into(),
 				angle: to_radians(0.0),
-				dim: [sprite.aspect * size, size],
+				size,
 				color,
 				texture_index: [texture_a, texture_a],
 				texture_fade: 1.0,
@@ -254,7 +254,7 @@ impl Radar {
 				anchor: PositionAnchor::NwC.to_int(),
 				position: position.into(),
 				angle,
-				dim: [10.0 * sprite.aspect, 10.0],
+				size: 10.0,
 				color: [1.0, 1.0, 1.0, 1f32.min((m - 200.0) / 400.0)],
 				texture_index: [texture_a, texture_a],
 				texture_fade: 1.0,

crates/render/src/ui/scenes/flying/status.rs

@@ -68,7 +68,7 @@ impl Status {
 			anchor: PositionAnchor::NeNe.to_int(),
 			position: [-10.0, -10.0],
 			angle: 0.0,
-			dim: [sprite.aspect * 200.0, 200.0],
+			size: 200.0,
 			color: [1.0, 1.0, 1.0, 1.0],
 			texture_index: [texture_a, texture_a],
 			texture_fade: 1.0,

crates/render/src/ui/scenes/landed.rs

@@ -1,11 +1,12 @@
 use galactica_content::{Content, SystemObject, SystemObjectHandle};
 use galactica_system::{data::ShipState, phys::PhysSimShipHandle};
-use glyphon::{Attrs, TextArea, Weight};
+use glyphon::{cosmic_text::Align, Attrs, Color, Metrics, TextArea, Weight};
+use nalgebra::{Point2, Vector2};
 
 use crate::{
 	ui::{
 		manager::{UiScene, UiSceneStepResult, UiScenes},
-		util::{UiSprite, UiTextArea},
+		util::{SpriteRect, UiSprite, UiTextArea},
 	},
 	RenderInput, RenderState,
 };
@@ -44,8 +45,35 @@ impl UiLandedScene {
 			current_object: None,
 			leftclick_down: false,
 
-			description: UiTextArea::from(ct, state, &ct.get_ui().landed_planet_desc),
-			title: UiTextArea::from(ct, state, &ct.get_ui().landed_planet_name),
+			description: UiTextArea::new(
+				ct,
+				state,
+				frame.get_sprite(),
+				Point2::new(0.0, 0.0),
+				frame.get_height(),
+				SpriteRect {
+					pos: Point2::new(25.831, 284.883) / 512.0,
+					dim: Vector2::new(433.140, 97.220) / 512.0,
+				},
+				Metrics::new(16.0, 18.0),
+				Color::rgb(255, 255, 255),
+				Align::Left,
+			),
+
+			title: UiTextArea::new(
+				ct,
+				state,
+				frame.get_sprite(),
+				Point2::new(0.0, 0.0),
+				frame.get_height(),
+				SpriteRect {
+					pos: Point2::new(165.506, 82.0) / 512.0,
+					dim: Vector2::new(74.883, 17.0) / 512.0,
+				},
+				Metrics::new(19.0, 19.0),
+				Color::rgb(255, 255, 255),
+				Align::Center,
+			),
 
 			frame,
 			landscape,
@@ -77,14 +105,15 @@ impl UiLandedScene {
 
 impl<'this> UiScene<'this> for UiLandedScene {
 	fn step(&mut self, input: &RenderInput, state: &mut RenderState) -> UiSceneStepResult {
-		self.button.step(input, state);
-		self.landscape.step(input, state);
-		self.frame.step(input, state);
+		let frame_rect = Some(self.frame.get_rect(input));
+		self.button.step(input, state, frame_rect);
+		self.landscape.step(input, state, frame_rect);
+		self.frame.step(input, state, None);
 
 		let mut new_scene = None;
 		if input.player.input.pressed_leftclick() && !self.leftclick_down {
 			self.leftclick_down = true;
-			if self.button.contains_mouse(input, state) {
+			if self.button.contains_mouse(input, state, frame_rect) {
 				new_scene = Some(UiScenes::Outfitter(UiOutfitterScene::new(input.ct, state)));
 			}
 		} else if !input.player.input.pressed_leftclick() {
@@ -118,18 +147,19 @@ impl<'this> UiScene<'this> for UiLandedScene {
 		}
 
 		// Draw elements
-		self.button.push_to_buffer(input, state);
-		self.landscape.push_to_buffer(input, state);
-		self.frame.push_to_buffer(input, state);
+		let frame_rect = Some(self.frame.get_rect(input));
+		self.button.push_to_buffer(input, state, frame_rect);
+		self.landscape.push_to_buffer(input, state, frame_rect);
+		self.frame.push_to_buffer(input, state, None);
 	}
 
 	fn get_textareas(
 		&'this self,
 		v: &mut Vec<TextArea<'this>>,
-		_input: &RenderInput,
+		input: &RenderInput,
 		state: &RenderState,
 	) {
-		v.push(self.description.get_textarea(state));
-		v.push(self.title.get_textarea(state));
+		v.push(self.description.get_textarea(input, state));
+		v.push(self.title.get_textarea(input, state));
 	}
 }

crates/render/src/ui/scenes/outfitter.rs

@@ -1,4 +1,4 @@
-use galactica_content::{Content, SystemObject, SystemObjectHandle, UiPositionAnchor};
+use galactica_content::{Content, SystemObject, SystemObjectHandle};
 use galactica_system::{data::ShipState, phys::PhysSimShipHandle};
 use glyphon::{cosmic_text::Align, Attrs, Color, Metrics, TextArea, Weight};
 use nalgebra::{Point2, Vector2};
@@ -15,9 +15,9 @@ use super::UiLandedScene;
 
 pub struct UiOutfitterScene {
 	// UI elements
-	se_box: UiSprite,
-	exit_button: UiSprite,
-	exit_text: UiTextArea,
+	description: UiTextArea,
+	landscape: UiSprite,
+	button: UiSprite,
 
 	/// What object we're displaying currently.
 	/// Whenever this changes, we need to reflow text.
@@ -30,39 +30,55 @@ pub struct UiOutfitterScene {
 
 impl UiOutfitterScene {
 	pub fn new(ct: &Content, state: &mut RenderState) -> Self {
-		let exit_button = UiSprite::from(ct, &ct.get_ui().outfitter_exit_button);
-		let se_box = UiSprite::from(ct, &ct.get_ui().outfitter_se_box);
+		let button = UiSprite::new(
+			ct,
+			ct.get_sprite_handle("ui::button"),
+			None,
+			SpriteRect {
+				pos: Point2::new(0.0, 0.0),
+				dim: Vector2::new(200.0, 200.0),
+			},
+			None,
+			None,
+		);
+
+		let landscape = UiSprite::from_with_sprite(
+			ct,
+			&ct.get_ui().landed_landscape,
+			ct.get_sprite_handle("ui::landscape::test"),
+		);
 
 		let s = Self {
 			// height of element in logical pixels
 			current_object: None,
 			leftclick_down: false,
 
-			exit_text: UiTextArea::new(
+			description: UiTextArea::new(
 				ct,
 				state,
+				button.get_sprite(),
+				Point2::new(0.0, 0.0),
+				800.0,
 				SpriteRect {
-					pos: Point2::new(0.0, 0.0),
-					dim: Vector2::new(200.0, 200.0), // TODO: do this better
-					anchor_self: UiPositionAnchor::Center,
-					anchor_parent: UiPositionAnchor::Center,
+					pos: Point2::new(25.831, 284.883) / 512.0,
+					dim: Vector2::new(433.140, 97.220) / 512.0,
 				},
 				Metrics::new(16.0, 18.0),
 				Color::rgb(255, 255, 255),
-				Align::Center,
+				Align::Left,
 			),
 
-			se_box,
-			exit_button,
+			landscape,
+			button,
 		};
 
 		return s;
 	}
 
 	fn reflow(&mut self, planet: &SystemObject, state: &mut RenderState) {
-		self.exit_text.set_text(
+		self.description.set_text(
 			state,
-			"Exit",
+			&planet.desc,
 			Attrs::new()
 				.weight(Weight::NORMAL)
 				.family(glyphon::Family::SansSerif),
@@ -74,13 +90,13 @@ impl UiOutfitterScene {
 
 impl<'this> UiScene<'this> for UiOutfitterScene {
 	fn step(&mut self, input: &RenderInput, state: &mut RenderState) -> UiSceneStepResult {
-		self.se_box.step(input, state);
-		self.exit_button.step(input, state);
+		self.button.step(input, state, None);
+		self.landscape.step(input, state, None);
 
 		let mut new_scene = None;
 		if input.player.input.pressed_leftclick() && !self.leftclick_down {
 			self.leftclick_down = true;
-			if self.exit_button.contains_mouse(input, state) {
+			if self.button.contains_mouse(input, state, None) {
 				new_scene = Some(UiScenes::Landed(UiLandedScene::new(input.ct, state)));
 			}
 		} else if !input.player.input.pressed_leftclick() {
@@ -114,16 +130,16 @@ impl<'this> UiScene<'this> for UiOutfitterScene {
 		}
 
 		// Draw elements
-		self.se_box.push_to_buffer(input, state);
-		self.exit_button.push_to_buffer(input, state);
+		self.button.push_to_buffer(input, state, None);
+		self.landscape.push_to_buffer(input, state, None);
 	}
 
 	fn get_textareas(
 		&'this self,
 		v: &mut Vec<TextArea<'this>>,
-		_input: &RenderInput,
+		input: &RenderInput,
 		state: &RenderState,
 	) {
-		v.push(self.exit_text.get_textarea(state));
+		v.push(self.description.get_textarea(input, state));
 	}
 }

crates/render/src/ui/util/mod.rs

@@ -1,16 +1,14 @@
 mod sprite;
 mod textarea;
 
-use galactica_content::UiPositionAnchor;
 pub(super) use sprite::UiSprite;
 pub(super) use textarea::UiTextArea;
 
 use nalgebra::{Point2, Vector2};
-use winit::dpi::LogicalSize;
 
 use crate::{RenderInput, RenderState};
 
-/// Represents a rectangular region
+/// Represents a rectangular region inside a sprite.
 #[derive(Debug, Clone, Copy)]
 pub(crate) struct SpriteRect {
 	/// The position of the top-left corner of this rectangle, in fractional units.
@@ -20,143 +18,17 @@ pub(crate) struct SpriteRect {
 	/// The width and height of this rectangle, in fractional units.
 	/// 1.0 will be as tall as the sprite, 0.5 will be half as tall
 	pub dim: Vector2<f32>,
-
-	/// How to compute this rectangle's coordinates relative to its parent
-	pub anchor_self: UiPositionAnchor,
-
-	/// How to compute this rectangle's coordinates relative to its parent
-	pub anchor_parent: UiPositionAnchor,
 }
 
 impl SpriteRect {
-	/*
-		pub fn to_centered_relative(&self, parent: SpriteRectCentered) -> SpriteRectCentered {
-			let dim = Vector2::new(self.dim.x * parent.dim.x, self.dim.y * parent.dim.y);
-
-			let pos = Vector2::new(self.pos.x * parent.dim.x, self.pos.y * parent.dim.y);
-
-			let mut zero = match self.anchor_parent {
-				PositionAnchor::Center => parent.pos,
-
-				PositionAnchor::NorthWest => Point2::new(
-					parent.pos.x - (parent.dim.x / 2.0),
-					parent.pos.y + (parent.dim.y / 2.0),
-				),
-
-				PositionAnchor::SouthWest => Point2::new(
-					parent.pos.x - (parent.dim.x / 2.0),
-					parent.pos.y - (parent.dim.y / 2.0),
-				),
-
-				PositionAnchor::NorthEast => Point2::new(
-					parent.pos.x + (parent.dim.x / 2.0),
-					parent.pos.y + (parent.dim.y / 2.0),
-				),
-
-				PositionAnchor::SouthEast => Point2::new(
-					parent.pos.x + (parent.dim.x / 2.0),
-					parent.pos.y - (parent.dim.y / 2.0),
-				),
-			};
-
-			match self.anchor_self {
-				PositionAnchor::Center => {}
-
-				PositionAnchor::NorthWest => {
-					zero += Vector2::new(dim.x, -dim.y) / 2.0;
+	/// Northeast corner of this rect
+	pub fn ne_corner(&self) -> Point2<f32> {
+		self.pos + Vector2::new(-self.dim.x, self.dim.y) / 2.0
 	}
 
-				PositionAnchor::NorthEast => {
-					zero += Vector2::new(-dim.x, -dim.y) / 2.0;
-				}
-
-				PositionAnchor::SouthWest => {
-					zero += Vector2::new(dim.x, dim.y) / 2.0;
-				}
-
-				PositionAnchor::SouthEast => {
-					zero += Vector2::new(-dim.x, dim.y) / 2.0;
-				}
-			};
-
-			return SpriteRectCentered {
-				dim,
-				pos: zero + pos,
-			};
-		}
-	*/
-
-	/// Convert this rectangle to a centered rectangle.
-	pub fn to_centered(&self, state: &RenderState) -> CenteredSpriteRect {
-		let w: LogicalSize<f32> = state.window_size.to_logical(state.window.scale_factor());
-		let w = Vector2::new(w.width, w.height);
-
-		let mut pos = self.pos;
-		let dim = self.dim;
-
-		// Origin
-		match self.anchor_parent {
-			UiPositionAnchor::Center => {}
-
-			UiPositionAnchor::NorthWest => {
-				pos += Vector2::new(-w.x, w.y) / 2.0;
-			}
-
-			UiPositionAnchor::SouthWest => {
-				pos += Vector2::new(-w.x, -w.y) / 2.0;
-			}
-
-			UiPositionAnchor::NorthEast => {
-				pos += Vector2::new(w.x, w.y) / 2.0;
-			}
-
-			UiPositionAnchor::SouthEast => {
-				pos += Vector2::new(w.x, -w.y) / 2.0;
-			}
-		}
-
-		// Offset for self dimensions
-		match self.anchor_self {
-			UiPositionAnchor::Center => {}
-
-			UiPositionAnchor::NorthWest => {
-				pos += Vector2::new(dim.x, -dim.y) / 2.0;
-			}
-
-			UiPositionAnchor::NorthEast => {
-				pos += Vector2::new(-dim.x, -dim.y) / 2.0;
-			}
-
-			UiPositionAnchor::SouthWest => {
-				pos += Vector2::new(dim.x, dim.y) / 2.0;
-			}
-
-			UiPositionAnchor::SouthEast => {
-				pos += Vector2::new(dim.x, dim.y) / 2.0;
-			}
-		};
-
-		return CenteredSpriteRect { pos, dim };
-	}
-}
-
-/// Represents a rectangular region, in absolute coordinates relative to the screen center.
-#[derive(Debug, Clone, Copy)]
-pub(crate) struct CenteredSpriteRect {
-	/// The position of the top-left corner of this rectangle, in fractional units.
-	/// (0.0 is left edge of sprite, 1.0 is right edge)
-	pub pos: Point2<f32>,
-
-	/// The width and height of this rectangle, in fractional units.
-	/// 1.0 will be as tall as the sprite, 0.5 will be half as tall
-	pub dim: Vector2<f32>,
-}
-
-impl CenteredSpriteRect {
-	pub fn contains_point(&self, pt: Point2<f32>) -> bool {
-		let ne = self.pos + Vector2::new(-self.dim.x, self.dim.y) / 2.0;
-		let sw = self.pos + Vector2::new(self.dim.x, -self.dim.y) / 2.0;
-		return (pt.y < ne.y && pt.y > sw.y) && (pt.x > ne.x && pt.x < sw.x);
+	/// Southwest corner of this rect
+	pub fn sw_corner(&self) -> Point2<f32> {
+		self.pos + Vector2::new(self.dim.x, -self.dim.y) / 2.0
 	}
 }
 

crates/render/src/ui/util/sprite.rs

@@ -2,8 +2,8 @@ use galactica_content::{Content, SectionEdge, SpriteAutomaton, SpriteHandle, UiS
 use galactica_util::to_radians;
 use nalgebra::{Point2, Vector2};
 
-use super::{CenteredSpriteRect, SpriteRect};
-use crate::{vertexbuffer::types::UiInstance, RenderInput, RenderState};
+use super::SpriteRect;
+use crate::{vertexbuffer::types::UiInstance, PositionAnchor, RenderInput, RenderState};
 
 pub struct UiSprite {
 	pub anim: SpriteAutomaton,
@@ -49,21 +49,22 @@ impl UiSprite {
 			sprite,
 			ui.mask,
 			SpriteRect {
-				pos: ui.rect.pos,
-				dim: ui.rect.dim,
-				anchor_self: ui.rect.anchor_self,
-				anchor_parent: ui.rect.anchor_parent,
+				pos: *ui.rect.get_pos(),
+				dim: *ui.rect.get_dim(),
 			},
 			ui.on_mouse_enter,
 			ui.on_mouse_leave,
 		)
 	}
 
-	pub fn step(&mut self, input: &RenderInput, state: &RenderState) {
-		if self.contains_mouse(input, state) && !self.has_mouse && self.on_mouse_enter.is_some() {
+	pub fn step(&mut self, input: &RenderInput, state: &RenderState, parent: Option<SpriteRect>) {
+		if self.contains_mouse(input, state, parent)
+			&& !self.has_mouse
+			&& self.on_mouse_enter.is_some()
+		{
 			self.has_mouse = true;
 			self.anim.jump_to(input.ct, self.on_mouse_enter.unwrap())
-		} else if !self.contains_mouse(input, state)
+		} else if !self.contains_mouse(input, state, parent)
 			&& self.has_mouse
 			&& self.on_mouse_leave.is_some()
 		{
@@ -74,8 +75,13 @@ impl UiSprite {
 		self.anim.step(input.ct, input.time_since_last_run);
 	}
 
-	pub fn contains_mouse(&self, input: &RenderInput, state: &RenderState) -> bool {
-		let rect = self.get_rect(state);
+	pub fn contains_mouse(
+		&self,
+		input: &RenderInput,
+		state: &RenderState,
+		parent: Option<SpriteRect>,
+	) -> bool {
+		let rect = self.get_relative_rect(input, parent);
 
 		let fac = state.window.scale_factor() as f32;
 		let window_size = Vector2::new(
@@ -84,40 +90,69 @@ impl UiSprite {
 		);
 
 		let pos = input.player.input.get_mouse_pos();
-		let mouse_pos = Point2::new(
+		let mouse_pos = Vector2::new(
 			pos.x / fac - window_size.x / 2.0,
 			window_size.y / 2.0 - pos.y / fac,
 		);
 
-		return rect.contains_point(mouse_pos);
+		let ne = rect.ne_corner();
+		let sw = rect.sw_corner();
+		return (mouse_pos.y < ne.y && mouse_pos.y > sw.y)
+			&& (mouse_pos.x > ne.x && mouse_pos.x < sw.x);
 	}
 
-	pub fn get_rect(
-		&self,
-		state: &RenderState,
-		//parent: Option<SpriteRectCentered>,
-	) -> CenteredSpriteRect {
-		/*
+	pub fn get_rect(&self, input: &RenderInput) -> SpriteRect {
+		let pos = Point2::new(self.rect.pos.x, self.rect.pos.y);
+		let dim = Vector2::new(
+			self.rect.dim.y * input.ct.get_sprite(self.anim.get_sprite()).aspect,
+			self.rect.dim.y,
+		);
+
+		return SpriteRect { dim, pos };
+	}
+
+	pub fn get_relative_rect(&self, input: &RenderInput, parent: Option<SpriteRect>) -> SpriteRect {
 		if let Some(parent) = parent {
-			return self.rect.to_centered_relative(parent);
+			let zero = Point2::new(
+				parent.pos.x - (parent.dim.x / 2.0),
+				parent.pos.y + (parent.dim.y / 2.0),
+			);
+
+			let mut pos = zero
+				+ Vector2::new(
+					self.rect.pos.x * parent.dim.x,
+					-self.rect.pos.y * parent.dim.y,
+				);
+			let dim = Vector2::new(
+				self.rect.dim.x * parent.dim.x,
+				self.rect.dim.y * parent.dim.y,
+			);
+
+			pos += Vector2::new(dim.x, -dim.y) / 2.0;
+
+			return SpriteRect { dim, pos };
 		} else {
-			return self.rect.to_centered(state);
-		}*/
-		return self.rect.to_centered(state);
+			return self.get_rect(input);
+		}
 	}
 
 	/// Add this image to the gpu sprite buffer
-	pub fn push_to_buffer(&self, input: &RenderInput, state: &mut RenderState) {
-		let rect = self.get_rect(state);
+	pub fn push_to_buffer(
+		&self,
+		input: &RenderInput,
+		state: &mut RenderState,
+		parent: Option<SpriteRect>,
+	) {
+		let rect = self.get_relative_rect(input, parent.clone());
 
 		// TODO: use both dimensions,
 		// not just height
 		let anim_state = self.anim.get_texture_idx();
 		state.push_ui_buffer(UiInstance {
-			anchor: crate::PositionAnchor::CC.to_int(),
+			anchor: PositionAnchor::CC.to_int(),
 			position: rect.pos.into(),
 			angle: to_radians(90.0),
-			dim: rect.dim.into(),
+			size: rect.dim.y,
 			color: [1.0, 1.0, 1.0, 1.0],
 			texture_index: anim_state.texture_index(),
 			texture_fade: anim_state.fade,
@@ -131,4 +166,12 @@ impl UiSprite {
 				.unwrap_or([0, 0]),
 		});
 	}
+
+	pub fn get_sprite(&self) -> SpriteHandle {
+		self.anim.get_sprite()
+	}
+
+	pub fn get_height(&self) -> f32 {
+		self.rect.dim.y
+	}
 }

crates/render/src/ui/util/textarea.rs

@@ -1,12 +1,22 @@
-use galactica_content::{Content, UiTextAlign, UiTextConfig};
+use galactica_content::{Content, SpriteHandle};
 use glyphon::{cosmic_text::Align, Attrs, Buffer, Color, Metrics, Shaping, TextArea, TextBounds};
-use nalgebra::Vector2;
+use nalgebra::{Point2, Vector2};
 
 use super::SpriteRect;
-use crate::RenderState;
+use crate::{RenderInput, RenderState};
 
 /// Represents a text area inside a sprite.
 pub(crate) struct UiTextArea {
+	/// Parent sprite
+	sprite: SpriteHandle,
+
+	/// Position of parent sprite's center, in logical pixels,
+	/// with 0, 0 at the center of the screen
+	sprite_position: Point2<f32>,
+
+	/// Height of parent sprite, in logical pixels
+	sprite_size: f32,
+
 	/// Bounds of text area
 	rect: SpriteRect,
 
@@ -22,8 +32,11 @@ pub(crate) struct UiTextArea {
 
 impl UiTextArea {
 	pub fn new(
-		_ct: &Content,
+		ct: &Content,
 		state: &mut RenderState,
+		sprite: SpriteHandle,
+		sprite_position: Point2<f32>,
+		sprite_size: f32,
 		rect: SpriteRect,
 		text_metrics: Metrics,
 		color: Color,
@@ -31,37 +44,25 @@ impl UiTextArea {
 	) -> Self {
 		let mut s = Self {
 			buffer: Buffer::new(&mut state.text_font_system, text_metrics),
+			sprite_size: f32::NAN,
+			sprite,
+			sprite_position,
 			rect,
 			align,
 			color,
 		};
-
-		s.buffer.set_size(
-			&mut state.text_font_system,
-			s.rect.dim.x * state.window.scale_factor() as f32,
-			s.rect.dim.y * state.window.scale_factor() as f32,
-		);
-
+		s.set_size(ct, state, sprite_size);
 		return s;
 	}
 
-	pub fn from(ct: &Content, state: &mut RenderState, ui: &UiTextConfig) -> Self {
-		Self::new(
-			ct,
-			state,
-			SpriteRect {
-				pos: ui.rect.pos,
-				dim: ui.rect.dim,
-				anchor_self: ui.rect.anchor_self,
-				anchor_parent: ui.rect.anchor_parent,
-			},
-			Metrics::new(ui.font_size, ui.line_height),
-			Color::rgb(255, 255, 255),
-			match ui.align {
-				UiTextAlign::Center => Align::Center,
-				UiTextAlign::Left => Align::Left,
-			},
-		)
+	pub fn set_size(&mut self, ct: &Content, state: &mut RenderState, sprite_size: f32) {
+		self.sprite_size = sprite_size;
+		self.buffer.set_size(
+			&mut state.text_font_system,
+			(self.rect.dim.x * self.sprite_size) * state.window.scale_factor() as f32,
+			(self.rect.dim.y * self.sprite_size * ct.get_sprite(self.sprite).aspect)
+				* state.window.scale_factor() as f32,
+		);
 	}
 
 	pub fn set_text(&mut self, state: &mut RenderState, text: &str, attrs: Attrs) {
@@ -74,27 +75,31 @@ impl UiTextArea {
 		self.buffer.shape_until_scroll(&mut state.text_font_system);
 	}
 
-	pub fn get_textarea(&self, state: &RenderState) -> TextArea {
-		let rect = self.rect.to_centered(state);
+	pub fn get_textarea(&self, input: &RenderInput, state: &RenderState) -> TextArea {
+		let h = self.sprite_size;
+		let w = input.ct.get_sprite(self.sprite).aspect * h;
 
-		// Glypon works with physical pixels, so we must do some conversion
+		// Glypon works with physical pixels, so we must convert
 		let fac = state.window.scale_factor() as f32;
-		let corner_ne = Vector2::new(
-			(rect.pos.x - rect.dim.x / 2.0) * fac + state.window_size.width as f32 / 2.0,
-			state.window_size.height as f32 / 2.0 - (rect.pos.y * fac + rect.dim.y / 2.0),
+
+		// All the units below are in logical pixels
+		let zero = Vector2::new(
+			(state.window_size.width as f32 / (2.0 * fac)) - (w / 2.0) + self.sprite_position.x,
+			(state.window_size.height as f32 / (2.0 * fac)) - (h / 2.0) - self.sprite_position.y,
 		);
-		let corner_sw = corner_ne + rect.dim * fac;
+		let corner_ne = zero + Vector2::new(self.rect.pos.x * w, self.rect.pos.y * h);
+		let corner_sw = corner_ne + Vector2::new(self.rect.dim.x * w, self.rect.dim.y * h);
 
 		TextArea {
 			buffer: &self.buffer,
-			top: corner_ne.y,
-			left: corner_ne.x,
+			top: corner_ne.y * fac,
+			left: corner_ne.x * fac,
 			scale: 1.0,
 			bounds: TextBounds {
-				top: (corner_ne.y) as i32,
-				bottom: (corner_sw.y) as i32,
-				left: (corner_ne.x) as i32,
-				right: (corner_sw.x) as i32,
+				top: (corner_ne.y * fac) as i32,
+				bottom: (corner_sw.y * fac) as i32,
+				left: (corner_ne.x * fac) as i32,
+				right: (corner_sw.x * fac) as i32,
 			},
 			default_color: self.color,
 		}

crates/render/src/vertexbuffer/types.rs

@@ -153,9 +153,8 @@ pub struct UiInstance {
 	/// The angle of this sprite, in radians
 	pub angle: f32,
 
-	/// The width and height of this sprite, in logical pixels.
-	/// Aspect ratio is not automatically preserved.
-	pub dim: [f32; 2],
+	/// The height of this sprite, in logical pixels
+	pub size: f32,
 
 	/// This lets us color ui sprites dynamically.
 	/// Each fragment's color is multiplied by this value.
@@ -201,33 +200,33 @@ impl BufferObject for UiInstance {
 					shader_location: 4,
 					format: wgpu::VertexFormat::Float32,
 				},
-				// Dim
+				// Size
 				wgpu::VertexAttribute {
 					offset: mem::size_of::<[f32; 4]>() as wgpu::BufferAddress,
 					shader_location: 5,
-					format: wgpu::VertexFormat::Float32x2,
+					format: wgpu::VertexFormat::Float32,
 				},
 				// Color
 				wgpu::VertexAttribute {
-					offset: mem::size_of::<[f32; 6]>() as wgpu::BufferAddress,
+					offset: mem::size_of::<[f32; 5]>() as wgpu::BufferAddress,
 					shader_location: 6,
 					format: wgpu::VertexFormat::Float32x4,
 				},
 				// Texture
 				wgpu::VertexAttribute {
-					offset: mem::size_of::<[f32; 10]>() as wgpu::BufferAddress,
+					offset: mem::size_of::<[f32; 9]>() as wgpu::BufferAddress,
 					shader_location: 7,
 					format: wgpu::VertexFormat::Uint32x2,
 				},
 				// Texture fade
 				wgpu::VertexAttribute {
-					offset: mem::size_of::<[f32; 12]>() as wgpu::BufferAddress,
+					offset: mem::size_of::<[f32; 11]>() as wgpu::BufferAddress,
 					shader_location: 8,
 					format: wgpu::VertexFormat::Float32,
 				},
 				// Mask
 				wgpu::VertexAttribute {
-					offset: mem::size_of::<[f32; 13]>() as wgpu::BufferAddress,
+					offset: mem::size_of::<[f32; 12]>() as wgpu::BufferAddress,
 					shader_location: 9,
 					format: wgpu::VertexFormat::Uint32x2,
 				},