Discussion :

[Gouyon]

Salut à tous

Je suis en train de développer un petit jeu dans lequel j'ai des animations.
Je dispose d'une image sur laquelle des pions se déplacent tandis que d'autres éléments changent simplement d'image.

Voici ce que j'ai fait en swing

Un classe Visu qui traite tous les dessins de ma surface de jeu.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
public void anime(Pion uniteEnMain, boolean affOmbre, boolean affJauges) {
 
		int nactif = actif + 1;
		if (nactif == 2)
			nactif = 0;
		Graphics2D g2 = vues[nactif].createGraphics();
		g2.drawImage(fond, 0, 0, null);
		dessineFlammes(nactif);
		dessineFigurines(nactif, affOmbre, affJauges, uniteEnMain);
		actif = nactif;
	}

Une classe Animation qui déclenche l'affichage de mon interface

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
public class Animation extends TimerTask {
	private JPanel panel = null;
 
	public Animation(JPanel Panel) {
		panel = Panel;
	}
 
	@Override
	public void run() {		
		panel.updateUI();
 
	}
 
}

La classe Panel qui affiche ma surface de jeu

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
public PanVueTest(ParamDessin pDessin, Graphiques Graphs, ParametresJeu pJeu) {
 
		paramD = pDessin;
		lesGraph = Graphs;
		paramJeu = pJeu;
	        tAnim = new Timer();
		tAnim.scheduleAtFixedRate(new Animation(this), 0, 40);
	}
 
       @Override
	public void paintComponent(final Graphics g) {
		super.paintComponent(g);
		Graphics2D g2 = (Graphics2D) g;
		vue.anime(uniteEnMain, affOmbre, affJauges);
        	g2.drawImage(vue.getImage(), 0, 0, getWidth(), getHeight(), xorg, yorg,xorg + (int) (getWidth() * zoom[izoom]), yorg + (int) (getHeight() * zoom[izoom]), null);	
	}

Je voudrais porter ça en JavaFX malheureusement je suis un peu perdu. Pour les animation j'ai vue dans les doc et exemple qu'on utilisait différent objets (Timeline, keyFrame) mais dans mon cas j'ai un peu de mal à voir comment faire.
Par exemple comment je change l'image d'un objet. Dans mon animation j'ai des objets qui vont se déplacer plus ou moins vite et ils ne finissent pas leur mouvement tous en même temps. comment je gère ça

[bouye]

J'entrevois plusieurs approches possibles :

1. La méthode la plus simple à mettre en place mais probablement pas la plus efficace serait de faire que chaque objet a sa propre transition (lorsqu'il s'agit d'un mouvement simple) ou Timetline (pour un mouvement complexe).
2. Tu peux ajouter tous les keyframe de tous les objets dans une seule et unique Timeline.
3. Tu peux utiliser un Timeline ou un PauseTransition comme un timer pour effectuer une action de manière régulière : déplacer à mano le contenu de la scène (ce qui ressemblera alors à ce que tu faisais en Swing).
4. Tu peux utiliser un AnimationTimer qui permet d'utiliser le timer de granularité fine qui est appelé à chaque refresh de la scène et faire tes déplacement à mano. Penser à calculer le différentiel de temps via le long passé en paramètre pour te calquer sur le framerate que tu avais en Swing.

[Gouyon]

Finalement j'ai opté pour une solution avec un animationTimer

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
timer = new AnimationTimer() {
			@Override
			public void handle(long l) {
				if (t0 == -1)
					t0 = l;
				long delta = l - t0;
				if (delta > 500000000) {
					Rectangle2D rect = vueCarte.getViewport();
					for (Node vueFig : figurines.getChildren()) {
						Point2D posi = (Point2D) vueFig.getUserData();
						posi.setLocation(posi.getX() + 10, posi.getY() + 20);
						double nx=(posi.getX() - rect.getMinX())*zoom;
						double ny=(posi.getY() - rect.getMinY())*zoom;
						if ( nx>= 0 && ny >= 0) {
							vueFig.relocate(nx, ny);
							vueFig.visibleProperty().set(true);
						} else
							vueFig.visibleProperty().set(false);
					}
					n++;
					for (Node flm : flammes.getChildren()) {
						((ImageView) flm).setImage(flammeches[rnd.nextInt(16)]);
					}
					t0 = l;
				}
 
			}
 
		};
		timer.start();

Elle semble efficace pour le moment.
J'utilise la propriété userData pour stoker la position réelle de mes objets sur la carte afin de pouvoir gérer leur affichage lorsque je change le viewport de la carte.

J'ai placé mes Nodes dans deux Group que j'ai ajouté à ma région

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
 
 
Group figurines = new Group();
Group flammes = new Group();
 
private Region mapArea = new Region() {
	{
		getChildren().add(vueCarte);
		getChildren().add(figurines);
		getChildren().add(flammes);
	}
};

Il y a sans doute mieux à faire mais pour le moment ça fonctionne assez bien.