stellarwind Aug 17 2010 at 13:23

JavaFX Конкурс: Tower Defence

6 min

Всем привет. Хочу предложить вашему вниманию недавно стартовавший конкурс JavaFX Tower Defence.

Принять участие в конкурсе могут как дизайнеры, им предлагается нарисовать векторную картинку игрового мира, так и программисты, которым надо улучшить движок, предоставленный организаторами. Место найдется даже тому, кто сможет описать историю участия в конкурсе в своем блоге.

Почему JavaFX? Тем, кому не доводилось встречаться с этой технологией, возможно, будет интересно узнать некоторые детали.

От дизайна к программе

Все начинается с дизайнера, который рисует каждый элемент игрового мира на отдельным слое, давая ему название с префиксом jfx (jfx:element-name). После чего векторную картинку надо сконвертировать с помощью стандартной программы в FXZ файл (специальный формат векторной графики языка JavaFX).

Дальше программист может вытащить необходимые элементы из FXZ файла по именам и разместить их в своей программе.

Векторная картинка

Допустим, файл с векторной графикой состоит из 2х элементов: окружности, которая представляет из себя существо, и дороги.

<?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 файл

После конвертации получаем:

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
                }
            ]
        }
    ]
}

Заметим, что префикс jfx с имен слоев убирается.

JavaFX программа

Теперь в программе можно достать эти 2 элемента и отобразить их на экране:

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") ]
    }
}

Анимация

Пример довольно простой, и, чтобы сделать его интересней, я добавлю анимацию передвижения существа вдоль пути.

Для этого нужно получить сам путь из элемента Group и воспользоваться классом PathTransition:

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();

Таким образом, можно анимировать передвижение существ вдоль дороги и полет снарядов от башни к существам.

Интересно? Тогда присоединяйся к конкурсу JavaFX Tower Defence.

Tags:

Hubs:

Lumber room