domingo, 1 de fevereiro de 2015

Porting the StackerJavaFX game to Android

For too long I want to port a JavaFX application of mine to Android using JavaFX Ports. The day has come! In this post I will share with you my experiences porting the Stacker Game to Android. Actually at the time I write this sentence I just created a new project on Netbeans and it might even not work, I can even abandon this post, because at the moment I have 0% of the port done! UPDATE: It worked and was really easy!

From Java 8 to Java 7

Android doesn't support Java 8. We have projects to use Lambdas in Java 7, but I wanted to make it simple as possible to avoid any incompatibility, hence I decided to keep it only with Java 7 and JavaFX 2.2.
The saddest thing was to remove my beautiful lambdas to use the old anonymous classes from the code. Also, I noticed that JavaFX 8 is easier than JavaFX 2.2. The reason is that we have more constants and constructors in JavaFX 8 that we won't find in the 2.2 version. There were simple details to change, but Netbeans helped me, what I did was:

* Create a new JavaFX prject in Netbeans, but this time using Java 7;
* Copied the source from the JavaFX 8 project and pasted into the Java 7 project;
* Corrected the errors pointed by Netbeans.

I finished this in about 25 minutes. The main problem is that I ran into this Netbeans bug, but quickly solved by running it with Java 8, but compiling with Java 7.
I could continue programming in Netbeans, but as this was a first test, I deleted netbeans related files and created a gradle project.

First Port to Android

I carefully followed the instruction from the JavaFX ports site using the new build system, but I faced an issue with "Where Should I put my JAR?". This thread answered my question. The I noticed that I had to configure my project structure as a Gradle project. It worked very well!

After you configure your gradle application and correctly install Android tools, you just need to run too commands to have your application running in your phone:

$ gradle build
$ gradle installDebug

The harder part was to configure my phone to run in developer mode and then use the adb tool to configure the USB access.


I was really easy to port the JavaFX application to my Android phone and I am still impressed with with the performance while the app was running on the phone. Of course I would have to make a few adjustments if I want the app to be widely available, such as the size when the screen rotates...

* The source of the application ready to run on Android can be found on my github;
* A direct link to the APK can be found here.

sexta-feira, 23 de janeiro de 2015

Exporting JavaFX application as an animated GIF

To try to export an animation from a JavaFX app to an animated GIF, I started on this thread in StackOverflow, then this class from Eliot Kroo, which I am sharing on gist in case his site goes down.

Right now I am going to try his class on a JavaFX application and I will share the results here.

A sample animation

This is the animation I generated using my code :

The source for this animation is here:

Based on Eliot's class, I created one which will take an amount of screenshots based on the given period and write an animated GIF on the given path(well, right now I didn't create the source yet, hope I will be able to make it work):

This code have no great performance since the snapshot method is not "performatic". If we set a small period to collect the GIF's frames, we will face slowness.
That's all, folks! Now you can use the above code in your application to export GIT animations from your JavaFX applications!

quarta-feira, 21 de janeiro de 2015

Stacker Game in JavaFX

In this post I am going to share with you this simple game I created using JavaFX.

The Stacker game

The goal of the game is to reach the top by stacking rectangles. This is a well known game where when you reach the top you earn some gifts. Here is a video I took from youtube of someone playing this game:

Our game is a little different. We will will only stack 1 rectangle, but the rectangle can be adjacent of the below rect, not exactly on top of it. The number of rectangles to fill will be increasing according to the level and also the speed.

The game in Processing

The game was previously created in Processing, but most of the code I could reuse in the JavaFX version! You can find the source for the processing version in my github.


Creating games with JavaFX

JavaFX was always a platform for games since its 1.0 version. I remember we even had a blog specific for JavaFX script games. Since the end of JavaFX Script and with JavaFX 2, we have some samples that might be downloaded in Oracle's site.
To get start with games on JavaFX I recommend this series of posts by Carl Dea.
JavaFX have all resources we need to create games: animations, resources to detect collision, special effects, play sounds, etc...

Our stacker game implementation

The game is basically based on update a boolean matrix and read it to create a visual representation. When the user click on the game, we make a loop in the matrix to see if the block in the previous line  is true or if the block in the current line is adjacent to the block in the previous line.
The two important classes in our program is the Game Engine and the game itself. The game engine is responsible to make the game alive, because it will make the game update the screen on a given frequency and make it draw itself.
The game is responsible to draw and update the scenario according to time and user's input. Here is the code of these two classes:

There are classes that does nothing. We need to create a concrete class, so we did, we created the StackerGame  class. It contains the matrix that represents the game and will draw the grid and the rectangles according to the time, level and user's input.
The logic of the game is basically move a boolean in the matrix and fix it when the user clicks. If the user click was done when the rectangle had a block below it or adjacent, the game will continue, if not, we will call game over and when the user click again, the game will start from beginning. Note that the score is higher when the user makes a perfect stack and lower when the user stack using an adjacent block.  The game is drawn in a canvas, which is easier to control in our case(we are coming from Processing!).
Notice that we expose some variable using javaFX properties. These properties are used in our main application to display the score, level and eventually the game over label. See the all the code of these two classes:

Here is the game in action:

Possible Improvements

Unfortunately the game has no sounds and the effects are poor. Also, if the user reach the level 20, the game will bug! So, the possible improvements are:

* Improve the look of the game;
* Add sounds;
* Handle the end of the game event.


It was a simple demonstration of a game using JavaFX. As usual, it was done for fun, in a few hours... Don't judge possible bad code... The source is in my github.

JavaFX is fun, is enterprise, is good for game programming, for data visualizations, for learning Java...

quarta-feira, 7 de janeiro de 2015

My experience with Processing programming language (and JavaFX X Processing)

Processing is the main language used to create Arduino code. It is also a great language to create visual applications. In this post I am going to share you some processing sketches I created and the way to follow if you are looking to have fun with this great programming language based in Java.

Having fun with processing

Simplicity is the word for processing. You can sit, open the IDE, have some random idea and in a few minutes you will implement it. Here are some random fun stuff I created in a few minutes


As a first test with angular motion, I created a sketch to draw lines which when connected create a spiral:

TV out of tune

To experiment the noise function, a sketch using this function was to simulate an old TV of tune effect:

"The Thing"

Angular motion is always exciting. In this example I created a class called TheThing, which makes use of angular motion. I won't post all the code here, but you can see in my github.

Particle generation

I already made tests with particle generation using HTML 5 at this blog, but it was really simpler to create one with Processing:

I have a lot of other sketches, but I didn't added to github yet. Here is the code of the sketches above:

Where you can find inspiration and more information?

That is an interesting question. I am watching Processing videos on Vimeo and reading two books. It all started when my teacher twitter about Shiffman's videos. I felt in love with the Nature of Code video series and I watched almost all videos and now I decided to play with it and make the Nature of Code's exercises. The material I have about processing are:

So, what Processing is useful for?

In my opinion, Processing is great for creating visualizations and to learn programming. Yeah, learn how to program. Here's why:

  • Unlike Python, Processing syntax is close to Java and C, two of most used programming languages in the world. It makes  easier for beginners to jump to a language more used in the market;
  • Processing is cool and at first steps, the beginners will be creating useful and exciting sketches;
  • There's great and didactic material for teachers. For example, Shiffman put some slides in the Learning Processing book's page;
  • In a course, the same language can be used also in Arduino, so the students won't have difficult applying their processing knowledge when studying Hardware or IoT;
  • Not convinced yet? Watch the Hour of Code video for processing.
But of course, processing goes beyond teaching. With processing you can:
  • Create artistic and beautiful visualization of data, or no data. For example, see this tumblr, where the author is creating 1 sketch per day during one year;
  • Processing is built on top of Java, which means that it should possible to use existing Java libraries (I never tested, but I used other classes from JavaSE on it);
  • Processing is flexible and can be ported to run on Web pages as javascript and/or Android devices!

The weak points of Processing

I understand processing is used mainly to draw and create visualization, so I think it is so hard to create UI elements such as buttons, labels, etc. I also found the text functionalities so poor, but perhaps I am not so familiar with it.

Processing X JavaFX

No, I will not "abandon" JavaFX. In fact, I check processing sources to see if it could be possible to port Processing to run inside a JavaFX app, but it makes high use of the "old" Java graphical stack (Java2d and AWT). In any case, I plan to reuse a game I created inside a JavaFX application using Canvas.
I generally prefer JavaFX for visual applications because it has a rich UI library and built-in features to create animations, but when I want to create visualizations, I should use processing.
In fact, in a future post I plan to share my experiences when migrating a game from processing to run inside a JavaFX app.
JavaFX Ensemble application is a great tool to explore JavaFX feature


Processing is a great tool to create visualizations. It is simply and easy to learn. Java programmers automatically know Processing!

On my next post I will try to describe a simple and silly game I created for fun and after this I will try to reuse the processing code to run this game inside a JavaFX app.