New UI components

[wpernath]

Hi,

as discussed in another thread, here are two components you can use as you want:

• BaseClickableContainer: The base implementation of something clickable (inspired & copied from GUI_Object)
• BaseTextButton: A round rectangle based, hover supported, text button implementation as one implementation of BaseClickableContainer

Thanks a lot for all your help!

[obiot]

thinking about renaming everything as well, what about :

• UIBaseElement (your BaseClickableContainer)
• UISpriteElement (former melonJS GUI_Object)
• UITextButton (BaseTextButton)
• UISpriteButton (I could add this one too)

what do you think ?

[wpernath]

Good idea! Let’s do it.

Just forward thinking: what about a

• UIListView (a scrollable Container with any content?)
• UIImageTextButton
• UIcheckBox

As I am new in JavaScript etc., but I personally don’t like to use a html popup for letting the user input some text. But I don’t know how complicated it is to provide:

• UITextInput (for example to let the user input his name etc.)

Best, Wanja

[wpernath]

I have created a new folder in src/renderable named ui and renamed the two classes accordingly.

[obiot]

Hi, thanks for the update ! :)

I think I will sort out first the few bug fix we have going on, release a 13.2 version, then I will do a 13.3 with those new UI addition.

[obiot]

@wpernath later than never, this is finally merged and all ! thanks again for the PR.

How is your game coming along ?

[wpernath]

Good idea! Let’s do it.

Just forward thinking: what about a

• UIListView (a scrollable Container with any content?)
• UIImageTextButton
• UIcheckBox

As I am new in JavaScript etc., but I personally don’t like to use a html popup for letting the user input some text. But I don’t know how complicated it is to provide:

• UITextInput (for example to let the user input his name etc.)

Best, Wanja

Am 12.08.2022 um 02:38 schrieb Olivier Biot @.***>:

 thinking about renaming everything as well, what about :

UIBaseContainer UISpriteContainer (former GUI_Object) UITextButton what do you think ?

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.

[obiot]

the UITextInput is definitely not a good idea in my opinion, as implementing a text input component that support different languages and all is a full project by itself. And then there is the whole keyboard rendering itself, that anyway is project specific, so nobody never agreed that having a base "generic" keyboard was marking sense.

we discuss this multiple time over the course of the last few years, and the conclusion was always that using css was just easier, I could not find back all the post on the topic, but here are a few of them : https://github.com/melonjs/melonJS/wiki/Frequently-Asked-Questions#form_inputs https://github.com/melonjs/melonJS/issues/276 https://www.html5gamedevs.com/topic/34357-do-you-build-your-uis-in-melonjs-or-dom/#comment-197401

[wpernath]

Hi Oliver,

thanks a lot for your feedback. I have seen your FAQ already and tried to implement it accordingly. Unfortunately, I have issues with positioning a HTML textbox close to other UI elements, I draw via MelonJS. The coordinates of MelonJS pixel drawing and CSS are different. Any hint on how I can survive this?

Right now, I am generating random names for my players, but I would really like to have the ability to let the user choose their own names (not on high prio list, but...)

Thanks a lot for your help,

Am Di., 11. Okt. 2022 um 09:34 Uhr schrieb Olivier Biot < @.***>:

the UITextInput is definitely not a good idea in my opinion, as implementing a text input component that support different languages and all is a full project by itself. And then there is the whole keyboard rendering itself, that anyway is project specific, so nobody never agreed that having a base "generic" keyboard was marking sense.

we discuss this multiple time over the course of the last few years, and the conclusion was always that using css was just easier, I could not find back all the post on the topic, but here are a few of them :

https://github.com/melonjs/melonJS/wiki/Frequently-Asked-Questions#form_inputs #276 https://github.com/melonjs/melonJS/issues/276

https://www.html5gamedevs.com/topic/34357-do-you-build-your-uis-in-melonjs-or-dom/#comment-197401

— Reply to this email directly, view it on GitHub https://github.com/melonjs/melonJS/pull/1119#issuecomment-1274221929, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJF76S7NFDMN2RSTYPPFNLWCUKBLANCNFSM56HFNLVA . You are receiving this because you were mentioned.Message ID: @.***>

[wpernath]

@obiot, You're very welcome. And thanks for merging!

You can have a look here: https://github.com/wpernath/quarkus-grumpycat for the status of the game. And if you'd like to play it live, just go here: http://cat-client-grumpycat.apps.ruby.rhepds.com/

:-)

Am So., 9. Okt. 2022 um 06:38 Uhr schrieb Olivier Biot < @.***>:

@wpernath https://github.com/wpernath later than never, this is finally merged and all ! thanks again for the PR.

How is your game coming along ?

— Reply to this email directly, view it on GitHub https://github.com/melonjs/melonJS/pull/1119#issuecomment-1272453685, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAJF76VZYXSQXYOWWUZWQB3WCJD25ANCNFSM56HFNLVA . You are receiving this because you were mentioned.Message ID: @.***>

[obiot]

Hi @wpernath, digging an old post, but in the coming 15.1 version I did some clean on the UITextButton class (see https://github.com/melonjs/melonJS/commit/2bf90ba93ba407c1217279394d365e7dbf185896), and there is one change that now the button won't automatically change opacity. However, it will take in account the alpha value specified through the backgroundColor and hoverColor, which makes it more generic and let the end user decide if he wants to "dim" the button or not (and by how much) when out of focus.

This to say, that if you update later to 15.1 or higher, keep this in mind if you notice some difference on your buttons !