You could use the standard Button and style them with CSS to look exactly like you want. No need for deriving a new class for the buttons But I love your tutorials so far. There isnt much about JavaFX and gaming like your videos on the net
Lars Roth Hi, I'm glad that you liked the tutorials. Yes, although FXML and CSS are the recommended way of defining View in JavaFX MVC, when it comes to non-business applications, e.g. games/menus I prefer to keep UI in code. Unfortunately, that does mean that a change to UI will cause a change to code, followed by source recompilation and some other issues, which may or may not be the deal-breaker. So yeah, I suppose it's a design decision. I might switch to FXML/CSS in the future tutorials though. Kind regards, Almas
Really nice tutorial, learned a lot from it. Do you also have a tutorial on how to implement the Start Game button? What I mean is, instead of already being in the game (we press Esc to bring the menu here), we start at the "real" main menu, where first we must click on Start Game, which runs a random app (another .java in the package maybe), and from there we can use the Esc key to bring the same menu.
I have a test, and I wanted to use this menu to access each of the questions, for example, select "Question 1" from the menu, and the button run a code where I can ask the user to enter values for some variables that will be used in the calculation of the question, would that be possible?
in creating menu there is EVENT.. i didnt understand that part. what should be event? object? Event event? "setOnMouseEntered(event -> { " in this part
if we were typing without the lambda it'd be setOnMouseEntered(new EventHandler() { @Override public void handle(MouseEvent event) { // code for event } }); since Java 1.8 we can do stuff like this setOnMouseEntered(event -> { // code for event }); which is exactly the same as above but much easier to type and read. To answer your question - event is of type MouseEvent, and if it helps you can also do this setOnMouseEntered((MouseEvent event) -> { // code for event });
Hi! I tried to do your tutorial and didn't work. I downloaded and pasted all, and onlz changed my background. Only show my background and didn't show the menu buttons.
Hi. Thank you for these tutorials, they help me a lot! I have a question, pretty basic I guess. I have already made my game, and want to implement a menu like this. How can I implement this code to my code? I mean, where should I make a new GameMenuDemo object in my code to make it run? I tried, the game runs as previously, but I cannot see the new background image and the buttons. Are they rendered under my game? or maybe they are not rendered at all? Any help greatly appreciated!
+bla2030 Hi, GameMenuDemo is an application on its own so you can't just stick it somewhere. You will need to strip out the UI related code into, say GameMenu with its own root node. Then you can create an instance of GameMenu and attach its root to the root of your own game. Finally you will need to provide some access to your game, i.e. when new game button is pressed you call your game's startGame() or something along these lines
+Almas Baimagambetov (AlmasB) Hm.. the rest of the program is based on JFrame. Is it possible to have the game in JFrame, while the UI in JavaFX? Seems I have to study more on the subject, it is the first time I mess with javaFx and the root/node idea.
+bla2030 Technically, it is possible to use both frameworks. You can read about fx-swing interop here - docs.oracle.com/javase/8/javafx/interoperability-tutorial/swing-fx-interoperability.htm In practice, however, you are likely to run into many issues and you need to have a solid understanding of both frameworks and their internal architecture in order to make the blend work as expected. Depending on what your goal is, and if you have spare time, I'd recommend rewriting your game in JavaFX. Node is a term that comes from graph theory and in JavaFX context it means an element of the scene graph. The scene graph is the data structure that internally represents UI objects that you see on the screen. A scene graph is used in many graphics frameworks because of its properties. For instance, if you look at it as a tree (which it is) in order to make a composite UI object hidden (0 opacity), you simply apply that to its parent node. This effect will be passed down to all of its children and they will also be hidden.
THANK YOU for all this info! I really appreciate your time and care you give. I will probably create a simple, basic UI in swing, in order to keep things moving, as I am already behind schedule. Later on, I will try to implement or completely rewrite in javaFx the game, as you said. Thank you again. Keep these very helpful videos and comments coming... Wish you all the best!
Is this applicable for android game development? I really want to study and adapt the code. And what is the cons of using JavaFX? This is only the tutorial I have found and it's a superb video! Thanks. :)
Hi, in the meantime JavaFX isn't particularly mobile-friendly. However, there is some work being done in that area - gluonhq.com/open-source/javafxports/ The concepts of game development are valid irrespective of the language / framework / platform so feel free to wander around the channel for other game dev videos. JavaFX doesn't expose low level native API and it can be limiting depending on how far down you need to go for your game
I'm trying to use the TranslateTransition on the individual buttons so I can have a slow moving shift like the options menu instead of an abrupt one, 10 pixels to the right. I can't get it to work though.
Instead of using an image as the background, how would you use a looped animation (longer than a typical .gif) like you see in some modern game menus (with blurred flashes or particles)? I can't find videos on this anywhere - at least not for java. If anyone knows of a good one, please comment.
For example, here is a simple intro menu (from a very enjoyable game, IMHO) that could easily have a stackFrame menu on top of it: ruclips.net/video/hjn5m889JsE/видео.html . I would like to know how to do something like this in the background.
Each character is probably a single animation loop (from a sprite sheet). Run an AnimationTimer and update frames as needed. They will be sorted with an appropriate z-index. Put a javafx Group on top and particles become really easy. Example of Skyrim menu particles in javafx: ruclips.net/video/raqK08Yaz3U/видео.html Finally, add another Pane or some other container to keep your menu items
Please help over here ! when i write : Image img = new Image(is); I get an error saying : The Constructor Image(InputStream) is undefined.(No suggestions available.)I can't stop sighing every time i see the problem again and again , please help (I'M GONNA DIE!)
If by data you mean the source code I am planning to upload it to github once I've organised it into categories, but I'm currently away so for now just follow the tutorial, I'll let you know when the source code becomes available
It doesn`t work. I checked my code 1000 times its completely like your code but i only get the window with the background. can you help me to fix the buttons ?
Sorosch Adamiat Hi, here's the link to source code file - github.com/AlmasB/FXTutorials/blob/master/src/com/almasb/tutorial4/GameMenuDemo.java Copy and paste everything, see if it works. If it doesn't, let me know of your environment (e.g. IDE you are using, JDK version, etc)
You could use the standard Button and style them with CSS to look exactly like you want. No need for deriving a new class for the buttons
But I love your tutorials so far. There isnt much about JavaFX and gaming like your videos on the net
Lars Roth Hi, I'm glad that you liked the tutorials. Yes, although FXML and CSS are the recommended way of defining View in JavaFX MVC, when it comes to non-business applications, e.g. games/menus I prefer to keep UI in code. Unfortunately, that does mean that a change to UI will cause a change to code, followed by source recompilation and some other issues, which may or may not be the deal-breaker. So yeah, I suppose it's a design decision. I might switch to FXML/CSS in the future tutorials though. Kind regards, Almas
Thank you for such an amazing demo!!
Really nice tutorial, learned a lot from it. Do you also have a tutorial on how to implement the Start Game button? What I mean is, instead of already being in the game (we press Esc to bring the menu here), we start at the "real" main menu, where first we must click on Start Game, which runs a random app (another .java in the package maybe), and from there we can use the Esc key to bring the same menu.
Rasmus Retpap did you found a solution to that? I really need something like this for my project.
Jeez another one, just wrote a comment on the third one! speechless! that's fantastic!
thanks! i think i'm getting the hang of doing tutorials :D
oh yes, really looks like it :)
Great video, thanks!!!
I have a test, and I wanted to use this menu to access each of the questions, for example, select "Question 1" from the menu, and the button run a code where I can ask the user to enter values for some variables that will be used in the calculation of the question, would that be possible?
in creating menu there is EVENT.. i didnt understand that part. what should be event? object? Event event? "setOnMouseEntered(event -> { " in this part
if we were typing without the lambda it'd be
setOnMouseEntered(new EventHandler() {
@Override
public void handle(MouseEvent event) {
// code for event
}
});
since Java 1.8 we can do stuff like this
setOnMouseEntered(event -> {
// code for event
});
which is exactly the same as above but much easier to type and read. To answer your question - event is of type MouseEvent, and if it helps you can also do this
setOnMouseEntered((MouseEvent event) -> {
// code for event
});
Almas B i did get the hang of it after my comment. but tnx anyway. This tutorial is nice.
Bilguun B
Thanks, there'll be a few more later this week. Here's another one inspired by Far Cry 4 menu
ruclips.net/video/PTwpDkUMowk/видео.html
Hi! I tried to do your tutorial and didn't work. I downloaded and pasted all, and onlz changed my background. Only show my background and didn't show the menu buttons.
It works but I did it from scratch and configured some values and added some features try by uneasy way
Hi. Thank you for these tutorials, they help me a lot!
I have a question, pretty basic I guess. I have already made my game, and want to implement a menu like this.
How can I implement this code to my code? I mean, where should I make a new GameMenuDemo object in my code to make it run? I tried, the game runs as previously, but I cannot see the new background image and the buttons. Are they rendered under my game? or maybe they are not rendered at all? Any help greatly appreciated!
+bla2030 Hi, GameMenuDemo is an application on its own so you can't just stick it somewhere. You will need to strip out the UI related code into, say GameMenu with its own root node. Then you can create an instance of GameMenu and attach its root to the root of your own game. Finally you will need to provide some access to your game, i.e. when new game button is pressed you call your game's startGame() or something along these lines
+Almas Baimagambetov (AlmasB) Hm.. the rest of the program is based on JFrame. Is it possible to have the game in JFrame, while the UI in JavaFX? Seems I have to study more on the subject, it is the first time I mess with javaFx and the root/node idea.
+bla2030 Technically, it is possible to use both frameworks. You can read about fx-swing interop here - docs.oracle.com/javase/8/javafx/interoperability-tutorial/swing-fx-interoperability.htm
In practice, however, you are likely to run into many issues and you need to have a solid understanding of both frameworks and their internal architecture in order to make the blend work as expected. Depending on what your goal is, and if you have spare time, I'd recommend rewriting your game in JavaFX.
Node is a term that comes from graph theory and in JavaFX context it means an element of the scene graph. The scene graph is the data structure that internally represents UI objects that you see on the screen. A scene graph is used in many graphics frameworks because of its properties. For instance, if you look at it as a tree (which it is) in order to make a composite UI object hidden (0 opacity), you simply apply that to its parent node. This effect will be passed down to all of its children and they will also be hidden.
THANK YOU for all this info! I really appreciate your time and care you give. I will probably create a simple, basic UI in swing, in order to keep things moving, as I am already behind schedule. Later on, I will try to implement or completely rewrite in javaFx the game, as you said. Thank you again. Keep these very helpful videos and comments coming... Wish you all the best!
i need a tutorials using FXML
Is this applicable for android game development? I really want to study and adapt the code. And what is the cons of using JavaFX? This is only the tutorial I have found and it's a superb video! Thanks. :)
Hi, in the meantime JavaFX isn't particularly mobile-friendly. However, there is some work being done in that area - gluonhq.com/open-source/javafxports/ The concepts of game development are valid irrespective of the language / framework / platform so feel free to wander around the channel for other game dev videos. JavaFX doesn't expose low level native API and it can be limiting depending on how far down you need to go for your game
Is it posseble to show, make demo how to make simple custom game Menu in Sublime or Atom in java
I'm trying to use the TranslateTransition on the individual buttons so I can have a slow moving shift like the options menu instead of an abrupt one, 10 pixels to the right. I can't get it to work though.
Nevermind, I forgot the play method.
Instead of using an image as the background, how would you use a looped animation (longer than a typical .gif) like you see in some modern game menus (with blurred flashes or particles)? I can't find videos on this anywhere - at least not for java. If anyone knows of a good one, please comment.
For example, here is a simple intro menu (from a very enjoyable game, IMHO) that could easily have a stackFrame menu on top of it: ruclips.net/video/hjn5m889JsE/видео.html . I would like to know how to do something like this in the background.
Each character is probably a single animation loop (from a sprite sheet). Run an AnimationTimer and update frames as needed. They will be sorted with an appropriate z-index. Put a javafx Group on top and particles become really easy. Example of Skyrim menu particles in javafx: ruclips.net/video/raqK08Yaz3U/видео.html Finally, add another Pane or some other container to keep your menu items
Салам, как жизнь? Где ты сейчас? В кремниевой долине?
Please help over here ! when i write : Image img = new Image(is); I get an error saying : The Constructor Image(InputStream) is undefined.(No suggestions available.)I can't stop sighing every time i see the problem again and again , please help (I'M GONNA DIE!)
+Fox Designs Hi, if I were you I'd check imports to make sure you are using javafx Image and not AWT Image class.
Thank you so much , I've already fixed the problem , your tutorials are really helpful btw !
how can i add an MenuBar like Windows at the top?
root.getChildren().addAll(imgView, gameMenu); .. i allways get an error on this
One of the elements is not a node type .Wrap them with Group class. That will work.
Can I download this data ?
If by data you mean the source code I am planning to upload it to github once I've organised it into categories, but I'm currently away so for now just follow the tutorial, I'll let you know when the source code becomes available
Almas B Ok Thank you :)
Dalgon der Finstere
Here you go github.com/AlmasB/FXTutorials
Almas B Thank You :)
It doesn`t work.
I checked my code 1000 times its completely like your code but i only get the window with the background.
can you help me to fix the buttons ?
Sorosch Adamiat Hi, here's the link to source code file - github.com/AlmasB/FXTutorials/blob/master/src/com/almasb/tutorial4/GameMenuDemo.java
Copy and paste everything, see if it works. If it doesn't, let me know of your environment (e.g. IDE you are using, JDK version, etc)
+Sorosch Adamiat > gameMenu.setVisible(true); sure that's on true?
I don't see the menu but only the image why??