JavaFX, Mario and me

I guess I am a decent programmer. At least, I've been able to contribute some code to DWR and/or IWebMvc. I could even say that I don't hate Javascript if that holds any value. But, anyway, I've always been bugged by a musing though...

The sad thing is I'm a proficient programmer of "enterprise" (read web) applications. I've always been afraid of not been a REAL coder. Say a Linux hacker or even better...a videogame programmer! You know the kind of people that deliver things like Call of Duty!

I've always blamed my lack of imagination (I'm no game designer) or creative skills (probably a 6 year old kid draws better than me). But with time I've come to conclude that it's just fear. If the graphics are the problem there are multitude of game sprites around the net. And you don't need to invent something new really, a classical shooter or platform game fits the bill perfectly to start.

So I decided that enough is enough and I had to try and make a video game (and become a Tier-1 developer). Well, as a matter of fact, I don't pretend to build a complete one (or some fancy 3d graphics...for now). Just a character that moves on screen and jumps to get coins will be enough to begin. Something like one of my all-time-favorites, Super Mario World. And I can even get the original sprites. Good!


Unfortunately, I'm proficient with Java, Groovy or Javascript but I'm not sure they're your best bet to code a Super Mario clone. I thought about Visual Studio Express C++ for a moment but, really, that was not feasible. C++ after Java seems like a trip to the past. What about something new and shiny? Something related to the Java world if possible? What about JavaFX? Said and done I was downloading the FX plugin for Netbeans and looking through some samples and tutorials.

My first impression was...why the hell do they call this Java??? Yes, be warned, the syntax and the structure is all new. But it packs some interesting features! The bind keyword was a nice surprise (it's like joining a pointer with its referenced value). How useful! The IDE support can improve though. It's still in it's infancy. I'm eagerly waiting for new versions. But watch for the preview mode, it detects changes on-the-fly without even saving the file and shows them on screen.

Soon I realized I needed to use the ImageView (to show images) and the Timeline object to process animations. Using the bind keyword profusely let's you modify a variable and cascade changes in multiple places. By the way, you don't have to worry about concepts like Double Buffering, the platform handles them for you. That's pretty good for newbies. So how does a view look like in the end: a Stage object with a Scene inside that packs a group of components

Stage {
   title: "Mario sprites"
   width: 250
   height: 120
   scene: Scene {
      content: [
   ]
}

Add some vars to control state:

var x = 115.0;
var state = 0;
var currentAnimation : Timeline;
def positions : Image[] = [
   Image {
      url: "{__DIR__}../resources/front.gif" },
   Image {
      url: "{__DIR__}../resources/spin.gif" },
   Image {
      url: "{__DIR__}../resources/left.gif" },
   Image {
      url: "{__DIR__}../resources/right.gif" }
];
var activePosition = bind positions[state];

And a component:

ImageView {
   translateX: bind x
   translateY: 10
   image: bind activePosition
}

The animation will be fired by a radio button as I yet haven't figured keyboard events. Notice that a change in state automatically changes the image and a change in the X axis magically repaints the image component:

SwingRadioButton {
   ...
   onMouseClicked: function (event: MouseEvent) {
      if (currentAnimation != null) currentAnimation.stop();
      state = 2;
      currentAnimation = Timeline {
      keyFrames: [
         KeyFrame {
            time: (x * 1s) / 50
            values: [
               x => 0.0 tween Interpolator.LINEAR,
               state => 0 tween Interpolator.DISCRETE,
               currentAnimation => null tween Interpolator.DISCRETE
            ]
         }
      ]
   }
   currentAnimation.play();
},

And here's the result, 100 lines of code and three hours of work later:


All in all, much better than I expected to achieve given that this has been my first try managing any kind of graphics or animations and I had zero experience with JavaFX. The technology is really great though it needs maturing. I'm looking forward to seeing JavaFX views in Spring applications for example. And I have yet to read some tutorials about server side integration. But it has been a refreshing start. Follow my advice and give it a try!