LibGDX-Scene2D: How to make hud with multiple buttons? - user-interface

I'm making an Idle Game but now I don't know how to make the listeners of the HUD. It's okay to instantiate an InputListener() in every button of my hud? I have like 20 buttons or actors to touch.

Simply use addListener() method for every actor that you want to be clicable. I used to use ClickListener for this purpose although it is sometimes recommended to use ChangeListener due to better behaviour when the button is being disabled.
So what you need to do is just
Button button;
//creating button...
button.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y)
{
//Do something
}
});
and the same for another buttons/actors on your HUD stage.
You can also take a look at this thread where I have asked about performance of many listeners.

Here is a scene2d button, which is really easy to use, I dont understand what the issue is or why you are worried about having a listener on each button or UI object, seems pretty logical to me.
button = new Button(buttonStyle);
button.setPosition(x, y);
button.addListener( new ClickListener() {
#Override
public void clicked(InputEvent event, float x, float y) {
Gdx.app.log(TAG, "Button clicked");
};
});

Related

How to detect the click on a drawn element in a GraphicsView

I have created an IDrawable that draws different arcs of a circle in a GraphicsView in order to create a pie chart.
No problem so far, except that now I would like to detect the click or hover of one of these circle portions. But I don't see anything that would allow me to do that easily.
Even inheriting my IDrawable from View to attach a tapgesture to it doesn't seem to work (and even then it wouldn't really answer my problem which is to be able to know which portion is clicked).
public class PieChartDrawable : View, IDrawable
{
private readonly PieChart _chart;
public PieChartDrawable(PieChart chart)
{
_chart = chart;
var tapGestureRecognizer = new TapGestureRecognizer();
tapGestureRecognizer.Tapped += OnTapped;
GestureRecognizers.Add(tapGestureRecognizer);
}
private void OnTapped(object sender, EventArgs e)
{
// Does not trigger.
}
public void Draw(ICanvas canvas, RectF dirtyRect)
{
if (_chart.Entries == null)
return;
[...]
}
}
Am I doing it wrong, or is there a way to do it?
(I'm looking for a solution for MAUI, but I guess something that works under Xamarin Forms will do very well).
Thanks in advance.
It seams it can be a solution from the first sight:
Use the solution described in this one to detect the point
Write the function PointInPolygon to detect the selected area
(Point in the big circle, Point out of small circle and angle to detect sector)
Other one I have found at the moment the more complex to quick reuse :)
ADDED:
Invoking Events from Effects

How to create a "clicking effect" on a 3d-object (3d-cube) in Unity3d?

I have a 3d-object (cube), which I want to use as a button. I've written the code in order to detect, if the cube was pressed but it doesn't look like it was pressed, since it lacks the "clicking animation". How can I create a clicking animation on my 3d-object ?
A good idea is to play an aninimation which skrinks the cube a bit and releases it immediately afterwards. The handler code you want to execute on a click might block the game loop, e.g. when you load a level. Then it might be useful to load the level aysnchronously to be able to see the animation. Or you execute the handler code after the animation. Or you play the scale down animation on the press event and the scale up animation on the release event.
Technically you can use the build in animation editor, the Update() method, start a coroutine or use the assets iTween or HOTween.
http://docs.unity3d.com/ScriptReference/Transform-localScale.html
Let me know if you like the idea or questions arise.
Unity makes it easier now to do this using Unity Canvas UI. Instead of real 3d buttons, you could place a canvas UI in world space at the location where you want the buttons. Add a UI Panel to the canvas then add a UI Button.
Now, you have out of the box several clicking effects. The default it color tint, but you can choose sprite swap, or animation.
If you do want animation, when you select button animation it will create an animator for you. Click on your UI button Game Object in the scene hierarchy and open the animation window. You can choose Pressed animation from the drop down, and press RECORD button, then edit your buttons scale, say make it 0.75 for x,y,z. Now when you click on the button it will animate a cool scale down for you.
Sorry, I know that is a lot of information dumped! But you will find it pretty great once you start working with it in world space.
You can scale it down a tiny bit once click happen. For example:
void OnMouseDown() {
this.transform.localScale += new Vector3(0.05f, 0.05f, 0.05f);
}
Then after click scale it back to the original size.
Perhaps look into iTween (free on Unity Asset store).
Its very easy to use and you can produce some nice looking animations.
you can scale it when pressed or just change the color a little bit. On mouse up, rescale or recolor it.
void OnMouseDown()
{
transform.localScale -= new Vector3(0.05, 0.05 , 0);
//or
transform.GetComponent<SpriteRenderer>().color += new Color(40,40,40);
}
void OnMouseUp()
{
transform.localScale += new Vector3(0.05, 0.05 , 0);
//or
transform.GetComponent<SpriteRenderer>().color -= new Color(40,40,40);
}
You can implement your button using new Event system of unity. Here are the functions you can implement :
public class ExampleClass : MonoBehaviour, IPointerDownHandler, IPointerUpHandler, IPointerClickHandler, IPointerEnterHandler, IPointerExitHandler
{
public void OnPointerEnter(PointerEventData eventData)
{
//it is the function when you hover your mouse to the object
//You can change the color of your object to make your users
//understand that it is not just a cube but also a clickable item
}
public void OnPointerExit(PointerEventData eventData)
{
//You can revert your color back to its original
}
public void OnPointerDown (PointerEventData eventData)
{
//You can play with local scale as suggested by other answers here
}
public void OnPointerUp (PointerEventData eventData)
{
// Revert back the changes you made at onPointerDown
}
public void OnPointerClick (PointerEventData eventData)
{
//Use here for operations when your button is clicked
}
}

JavaFX: Focusing textfield programmatically

I wrote an application with JavaFX which will only be usable with keyboard's arrows.
So I prevented MouseEvent on Scene's stage, and I "listen" to KeyEvents.
I also switched off focusability of all nodes :
for(Node n : children) {
n.setFocusTraversable(false);
Now I have some textfields, checkboxes, and buttons.
I would like to change the state of my input controls (textfield, checkbox,..) programatically: for example I would like to enter the textfield to edit the content programatically.
So my question is: how to enter in a non-focus-traversable textfield?
Because textfield.requestFocus(); doesn't work anymore since I set false to focustraversable property of my textfield.
Thanks
By
n.setFocusTraversable(false);
the node is made non-focus-traversable instead of non-focusable. It can still be focused for example by mouse or programmatically. Since you prevented mouse events, here the other option:
Platform.runLater(new Runnable() {
#Override
public void run() {
textfield.requestFocus();
}
});
Scene scene = new Scene(root);
EDIT: as per comment,
The javadoc of requestFocus states:
... To be eligible to receive the focus, the node must be part of a scene,
it and all of its ancestors must be visible, and it must not be
disabled. ...
So this method should be called after construction of scene graph as follow:
Scene scene = new Scene(root);
textfield.requestFocus();
However, Platform.runLater in the above will run at the end, after the main method start(), which ensures the call of requestFocus will be after scene graph cosntruction.
There maybe other reasons depending on the requestFocus implementation code.
set the .requestFocus(); on initialize method to fire on .fxml file loading controller
#Override
public void initialize(URL url, ResourceBundle rb) {
/* the field defined on .fxml document
#FXML
private TextField txtYear;
*/
txtYear.requestFocus();
}

How to make an auto hiding menu bar with Qt4

I am trying to make a Qt application which has an auto hiding menu bar. How can i do that?
That's an interesting task ! Ok, lets see... I'd suggest you putting a code that keeps track of mouse cursor movement in QMainWindow::centralWidget(). You need to call QWidget::setMouseTracking(true) first to be able to keep track of your mouse movement (they are turned off by default). The code can look like this:
QMainWindow *mainWindow = new QMainWindow;
MyWidget * myWidget = new MyWidget(mainWindow);
myWidget->setMouseTracking(true);
mainWindow->setCentralWidget(myWidget);
And then in your widget QWidget::mouseMove() event you need to detect whether you are in the correct area. The code can look like this:
void MyWidget::mouseMoveEvent(QMouseEvent * event) {
bool menuVisible = inCorrectArea(event->pos());
mainWindow->menuBar()->setVisible(menuVisible);
...
}
There are several ways to get access to "mainWindow" in your MyWidget. One of them is to store a pointer in MyWidget private variable when you pass MainWindow in its MyWidget constructor. You can also issue a signal from your MyWidget and handle it in MainWindow.
Hope this helps.

GWT image cropping vs. drag'n'drop problem in browser

Using GWT, I am displaying an image on the web page and my goal is to allow the user to crop it. The user draws an imaginary boundary box by clicking on a specific part of the image, moving the mouse, and releasing it somewhere else. With the use of MouseDownHandler() and MouseUpHandler(), I am planning to record the start and end corners of the mouse cursor.
However, when I deploy my work on the web, there is this problem: When the user clicks on the image and tries to draw the imaginary bounding box, the web browser (Google Chrome in my case) detects it as a drag and drop operation.
Therefore, I cannot get my mouseDown() and mouseUp() functions to work. How can I avoid the browser to do a drag and drop operation?
The code:
public void onModuleLoad(){
RootPanel.get().add(img1);
img1.addMouseDownHandler(new MouseDownHandler() {
#Override
public void onMouseDown(MouseDownEvent event) {
startX = event.getX();
startY = event.getY();
}
});
img1.addMouseUpHandler(new MouseUpHandler() {
#Override
public void onMouseUp(MouseUpEvent event) {
endX = event.getX();
endY = event.getY();
img1.setVisibleRect(startX, startY, endX-startX, endY-startY);
}
});
}
Maybe you can use HTML5. I have found this earlier question here on Stack OverFlow that describes the same problem as you have. Also I found a code example on code.google.com
Hopefully this will lead you to an solution.

Resources