JavaFX Competition: Tower Defense

Hello. I want to bring to your attention the recently launched JavaFX Tower Defense contest.

Both designers can take part in the competition, they are invited to draw a vector image of the game world, and programmers who need to improve the engine provided by the organizers. There is a place even for someone who can describe the history of participation in the competition in his blog.

Why JavaFX? Those who have not met with this technology may be interested in finding out some details.
')

From design to program

It all starts with a designer who draws each element of the game world on a separate layer, giving it a name with the prefix jfx (jfx: element-name). After that, the vector image must be converted using a standard program into an FXZ file (a special vector graphics format of the JavaFX language).

Then the programmer can pull out the necessary elements from the FXZ file by name and place them in his program.

Vector picture

Suppose a vector graphics file consists of 2 elements: a circle, which is a creature, and a road.

<? xml version = "1.0" encoding = "utf-8" standalone = "yes" ?> <svg width = "550px" height = "550px" viewBox = "0 0 1200 400" xmlns = "http://www.w3.org/2000/svg" version = "1.1" > <g id = "jfx: path" > <path d = "M 50 120 L 250 120 A 25, 20 0 0 1 250 300 L 150 300 A 25 20 0 0 0 150 480 L 340 480" fill = "none" stroke = "darkgreen" stroke-width = "20" /> </ g > <g id = "jfx: creature" > <circle cx = "150" cy = "50" r = "20" fill = "yellow" stroke = "orange" /> </ g > </ svg >

Fxz file

After conversion we get:

Fxd {
content : [
Group {
id : "path"
content : [
SVGPath {
content : "M 50 120 L 250 120 A 25, 20 0 0 1 250 300 L 150 300 A 25 20 0 0 0 150 480 L 340 480"
fill : null
stroke : Color . DARKGREEN
strokeWidth : 20.0
}
]
} ,
Group {
id : "creature"
content : [
Circle {
centerX : 150.0
centerY : 50.0
fill : Color . YELLOW
radius : 20.0
stroke : Color . ORANGE
}
]
}
]
}

Note that the jfx prefix is ​​removed from the layer names.

JavaFX program

Now the program can get these 2 elements and display them on the screen:

import javafx.fxd. * ;
import javafx.stage. * ;
import javafx.scene. * ;

def graphics = FXDLoader. loadContent ( "{__DIR __} graphics.fxz" ) ;

Stage {
title : "Application title"
scene : Scene {
width : 550
height : 550
content : [ graphics. getNode ( "path" ) , graphics. getNode ( "creature" ) ]
}
}

Animation

The example is quite simple, and to make it more interesting, I will add animation of the movement of the creature along the path.

To do this, get the path itself from the Group element and use the PathTransition class:

import javafx.fxd. * ;
import javafx.stage. * ;
import javafx.scene. * ;
import javafx.scene.shape. * ;
import javafx.animation. * ;
import javafx.animation.transition. * ;

def graphics = FXDLoader. loadContent ( "{__DIR __} graphics.fxz" ) ;
def creature = graphics. getNode ( "creature" ) ;
def path = ( graphics. getNode ( "path" ) as Group ) . content [ 0 ] as SVGPath ;

Stage {
title : "Application title"
scene : Scene {
width : 550
height : 550
content : Group {
scaleX : 0.5
scaleY : 0.5
content : [ path, creature ]
}
}
}

PathTransition {
duration : 10s
node : creature
interpolator : Interpolator. LINEAR
path : AnimationPath. createFromPath ( path )
} . play ( ) ;

Thus, you can animate the movement of creatures along the road and the flight of shells from the tower to the creatures.

Interesting? Then join the JavaFX Tower Defense contest.