Complete redisign of interactions

rbfx · Aug 27, 2024 · ea179e3 · ea179e3
1 parent a70596c
commit ea179e3
Show file tree

Hide file tree

Showing 13 changed files with 215 additions and 107 deletions.
diff --git a/Content/Common/Data/Materials/RedKey.material b/Content/Common/Data/Materials/RedKey.material
@@ -0,0 +1,24 @@
+<?xml version="1.0"?>
+<material>
+	<technique name="Techniques/LitOpaque.xml" quality="0" loddistance="0.000000" />
+	<shader vsdefines="PBR " psdefines="PBR " />
+	<parameter name="MatEnvMapColor" value="1 1 1" />
+	<parameter name="NormalScale" value="1.000000" />
+	<parameter name="MatDiffColor" value="1 0 0 1" />
+	<parameter name="VOffset" value="0 1 0 0" />
+	<parameter name="DielectricReflectance" value="0.500000" />
+	<parameter name="Metallic" value="1.000000" />
+	<parameter name="MatSpecColor" value="0 0 0 1" />
+	<parameter name="MatEmissiveColor" value="0 0 0" />
+	<parameter name="UOffset" value="1 0 0 0" />
+	<parameter name="AlphaCutoff" value="0.500000" />
+	<parameter name="Roughness" value="1.000000" />
+	<cull value="ccw" />
+	<shadowcull value="ccw" />
+	<fill value="solid" />
+	<depthbias constant="0.000000" slopescaled="0.000000" normaloffset="0.000000" />
+	<alphatocoverage enable="false" />
+	<lineantialias enable="false" />
+	<renderorder value="128" />
+	<occlusion enable="true" />
+</material>
diff --git a/Content/Common/Data/Quaternius/UltimateModularSciFiPack/Prefabs/Props_Crate.prefab b/Content/Common/Data/Quaternius/UltimateModularSciFiPack/Prefabs/Props_Crate.prefab
@@ -96,7 +96,11 @@
 						<attribute name="Cast Shadows" type="Bool" value="true" />
 					</attributes>
 				</component>
-				<component _typeName="Selectable" />
+				<component _typeName="Pickable">
+					<attributes>
+						<attribute name="Tooltip" type="String" value="Pick Crate" />
+					</attributes>
+				</component>
 			</components>
 		</node>
 	</nodes>

diff --git a/Content/Common/Data/Scenes/Sample.xml b/Content/Common/Data/Scenes/Sample.xml
@@ -4,7 +4,7 @@
 	<attribute name="Time Scale" value="1.000000" />
 	<attribute name="Elapsed Time" value="0.000000" />
 	<attribute name="Next Node ID" value="10324" />
-	<attribute name="Next Component ID" value="17454" />
+	<attribute name="Next Component ID" value="17653" />
 	<attribute name="Variables" />
 	<attribute name="Update Events">
 		<string value="@SceneForcedUpdate" />
@@ -93,7 +93,7 @@
 		<attribute name="Type" value="Music" />
 		<attribute name="Frequency" value="48000.000000" />
 		<attribute name="Is Playing" value="true" />
-		<attribute name="Play Position" value="-33619920" />
+		<attribute name="Play Position" value="-314948752" />
 	</component>
 	<node id="6">
 		<attribute name="Is Enabled" value="true" />
@@ -812,8 +812,8 @@
 					<component type="DoorButton" id="14934">
 						<attribute name="Open Animation" value="Animation;Animations/SlidingDoor/Open.xml" />
 						<attribute name="Close Animation" value="Animation;Animations/SlidingDoor/Close.xml" />
+						<attribute name="Tooltip" value="Open or Close Door" />
 					</component>
-					<component type="Selectable" id="14956" />
 				</node>
 			</node>
 			<node id="7765">
@@ -930,7 +930,7 @@
 					</attribute>
 				</component>
 				<component type="Selectable" id="17453">
-					<attribute name="Title" value="Requires Red Key" />
+					<attribute name="Tooltip" value="Requires Red Key" />
 				</component>
 				<node id="10322">
 					<attribute name="Is Enabled" value="true" />
@@ -1196,19 +1196,16 @@
 		<attribute name="Variables" />
 		<component type="StaticModel" id="8775">
 			<attribute name="Model" value="Model;Models/Box.mdl" />
-			<attribute name="Material" value="Material;Materials/VertexColor.xml" />
+			<attribute name="Material" value="Material;Materials/RedKey.material" />
 			<attribute name="Cast Shadows" value="true" />
 		</component>
 		<component type="CollisionShape" id="8955" />
 		<component type="RigidBody" id="8956">
 			<attribute name="Physics Position" value="4.10768 0.236873 0.401472" />
 		</component>
-		<component type="Selectable" id="16466">
-			<attribute name="Title" value="Red Key" />
-		</component>
-		<component type="Pickable" id="16885">
+		<component type="InventoryItem" id="17652">
 			<attribute name="Inventory Key" value="RedKey" />
-			<attribute name="Title" value="Red Key" />
+			<attribute name="Tooltip" value="Red Key" />
 		</component>
 	</node>
 	<node id="9687">

diff --git a/Content/Common/Data/UI/GameUI.rml b/Content/Common/Data/UI/GameUI.rml
@@ -1,6 +1,7 @@
 <rml>
 	<head>
 		<link type="text/rcss" href="rml.rcss"/>
+		<link type="text/rcss" href="casual.rcss"/>
 		<style>
 			/* Style of the body element, i.e. the root of the window */
 			body {
@@ -27,9 +28,18 @@
 			top: 50vh; left: 50vw;
 			transform: translate(32px, 32px);
 			}
+			.gauge {
+			decorator: image( icon-use-gauge );
+			width: 40px;
+			height: 40px;
+			fill-image: icon-use-gauge-fill;
+			}
 		</style>
 	</head>
 	<body data-model="GameRmlUIComponent">
-		<div class="hover-tooltip">{{InteractableTooltip}}</div>
+		<div class="hover-tooltip"  data-if="HasInteractable">
+			<progress class="gauge" direction="clockwise" start-edge="bottom" data-value="InteractionProgress" data-if="InteractionEnabled"></progress>
+			{{InteractableTooltip}}
+		</div>
 	</body>
 </rml>
diff --git a/Content/Common/Data/UI/casual.png b/Content/Common/Data/UI/casual.png
diff --git a/Content/Common/Data/UI/casual.rcss b/Content/Common/Data/UI/casual.rcss
@@ -21,14 +21,14 @@
     gray-inner-panel-inner: 137px 31px 2px 2px;
     gray-outer-panel: 4px 4px 100px 106px;
     gray-outer-panel-inner: 53px 55px 2px 2px;
-    gray-header-panel: 396px 70px 4px 10px;
-    gray-header-panel-inner: 397px 73px 2px 2px;
-    gray-footer-panel: 408px 70px 4px 8px;
-    gray-footer-panel-inner: 409px 73px 2px 2px;
-    slidertrack: 182px 70px 14px 22px;
-    slidertrack-inner: 188px 80px 2px 2px;
-    sliderbar: 204px 70px 16px 28px;
-    sliderbar-inner: 211px 81px 2px 2px;
+    gray-header-panel: 492px 70px 4px 10px;
+    gray-header-panel-inner: 493px 73px 2px 2px;
+    gray-footer-panel: 504px 70px 4px 8px;
+    gray-footer-panel-inner: 505px 73px 2px 2px;
+    slidertrack: 278px 70px 14px 22px;
+    slidertrack-inner: 284px 80px 2px 2px;
+    sliderbar: 300px 70px 16px 28px;
+    sliderbar-inner: 307px 81px 2px 2px;
     blue-checkbox: 172px 4px 30.284271px 50.28427px;
     blue-checkbox-hover: 210.28427px 4px 30.284271px 50.28427px;
     blue-checkbox-active: 248.56854px 4px 30.284271px 50.28427px;
@@ -41,12 +41,15 @@
     blue-slider-slidertrack-inner: 124px 86px 2px 2px;
     blue-slider-sliderbar: 146px 70px 28px 40px;
     blue-slider-sliderbar-inner: 159px 87px 2px 2px;
-    selectarrow: 228px 70px 20px 20px;
-    icon-diamond: 256px 70px 20px 20px;
-    icon-money: 284px 70px 20px 20px;
-    icon-settings: 312px 70px 20px 20px;
-    icon-xbox: 340px 70px 20px 20px;
-    icon-discord: 368px 70px 20px 20px;
+    selectarrow: 324px 70px 20px 20px;
+    icon-diamond: 352px 70px 20px 20px;
+    icon-money: 380px 70px 20px 20px;
+    icon-settings: 408px 70px 20px 20px;
+    icon-xbox: 436px 70px 20px 20px;
+    icon-discord: 464px 70px 20px 20px;
+    icon-tap: 256px 118px 20px 20px;
+    icon-use-gauge: 182px 70px 40px 40px;
+    icon-use-gauge-fill: 230px 70px 40px 40px;
 
 }
 input.blue-button,
@@ -78,7 +81,7 @@ select.blue-button selectbox
 }
 select.blue-button selectvalue
 {
-    padding-right: 60px;
+    padding-right: 3em;
 }
 select.blue-button selectbox option:hover
 {
@@ -169,7 +172,7 @@ select.orange-button selectbox
 }
 select.orange-button selectvalue
 {
-    padding-right: 60px;
+    padding-right: 3em;
 }
 select.orange-button selectbox option:hover
 {
@@ -419,4 +422,16 @@ icon.icon-discord
 {
     decorator: image( icon-discord );
 }
+icon.icon-tap
+{
+    decorator: image( icon-tap );
+}
+icon.icon-use-gauge
+{
+    decorator: image( icon-use-gauge );
+}
+icon.icon-use-gauge-fill
+{
+    decorator: image( icon-use-gauge-fill );
+}
 
diff --git a/RbfxTemplate/DoorButton.cs b/RbfxTemplate/DoorButton.cs
@@ -3,7 +3,7 @@
 namespace RbfxTemplate
 {
     [ObjectFactory(Category = "Component/Game")]
-    public partial class DoorButton : Component
+    public partial class DoorButton : Selectable
     {
         private ResourceRef _openAnimationAttr = new ResourceRef(nameof(Animation));
         private ResourceRef _closeAnimationAttr = new ResourceRef(nameof(Animation));
@@ -65,16 +65,7 @@ public Animation CloseAnimation
         [SerializeField]
         public bool Open { get; set; }
 
-        protected override void OnNodeSet(Node previousNode, Node currentNode)
-        {
-            if (currentNode != null)
-                SubscribeToEvent("Use", currentNode, HandleUse);
-            else
-                UnsubscribeFromEvent("Use");
-            base.OnNodeSet(previousNode, currentNode);
-        }
-
-        private void HandleUse(VariantMap obj)
+        public override void Interact(Player player)
         {
             var controller = Node.Parent.GetComponent<AnimationController>(true);
             if (controller.NumAnimations > 0)

diff --git a/RbfxTemplate/GameState.cs b/RbfxTemplate/GameState.cs
@@ -15,13 +15,34 @@ public partial class GameState : RmlUIStateBase
         private readonly Player _player;
 
         private string _interactableTooltip = string.Empty;
+        private bool _interactionEnabled = false;
+        private bool _hasInteractable = false;
+        private float _interactionProgress;
 
         public string InteractableTooltip
         {
             get => _interactableTooltip;
             set => SetRmlVariable(ref _interactableTooltip, value);
         }
 
+        public bool InteractionEnabled
+        {
+            get => _interactionEnabled;
+            set => SetRmlVariable(ref _interactionEnabled, value);
+        }
+
+        public bool HasInteractable
+        {
+            get => _hasInteractable;
+            set => SetRmlVariable(ref _hasInteractable, value);
+        }
+
+        public float InteractionProgress
+        {
+            get => _interactionProgress;
+            set => SetRmlVariable(ref _interactionProgress, value);
+        }
+
         public GameState(UrhoPluginApplication app) : base(app, "UI/GameUI.rml")
         {
             MouseMode = MouseMode.MmRelative;
@@ -82,6 +103,8 @@ public GameState(UrhoPluginApplication app) : base(app, "UI/GameUI.rml")
         public override void OnDataModelInitialized(GameRmlUIComponent menuComponent)
         {
             menuComponent.BindDataModelProperty(nameof(InteractableTooltip), _ => _.Set(_interactableTooltip), _ => { });
+            menuComponent.BindDataModelProperty(nameof(InteractionEnabled), _ => _.Set(_interactionEnabled), _ => { });
+            menuComponent.BindDataModelProperty(nameof(HasInteractable), _ => _.Set(_hasInteractable), _ => { });
         }
 
         public override void Activate(StringVariantMap bundle)
@@ -106,7 +129,14 @@ public override void Update(float timeStep)
         {
             base.Update(timeStep);
 
-            InteractableTooltip = _player.Interactable?.Title ?? string.Empty;
+            var interactable = _player.Interactable;
+            InteractionProgress = _player.InteractionProgress;
+            HasInteractable = interactable != null;
+            if (HasInteractable)
+            {
+                InteractableTooltip = interactable.Tooltip ?? string.Empty;
+                InteractionEnabled = interactable.InteractionEnabled;
+            }
         }
 
         protected override void Dispose(bool disposing)

diff --git a/RbfxTemplate/IInteractable.cs b/RbfxTemplate/IInteractable.cs
@@ -5,6 +5,37 @@ namespace RbfxTemplate
     [DerivedFrom]
     public interface IInteractable
     {
-        string Title { get; }
+        /// <summary>
+        /// Text to display when hovering over object.
+        /// </summary>
+        string Tooltip { get; }
+
+        /// <summary>
+        /// Is interaction enabled.
+        /// </summary>
+        bool InteractionEnabled { get; }
+
+        /// <summary>
+        /// For how long the player should keep Use button pressed to complete interaction.
+        /// </summary>
+        float InteractionDuration { get; }
+
+        /// <summary>
+        /// Called by <see cref="Player"/> when cursor hovers over this object.
+        /// </summary>
+        /// <param name="player">Player component.</param>
+        void OnHoverStart(Player player);
+
+        /// <summary>
+        /// Called by <see cref="Player"/> when cursor leaves this object.
+        /// </summary>
+        /// <param name="player">Player component.</param>
+        void OnHoverEnd(Player player);
+
+        /// <summary>
+        /// Interact with player.
+        /// </summary>
+        /// <param name="player">Player component.</param>
+        void Interact(Player player);
     }
 }
diff --git a/RbfxTemplate/InventoryItem.cs b/RbfxTemplate/InventoryItem.cs
@@ -0,0 +1,25 @@
+using Urho3DNet;
+
+namespace RbfxTemplate
+{
+    [ObjectFactory(Category = "Component/Game")]
+    public partial class InventoryItem : Selectable
+    {
+        public InventoryItem(Context context) : base(context)
+        {
+        }
+
+        [SerializeField(Mode = AttributeMode.AmDefault, Name = "Inventory Key")]
+        public string InventoryKey { get; set; } = string.Empty;
+
+        /// <inheritdoc/>
+        public override bool InteractionEnabled { get; } = true;
+
+        public override void Interact(Player player)
+        {
+            player.AddToInventory(InventoryKey);
+            OnHoverEnd(player);
+            Node.Remove();
+        }
+    }
+}