Tutorial – Jogo de Damas em JavaFX (parte 1)

Buscando uma forma de compilar e executar o jogo de damas em JavaFX que fiz (veja aqui e aqui), notei que estava programando em alguma versão diferente do JavaFX. Quando ia compilar com o JavaFX SDK aparecia um monte de erros. Mas no JavaFX Pad tava tudo correto.

Então agora vou mostrar o que aprendi enquanto mostro como construir o jogo de damas.

O resultado dessa parte do tutorial eh a visualizaçao do tabuleiro com as peças.

tutorial_damasfx_p1_002

Vamos ao tutorial…

1 – Primeiro baixe e instale o JavaFX SDK

2 – Adicione a pasta ‘bin’ do JavaFX no ‘Path’ do sistema. Caso a instalação do SDK não tenha feito isso ainda. Isso eh para poder compilar pela janela do DOS sem precisar digitar o caminho completo do compilador.

Se tudo der certo os comandos javafx, javafxc e javafxpackager estarão funcionando no DOS.

3 – Use algum editor que você goste. Eu utilizei o TextPad 4.

4 – Crie um arquivo Damas.fx

Agora vamos editar o arquivo Damas.fx

5 – Vamos adicionar todos os imports necessários.

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import javafx.scene.effect.light.*;
import javafx.scene.shape.*;
import javafx.scene.input.*;
import javafx.ext.swing.*;
import java.lang.*;
import java.util.*;

6 – Adicione um Stage no seu código que vai representar a sua aplicação.

Stage{
	title: "Damas"
	width: 240
	height: 240
}

Compile sua aplicação com o comando: javafxc Damas.fx

Execute sua aplicação com o comando: javafx Damas

O resultado é uma janela de fundo meio cinza com o título e tamanho que vc definiu.

tutorial_damasfx_p1_003

7 – Adicione um Scene que é o componente visual da sua aplicação. E vamos definir o tamanho pela Scene. O Stage vai se ajustar à Scene automaticamente.

Vamos também definir o tamanho das coisas com def. E o tamanho da Scene será relativo aos defs.

def SIZE = 30;  //tamanho de uma casa
def SIZE2 = 15; //metade de uma casa
def SIZEP = 12; //raio de uma peca

Stage{
    title: "Damas"
    scene: Scene{ //tabuleiro 8x8
        width: SIZE*8
        height: SIZE*8
        fill: Color.WHITE  //preenchimento da Scene
    }
}

O resultado é o mesmo do anterior, mas com o fundo da janela branco (fill: Color.WHITE).

8 – Adicionamos retângulos cinza para formar o tabuleiro. Cada retângulo tem uma posição (x,y) e tamanho (width,height) que são relativos aos defs que adicionei no inicio do código.

Stage{
    ...
    scene: Scene{
        content: [
            Rectangle{
                x: 0 y: 0 width: SIZE height: SIZE
                fill: Color.GRAY
            }
            Rectangle{
                x: SIZE y: SIZE width: SIZE height: SIZE
                fill: Color.GRAY
            }
        ]
    }
}

O resultado são dois quadrados na tela.

tutorial_damasfx_p1_004

Como podem ver, podemos adicionar cada retangulo cinza pra formar o tabuleiro todo! No total são 8*8/2=32 retangulos!!! Vamos fazer isso de uma forma muito mais prática utilizando for.

		content: [
			for(i in [0..4])
				for(j in [0..4])[
					Rectangle{
						x: i*2*SIZE y: j*2*SIZE
						width: SIZE height: SIZE
						fill: Color.GRAY
					}
					Rectangle{
						x: i*2*SIZE+SIZE y: j*2*SIZE+SIZE
						width: SIZE height: SIZE
						fill: Color.GRAY
					}
				]
		]

Percebam que com um pouco de matemática é possível fazer codigos simples. O resultado é o tabuleiro completo.

tutorial_damasfx_p1_005

9 – Agora vamos criar as peças! Vamos fazer isso declarando uma classe Peca subclasse de CustomNode para que minha classe funcione como um objeto gráfico qualquer.

class Peca extends CustomNode{
	var x: Number = bind i * SIZE + SIZE2;
	var y: Number = bind j * SIZE + SIZE2;
	var i: Number = bind Math.round((x - SIZE2) / SIZE);
	var j: Number = bind Math.round((y - SIZE2) / SIZE);
	var jogador: Integer;
	override function create():Node{
		return Circle{
			centerX: bind x centerY: bind y radius: SIZEP
			fill: if(jogador == 1) Color.RED else Color.BLUE
		}
	}
}

Essa classe possui a posição da peça na tela (x,y), a posição no tabuleiro (i,j), uma indicação do jogador a que a peça pertence (jogador). Aqui vem uma funcionalidade muito interessante do JavaFX, o bind que “linka” duas variaveis! Dessa forma quando uma variável for alterada, a outra também será. Nesse caso do jogo de damas, fiz com que (x,y) representassem a posiçao da peça na tela, e (i,j) a posiçao da peça em relaçao as casas. Quando alterar qualquer uma das variaveis as outras vao ser alteradas automaticamente inclusive a posição da peça na tela.

Também sobrescrevi a funçao create que é utilizada na construção da peça e irá retornar um objeto Circle com o centro ligado as variaveis (x,y). A cor do circulo depende do número do jogador.

Agora vamos adicionar as peças o tabuleiro utilizando for e algumas expressões matemáticas meio complicadas.

		content: [
			...
			for(i in [0..4])
				for(j in [0..2])[
					Peca{
						i: if((j mod 2) == 0) i*2 else i*2+1
						j: j
						jogador: 1
					}
					Peca{
						i: 7 - (if((j mod 2) == 0) i*2 else i*2+1)
						j: j + 5
						jogador: 2
					}
				]
		]

Criei cada peça pela posiçao (i,j) no tabuleiro. Notem o if-else que pode retornar valores distintos como um operador ternario (a?b:c). Eu poderia adicionar uma das 24 peças individualmente mas seria mais trabalhoso e nada bonito!🙂

O resultado é as peças no tabuleiro.

tutorial_damasfx_p1_006

10 – Agora adicionamos um efeito de luz nas peças.

class Peca extends CustomNode{
	...
	override function create():Node{
		return Circle{
			...
			effect:Lighting{
				light: DistantLight {azimuth: -135}
				specularConstant: 0.5
				surfaceScale: 1
			}
		}
	}
}

Existem vários efeitos que podem ser utilizados mas vamos começar com a iluminação. Ajustei as configurações manualmente para chegar num resultado bom. Leiam a documentação que vcs entenderão o significado de cada parametro da iluminação.

O resultado é a iluminação em cada peça! Agora tah bunito! =D

tutorial_damasfx_p1_007

11 – Vamos adicionar também uma sombra nas peças. Mas cada objeto JavaFX só pode receber um efeito!!! Mas podemos agrupar efeitos utilizando Group que é simplesmente um container para objetos visuais. Colocamos o Circle dentro desse Group e adicionamos um efeito no Group que irá se sobrepor o efeito do Circle.

class Peca extends CustomNode{
	...
	override function create():Node{
		return Group{
			effect:DropShadow{offsetX: 1 offsetY: 1 radius:3 spread: 0.1}
			content:Circle{...}
		}
	}
}

Assim temos um Group com efeito de sombra, dentro dele um Circle com efeito de luz. Leiam a documentação da classe DropShadow para entender seus parametros.

O resultado é um pequeno sombreamento nas peças.

tutorial_damasfx_p1_008

Chegamos ao fim do tutorial! A seguir o código completo:

import javafx.stage.*;
import javafx.scene.*;
import javafx.scene.paint.*;
import javafx.scene.effect.*;
import javafx.scene.effect.light.*;
import javafx.scene.shape.*;
import javafx.scene.input.*;
import javafx.ext.swing.*;
import java.lang.*;
import java.util.*;

def SIZE = 30;  //tamanho de uma casa
def SIZE2 = SIZE/2; //metade de uma casa
def SIZEP = 12; //raio de uma peca

class Peca extends CustomNode{
	var x: Number = bind i * SIZE + SIZE2;
	var y: Number = bind j * SIZE + SIZE2;
	var i: Number = bind Math.round((x - SIZE2) / SIZE);
	var j: Number = bind Math.round((y - SIZE2) / SIZE);
	var jogador: Integer;
	override function create():Node{
		return Group{
			effect:DropShadow{offsetX: 1 offsetY: 1 radius:3 spread: 0.1}
			content:Circle{
				centerX: bind x centerY: bind y radius: SIZEP
				fill: if(jogador == 1) Color.RED else Color.BLUE
				effect:Lighting{
					light: DistantLight {azimuth: -135}
					specularConstant: 0.5
					surfaceScale: 1
				}
			}
		}
	}
}

Stage{
	title: "Damas"
	scene: Scene{
		width: SIZE*8
		height: SIZE*8
		fill: Color.WHITE
		content: [
			for(i in [0..4])
				for(j in [0..4])[
					Rectangle{
						x: i*2*SIZE y: j*2*SIZE
						width: SIZE height: SIZE
						fill: Color.GRAY
					}
					Rectangle{
						x: i*2*SIZE+SIZE y: j*2*SIZE+SIZE
						width: SIZE height: SIZE
						fill: Color.GRAY
					}
				]
			for(i in [0..4])
				for(j in [0..2])[
					Peca{
						i: if((j mod 2) == 0) i*2 else i*2+1
						j: j
						jogador: 1
					}
					Peca{
						i: 7 - (if((j mod 2) == 0) i*2 else i*2+1)
						j: j + 5
						jogador: 2
					}
				]
		]
	}
}

Uma coisa que tenho que destacar eh a possibilidade de criar componentes visuais muito bonitos com poucas linhas.

A API do JavaFX pode ser encontrada aqui. É muito util para saber configurar os componentes.

Espero que tenham gostado. Em breve iremos movimentar as peças com o mouse! =D

Bons estudos!

Veja também: Tutorial – Jogo de Damas em JavaFX (parte 2)

15 Responses to “Tutorial – Jogo de Damas em JavaFX (parte 1)”


  1. 1 Emerson 08/04/2009 às 20:23

    Boa Noite

    Tem como dividir este codigo par chamar os objetos.

  2. 2 Raphael Marques 08/04/2009 às 20:31

    whaaat?

  3. 3 Windson 13/06/2009 às 13:29

    Cara parabéns, é possível trocar a pedras e os quadrados por imagens?

  4. 4 Raphael Marques 13/06/2009 às 14:05

    tem sim! muito facil! =D

    é soh usar o componente Image

  5. 5 JOAQUIM 23/06/2010 às 16:08

    Parabéns, gostei muito e está muito fácil de entender.
    Agradeço pela generosidade em nos disponibilizar este trabalho.

  6. 6 mika 17/08/2010 às 21:37

    parabens….tava precizandoo..

  7. 7 rod 26/08/2010 às 11:29

    po cara tenho q fazer isso em portugol tem como vc me ajuda pq java ta tranquilo .

  8. 8 Raphael Marques 26/08/2010 às 14:04

    portugol????? como assim?

  9. 9 rod 03/09/2010 às 19:20

    trabalho de facudade para quinta feira agora .e eu nao sei fazer isso em portugol ajuda ae manda um email vlw (rod-sk8@hotmal.com)

  10. 10 Raphael Marques 03/09/2010 às 20:06

    ainda nao entendi o que vc quer dizer com PORTUGOL!

  11. 11 Dimas 08/11/2010 às 18:41

    caraa parabens
    belo trabalho!!

    mas o meu está dando erro para compilar…

    damas.fx:57: It looks like you are missing a ‘,’ delimiter or perhaps have a malformed expression here?
    ]
    ^

    o q pode ser?
    vlw!

  12. 12 Marcos André 17/12/2010 às 13:03

    Raphael parabéns pelo código… em cima do seu código pretendo implementar uma inteligencia artificial. Caso queiram trocar contato. webmarcosandre@gmail.com
    e Dimas experimenta colocar “,” (virgula) onde apresenta o erro.

  13. 13 Dazio divino 06/09/2011 às 00:05

    amigo sou jogador e damas profisional tem como colocar a grande diagonal do tabuleiro a sua esqueda no seu progeto es a sua direita.
    gostei muito do seu progeto não intendo de programaçõ porem parabens um abraço

  14. 14 FAS 14/06/2015 às 14:06

    parceiro preciso falar urgente com a sua pessoa pode me mandar um e-mail fabio_unaffected@yahoo.com.br ok? muito obrigado pelo tutorial e aguardo um breve contato.. obrigado😉

  15. 15 AFT 25/08/2015 às 01:04

    Como eu faço pra colocar isso pra rodar com o JavaFX instalado no Eclipse?


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s





%d blogueiros gostam disto: