Browse Source

Update the transform sample: Add some 3d cubes.

Michael Ragazzon 6 years ago
parent
commit
95bd871b31
2 changed files with 180 additions and 56 deletions
  1. 138 39
      Samples/basic/transform/data/transform.rml
  2. 42 17
      Samples/basic/transform/src/main.cpp

+ 138 - 39
Samples/basic/transform/data/transform.rml

@@ -1,46 +1,133 @@
 <rml>
 <head>
-	<link type="text/template" href="../../../assets/window.rml"/>
-	<title>Transform Sample</title>
-	<style>
-		body
-		{
-			width: 350px;
-			height: 300px;
-
-			perspective: 800px;
-		}
-		
-		/* Hide the window icon. */
-		div#title_bar div#icon
-		{
-			display: none;
-		}
-
-		div#title_bar:hover
-		{
-			transform: rotate3d(1, 0, 0, 25) scale(0.5);
-			transform-origin: center bottom;
-		}
-
-		spacer
-		{
-			display: inline-block;
-			width: 25px;
-		}
-
-		scrollbarvertical sliderbar:hover,scrollbarvertical sliderbar:active
-		{
-			transform: translateZ(10px);
-		}
-
-		p
-		{
-			transform: translateZ(10px);
-		}
-	</style>
+<link type="text/template" href="../../../assets/window.rml"/>
+<title>Transform Sample</title>
+<style>
+body
+{
+	width: 550px;
+	height: 500px;
+
+	/*transform: rotate3d(0, 1, 0, 30deg);*/
+}
+
+/* Hide the window icon. */
+div#title_bar div#icon
+{
+	display: none;
+}
+
+div#title_bar:hover
+{
+	transform: rotate3d(1, 0, 0, 25) scale(1.1);
+	transform-origin: center bottom;
+}
+
+spacer
+{
+	display: inline-block;
+	width: 25px;
+}
+scrollbarvertical sliderbar,scrollbarvertical sliderbar
+{
+	/*transform: translateZ(0px);*/
+}
+scrollbarvertical sliderbar:hover,scrollbarvertical sliderbar:active
+{
+	/*transform: translateZ(10px);*/
+}
+
+
+/* Perspective cubes based on:
+   https://developer.mozilla.org/en-US/docs/Web/CSS/perspective */
+
+.pers250 {
+	perspective: 250px;
+}
+
+.pers350 {
+	perspective: 350px;
+}
+
+.pers500 {
+	perspective: 500px;
+}
+
+.pers650 {
+	perspective: 650px;
+}
+
+.container {
+	width: 200px;
+	height: 200px;
+	margin: 75px auto;
+	border: none;
+	background-color: #a003;
+}
+
+.cube {
+	width: 100%;
+	height: 100%;
+	backface-visibility: visible;
+	perspective-origin: 150% 150%;
+}
+
+.face {
+	display: block;
+	position: absolute;
+	width: 100px;
+	height: 100px;
+	border: none;
+	line-height: 100px;
+	font-size: 60px;
+	color: white;
+	text-align: center;
+}
+
+/* Define each face based on direction */
+.front {
+	background: rgba(0, 0, 0, 160);
+	transform: translateZ(50px);
+}
+.back {
+	background: rgba(0, 255, 0, 255);
+	color: black;
+	transform: rotateY(180deg) translateZ(50px);
+}
+.right {
+	background: rgba(196, 0, 0, 200);
+	transform: rotateY(90deg) translateZ(50px);
+}
+.left {
+	background: rgba(0, 0, 196, 200);
+	transform: rotateY(-90deg) translateZ(50px);
+}
+.top {
+	background: rgba(196, 196, 0, 200);
+	transform: rotateX(90deg) translateZ(50px);
+}
+.bottom {
+	background: rgba(196, 0, 196, 200);
+	transform: rotateX(-90deg) translateZ(50px);
+}
+</style>
 </head>
 <body template="window">
+
+<div class="container">
+	<div class="cube pers650">
+		<div class="face back">6</div>
+		<div class="face top">5</div>
+		<div class="face left">4</div>
+		<div class="face bottom">3</div>
+		<div class="face right">2</div>
+		<div class="face front">1</div>
+	</div>
+	Perspective: 650px.
+</div>
+
+<p>Press 'space' to toggle rotation.</p>
+
 <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod
 tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At
 vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
@@ -75,6 +162,18 @@ laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
 nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
 commodo consequat.</p>
 
+<div class="container">
+	<div class="cube pers250">
+		<div class="face back">6</div>
+		<div class="face top">5</div>
+		<div class="face left">4</div>
+		<div class="face bottom">3</div>
+		<div class="face right">2</div>
+		<div class="face front">1</div>
+	</div>
+	Perspective: 250px.
+</div>
+
 <p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
 molestie consequat, vel illum dolore eu feugiat nulla facilisis.</p>
 

+ 42 - 17
Samples/basic/transform/src/main.cpp

@@ -36,7 +36,9 @@
 #include <cmath>
 #include <sstream>
 
-class DemoWindow
+static bool run_rotate = true;
+
+class DemoWindow : public Rml::Core::EventListener
 {
 public:
 	DemoWindow(const Rml::Core::String &title, const Rml::Core::Vector2f &position, Rml::Core::Context *context)
@@ -87,12 +89,29 @@ public:
 		}
 	}
 
+	void ProcessEvent(Rml::Core::Event& ev) override
+	{
+		if (ev == Rml::Core::EventId::Keydown)
+		{
+			Rml::Core::Input::KeyIdentifier key_identifier = (Rml::Core::Input::KeyIdentifier) ev.GetParameter< int >("key_identifier", 0);
+
+			if (key_identifier == Rml::Core::Input::KI_SPACE)
+			{
+				run_rotate = !run_rotate;
+			}
+			else if (key_identifier == Rml::Core::Input::KI_ESCAPE)
+			{
+				Shell::RequestExit();
+			}
+		}
+	}
+
 private:
 	Rml::Core::ElementDocument *document;
 };
 
 Rml::Core::Context* context = nullptr;
-ShellRenderInterfaceExtensions *shell_renderer;
+ShellRenderInterfaceExtensions* shell_renderer;
 DemoWindow* window_1 = nullptr;
 DemoWindow* window_2 = nullptr;
 
@@ -104,16 +123,19 @@ void GameLoop()
 	context->Render();
 	shell_renderer->PresentRenderBuffer();
 
-	static float deg = 0;
-	Rml::Core::SystemInterface* system_interface = Rml::Core::GetSystemInterface();
-	deg = (float)std::fmod(system_interface->GetElapsedTime() * 30.0, 360.0);
-	if (window_1)
-	{
-		window_1->SetRotation(deg);
-	}
-	if (window_2)
+	double t = Rml::Core::GetSystemInterface()->GetElapsedTime();
+	static double t_prev = t;
+	double dt = t - t_prev;
+	t_prev = t;
+
+	if(run_rotate)
 	{
-		window_2->SetRotation(deg);
+		static float deg = 0;
+		deg = (float)std::fmod(deg + dt * 50.0, 360.0);
+		if (window_1)
+			window_1->SetRotation(deg);
+		if (window_2)
+			window_2->SetRotation(deg);
 	}
 }
 
@@ -134,12 +156,15 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 	RMLUI_UNUSED(argv);
 #endif
 
+	constexpr int width = 1600;
+	constexpr int height = 1000;
+
 	ShellRenderInterfaceOpenGL opengl_renderer;
 	shell_renderer = &opengl_renderer;
 
 	// Generic OS initialisation, creates a window and attaches OpenGL.
 	if (!Shell::Initialise() ||
-		!Shell::OpenWindow("Transform Sample", shell_renderer, 1024, 768, true))
+		!Shell::OpenWindow("Transform Sample", shell_renderer, width, height, true))
 	{
 		Shell::Shutdown();
 		return -1;
@@ -147,7 +172,7 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 	// RmlUi initialisation.
 	Rml::Core::SetRenderInterface(&opengl_renderer);
-	opengl_renderer.SetViewport(1024,768);
+	opengl_renderer.SetViewport(width, height);
 
 	ShellSystemInterface system_interface;
 	Rml::Core::SetSystemInterface(&system_interface);
@@ -155,7 +180,7 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 	Rml::Core::Initialise();
 
 	// Create the main RmlUi context and set it on the shell's input layer.
-	context = Rml::Core::CreateContext("main", Rml::Core::Vector2i(1024, 768));
+	context = Rml::Core::CreateContext("main", Rml::Core::Vector2i(width, height));
 	if (context == nullptr)
 	{
 		Rml::Core::Shutdown();
@@ -170,12 +195,12 @@ int main(int RMLUI_UNUSED_PARAMETER(argc), char** RMLUI_UNUSED_PARAMETER(argv))
 
 	Shell::LoadFonts("assets/");
 
-	window_1 = new DemoWindow("Orthographic transform", Rml::Core::Vector2f(81, 200), context);
+	window_1 = new DemoWindow("Orthographic transform", Rml::Core::Vector2f(120, 200), context);
 	if (window_1)
 	{
-		window_1->SetPerspective(100000);
+		context->GetRootElement()->AddEventListener(Rml::Core::EventId::Keydown, window_1);
 	}
-	window_2 = new DemoWindow("Perspective transform", Rml::Core::Vector2f(593, 200), context);
+	window_2 = new DemoWindow("Perspective transform", Rml::Core::Vector2f(900, 200), context);
 	if (window_2)
 	{
 		window_2->SetPerspective(800);