O documento descreve uma API chamada FX Canvas2D que foi desenvolvida para auxiliar no ensino de programação bidimensional e jogos 2D utilizando a linguagem Java. A API fornece métodos para desenho de primitivas gráficas, laços de renderização, transformações geométricas e callbacks de eventos. A API foi usada no ensino de uma disciplina de Computação Gráfica e os alunos desenvolveram com sucesso um jogo semelhante ao PacMan.

1. FX Canvas2D: uma API de jogos
bidimensionais para auxiliar na
aprendizagem de programação
GUSTAVO RISSETTI¹ , FHABIANA THIELI MACHADO¹ , PAULINE VIELMO
MIRANDA²
Congresso Brasileiro de Informática na Educação - 2017
III Workshop de Ensino em Pensamento Computacional, Algoritmos e
Programação
¹ Instituto Federal Farroupilha – São Vicente do Sul – RS/ Brasil
² Universidade Federal de Santa Maria – Santa Maria – RS/ Brasil

2. Definição do problema
•Falta de capacidade de abstração e de transformação do problema
numa sequência lógica para desenvolvimento dos algoritmos de
programação [Rapkiewicz et al. 2006];
•Ensino de programação na disciplina Computação Gráfica;
•Alternativa ao uso de bibliotecas como OpenGL (Open Graphics
Library);
FX CANVAS2D API - FHABIANA MACHADO - III WALGPROG 2

3. Objetivos
▪Desenvolvimento de uma API (Application Programing Interface)
para programação de jogos 2D (bidimensionais) utilizando Java.
▪ Conceitos básicos: desenhos de primitivas gráficas, laço de renderização e
transformação geométrica
▪Motivar os estudantes para o processo de ensino aprendizagem
através de jogos
FX CANVAS2D API - FHABIANA MACHADO - III WALGPROG 3

4. Desenvolvimento da FX Canvas2D API
▪Uso da classe Canvas da tecnologia JavaFX;
▪Em linguagem Java, com métodos em português;
▪Apenas com conceitos básicos, tais como, programação estruturada
(ou orientação a objetos), noção espacial (plano cartesiano), desvios
condicionais e laços de repetição é possível programar um pequeno
jogo;
▪Também suporta a utilização de um controlador de jogo (gamepad)
para controlar a ação dos personagens criados.
FX CANVAS2D API - FHABIANA MACHADO - III WALGPROG 4

5. Desenvolvimento da FX Canvas2D API
▪Principais categorias de métodos
FX CANVAS2D API - FHABIANA MACHADO - III WALGPROG 5
Desenhos de
primitivas
• Linhas, círculos,
retângulos
Laços de
renderização
• Desenhar, atualizar
Transformações
geométricas
• Rotacionar,
transladar, escalar
Call-backs
• Ações de movimento
(mouse, teclado)

6. Desenvolvimento da FX Canvas2D API
ponto(double x, double y, double tam) circulo(int x, int y, int l, int a, Estilo estilo)
retangulo(int x, int y, int l, int a, Estilo estilo) preenchimento(Color cor)
linha(double xi, double yi, double xf, double yf, Estilo estilo) contorno(double expessura, Color cor)
texto(String texto, double x, double y, int tam, FontWeight tipo) imagem(Image img, double x, double y)
FX CANVAS2D API - FHABIANA MACHADO - III WALGPROG 6
Desenhos de
primitivas
• Linhas, círculos,
retângulos
Laços de
renderização
• Desenhar, atualizar
Transformações
geométricas
• Rotacionar,
transladar, escalar
Call-backs
• Ações de movimento
(mouse, teclado)

7. Desenvolvimento da FX Canvas2D API
colisao(double xP1, double yP1, double xP2, double yP2, double larguraP1, double alturaP1, double
larguraP2, double alturaP2)
Rotacionar (double ang)
transladar(double x, double y)
escalar(double x, double y)
FX CANVAS2D API - FHABIANA MACHADO - III WALGPROG 7
Desenhos de
primitivas
• Linhas, círculos,
retângulos
Laços de
renderização
• Desenhar, atualizar
Transformações
geométricas
• Rotacionar,
transladar, escalar
Call-backs
• Ações de movimento
(mouse, teclado)

8. Materiais e métodos
▪Aplicação com estudantes na disciplina de Computação Gráfica;
▪Alunos de Análise e Desenvolvimento de Sistemas, durante um
semestre, com aulas semanais;
▪Iniciando com um primeiro exemplo (desenhar um plano
cartesiano);
▪Trabalho final da disciplina desenvolver jogo semelhante ao
PacMan;
FX CANVAS2D API - FHABIANA MACHADO - III WALGPROG 8

9. Resultados e Discussões
FX CANVAS2D API - FHABIANA MACHADO - III WALGPROG 9

10. Resultados e Discussões
FX CANVAS2D API - FHABIANA MACHADO - III WALGPROG 10

11. Contato
FSANTOS@INF.UFSM.BR
FACEBOOK: HTTPS://WWW.FACEBOOK.COM/FHABIANATHIELI.SANTOS
FX CANVAS2D API - FHABIANA MACHADO - III WALGPROG 11