Sample Framework

Gameface comes with a set of samples showcasing various features of the SDK. The samples use a common infrastructure that simulates a game engine (i.e. main loop). This document described some of the classes in our sample framework and our current samples.

Important classes

  • CohtmlApplication is responsible for initializing Cohtml (cohtml::Library, cohtml::System, cohtml::View and their rendering counterparts). It is also responsible to call Advance and Paint. To add extra behavior on top of these basic functions, we use the Sample class.
  • Sample is an abstract class that allows to easily extend the default behavior exhibited by CohtmlApplication to focus on specific features.
  • Application is responsible for:
    • creating a native OS window
    • reading input from the OS and forwarding it to the Cohtml
  • IRenderer and its implementations (RendererDx11, RendererGL, etc.) are responsible for initializing the respective graphics API and using it to draw the UI

Existing samples

  • The MinimalHelloCohtml is the simplest example by far. It contains only the absolutely necessary steps needed to get Cohtml up and running.
  • The HelloCohtml contains a simple example meant as an introduction to Cohtml and the sample framework. It does one thing only - loads a hardcoded URL.
  • The Localization sample shows how to implement your version of cohtml::LocalizationManager and integrate Cohtml’s localization system with your engine’s.
  • The Nameplates is a sample demonstrating how to transfer data between C++ and JavaScript. A simple generator class randomly generates values for 4 nameplates (health, mana and position) and sends that data to JavaScript which in turn updates the UI.
  • The ImageFallbackFormats sample shows one interesting feature of Cohtml, which is the ability to load cooked files in place of uncooked files (e.g. automatically load .dds textures even if the HTML file is referring to a .png). The sample demonstrates how to extend your implementation of cohtml::IAsyncResourceHandler to achieve that.
  • The HTTP sample demonstrates how to load files via HTTP(S) requests.
  • The TextureAtlasing sample demonstrates how to use the texture atlases, generated by the Atlas Creator tool.
  • The InstaLoad sample shows how to achieve UI load on the first frame by preloading the frontend resources like HTML, CSS and JS files using the Cohtml provided API.
  • The VideoPlayback sample shows how to implement the required functionality for video playback and a simplistic video player UI. It also illustrates how audio can be controlled through the implementation of the cohtml::IViewListener interface.
  • The IME sample provides simple integration of the Windows IME API within Cohtml and demonstrates how to load additional fonts from system folders.
  • The ProtobufDataBind sample shows how to create a model from google::protobuf types and use it inside the UI via the Cohtml data-binding API. This sample implements a runtime binding of generic google::protobuf::Message types. It creates dynamic Cohtml binders and binding properties and it abstracts away the differences between google::protobuf::Message data models and regular C++ classes and structures.
  • The HDR sample shows how to implement a simple HDR calibration screen with HDR-capable rendering. For more details see the documentation on HDR
  • The BackdropFilter sample shows the support for the backdrop-filter CSS property and the Cohtml integration needed to allow filtering of user content which will be behind the UI texture. For more details see the documentation on backdrop-filter
  • The Compositor sample shows an example integration that allows elements with the coh-composition-id to be rendered in a 3D world. For more details see the documentation on the Compositor
  • The CustomEffects sample shows how to implement a custom effect handler and use it through CSS to achieve a non-standard rendering effect. For more details see the documentation on the custom effects
  • The UISurfacePartitioning sample shows how to setup a cohtml::View to use the UI Surface Partitioning flow. For more details see the documentation on the UI Surface Partitioning
  • The OffscreenRendering sample shows how to achieve an offscreen rendering of some element that can later be transitioned in the main viewport through CSS transformations
← Quick Start Guide