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
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
isto que eh banho de tecnologia, em 15 minutos um saraivada de javaFx script







