Sign in to follow this  

HTML/CSS UI directly in DirectX window

This topic is 669 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

In Sciter Engine v 3.3.1.4 ( Embeddable HTML/CSS/script UI engine ) I have added support of direct HTML/CSS rendering inside DirectX window.

 

Here is a screen cast of demo project: 

https://www.youtube.com/watch?v=BJLadCTMxpg

 

On Windows Sciter uses Direct2D graphics backend so its rendering goes directly into DirectX.

 

Among other things Sciter supports layered HTML/CSS rendering: you can render some DOM elements as on background of 3D scene as in front of it.  Here is an illustration of such layers as they shown on that video above:

 

sciter-directx-schema.jpg

 

Sciter supports full set of HTML5 input elements and many others. It even allows to render some elements in popup windows - on top of main DirectX window ( check that <select> on the video ).

 

As you can imagine having in-game UI to be defined in HTML/CSS/script resources is very flexible and convenient.

Sciter sdk contains inspector tool that can be used for DOM/styles inspection and script debugging. There are also third-party MS Visual Studio integration tools.

 

Yet Sciter exposes its script VM as set of low-level API functions so it can be used for UI/game logic. Sciter script is "JavaScript++"

 

More details are here.

Edited by c-smile

Share this post


Link to post
Share on other sites

This topic is 669 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this