Some JavaFX game templates.

[nozh2002]

Well, this is not how to do this best I guess, this is how I do this,
hope it will be helpful:

For NetBeans -

I put images in Pictures subdirectory in <Project>/src/<package> directory.
Place where Main.fx source code located.

Images handling:
--------------------

def goldenRedImages: Image[] =
for ( name in [
        "gr001.gif",
        "gr002.gif",
        "gr003.gif",
        "gr004.gif",
        "gr005.gif",
        "gr006.gif",
        "gr007.gif",
        "gr008.gif"
    ])
    Image {
        url: "{__DIR__}Pictures/{name}"
}

def goldenRedDX = [ 0,  0, 14, 10, 30, 14, 46, -13];
def goldenRedDY = [ 0,  0,  2,  4, 15  15, 10,   8];
--------------------------------------------------------------------------------
DX  and DY is horizontal and vertical coordinates shifts to line up pictures.

Then I define game view where this images will be seen:
------------------------------------------------------------------------------
def gameFieldView: Node =
Group{
    content: [
        ImageView {
            x: bind 300 + goldenRedDX[ goldenRed ] + goldenRedX
            y: bind 40 + goldenRedDY[ goldenRed ] + goldenRedY
            image: bind goldenRedImages[ goldenRed ]
        }
    ]
};
-----------------------------------------------------------------------------------
And this is all what I need to do for drawing. If I need to
change picture seen in this view only thing to do - change
variable goldenRed - because it is binded to this image view
JavaFX will take car of all drawing for me.

I should not worry about clearing previous picture, repainting
new, synchronizing it with other pictures and with screen updates...

I will only in this case change
goldenRed - which define picture for me (and shifts)
goldenRedY - Vertical coordinates
goldenRedX - Horizontal coordinates

That's it. Once I define this GameField, I may foget about all
representation and focus on the game play itself.

Regards, Vassili.

[nozh2002]

Same idea for Lines game, but I bind entire game array to image view.
Each cell binded to corresponded ImageView and also each has
MousePressed event:
--------------------------------------------------------------------------------

def gameFieldView: Node =
Group{
    content: [
        for ( x in [0..8]) {
            for ( y in [0..8]) {
                ImageView {
                    x: x * 33 + 1;
                    y: y * 33 + 1;
                    image: bind gameImages[ gameField[ x + (y * 9)] ]
                    onMousePressed: function(me: MouseEvent){
                        print( "cell {x}, {y} selected");
                    }
                }
            }
        }
    ]
};
-------------------------------------------------------------------------------

All I need to do now - just work with array itself and all changes will
be on the screen right away drawn not by me but JavaFX with it smart
effective etc graphic engine.

This is all simple and elegant beauty of binding.

Again I am not an multi media guy, but very enthusiastic about JavaFX
rapid development side, same as for scripts but with full strength and
performance of Java behind with all this hot spot magic...

Regards, Vassili.

[nozh2002]

How GoldenRed walk.

I use Timer - standard animation JavaFX construction. However I do
not really use it as it is intended to be used, but instead just for
clocking, switching off thing I do not understand yet like interpolate...

For me it is just thing which run certain code in certain time:
-----------------------------------------------------------------------------------

var walkForwardRate = 10;
def walkForwardTimer: Timeline = Timeline {
    repeatCount: Timeline.INDEFINITE
    rate: bind walkForwardRate
    interpolate: false
    keyFrames: [
        KeyFrame {
            time: 1s
            action: function() {
                goldenRedX += 10;
                goldenRed = 1;
            }
        }
        KeyFrame {
            time: 2s
            action: function() {
                goldenRedX += 10;
                goldenRed = 0;
                walkForwardTimer.stop();
            }
        }
    ]
}
-----------------------------------------------------------
As you may see I just change two variables -
goldenRed - which defines picture visible in corresponded ImageView (which I bind to golden Red)
goldenRedX - which defines image horizontal position.

How it will be painted - not my business, somehow, best possible, way using
hardware acceleration or something it will be drawn by JavaFX

Now to trigger this walk - I use onKeyPressed event function:
---------------------------------------------------------------
Stage {
    title: "GoldenRed"
    width: 800
    height: 320
    scene: Scene {
        content: [
            Rectangle {
                fill: Color.rgb(205, 225, 255);
                width: 800
                height: 160
            }
            gameFieldView
            Rectangle {
                opacity: 0
                focusable: true
                width: 800
                height: 350
                onKeyPressed: function(ke: KeyEvent){
                    if (ke.text == "Right") {
                        walkForwardTimer.play();
                    }
                }
            }
        ]
    }
}
--------------------------------------------------------------------------
It just starts this timer and timer stop itself at the end.
If I need to interrupt this timer because different key was
pressed - I just do:
--------------------------------------------------------------------------
walkForwardTimer.stop();
--------------------------------------------------------------------------
I also may just pause it.

Regards, Vassili.