{"id":8608,"date":"2017-03-22T13:21:31","date_gmt":"2017-03-22T13:21:31","guid":{"rendered":"http:\/\/beta.coherent-labs.com\/?page_id=8608"},"modified":"2017-06-05T08:16:45","modified_gmt":"2017-06-05T08:16:45","slug":"tutorials-coherent-ui","status":"publish","type":"page","link":"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/","title":{"rendered":"Tutorials Coherent UI"},"content":{"rendered":"<section  class=\"section no\"><div class=\"row\"><div class=\"wpb_column col-md-12 have-padding\"><div  class=\"empty-space  marg-lg-b70\"><\/div><div  class=\"tt-title\"><div class=\"tt-title-cat\"><\/div><h2 class=\"c-h2\"><small>Tutorials- Coherent GT<\/small><\/h2><\/div><div  class=\"empty-space  marg-lg-b70\"><\/div><div class=\"text-block \" ><div class=\"simple-text \">\r\n<div class=\"tabbable\">\r\n<ul class=\"nav nav-tabs\" style=\"list-style-type: none;\">\r\n \t<li class=\"active\"><a href=\"#tab0\" data-toggle=\"tab\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/coherent_ui.png\" alt=\"\" width=\"48\" height=\"48\" \/>\u00a0Coherent UI\r\n<\/a><\/li>\r\n \t<li><a href=\"#tab1\" data-toggle=\"tab\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/inreal_logo1.png\" alt=\"\" width=\"48\" height=\"48\" \/>\u00a0Unreal Engine 4\r\n<\/a><\/li>\r\n \t<li><a href=\"#tab2\" data-toggle=\"tab\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/unity_logo.png\" alt=\"\" width=\"48\" height=\"48\" \/>\u00a0Unity3D\r\n<\/a><\/li>\r\n<\/ul>\r\n<div class=\"tab-content\" style=\"overflow-x: hidden;\">\r\n<div id=\"tab0\" class=\"tab-pane active\">\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>COHERENT LABS UI DEVELOPMENT GUIDE<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>The purpose of this document is to guide you through the UI development process. It goes over all the major phases and describes the software and technologies used. Please note that this is a general workflow guide. For detailed documentation of Coherent UI please refer to the Coherent UI Documentation chm file or the documentation section on coherent-labs.com.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/UIdevelopmentGuide.pdf\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><a class=\"thumbnail fancybox\" href=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/UI-development-process.jpg\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/UI-development-process.jpg\" alt=\"\" \/>\r\n<\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>MODULAR UI WITH COHERENT UI AND JAVASCRIPT MODULES PART 1<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>The purpose of this tutorial is to show you how easily to create modular UI with Coherent UI.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/modular-ui-with-coherent-ui\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><a class=\"thumbnail fancybox\" href=\"http:\/\/coherent-labs.com\/content\/uploads\/2013\/07\/post_CoherentUI2.png\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2013\/07\/post_CoherentUI2.png\" alt=\"\" \/>\r\n<\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>USING COHERENT LABS MENU KIT<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>The purpose of this tutorial is to introduce you to the first of our kits, namely the Menu kit available in Coherent UI 2.5.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/using-coherent-menu-kit\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><a class=\"thumbnail fancybox\" href=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/3dmenu1111.jpg\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/3dmenu1111.jpg\" alt=\"\" \/>\r\n<\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Create 3D Hologram menu tutorial Part 1<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we\u2019ll show you how you can create 3D hologram menu similar to the watch in The Division from Ubisoft.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/3d-hologram-menu-tutorial-part-1-3ds-max-ue4\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><a class=\"thumbnail fancybox\" href=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/skills22.png\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/skills22.png\" alt=\"\" \/>\r\n<\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Create 3D Hologram menu tutorial Part 2<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this second part of our tutorial we will show you how to create the HTML content for the menu using Adobe Edge Animate and the Coherent Labs Animation Framework.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/blog\/3d-hologram-menu-tutorial-part-2-adobe-edge-animate\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><a class=\"thumbnail fancybox\" href=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/11\/finishedAll.png\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/11\/finishedAll.png\" alt=\"\" \/>\r\n<\/a><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Creating awesome crosshair with Coherent UI<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>The purpose of this tutorial is to show you how to create crosshair for you game ui, using HTML and CSS.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/create-awesome-crosshair\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/11\/crosshair_tutorial.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>UI ANIMATIONS FRAMEWORK FOR COHERENT UI (PART 1,2,3,4)<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>Starting with Coherent UI 2.5. we are introducing an animation library which will help developers create better animations easier. In a series of posts we walk you through the development process and share a tutorial of how to create your first simple animation.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/ui-animations-framework-for-coherent-ui-part-1\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"dLTwuHxNwr4\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/UI-Animation-Frameowrk.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Create animated game HUD with Adobe Edge Animate and Coherent UI (Part 1)<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you how easy it is to create great looking animated UI using Coherent UI and Adobe Edge Animate. To demonstrate this we will create a HUD for one of our new samples.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/create-animated-game-hud-with-adobe-edge-animate-and-coherent-ui\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/SoS-screanshot-1024x576.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Create animated game HUD with Adobe Edge Animate and Coherent UI (Part 2)<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In part two of the Creating animated HUD with Adobe Edge and Coherent UI tutorial we will take a look at some more advanced topics such as triggers, events, symbols, structure of the Edge project, binding with Coherent UI and making the UI responsive.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/create-animated-game-hud-with-adobe-edge-animate-and-coherent-ui-part-2\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/CREATE-ANIMATED-GAME-HUD-WITH-ADOBE-EDGE-2.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div id=\"tab1\" class=\"tab-pane \">\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Coherent UI for Unreal Engine 4 Installer and HUD tutorial<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this very tutorial we show you how to install the Coherent UI plugin for Unreal Engine 4. We'll also show you how you can quickly add an UI HUD to your game.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"R-slHqRVUKI\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/UI-Animation-Frameowrk-2.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Activating Coherent UI plugin for Unreal Engine 4<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we guide you through the steps you need to complete to activate the Coherent UI plugin for UE4.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"kp_i_XQVWPk\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Activating-Coherent-UI-plugin-for-Unreal-Engine-41.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Video Tutorial: Coherent UI integration in UE4 (1 of 3)<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In the first part of the series of tutorials we will you how to integrate Coherent UI with your Unreal Engine game with few simple steps.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"eA0lvmSmUeI\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Coherent-UI-UE4-Integration-Part-1-of-3.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Video Tutorial: Coherent UI integration in UE4 (2 of 3)<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In the second part of the series of tutorials we go a bit further in the UE4 game UI integration. We will show you how to do game to HTML\/JavaScript binding in your Unreal Engine 4 project.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"hY3OPHrGDP8\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Coherent-UI-UE4-Integration-Part-2-of-3.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Video Tutorial: Coherent UI integration in UE4 (3 of 3)<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In the third part of the series of tutorials we show you how to do HTML\/JavaScript -&gt; game binding and present a sample usage of UI in a 3D world.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"CTLCO3keM1Y\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Coherent-UI-UE4-Integration-Part-3-of-3.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Unreal Engine 4 Tutorial: Coherent UI integration with Blueprints<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you how easy it is to add a Coherent UI view to your game by using just blueprints.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"gyPWQQfERL0\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Coherent-UI-integration-with-Blueprints.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>UE4 Game Menu Kit with Coherent UI<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we present the UE4 Game Menu Kit which is designed to take away the hassle of creating a simple usable menu that works using only Blueprints. No C++ code at all. In just a matter of minutes you can add any number of buttons and attach handlers to each of them, saving you precious prototyping time.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"U-m6gzBFHmg\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Out-of-the-box-game-menu-in-Unreal-Engine-4.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>In-game surface views in Unreal Engine 4 with Coherent UI<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you how to make surface views in your Unreal Engine 4 game in just few steps.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"yB3kThf5Op8\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/In-game-surface-views-in-Unreal-Engine-4.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Forwarding Keyboard Input to Coherent UI in Unreal Engine 4<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this video tutorial we show you two ways of forwarding a keyboard input to Coherent UI views, without having any changes done in UE4.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"fPdVPKhVDEE\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Forwarding-Keyboard-Input-to-Coherent-UI.jpg\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Unreal Engine 4 Tutorial: Coherent UI Menu Binding Part 1<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you how easy it is to add game menus for your game via Coherent UI. In the first part we will bind a main menu and in the second part we will show binding of an in-game menu. The tutorial in its core will present communication between C++ game code and JavaScript and vice versa.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"M-WhfJWEgJo\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Coherent-UI-Menu-Binding.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Unreal Engine 4 Tutorial: Coherent UI Menu Binding Part 2<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In the previous tutorial- Menu Binding Part 1 we showed you how easy it is to bind a menu and an in-game menu using Coherent UI. In this one we setup binding for the health and ammo bars in our sample game. We also setup the binding for player options in the in-game menu. We experiment with the speed level of the player.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"NUIqJjR8xxA\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Menu-Binding-with-Coherent-UI-part-2.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Live game views for Unreal Engine 4<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you could use Live game views in Coherent UI<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/video-live-game-views-in-unreal-engine-4\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"zaCVBknxgso\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Live-Game-Views-in-Unreal-Engine-4.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>USING THE UNREAL ENGINE 4 LOCALIZATION WITH COHERENT UI<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you how to use the Localization feature of Unreal Engine 4 with the Coherent UI. Usually there are many hassles when it comes to localizing a game, but when using UE4 this is not the case.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/using-the-unreal-engine-4-localization-with-coherent-ui\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/USING-THE-UNREAL-ENGINE-4-LOCALIZATION.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div id=\"tab2\" class=\"tab-pane \">\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Coherent UI Menu Kits for Unity3D<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you how the Unity3D Game Menu Kit takes away the hassle of creating a simple usable menu that works. We will show how in just a matter of minutes you can add any number of buttons and attach handlers to each of them, saving you precious prototyping time.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"2njUlWsCJWE\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/out-of-the-box-game-menu-Unity3D.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Adding GUI to your Unity Game<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show a practical example for enhancing your game with a functional user interface using Coherent UI. We\u2019ll take the Unity\u2019s Stealth project and add a health bar, enemy radar and alarm indicator widgets one by one. As a final step we\u2019ll combine all the widgets to complete our new UI and enjoy the game.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"RC5-zI00SNE#t=3431\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Adding-GUI-to-your-Unity-game.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Coherent UI and Unity3D Desktop Input Tutorial<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you how we can disable and enable input of Coherent UI views and Unity. It also shows how you can detect input when using multiple views. There are three basic scenarios for this Input sample:\r\n1. Only Coherent UI input is working\r\n2. Only Unity input is working\r\n3. Both Coherent UI and Unity input are working<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/coherent-ui-unity3d-input-tutorial\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Unity3D-Desktop-Input-Tutorial.png\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Input tips &amp; tricks for Coherent UI mobile in Unity3D<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we talk about the differences of the input modes in Coherent UI Mobile for Unity3D and how you can forward or consume input. We have created a very simple scene for demonstrating these features on both Android and iOS.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"QmzMGRRnKO4\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Input-tips-tricks-for-Coherent-UI.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Unity3D Facebook integration with Coherent UI<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you how to integrate your game with social media so that you can build a strong community of fans.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/unity-3d-facebook-integration-with-coherent-ui-tutorial\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/unity-3d-facebook-integration-with-coherent-ui-tutorial_img3.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Game and UI communication in Unity3D<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you the different ways to pass data from JavaScript to C# and vice versa.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"lrLXaCuuIf4\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Game-and-UI-communication-in-Unity3D.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Adding a HTML5 Minigame in Unity3D with Coherent UI<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you how to Embed an existing HTML5 minigame that opens a door upon completion.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: poiter;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/adding-a-html5-minigame-in-unity3d-with-coherent-ui-tutorial\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"m-s9mlTn45o\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/adding-a-html5-minigame-in-unity3d-with-coherent-ui-tutorial_img1.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Unity3D \u2013 Compositing Multiple Coherent UI Views<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show how to compose multiple Coherent UI views simultaneously on the main player camera.<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/unity3d-compositing-multiple-coherent-ui-views-tutorial\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a><\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/unity3d-compositing-multiple-coherent-ui-views-tutorial_img10.png\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"col-md-12\">\r\n<div>\r\n<h3>Surface Views for Mobile Platforms<\/h3>\r\n<div class=\"row\" style=\"margin-left: 0;\">\r\n<div class=\"solution col-md-8\">\r\n<div>In this tutorial we show you how to create surface view for iOS and Android with Coherent UI<\/div>\r\n<div style=\"margin-top: 10px;\"><a class=\"btn video-toggle\" style=\"margin: 10px 0 25px 0; display: inline-block; cursor: pointer;\">\r\n<img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/play-video.png\" alt=\"\" \/>\u00a0\u00a0Watch video\r\n<\/a>\r\n<a class=\"btn btn-info\" style=\"margin: 10px 0 25px 0; display: inline-block;\" href=\"http:\/\/coherent-labs.com\/surface-views-for-mobile-platforms\/\" target=\"_blank\" rel=\"noopener noreferrer\">\r\nRead more\r\n<\/a>\r\n<div class=\"video-player\" style=\"display: none; margin-top: 10px; padding-bottom: 20px;\" data-videourl=\"o-SuEA8L498\"><\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"col-md-4\" style=\"margin-bottom: 40px;\"><img src=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/Coherent-UI-3D-surface-views-for-mobile-platforms.jpg\" alt=\"\" \/><\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<script src=\"https:\/\/code.jquery.com\/jquery-2.1.3.min.js\"><\/script>\r\n<script src=\"http:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/3.3.6\/js\/bootstrap.min.js\"><\/script>\r\n\n<\/div><\/div><div  class=\"empty-space  marg-lg-b70\"><\/div><\/div><\/div><\/section>","protected":false},"excerpt":{"rendered":"Tutorials- Coherent GT[raw] \u00a0Coherent UI \u00a0Unreal Engine 4 \u00a0Unity3D COHERENT LABS UI DEVELOPMENT GUIDE The purpose of this document is to guide you through the UI development process. It goes over all the major phases and describes the software and technologies used. Please note that this is a general workflow guide. For detailed documentation of [...]","protected":false},"author":18,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.8 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorials Coherent UI Coherent Labs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorials Coherent UI Coherent Labs\" \/>\n<meta property=\"og:url\" content=\"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/\" \/>\n<meta property=\"og:site_name\" content=\"Coherent Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CoherentLabs\/\" \/>\n<meta property=\"article:modified_time\" content=\"2017-06-05T08:16:45+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/coherent_ui.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@CoherentLabs\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/\",\"url\":\"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/\",\"name\":\"Tutorials Coherent UI Coherent Labs\",\"isPartOf\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/#website\"},\"datePublished\":\"2017-03-22T13:21:31+00:00\",\"dateModified\":\"2017-06-05T08:16:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/coherent-labs.com\/posts\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorials Coherent UI\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/coherent-labs.com\/posts\/#website\",\"url\":\"https:\/\/coherent-labs.com\/posts\/\",\"name\":\"Coherent Labs\",\"description\":\"Cross-Platform Game UI Middleware\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/coherent-labs.com\/posts\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorials Coherent UI Coherent Labs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/","og_locale":"en_US","og_type":"article","og_title":"Tutorials Coherent UI Coherent Labs","og_url":"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/","og_site_name":"Coherent Labs","article_publisher":"https:\/\/www.facebook.com\/CoherentLabs\/","article_modified_time":"2017-06-05T08:16:45+00:00","og_image":[{"url":"http:\/\/coherent-labs.com\/content\/uploads\/2014\/10\/coherent_ui.png"}],"twitter_card":"summary_large_image","twitter_site":"@CoherentLabs","twitter_misc":{"Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/","url":"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/","name":"Tutorials Coherent UI Coherent Labs","isPartOf":{"@id":"https:\/\/coherent-labs.com\/posts\/#website"},"datePublished":"2017-03-22T13:21:31+00:00","dateModified":"2017-06-05T08:16:45+00:00","breadcrumb":{"@id":"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/coherent-labs.com\/posts\/tutorials-coherent-ui\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/coherent-labs.com\/posts\/"},{"@type":"ListItem","position":2,"name":"Tutorials Coherent UI"}]},{"@type":"WebSite","@id":"https:\/\/coherent-labs.com\/posts\/#website","url":"https:\/\/coherent-labs.com\/posts\/","name":"Coherent Labs","description":"Cross-Platform Game UI Middleware","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/coherent-labs.com\/posts\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/pages\/8608"}],"collection":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/comments?post=8608"}],"version-history":[{"count":4,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/pages\/8608\/revisions"}],"predecessor-version":[{"id":10880,"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/pages\/8608\/revisions\/10880"}],"wp:attachment":[{"href":"https:\/\/coherent-labs.com\/posts\/wp-json\/wp\/v2\/media?parent=8608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}