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
💚 " is full support, and light performance cost css styles
"(Close to LibGDX properties, so don't need to spend too much performance)
❤️ " 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)
💙 " is coming soon
"(It's in dev)
💔 " 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: [email protected]
- QQ: 1406547525