Using HTML + CSS + JS to build libGDX UI!

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

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

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

• 💚 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.

• 💚 <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".

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

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

• 💚 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 /> 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-family

• 💙 border

• 💔 Nope, float is SHIT.

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

• 💙 Coming soon.

• 💙 Coming soon.

• 💚 💚 💚

• This project is expected to be too large, I need contributors. Please help us.
  • mailto: [email protected]
  • QQ: 1406547525