sbgames 2009 – fast track – JavaFX evaluation from Hamilton Lima on Vimeo.

Segue a parte 3/3 do video da apresentacao no Riojug
em abril de 2009 sobre a criacao de jogos usando JavaFX

JavaFX para criação de Jogos 3/3 from Hamilton Lima on Vimeo.

Segue a parte 2/3 do video da apresentacao no Riojug
em abril de 2009 sobre a criacao de jogos usando JavaFX

JavaFX para criação de Jogos 2/3 from Hamilton Lima on Vimeo.

Segue a parte 1/3 do video da apresentacao no Riojug
em abril de 2009 sobre a criacao de jogos usando JavaFX

JavaFX para criação de Jogos 1/3 from Hamilton Lima on Vimeo.

muito bonito hein seu JavaFx … para fazer o deploy TEM q baixar o JavaFx Runtim do site … TEM QUE, e ainda por cima para rodar o usuário tem que saber que o arquivo JNLP eh para baixar e nao para abrir … muito maneiraa a linguagem mas deram mole feio no fimzim …

eh capaz dos meus rumos irem para as aguas do pygame, tudo indica …

Temos grandes novidades neste preview:

• Uma interface para entrar com nome dos usuarios que estão jogando
• a tela de como jogar
• o envio da pontuação para o servidor

Ufa … os novos graficos ainda nao estao lah, mas estao no forno !!

este eh o link para os arquivos do preview
http://svn.vacavitoria.com/cabecudinhos_1/cabecudinhos_1/preview/2009-03-18/

e este eh o video

Olas ! estamos quase terminando o jogo dos cabecudinhos, episodio I o ataque dos mosquitos ! as partes graficas estao saindo do forno, valeu Mariana !! as coisas estao se encaixando, e em breve vai rolar o envio de pontuacao para o servidor.

Coisas novas bem legais estao neste preview :

• feedback do tempo para a criacao do novo mosquito e tempo que o item vai ficar sem gerar mosquito
• efeito quando os personagens sao atingidos pelo mosquito
• contagem dos pontos

baixe o arquivo de webstart da implementacao atual
cabecudinhos_episodio_um.jnlp

curta o video do preview

e aproveite a moleza do codigo fonte disponivel no subversion

Quando criamos uma cena em Javafx, por vezes precisamos controlar grupos de componentes como um só, neste exemplo demonstro como adicionar dois grupos distintos em uma mesma cena, e fazendo com que uma fique invisivel enquanto a outra visivel. Neste exemplo são criados dois objetos Group que juntos compõe o content da Scene

import javafx.scene.Cursor;
import javafx.scene.effect.DropShadow;
import javafx.scene.Group;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.stage.Stage;

/**
 * @author athanazio
 */

Stage {
    title: "Application title"
    width: 250
    height: 150
    scene: Scene {
        content: [
            Group{
                id: "me"
                content: [
                    Rectangle {
                        cursor: Cursor.HAND
                        x: 5
                        y: 25
                        width: 50
                        height: 30
                        arcWidth: 20
                        arcHeight: 20
                        fill: Color.BLACK
                        stroke: Color.BLACK
                        effect: DropShadow{
                            offsetX: 5
                            offsetY: 5
                            color: Color.BLACK
                        }
                    }
                    Text {
                        font: Font {
                            size: 16
                        }
                        x: 10,
                        y: 40
                        content: "one"
                        fill: Color.WHITE
                    }]
                onMouseClicked: function(e){
                    e.node.scene.lookup("myself").visible = true;
                    e.node.scene.lookup("me").visible = false;
                }
            }
            Group{
                visible: false
                id: "myself"
                content: [
                    Rectangle {
                        cursor: Cursor.HAND
                        x: 65
                        y: 25
                        width: 50
                        height: 30
                        arcWidth: 20
                        arcHeight: 20
                        fill: Color.BLACK
                        stroke: Color.BLACK
                        effect: DropShadow{
                            offsetX: 5
                            offsetY: 5
                            color: Color.BLACK
                        }
                    }
                    Text {
                        font: Font {
                            size: 16
                        }
                        x: 70,
                        y: 40
                        content: "two"
                        fill: Color.WHITE
                    }]
                onMouseClicked: function(e){
                    e.node.scene.lookup("me").visible = true;
                    e.node.scene.lookup("myself").visible = false;
            }
            }
        ]
    }
}

Note que a ideia eh de ter dois grupos, e neste exemplo dentro de cada um um retangulo e um texto, mas qualquer conjunto de Node poderia ser adicionado. veja no link abaixo a aplicação criada funcionando
groupgroup

Opa Opa ! grande passo no jogo dos cabeçudinhos ! agora estão os dois na tela, e com movimentos independentes, um pequeno passo para os cabeçudos um grande passo para a vaca vitoria !! huauhahuahu

veja o video

Uma das coisas mais poderosas no JavaFx na minha opiniao eh a possibilidade concreta de dividir esforços da equipe de desenvolvimento e da equipe de design em paralelo.

o resumo eh o seguinte :
a equipe de programação inicia o processo de desenvolvimento com retangulos, ou desenhos conceituais simples que foram criados em SVG e exportados para o JavaFx, enquanto isto a equipe de design pode criar as ilustrações definitivas e quando estiverem prontas serem encaixadas no projeto, permitindo a programação inclusive manipular items das ilustracoes atraves do ID.

vamos mostrar um exemplo passo a passo

o primeiro passo temos a imagem desenhada no inkscape, que vamos assinalar um ID para uma parte da imagem

na tela de propriedades adicionamos o nome do corpo do personagem

note que este nome sera usado respeitando maiusculas e minusculas, permitindo que seja manipulado atraves do codigo Javafx pelo desenvolvedor. Agora o próprio designer para testar seu trabalho e deixar pronto para ser usado pela equipe de programação converte seu arquivo SVG para o formato FXZ do JavaFx, e faz isto abrindo o arquivo com o SVG converter que vem no Production Suite.

e executa a conversão do arquivo

Agora o arquivo jah pode ser usado dentro do NetBeans, que oferece uma opção para realizar o preview do arquivo gerado sem sair da ferramenta, veja na tela abaixo

Repare que quando clicamos no elemento do corpo do personagem, podemos ver diversas caracteristicas do mesmo, inclusive o ID e o tipo do objeto que eh um Rectangle

Repare que na classa GameScene são definidos objetos do tipo NodeFromFXZ que eh um wrapper para a carga automática de arquivos do tipo FXZ, facilitando o processo de carga para dentro da aplicação.

E um interessante trecho de código que deve ser destacado, é a parte onde transformamos a cor do corpo do personagem de acordo com o jogador, ou seja o jogador1 fica com azul e o 2 com vermelho, veja neste trecho.

        (player1.lookup("JFX:body") as Rectangle).fill = Color.BLUE;

veja o resultado como ficou !!

Opa esta eh uma versao parcial do jogo dos cabecudinhos !!

para os catucadores de plantão, aqui ficam os arquivos desta versão
http://www.vacavitoria.com/preview/cabecudinhos_1/2009-03-08/

Uia ! implementei meus rabiscos de gravidade e não eh q funcionou !! hehehe

como tinha dito em javafx-planejando-gravidade são 3 classes envolvidas:

• GravityManager – fazo update() a cada tick do jogo
• Force – aplica mudança de posição aos nodes
• GNode – associa Node a Force.

Para os catucadores de plantão segue o endereço do subversion
http://svn.vacavitoria.com/cabecudinhos_1/cabecudinhos_1/

E alguns fragmentos do codigo
esta eh a Scene em que usei a GravityManager

public class GameScene extends Scene, Updatable{
    ...
    public var gravityManager: GravityManager;

    // set the need info for the Scene work
    public function setup(){
        gameSoundtrack.play();

        background =
        lookup(BACKGROUND_ID) as NodeFromFXZ;
        player1 =
        lookup(PLAYER1_ID) as MovableChar;
        player1.background = background;
        player1.requestFocus();

        gravityManager = GravityManager{
            gravity: 5
            content: [
                GNode{
                    node: bind player1
                }
            ]
        }

    }

    public override function update(){
        gravityManager.update();
    }

    override var content = [
        NodeFromFXZ{
            id: bind BACKGROUND_ID
            source: "{__DIR__}media/background.fxz"
        }

        MovableChar{
            id : bind PLAYER1_ID
            source: "{__DIR__}media/boy.fxz"
            x: 50
            y: 450
            speed: 3
            colision: ["casa1", "casa2", "casa3","casa4", "casa5", "casa6", "casa7", "casa8",
             "caixa1", "caixa2", "caixa3","caixa4", "caixa5", "caixa6",
            "caixa7", "caixa7b", "caixa8", "caixa8b",
            "left", "right", "bottom","top", "plataforma1"]

            onMouseClicked: function(e){
            }

            onKeyReleasedDelegate: function(current:MovableChar, key: KeyCode){
               if( key == KeyCode.VK_SPACE and current.hasColision){
                   fire.play();
                   gravityManager.addForce( current.id, Force {
                        y: -22;
                   });
                }
            }

            onUpdate: function(current:MovableChar){
                current.checkIfScrollBackground();

            }
        }
    ]
}

Segue o codigo das classes para o controle da gravidade

GravityManager

public class GravityManager extends Updatable{

    public var gravity: Integer;
    public var content: GNode[];

    public function addForce(id:String, force: Force){
        for( gNode in content){
            if( gNode.node.id.equals(id) )  {
                insert force into gNode.forces;
            }
        }
    }

    public override function update(){

        // iterate over all gnodes
        for( gNode in content){
            var x: Integer = 0;
            var y: Integer = gravity;

            // iterate over all Force from the GNode
            for( force in gNode.forces){
                x = x + force.x as Integer;
                y = y + force.y as Integer;

                force.applyGravity(gravity);
                if( force.isDisposable()){
                    delete force from gNode.forces;
                }
            }

            // try to move the Node with the increase of x and y
            gNode.node.moveX(x);
            gNode.node.moveY(y);
        }
    }
}

Force.fx

public class Force {

    public var x: Number;
    public var y: Number;
    public var percentGravity: Number = 0.15;

    // reduce the x and y value with the gravity
    public function applyGravity(gravity:Integer){
        if( x < 0 ){
            x = x + (gravity * percentGravity);

            if( x > 0 ){
                x = 0;
            }
        }

        if( y < 0 ){
            y = y + (gravity * percentGravity);
            if( y > 0 ){
                y = 0;
            }
        }
    }

    public function isDisposable():Boolean{
        return x == 0 and y == 0;
    }

}

GNode

public class GNode {

    public var node: MovableChar;
    public var forces: Force[];

}

E finalmente o video com o resultado saltitante

Nesta jornada de explorar JavaFx, e na migração do jogo que fizemos no evento do global game jam 2009, estou agora implementando a gravidade para o side scrolling.

Ou seja preciso de um mecanismo para manter os personagens no chão … e que possam dar uns pulinhos, e que não seja soh para cima possam ser pulinhos para os lados, vejam os rascunho que fiz no ônibus.

A idéia é simples, uma classe para gerenciar a gravidade contendo as lista de plataformas onde será necessário verificar a colisão, para segurar o personagem, uma lista de GNodes que vao ter uma lista de forças que vao incidir sobre e o Node propriamente dito.

cada item que vai representar um Força vai possuir x, y percentual de gravidade que sera aplicado, uma funcao applyGravity(g) e outra para ver se pode remover o objeto da lista, isDisposable()

a logica do update do gravity manager eh :

• calcular para cada GNode e para cada Força contida o deslocamento x e y do node
• chamar para cada força o metodo applyGravity()
• remover cada força que retornar true do isDisposable()

bem este é o plano, vamos ver se funciona

Maneiro este layout manager do JavaFx

http://code.google.com/p/diglayout/

isto que eh banho de tecnologia, em 15 minutos um saraivada de javaFx script

Esta e a segunda versão do quadrado na tela, agora com o efeito de manter a tecla pressionada e o movimento acontecer ! para isto acabei definindo uma classe Game que fica com loop principal e todos os Nodes da Scene atual são verificados para execução de um método update(), não sei ainda se dava para fazer com alguma estrutura do próprio JavaFx, mas assim funcionou.

Olha como ficou o movimento

esta é a classe Game, que cria um Timer que executa continuamente, e chama o método update() para todos os Nodes que sao filhos da classe Updatable, no método update() o nosso quadrado muda a sua posicao de acordo com as teclas que estão pressionadas

package javafxmeuquadradinho2;

import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.Scene;
import javafx.stage.Stage;

/**
 * @author athanazio
 */
public class Game extends Stage {

    public var tick: Timeline = Timeline {
        repeatCount: Timeline.INDEFINITE
        keyFrames: [
            KeyFrame {
                time: 0.05s
                action: function() {
                    mainLoop();
                }
        }]
    };

    // main game loop
    public function mainLoop(){
        for (node in scene.content) {
            if( node instanceof Updatable){
                (node as Updatable).update();
            }
        }
    }

    public function play(){
        tick.play();
    }

}

A classe KeyState é usada para manter as informações de que teclas estão pressionadas ou não, Esta solução não permite uma fácil expansão para suportar outras teclas, outra forma seria armazenar uma lista das teclas atualmente pressionadas, e possuir um método para verificar se a tecla X esta pressionada.

package javafxmeuquadradinho2;

/**
 * @author athanazio
 */
public class KeyState {
    public var keyUp = false;
    public var keyLeft = false;
    public var keyRight = false;
    public var keyDown = false;
}

A classe Updatable define o metodo update() a ser executado no loop principal do jogo.

package javafxmeuquadradinho2;

/**
 * @author athanazio
 */
public class Updatable{
    public function update(){

    }
}

A classe MovableChar cria neste exemplo um Retangulo associado com as propriedades da classe, e gera os event handlers baseados neste retangulo, melhor seria usar um ImageView para exibir uma imagem, mas isto jah é outra estória … além disto mantém controle da tecla pressionada, através de uma instância de KeyState, e quando a tecla é liberada desmarca, fazendo com q no próximo update() o movimento naquela direção não ocorra.

/*
 * MovableChar.fx
 *
 * Created on Feb 15, 2009, 3:47:31 PM
 */

package javafxmeuquadradinho2;

import javafx.scene.CustomNode;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;

/**
 * @author athanazio
 */
public class MovableChar extends CustomNode, Updatable{
    public var speed = 10;
    public var x = 0;
    public var y = 0;
    public var width = 60;
    public var height = 60;
    public var fill: Color;

    var keyState: KeyState = KeyState{
        keyUp: false;
        keyLeft: false;
        keyRight: false;
        keyDown: false;
     };

    public override function create():Node {
        return Rectangle {
            x: bind this.x;
            y: bind this.y;
            width: bind this.width;
            height: bind this.height;
            fill: bind this.fill;

            onKeyPressed: function (e: KeyEvent){
                if( e.code == KeyCode.VK_LEFT ){
                    keyState.keyLeft = true;
                }
                if( e.code == KeyCode.VK_RIGHT ){
                    keyState.keyRight = true;
                }
                if( e.code == KeyCode.VK_UP ){
                    keyState.keyUp = true;
                }
                if( e.code == KeyCode.VK_DOWN ){
                    keyState.keyDown = true;
                }
            }
            onKeyReleased: function(e: KeyEvent){
                if( e.code == KeyCode.VK_LEFT ){
                    keyState.keyLeft = false;
                }
                if( e.code == KeyCode.VK_RIGHT ){
                    keyState.keyRight = false;
                }
                if( e.code == KeyCode.VK_UP ){
                    keyState.keyUp = false;
                }
                if( e.code == KeyCode.VK_DOWN ){
                    keyState.keyDown = false;
                }
            }
        };
    }

    public override function update(){

        if( keyState.keyLeft){
            x = x - speed;
        }

        if( keyState.keyRight){
            x = x + speed;
        }

        if( keyState.keyDown){
            y = y + speed;
        }

        if( keyState.keyUp){
            y = y - speed;
        }
    }

}

E finalmente a classe Main que instancia MovableChar e Game e chama o método start de Game.

package javafxmeuquadradinho2;

import java.lang.Object;
import javafx.scene.paint.Color;
import javafx.scene.Scene;

/**
 * @author athanazio
 */
var littleBox: MovableChar = MovableChar{
    x: 20,
    y: 20
    width: 60,
    height: 60
    fill: Color.RED
}

var game: Game = Game {
        title: "Movendo um quadrado pela tela"
        width: 640
        height: 480
        scene: Scene {
            content: [
                littleBox
            ]
        }
    }

function run(__ARGS__ : String[]) {
    game.play();
}

Ola esta eh a nova serie de Javafx ! a medida que vou avançando vou postando aqui, este eh o primeirao, com um quadradinho se movendo na tela :

package javafxapplication1;

import javafx.scene.input.KeyEvent;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
import javafx.scene.input.KeyCode;

/**
 * @author athanazio
 */
var myChar :Rectangle = Rectangle {
    x: 20,
    y: 20
    width: 60,
    height: 60
    fill: Color.RED
    onKeyPressed: function(e: KeyEvent){
        if( e.code == KeyCode.VK_LEFT ){
            myChar.x -= 3;
        }
        if( e.code == KeyCode.VK_RIGHT ){
            myChar.x += 3;
        }
        if( e.code == KeyCode.VK_UP ){
            myChar.y -= 3;
        }
        if( e.code == KeyCode.VK_DOWN ){
            myChar.y += 3;
        }
    }
};

Stage {
    title: "Movendo um quadrado pela tela"
    width: 320
    height: 280
    scene: Scene {
        content: [
            myChar
        ]
    }
}

Opa o esperado JavaFx, esta na área ! é uma iniciativa da Sun de assumir o poder e necessidade do desenvolvimento de interfaces, uma linguagem de script com fortes influências do Java e Javascript.

veja mais em http://javafx.com/

para aqueles que gostam de ler a API, existe uma bem rica que fornece a base para iniciar a implementacao http://java.sun.com/javafx/1/docs/api/master-index.html

minha bola de cristal ve possibilidades otimas para o javafx !! =)