Wednesday, March 11, 2020

Cross platform gaming - SpaceFX

Aloha,

It was planned to show the latest version of SpaceFX at JavaLand conf but unfortunately this was cancelled due to COVID-19. Well lucky us we are all connected via the internet so I decided to give you the information here on my blog...

Once I've started coding the SpaceFX game I had several things on my mind...first was would it run on the browser user jpro? Yes it does...not super fast but hey...it's JavaFX running in the browser...without a plugin :)

Then I thought why not giving it a try on mobile like iOS and Android using Gluon. Well to be honest I was more than surprised how well that worked out.
The game runs smoothly on my iPhone and Android phone...well at the moment without sound but that's just a question of time.

Now I finally have it running on...

  • OS X
  • Linux
  • Windows
  • iOS
  • Android
  • Web
...from one source!!!



Because there is no support for sound on mobile at the moment I've created a mobile branch where I simply commented out all lines related to sound. The property file management is also a bit different on mobile but the rest is the same.

Oh and before someone blame me again that it does not work on Linux blablabla...
It works on my Ubuntu 18.04 LTS machine totally fine...with sound (at least the executable jar) and yes it also works on my Windows 10 Virtual Machine. I hope I do not always have to provide screenshots to proof this, you just have to believe me :)

So I've created executable jars, native packages using JDK14 jpackage and native images using GraalVM+Substrate and because many asked for the compiled versions you can now download them here:

OS X:

iOS:
  • iOS app (please unzip before install)

Linux:
  • Executable jar (run on JDK11 with java -jar SpaceFX-1.0-SNAPSHOT.jar)
  • Binary (GraalVM/Substrate version without sound)

Android:

Windows:

Attention:
Please keep in mind that I only tested the iOS and Android versions on phones (iPhone 11 Pro and Huawei P20 light). It might not work on tablets like iPads etc.

But if you are interested in the code or would like to compile/run it yourself, you can find the code as always on github.

And now another video...just for the fun of it...



That's it for today...so keep coding... :)

Friday, March 6, 2020

Friday Fun LXII - Expandable TextArea

Aloha,

Today I have another little JavaFX control for you that is an expandable TextArea.
This is a TextArea as you know it but with the ability to grow/shrink it's size dependent on it's content. Meaning to say it doesn't have scroll bars.
You can define a fixed number of lines that will be used to calculate the height when the control is not expandable and when you set expandable = true it will automatically resize to the size it's defined by it's content.
In addition it comes with the ability to limit the amount of characters you can type into the text area.
To give the user a hint that the limit is near you can also define the character threshold that will be used to show a little label below the text area that shows the characters left before you reach the limit.
For example you limit the amount of characters to 300 and set the threshold to 50. In this case the label will appear as soon as you reach 250 characters.
Here is a little screenshot that shows how the ExpandableTextArea looks like:



In addition I've also created a little video over at youtube that shows the control in action.



And as always the source code is available at github.

That's it for today...enjoy the upcoming weekend and...keep coding...

Thursday, January 30, 2020

TilesFX 11.30

Aloha,

Just found some time to update TilesFX again. Alessandro Roaro opened a pull request on github and asked for a LED tile skin. And because it was a good idea I've implemented his idea and this is what it looks like...

The LED can be switched ON/OFF by using the active property of the Tile class. The color of the LED can be set by using the activeColor property of the Tile class.

And in addition I've added another skin which is a CountdownTimerTileSkin which I thought might be useful for some people. 

Here is a little screenshot...

It shows the duration it will run and the time it will be finished. When the time is 00:00:00 it will fire an AlarmEvent that you can listen to.

When I've added the new skins to the Demo class I figured out that the RadarTileSkin and RadarNodeTileSkin did not work anymore and fixed those right away so that they are usable again...and now also support animation.

Because I'm busy and don't have a lot of time to work on TilesFX at the moment you will find the code on how to use the new skins in the Demo class that is part of the project.

As always you can find the binaries either on 

bintray or maven central

and the source on github.

That's it for today...so keep coding...

Friday, January 17, 2020

Friday Fun LXII - Formatted text field

Aloha,

In the current project we had the need for a custom JavaFX text field that has the ability of formatting numbers in a specific way e.g. "0.05 EUR" or "6 years" etc.
I remembered that I did such a field long time ago and found it in on my disk. At the same time I figured out that I had never put it on github...so here you go...

In addition there have been some special requirements like when in edit mode the units should not be visible but as soon as you leave the field they should be shown etc.

There is a gradle task to start the demo and you can execute it on the command line by typing in: 

./gradlew demo

Just make sure that you are at least on JDK 11 with OpenJFX11.

As always the code can be found on github..

That's it for today...so keep coding...

Tuesday, December 3, 2019

Some fun with JavaFX Canvas - SpaceFX

Aloha,

Last weekend I decided to write a little game because I never did that before. Saturday and Sunday morning I've spend some time to create a little space game where you have to dodge asteroids or shoot them. In addition there might be enemy ships that will fire back if you are in line of sight.
To realize that game I made use of the JavaFX Canvas node which seem to be a perfect fit for games like stuff.
In the Canvas node the redraw is in your hands (more or less) but at least you can decide when to redraw and how often. So what I did was to create an AnimationTimer and simply call a draw() method as often as possible (which usually should be around 60 times per second).
In this draw method I set the coordinates of all my objects and draw them, do the collision detection and play the sounds.
For the sprites I use simple images which I've found on the internet.
Long story short, here is a little video of the game...



If you hit an asteroid or an enemy ship you will be destroyed. Also when an enemy torpedo hits you you will be destroyed. The score will always be reset to 0 when you have been destroyed and the game will start over and over again...like I said only for the fun of it.
You can use the cursor keys to maneuver the ship and the space key to fire torpedos and that's it...as you can see...really simple :)
If you are interested in the game you can find the source code over at github.

For those of you that are also interested in jpro (running JavaFX apps in the browser), the latest version of jpro makes it possible to also run JavaFX apps that use the Canvas node!!! Oh yeah!!!

UPDATE:
Well after the last weekend the game now looks a bit more advanced and therefor I've created a new little video that shows the current version...here you go...



Well that's it for today...so keep coding...

Saturday, November 9, 2019

ImageCounterTileSkin...

Aloha,

This morning I could not sleep and was skimming the web for new ideas where I stumbled upon a social media dashboard.
And on that dashboard I've found widgets that simply shows a social media icon with a counting number.
Well...that's an easy one I thought and quickly created a new skin for TilesFX which is the ImageCounterTileSkin.
So here is a screenshot of a little demo I quickly put together to give you an idea on what it will look like...


As you can see this tile does not show a lot but simply an image with a number and some text. Of course you can enable the title and the bottom text in the skin too but without it also looks ok.
It doesn't take a lot of code to create such a tile, here is what you need:

Tile tile = TileBuilder.create()
                       .skinType(SkinType.IMAGE_COUNTER)
               .prefSize(WIDTH, HEIGHT)
               .value(0) // START VALUE
               .description("TEXT")
               .image(new Image("file:PATH_TO_IMAGE"))
               .imageMask(ImageMask.ROUND)

               .build();

And to make it even easier to handle it, I've added two new convenience methods to TilesFX to increase or decrease the value by a given amount.

So to increase the tiles value you simply can call

tile.increaseValue(1) 

and that's it.

And because I had some time this morning I directly created a new version of TilesFX which is now 11.27 and is available here...

github

bintray

maven central

And with this I wish all of you a nice weekend and...keep coding...

Saturday, September 28, 2019

ClusterMonitorTileSkin...

Aloha,

Back from CodeOne in San Francisco I think it's time to blog about a new skin that I've added to the library.
In my last post you saw that I was preparing a custom skin for Gluon to monitor the 1060 Raspberry Pi cluster from Oracle.
Once I saw the use case I thought it might make sense to add this skin as a regular skin to the library.
Because visualizing 1060 tiles in a dashboard was a challenge I came to the conclusion that this skin should also get the ability to reduce the details it shows when it's size goes below a given threshold (in this case 100 x 100px).
In addition I had to add several features to be able to show for example different units for the cpu/mem and temperature data.
So here are the screen shots of both modes:



As you can see the reduced version shows the text within the bar which saves some vertical space.
In addition one can add an SVG string that will be used to visualize a button (in the lower right corner). This button could for example be used to reset a single node in case it got stuck or hangs.
The new skin can now be found under the name: ClusterMonitorTileSkin and is available since version 11.13.

The latest version can be found here:

Source github

Binary bintray


That's it for today...so keep coding...