17 de mar de 2015

As janelas de dialogs do JavaFX

Uma das maiores necessidades do JavaFX foi a adição de uma biblioteca consistente para termos acesso a diálogos. Aquelas janelinhas que aparecem em uma aplicação para entrarmos alguma informação. Nessa postagem vamos falar das classes que permitem a criação de diálogos, mas que foram adicionadas recentemente. Muitos da era Swing devem se lembrar do JOptionPane.

Os diálogos do JavaFX 


Essa parte do JavaFX começam no Java 8 atualização 40. Ficam no pacote javax.scene.control e usando a classe Alert podemos criar diálogos de erro, avisos, confirmação, com mensagem de erro (stacktrace) e você ainda pode customizar e criar o seu próprio diálogo com botões que irão ter ações customizadas.

Exibindo mensagens de erro, aviso e informação


O mais simples dos diálogos permitem que você simplesmente mostra uma imagem em uma caixinha de texto. Esses diálogos aceitam a configuração de um título, um cabeçalho e a mensagem de aviso em sí. Os diálogos de informação e error são semelhantes, só temos que trocar o tipo de Alert para Error, Warning ou Information. O programa abaixo mostra como podemos usar ambos:



Percebam que as classes bases para criarmos diálogos são javafx.scene.control.Alert e javafx.scene.control.Alert.AlertType.  Vejam o resultado de cada diálogo quando clicamos neles na aplicação acima:







Pegando entradas dos usuários


Um uso mais avançado dos diálogos são para pegarmos uma resposta do usuário. Podemos colocar neles perguntas para pegar a resposta do usuário, campos de texto e caixas de escolha. Veja abaixo um programa que mostra o uso mais simples de cada um deles:




O resultado é mostrado abaixo:







Outros tipos



Essa API demorou para sair, mas quando veio, veio completa! Podemos criar tipos customizados de diálogos de acordo com as necessidades do usuário. Cabe ao leitor explorar as mais diversas alternativas, mas um bom resumão pode ser encontrado nessa postagem em inglês.

7 de mar de 2015

Criando jogos com JavaFX - Introdução

Essa é a primeira postagem de uma pequena série sobre jogos em JavaFX. Mais informação no assunto pode ser encontrado no blog de Carl Dea e sua engine. Aqui vamos apresentar uma visão geral e pequenos jogos, no entanto, essa visão geral pode ser usada para que você crie seus próprios jogos!
Se você quer ficar especialista em jogos, há um recurso muito bom em português, o Ponto V, principalmente para Java. Há também o famoso livro gratuito Killer Game Programmin in Java. Lembrando que ambos recursos não cobrem JavaFX, por isso a necessidade dessa pequena séria básica. Por fim, tutorial bem didático que cobre os tópicos sobre programação de jogos, mas usa HTML 5 e Javascript, é esse do Indie Gamer Brasil.

Breve histórias sobre o mundo dos jogos


A história de programação de jogos é, para mim, umas das mais interessantes do mundo atual. Jogos eram para crianças, um mercado limitado e fechado. Com os anos, tivemos a saída dos fliperamas para arcades, dos arcades para portáteis e hoje jogos estão em todos os lugares. Afinal, qual celular não vem com jogos por padrão? 
Outro ponto interessante foi com relação à interatividade. Por muitos anos tínhamos jogos de um, no máximo dois jogadores, usando controles. Isso mudou drasticamente, pois hoje podemos ter milhares de jogares usando a rede mundial e as formas de se jogar passaram a ser não somente o controle, mas sim seu próprio corpo com jogos que imitam quase perfeitamente a vida real.
Nessa séries vamos criar jogos simples, "retro", para diversão e para exercitar programação. Certamente jogos gigantes exigem muita experiência, conhecimento e até faculdades! 
Para continuar lendo sobre a história dos jogos, recomendo esse artigo da Wikipédia e se realmente quiser sentir a experiência da evolução dos games, recomendo o livro 1001 jogos para jogar antes de morrer, que orgulhosamente tenho, mas li pouco mais de 20%. Nele você "sente" a evolução dos jogos e as revoluções que foram acontecendo desde o início até uns anos atrás.


O básico sobre programação de jogos

Mas o que precisamos para criar jogos? Não muito, essa é a verdade. Claro que jogos mais complexos irão necessitar de engines avançadas e especializadas, como a Unreal Engine. Se quer aprender isso, essa série não é para você! Sugiro que veja os vídeos do The New Boston sobre a engine do unreal.  Mas o que precisamos de uma linguagem de programação para criar nossos jogos?

Com certeza o mais importante sobre criar jogos é ter a capacidade de desenhar na tela. Se você não tiver um toolkit  que permita dinamicamente atualizar a tela, esqueça! Lógico que só desenhar não ajuda em nada, pois temos que atualizar a tela, assim, esse recurso deve vir acompanhado de uma ferramenta para termos controle sobre o desenho da tela de acordo com o tempo, ou seja, um loop, assim podemos redenhar a tela sempre.

Segundo é permitir uma forma de interatividade do jogador. Se você não pode redesenhar a tela atualizando mesma com informações da entrada do usuário, você não terá interatividade nenhuma! Um exemplo básico: mover o herói para a esquerda quando o usuário apertar a seta para a esquerda. Notem que uma boa ferramenta vai garantir a captura de eventos em diversos cenários e ambiente, como em celulares, onde não temos cliques, mas sim toques, ou seja, um outro paradigma de interação diferente do que é feito nos computadores tradicionais (com mouse e teclado).

O terceiro requisito é detectar colisões e tomar ações. Por exemplo, como você vai saber que o herói do jogo foi atingido por um tiro do inimigo? Para isso temos que aprender a detectar colisões.

Por fim, um requisito muito importante para jogos realmente emocionantes é a capacidade de tocar som. A "musiquinha" do jogo marca muito! Por exemplo, lembro na minha infância a gente saía correndo na rua e cantando a musiquinha do Lamborghini, um famoso jogo de SNES. Você com certeza tem a lembrança da musiquinha de algum jogo...

Um adicional seria uma ferramenta que permita de forma fácil realizar a transformação dos elementos do jogo (rotacionar, sprites, mover, etc). Mas isso não é crucial, assim podemos criar jogos sem depender de elementos e funções prontas, mas sim implementar as nossas.

Note que muitos jogos podem muito bem sobreviver somente usando os dois primeiros conceitos apresentados são cruciais para criarmos nosso joguinho, os outros não são necessariamente uma obrigação.
Tudo isso que digitei acima pode ser melhor definido pelo seguinte código que peguei na wikipedia sobre programação de jogos:

while( user doesn't exit )
  check for user input
  run AI
  move enemies
  resolve collisions
  draw graphics
  play sounds
end while


O loop do jogo e desenhando em JavaFX


É claro que a moderna plataforma gráfica do Java contém tudo que precisamos para criar jogos:

  • Para desenhar na tela podemos usar o Canvas e usar a classe Animation para criar o loop do game;
  • JavaFX tem suporte a quase todos eventos que você possa imaginar e isso inclui eventos de toque(onTouch). Para ter uma ideia disso, veja nosso artigo sobre a classe Node;
  • Como enfatizamos nos primeiros artigos desse blog, tocar aúdio em JavaFX é algo muito simples;
  • O suporte a qualquer tipo de transformação é possível na mais nova plataforma gráfica do Java, mas não vamos entrar em detalhes pois nossa abordagem será outra;
Nossa abordagem vai partir de um "mini framework", onde já temos o suporte ao loop e podemos implementar algumas classes e sair codificando o jogo em sí. Eu falo um pouco sobre esse "mini framework" no meu blog em inglês, mas segue aqui uma explicação breve (iremos explorar mais no futuro, não se preocupe):

  • A classe principal se chama Game e auxilia em uma interface para programar nosso jogo. Assim temos os métodos update e display, cujo objetivos são respectivamente atualizar os elementos do jogo (posição do herói após o usuário interagir com a aplicação) e mostrar as modificações (simplesmente desenhar na tela). Ele é composta de um canvas para desenharmos e sermos felizes;
  • Em seguida temos a classe GameEngine, que dá vida para nosso jogo. Ela chama os métodos update e display de acordo com o tempo passado. Por exemplo, podemos chamar esses métodos 10 vezes por segundo. Importante é não travar a engine nesses métodos! Por exemplo, não podemos fazer uma tarefa muito pesada ou o jogo "trava". 
O código dessas classes podem ser encontrados nesse GIST. Um exemplo muito básico de uso é mostrado abaixo, onde nos baseamos no exemplo Bouncing Ball (vamos chamar de "Bolinha Viva") do livro Nature Of Code, onde uma bolinha vai ficar se movendo "eternamente" batendo nos cantos da aplicação. Não é um jogo, mas já um ponto inicial para começarmos a entender a natureza dos nossos joguinhos.


Conclusão


Falamos sobre o básico do básico sobre criação de jogos. Vamos voltar ao tema com joguinhos mais simples em breve!
O código está no github e é um projeto do Netbeans 8. Você deve simplesmente abrir o projeto no netbeans 8 e rodar!

https://github.com/AprendendoJava/jogos-javafx

10 de jan de 2015

Abrindo e renderizando páginas WEB em uma aplicação JavaFX

Nessa postagem vamos falar sobre como carregar páginas WEB dentro de sua aplicação JavaFX. Mais uma vez: essa é uma tarefa muito fácil em JavaFX!

Um conto de duas classes: WebView e WebEngine


Vamos à parte teórica primeiramente e relembrar que tudo que é visual em uma aplicação JavaFX herda da classe  Node, que abordamos anteriomente. O WebView é a classe que  você vai usar para mostrar o conteúdo de uma página e ele herda de Node, ou seja, é passível de efeitos, animações, CSS, transformações, entre outros.
Já a classe WebEngine é onde manipulamos a DOM da página, executamos javascript, entre outros. É simplesmente o browser em sí, baseado no WebKit, o mesmo motor de navegadores famosos, como o Chrome.
A relação entre essas classes é simples: O WebView usa uma instância de WebEngine e cria a representação visual de um conteúdo HTML na sua aplicação JavaFX. Mas como usar os mesmo?

Usando WebView


O uso de WEBView consiste em três passos:
  • Instanciar a classe javafx.scene.web.WebView;
  • Acessar a WebEngine usando o método getEngine e usar o método load para carregar a página WEB;
  • Adicionar o WebView ao Scenegraph da sua aplicação.
Em código, isso fica assim:



O que resulta em:



Exatamente, meus caros amigos. Foram 3 linhas de código e uma página WEB na sua app JavaFX.

Uma aplicação um pouco mais elaborada


Agora vamos fazer uma aplicação que mostra alguns componentes JavaFX interagindo com a WEB Engine. Vamos fazer o básico, pois, como quase todos os componentes JavaFX, isso levaria algumas postagens.

Nessa aplicação temos uma lista de URLs no lado esquerdo e quando o usuário seleciona uma, temos a mesma carregada no lado direito no nosso WEB View , vejam:




O funcionamento é simples: a ListView e o WebView ficam em um gerenciador de layout do tipo HBox. Quando o usuário seleciona um elemento na lista, pegamos a URL selecionada e carregamos na WebEngine usando o WebView. Quando a WebEngine está carregando a página, nós desabilitamos a lista.
Fácil, não? Vejam o código inteiro:




Conclusão


Introduzimos o componente WebView e mostramos o uso básico do mesmo. Claro que as possibilidades são muitas, mas nos limitamos ao básico do básico, pois cadê ao leitor usar a documentação do JavaFX para ir mais a fundo!

30 de dez de 2014

[Especial] Executando sua aplicação JavaFX 2.2 para Android

Olá Pessoal essa é uma postagem especial sobre como portar sua aplicação JavaFX para dispositivos Android!
Há um projeto do Johan Vos para trazer o suporte do JavaFX para o Android e iOs chamado JavaFX Ports e foi o destaque do JavaOne de 2014. O site contém todas as informações para transformar sua aplicação JavaFX 2.2 em uma app para Android,  no entanto, o mesmo está em inglês.
Felizmente, nosso amigo Bruno de Oliveira, que tem um livro sobre JavaFX publicado na casa do código, fez um vídeo ensinando passo-a-passo como colocar sua aplicação JavaFX no Android, confiram: