Create ProgressBar in Skylicht Editor

skylicht-lab · Aug 20, 2024 · b53eedb · b53eedb
1 parent 24a2904
commit b53eedb
Show file tree

Hide file tree

Showing 14 changed files with 311 additions and 59 deletions.
diff --git a/Assets/BuiltIn/Shader/GUI/GLSL/ProgressBarUIFS.glsl b/Assets/BuiltIn/Shader/GUI/GLSL/ProgressBarUIFS.glsl
@@ -0,0 +1,18 @@
+precision mediump float;
+
+uniform sampler2D uTexDiffuse;
+uniform sampler2D uTexTiling;
+uniform vec4 uColor;
+
+in vec2 vTexCoord0;
+in vec2 vTexCoord1;
+in vec4 vColor;
+
+out vec4 FragColor;
+
+void main(void)
+{
+	vec4 diffuseMap = texture(uTexDiffuse, vTexCoord0.xy);
+	vec4 tileMap = texture(uTexTiling, vTexCoord1.xy);
+	FragColor = vec4(tileMap.rgb * uColor.rgb * vColor.rgb, diffuseMap.a);
+}
diff --git a/Assets/BuiltIn/Shader/GUI/GLSL/ProgressBarUIVS.glsl b/Assets/BuiltIn/Shader/GUI/GLSL/ProgressBarUIVS.glsl
@@ -0,0 +1,22 @@
+in vec4 inPosition;
+in vec3 inNormal;
+in vec4 inColor;
+in vec2 inTexCoord0;
+
+uniform mat4 uMvpMatrix;
+uniform vec4 uUVScale;
+uniform vec4 uTime;
+uniform vec4 uUVTiling; // TileX;TileY;Speed
+
+out vec2 vTexCoord0;
+out vec2 vTexCoord1;
+out vec4 vColor;
+
+void main(void)
+{
+	vTexCoord0 = inTexCoord0 * uUVScale.xy + uUVScale.zw;
+	vTexCoord1 = vec2(inNormal.x, inNormal.y);
+	vTexCoord1 = vTexCoord1 * uUVTiling.xy + uUVTiling.zw + vec2(uTime.x * uUVTiling.z, 0.0);
+	vColor = inColor/ 255.0;
+	gl_Position = uMvpMatrix * inPosition;
+}
diff --git a/Assets/BuiltIn/Shader/GUI/HLSL/ProgressBarUIFS.hlsl b/Assets/BuiltIn/Shader/GUI/HLSL/ProgressBarUIFS.hlsl
@@ -0,0 +1,25 @@
+Texture2D uTexDiffuse : register(t0);
+SamplerState uTexDiffuseSampler : register(s0);
+
+Texture2D uTexTiling : register(t1);
+SamplerState uTexTilingSampler : register(s1);
+
+struct PS_INPUT
+{
+	float4 pos : SV_POSITION;
+	float4 color : COLOR0;
+	float2 tex0 : TEXCOORD0;
+	float2 tex1 : TEXCOORD1;
+};
+
+cbuffer cbPerFrame
+{
+	float4 uColor;
+};
+
+float4 main(PS_INPUT input) : SV_TARGET
+{	
+	float4 diffuseMap = uTexDiffuse.Sample(uTexDiffuseSampler, input.tex0);
+	float4 tilingMap = uTexTiling.Sample(uTexTilingSampler, input.tex1);
+	return float4(tilingMap.rgb * uColor.rgb * input.color.rgb, diffuseMap.a);
+}
diff --git a/Assets/BuiltIn/Shader/GUI/HLSL/ProgressBarUIVS.hlsl b/Assets/BuiltIn/Shader/GUI/HLSL/ProgressBarUIVS.hlsl
@@ -0,0 +1,35 @@
+struct VS_INPUT
+{
+	float4 pos: POSITION;
+	float3 norm: NORMAL;
+	float4 color: COLOR;
+	float2 tex0: TEXCOORD0;
+};
+
+struct VS_OUTPUT
+{
+	float4 pos : SV_POSITION;
+	float4 color : COLOR0;
+	float2 tex0 : TEXCOORD0;
+	float2 tex1 : TEXCOORD1;
+};
+
+cbuffer cbPerObject
+{
+	float4x4 uMvpMatrix;
+	float4 uUVScale;
+	float4 uTime;
+	float4 uUVTiling; // TileX;TileY;Speed
+};
+
+VS_OUTPUT main(VS_INPUT input)
+{
+	VS_OUTPUT output;
+
+	output.pos = mul(input.pos, uMvpMatrix);
+	output.tex0 = input.tex0 * uUVScale.xy + uUVScale.zw;
+	output.tex1 = float2(input.norm.x, input.norm.y);
+	output.tex1 = output.tex1 * uUVTiling.xy + uUVTiling.zw + float2(uTime.x * uUVTiling.z, 0.0);
+	output.color = input.color;
+	return output;
+}
diff --git a/Assets/BuiltIn/Shader/GUI/ProgressBarUI.xml b/Assets/BuiltIn/Shader/GUI/ProgressBarUI.xml
@@ -0,0 +1,30 @@
+<shaderConfig name="ProgressBarUI" baseShader="TRANSPARENT_ALPHA_CHANNEL">
+	<uniforms>
+		<vs>
+			<uniform name="uMvpMatrix" type="WORLD_VIEW_PROJECTION" value="0" float="16" matrix="true"/>
+			<uniform name="uUVScale" type="MATERIAL_PARAM" valueIndex="0" value="1.0, 1.0, 0.0, 0.0" float="4"/>
+			<uniform name="uTime" type="TIME" value="4.0, 0.0, 0.0, 0.0" float="4"/>
+			<uniform name="uUVTiling" type="MATERIAL_PARAM" valueIndex="2" value="4.0, 1.0, 1.0, -1.0" float="4"/>
+		</vs>
+		<fs>
+			<uniform name="uTexDiffuse" type="DEFAULT_VALUE" value="0" float="1" directX="false"/>
+			<uniform name="uTexTiling" type="DEFAULT_VALUE" value="1" float="1" directX="false"/>
+			<uniform name="uColor" type="MATERIAL_PARAM" valueIndex="1" value="1.0, 1.0, 1.0, 1.0" float="4"/>
+		</fs>
+	</uniforms>
+	<resources>
+	</resources>
+	<customUI>
+		<ui control="UIGroup" name="Texture">
+			<ui control="UITexture" name="uTexDiffuse" autoReplace="_diff.;_Diffuse.;_D."/>
+			<ui control="UITexture" name="uTexTiling" autoReplace="_A."/>
+		</ui>
+		<ui control="UIGroup" name="Customize">
+			<ui control="UIColor" name="uColor"/>
+			<ui control="UIFloat4" name="uUVScale" elementName="UV ScaleX;UV ScaleY;UV OffsetX;UV OffsetY"/>
+			<ui control="UIFloat4" name="uUVTiling" elementName="TileX;TileY;Speed"/>
+		</ui>
+	</customUI>
+	<shader type="GLSL" vs="GLSL/ProgressBarUIVS.glsl" fs="GLSL/ProgressBarUIFS.glsl"/>
+	<shader type="HLSL" vs="HLSL/ProgressBarUIVS.hlsl" fs="HLSL/ProgressBarUIFS.hlsl"/>
+</shaderConfig>
diff --git a/Assets/SampleGUI/Textures/ProgressBar.mat b/Assets/SampleGUI/Textures/ProgressBar.mat
@@ -0,0 +1,27 @@
+<!-- File generated by function CMaterialManager::exportMaterial -->
+<Materials>
+    <Material name='NoName' shader='BuiltIn/Shader/GUI/ProgressBarUI.xml'>
+        <Textures>
+            <Texture name='uTexDiffuse' path='' wrapU='0' wrapV='0'/>
+            <Texture name='uTexTiling' path='ProgressBar.png' wrapU='0' wrapV='0'/>
+        </Textures>
+        <Params>
+            <Param name='uColor' floatSize='4' floatValue='1.000000,1.000000,1.000000,1.000000'/>
+            <Param name='uUVScale' floatSize='4' floatValue='1.000000,1.000000,0.000000,0.000000'/>
+            <Param name='uUVTiling' floatSize='4' floatValue='10.000000,1.000000,-1.000000,0.000000'/>
+            <Param name='uData' floatSize='4' floatValue='-1.000000,0.000000,1.000000,0.000000'/>
+        </Params>
+        <Properties>
+            <Property name='ZBuffer' value='LessEqual'/>
+            <Property name='ZWriteEnable' value='true'/>
+            <Property name='BackfaceCulling' value='true'/>
+            <Property name='FrontfaceCulling' value='false'/>
+        </Properties>
+        <Extras>
+            <Extra name='BuiltIn/Shader/Basic/TextureColor.xml'/>
+                <Textures>
+                </Textures>
+            </Extra>
+        </Extras>
+    </Material>
+</Materials>
diff --git a/Assets/SampleGUI/Textures/ProgressBar.png b/Assets/SampleGUI/Textures/ProgressBar.png
diff --git a/Projects/Editor/Source/Editor/SpaceController/CContextMenuGUIElement.cpp b/Projects/Editor/Source/Editor/SpaceController/CContextMenuGUIElement.cpp
@@ -70,6 +70,7 @@ namespace Skylicht
 			addMenu->addItem(L"UI List");
 			addMenu->addItem(L"UI Checkbox");
 			addMenu->addItem(L"UI Switch");
+			addMenu->addItem(L"UI ProgressBar");
 			addMenu->OnCommand = BIND_LISTENER(&CContextMenuGUIElement::OnContextMenuAddCommand, this);
 		}
 

diff --git a/Projects/Editor/Source/Editor/SpaceController/CGUIDesignController.cpp b/Projects/Editor/Source/Editor/SpaceController/CGUIDesignController.cpp
@@ -289,6 +289,39 @@ namespace Skylicht
 			{
 
 			}
+			else if (command == L"UI ProgressBar")
+			{
+				r.LowerRightCorner.X = 220.0f;
+				r.LowerRightCorner.Y = 45.0f;
+
+				nameHint = L"Progress";
+				newNode = parentNode->getCanvas()->createElement(parentNode, r);
+
+				CGUIFitSprite* bg = parentNode->getCanvas()->createFitSprite(newNode, r, NULL);
+				bg->setName(L"Background");
+				bg->setFrameSource(
+					"SampleGUI/SampleGUI.spritedata",
+					"loading-background",
+					"SampleGUI/!Sprites/loading-background.png");
+				bg->setDock(EGUIDock::DockFill);
+				bg->setAnchor(CGUIFitSprite::AnchorAll, 15.0f, 15.0f, 15.0f, 15.0f);
+
+				r.UpperLeftCorner.X = 0.0f;
+				r.UpperLeftCorner.Y = 0.0f;
+				r.LowerRightCorner.X = 110.0f;
+				CGUIMask* mask = parentNode->getCanvas()->createMask(newNode, r);
+				mask->setName(L"Mask");
+
+				CGUIFitSprite* progress = parentNode->getCanvas()->createFitSprite(newNode, r, NULL);
+				progress->setName(L"Loading");
+				progress->setDock(EGUIDock::DockFill);
+				progress->setFrameSource(
+					"SampleGUI/SampleGUI.spritedata",
+					"loading",
+					"SampleGUI/!Sprites/loading.png");
+				progress->setAnchor(CGUIFitSprite::AnchorAll, 15.0f, 15.0f, 15.0f, 15.0f);
+				progress->setMaterialSource("SampleGUI/Textures/ProgressBar.mat");
+			}
 
 			if (newNode)
 			{

diff --git a/Projects/Editor/Source/SkylichtEditor.cpp b/Projects/Editor/Source/SkylichtEditor.cpp
@@ -31,6 +31,7 @@ void installApplication(const std::vector<std::string>& argv)
 {
 	SkylichtEditor* app = new SkylichtEditor();
 	getApplication()->registerAppEvent("SkylichtEditor", app);
+	// getApplication()->showDebugConsole();
 }
 
 SkylichtEditor::SkylichtEditor() :