GDX-HTML

Using HTML + CSS + JS to build libGDX UI!

用HTML+CSS+JS构建libGDX的UI!

点我查看中文说明

仍在开发(Still developing)

怎么用(how to use)

Stage stage = HTMLStage.buildPath(path-to-html-file);
//done!

support CSS / HTML

":green_heart:" is full support, and light performance cost css styles

(Close to LibGDX properties, so don't need to spend too much performance)

":heart:" is full support, and is heavy performance cost css styles

(In order to be compatible with css properties, some heavy-performance-cost hack tricks have been used)

":blue_heart:" is coming soon

(It's in dev)

":broken_heart:" is unsupport css styles / different with real world html+css

(It may be too wasteful performance, or just too difficult to implementation 😭)

Box

• 💚 width (px / em)
• 💚 height (px / em)
• 💚 padding (padding-left / right / top / bottom)
• 💚 margin (margin-left(auto) / right(auto) / top / bottom)

Text control

• 💚 font-size (px)
• 💚 color (color-name / hex / rgb / rgba)
• 💚 text-align (left / center / right)
• ❤️ line-height (px)

  • Setting the line-height property will cause the text dom to be layout multiple times.

  • The scene2d.Label of libgdx does not support line-height. For compatibility, it will cost additional performance

  • So if there is only a single line of text, it is recommended to set padding / height.

• ❤️ letter-spacing (px)

  • Setting the letter-spacing property will cause the text dom to be layout multiple times.

  • The scene2d.Label of libgdx does not support letter-spacing. For compatibility, it will cost additional performance

• 💚 -gdx-markup (true)

  • LibGDX text markup color language support.

  • Once set, it will not be canceled, even if you set it to "false".

• ❤️ -gdx-wrap (true / false)

  • The default is FALSE to save performance. When enabled, LibGDX native wrap support will be used, but the element or parent(s) element must be set to a fixed width.

  • Setting the gdx-wrap property will cause the font size to be layout multiple times.

  • 💔 When you set an element to "-gdx-wrap: true", it is not allowed to contain any child elements (except plain text), If you want to use colorful text, please set -gdx-markup to true.

Image / Texture

• 💚 <img src="..." />
• 💚 -gdx-image-scaling

  • Image is loaded asynchronously by default, which does not block the rendering of html, but when the Image is loaded, it will be re-layout, which will make the whole interface flash and affect performance. If your image is not very large, set <img async="false" src="..." /> and then becomes synchronous load. You can also preset a fixed width and height for the Image.

  • To set the scaling of <img />, you can use this css property, value is enum name of com.badlogic.gdx.utils.Scaling, like "fit" or "none".

Rich background

• 💚 background-color (color-name / hex / rgb / rgba)
• 💙 background-image
• 💙 background-position
• 💙 background-size

Positioning method

• 💚 position: static
• 💙 position: relative
• 💙 position: absolute
• 💙 position: fixed
• 💔 position: sticky

Display

• 💚 display: inline
• ❤️ display: inline-block
• ❤️ display: block

  • display block / inline-block uses an ugly implementation, sometimes it may not be the same as what the browser shows.

• 💙 display: table

Table layout

• 💚 <table /> with display: table
• 💚 <tr /> with display: table-row
• 💚 <td /> <th /> with display: table-cell
• 💚 vertical-align

  • 💔 Table directly contains a Div is illegal, unless the div is set to display: table-cell, otherwise any display is weird.

  • 💔 For performance, <table> or display: table, is not support margin or padding properties. As an alternative, you can include a container outside of <table> and set padding.

  • 💔 Table is too metaphysical, it is likely to be different from the browser display.

  • 💔 TBody, THead and TR are fake and will not be read by the rendering engine(Just used to call row()), so don't think of it here.

  • Each cell will be expand() by default, unless you set a size, if you set the width or height but do not show what you want, you can try to set the size (fixed value, or percentage) for each column of the cell.

Font

• 💙 font-family

Border

• 💙 border

Float

• 💔 Nope, float is SHIT.

Selectors / Pseudo selectors

• 💙 :hover
• 💙 :active
• 💚 :lt / :gt / :eq / :first-child / :last-child
• 💚 :has(selector) / :not(selector)
• 💚 :contains(text)
• 💚 See link to visit all support selectors / pseudo selectors

Event listener

• 💙 Coming soon.

JavaScript Support

• 💙 Coming soon.

And more...

• 💚 💚 💚

Help us

• This project is expected to be too large, I need contributors. Please help us.
  • mailto: dingjibang@qq.com
  • QQ: 1406547525