Discussion :

[Roland Chastain]

Bonjour !

Je songe à faire un jeu d'échecs pour Delphi. J'aurais besoin de pouvoir charger les images des pièces à partir de fichiers PNG, de pouvoir déplacer les pièces avec la souris, en ayant le contrôle sur l'aspect du curseur (qui doit devenir une main quand on passe sur l'échiquier, et éventuellement une main qui se ferme quand on saisit une pièce, enfin vous voyez le genre).

Qu'est-ce que vous me conseilleriez comme bibliothèque pour les images PNG ? Ou alors est-ce que je n'ai pas besoin de bibliothèque ? Est-ce que vous auriez un exemple de code qui fait cela, c'est-à-dire déplacer une image avec un fond transparent en préservant l'arrière-plan ?

Autre question, est-ce que vous me conseilleriez d'utiliser FMX ? Sachant qu'au départ ce sera une application Windows mais bien entendu ça ne me déplairait pas de pouvoir viser d'autres plateformes.

Voilà, j'ai bien envie de me lancer mais je veux être sûr de me lancer dans la bonne direction. Merci d'avance.

[SergioMaster]

Bonjour,

le gros challenge au niveau UI serait d'utiliser FMX et la 3D trouver les structures des pièces ne devrait pas trop poser de problèmes, les faire soit-même est même envisageable. Le déplacement des pièces sera peut être une partie délicate

[cincap]

@ SergioMaster,


Avec ce lien tu pourrais déjà avancer il me semble :

https://fr.jeffprod.com/blog/2014/co...n-jeu-dechecs/

@+,

cincap

[Roland Chastain]

Merci pour vos réponses.

Je ne suis pas à la recherche d'informations générales sur la conception d'un jeu d'échecs, ni sur l'intelligence artificielle. J'ai peut-être mal choisi le titre de la discussion.

Mon problème est l'affichage et le déplacement d'images PNG au moyen de la souris. J'ai un exemple qui fonctionne mais c'est avec des bitmaps.

Les pièces en 3D, honnêtement, ça ne m'intéresse pas trop. C'est très joli mais personne ne s'en sert vraiment, parce qu'on voit toujours moins bien le jeu qu'avec des pièces en 2D.

[gbegreg]

Bonjour,

Avec les versions récentes de Delphi, il n'y a pas besoin de bibliothèques particulières pour les lire des images PNG.

En partant d'un projet FMX avec le template "Application vide", on y place ensuite deux TImage. Image1 sera aligné afin d'occuper toute la fenêtre et image2 sera l'image que l'on pourra déplacer via la souris. On charge dans image1 l'image PNG de son choix (propriété MultiResBitmap) pour le fond et dans image2 l'image d'une pièce du jeu d'échec.

Ensuite, en codant quelque chose du style suivant, on peut faire bouger l'image2 via la souris :

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
32
33
34
35
36
37
38
39
40
41
42
 
// Initialisation
procedure TForm1.FormCreate(Sender: TObject);
begin
  capture := false; // booléen à déclarer dans la partie publique de Form1
end;
 
// Le pointeur de souris survole l'image1
procedure TForm1.Image1MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Single);
begin
  if capture then
  begin
    Image2.Position.X := X;
    Image2.Position.Y := Y;
  end;
end;
 
// On clique sur image2
procedure TForm1.Image2MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Single);
begin
  capture := true;
end;
 
// Le pointeur de souris survole l'image2
procedure TForm1.Image2MouseMove(Sender: TObject; Shift: TShiftState; X,
  Y: Single);
begin
  if capture then
  begin
    Image2.Position.X := X+Image2.Position.X;
    Image2.Position.Y := Y+Image2.Position.Y;
  end;
end;
 
// On relache le bouton de la souris
procedure TForm1.Image2MouseUp(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Single);
begin
  capture := false;
end;

Evidemment, ce petit bout de code est à améliorer mais il permet de vérifier que la transparence est correctement gérée et qu'il n'y a pas besoin de bibliothèque tierce pour gérer le format PNG.

[Roland Chastain]

@gbegreg

Merci pour ta réponse. C'est déjà une piste. Mais le résultat n'est pas très convaincant : le déplacement de l'image n'est pas fluide.

Sinon, effectivement pour la transparence pas de problème.

[gbegreg]

@Roland,

J'ai repris ton code. Effectivement cela ne parait pas fluide mais je ne pense pas que ça soit une question de fluidité.
En fait, tu n'as implémenté que l'événement OnMouseMove sur le image1. Du coup, l'image se déplace que lorsque le pointeur de la souris se déplace sur l'image1. Si tu cliques sur Image2 (pour mettre FCapture à true), le temps que le pointeur de la souris reste sur l'image2, celle ci ne se déplace pas. Elle va se déplacer qu'au moment où le curseur arrivera sur image1. Cela fait que image2 se déplace par à-coups ce qui donne l'impression que ça n'est pas fluide.
Dans mon exemple, j'ai renseigné le OnMouseMove de image2 en faisant attention : sur le OnMouseMove de image2, les origines de X et Y sont le coin supérieur gauche de l'image2. Il faut donc leur ajouter les positions en X et Y de l'image2 pour obtenir les X et Y par rapport à l'aire de jeu (image1).

Ainsi, c'est fluide. Les améliorations seraient de modifier le curseur de souris comme tu indiquais avec la main le temps du déplacement de image2 et le fait de que lorsqu'on clique sur image2 de prendre les coordonnées du centre de l'image2 pour faire les déplacements. Ça ne semble pas compliqué. Autre amélioration serait d'utiliser un TFLoatAnimation lorsque l'utilisateur relâche le bouton de la souris afin de centrer image2 sur la case présente sous le pointeur de la souris.

Pour faire une interface 3D ça sera un peu plus compliqué je pense pour une expérience utilisateur pas forcément améliorée : je pense que ce qui compte dans un jeu d'échec c'est l'IA de l'adversaire virtuel
Voir même ajouter une fonctionnalité permettant à deux humains de s'affronter via smartphone

[Roland Chastain]

@Roland,

J'ai repris ton code. Effectivement cela ne parait pas fluide mais je ne pense pas que ça soit une question de fluidité.
En fait, tu n'as implémenté que l'événement OnMouseMove sur le image1. Du coup, l'image se déplace que lorsque le pointeur de la souris se déplace sur l'image1. Si tu cliques sur Image2 (pour mettre FCapture à true), le temps que le pointeur de la souris reste sur l'image2, celle ci ne se déplace pas. Elle va se déplacer qu'au moment où le curseur arrivera sur image1. Cela fait que image2 se déplace par à-coups ce qui donne l'impression que ça n'est pas fluide.
Dans mon exemple, j'ai renseigné le OnMouseMove de image2 en faisant attention : sur le OnMouseMove de image2, les origines de X et Y sont le coin supérieur gauche de l'image2. Il faut donc leur ajouter les positions en X et Y de l'image2 pour obtenir les X et Y par rapport à l'aire de jeu (image1).

D'accord, effectivement je n'avais pas compris. Oui ça marche. Ci-joint le projet corrigé, c'est-à-dire en fait ton code (avec le petit réglage que tu suggères dans la suite de ton message).

Pour les 32 pièces, comment les déclarerais-tu ?

Certaines pièces ont la même image. Une pièce doit pouvoir changer d'image (promotion du pion). J'aimerais aussi faire des effets comme colorier une case.

Pour faire une interface 3D ça sera un peu plus compliqué je pense pour une expérience utilisateur pas forcément améliorée : je pense que ce qui compte dans un jeu d'échec c'est l'IA de l'adversaire virtuel
Voir même ajouter une fonctionnalité permettant à deux humains de s'affronter via smartphone

Effectivement la 3D ça ne m'intéresse pas plus que ça, pour les mêmes raisons que tu avances.

Dans la version actuelle de mon jeu, j'utilise (pour l'IA) un moteur externe. La partie du code qui assure la communication avec le moteur est basé sur l'API Windows. Mais un affrontement via smartphone, pourquoi pas ? Tout est possible. Ça peut être un autre projet, à partir de la même interface graphique.

[ALWEBER]

@Roland,
Pour faire une interface 3D ça sera un peu plus compliqué je pense pour une expérience utilisateur pas forcément améliorée : je pense que ce qui compte dans un jeu d'échec c'est l'IA de l'adversaire virtuel
Voir même ajouter une fonctionnalité permettant à deux humains de s'affronter via smartphone

Si tu veux j'ai l'interface 3D

[Roland Chastain]

Si tu veux j'ai l'interface 3D

C'est très joli. Bravo !

On pourrait prendre les choses autrement : si tu veux, j'ai tout ce qu'il faut pour faire un jeu d'échecs à partir de ton interface 3D.

Ne serait-ce, dans un premier temps, qu'un arbitre qui reconnaît les coups légaux et les différentes situations de jeu (échec, mat, etc.). J'ai une unité en Pascal qui fait cela, avec une démo Delphi.

Moi, tout en appréciant la beauté et la prouesse technique de la 3D, je ne souhaite pas l'utiliser dans mon projet. Mais (au cas où cela t'intéresse) je veux bien te donner un coup de main pour compléter ton interface.

[Roland Chastain]

L'interface graphique la plus agréable à utiliser que je connaisse est celle du site lichess.org. Je veux faire la même avec Delphi.

[gbegreg]

Voici le zip avec 2 petites animations pour recentrer la pièce sur la case sous le pointeur lorsque l'utilisateur relâche le bouton de la souris pour montrer la simplicité
Project1.zip

@ALWEBER
Belle interface !
La difficulté que je vois en 3D est le déplacement des pièces sur le plateau à l'aide de la souris : comment déplacer la pièce en 3D alors que la souris ne permet un déplacement qu'en 2D. En sélectionnant une pièce, il est possible d'indiquer les cases possibles de fin du mouvement en fonction du type de pièce sélectionné. L'utilisateur pourrait cliquer sur une des cases proposées et le déplacement s'effectue. Il me semble que cette technique apporte une aide non négligeable au joueur.

Je pense que Roland souhaite une véritable simulation c'est à dire sans aider le joueur. Le joueur doit pouvoir déplacer les pièces librement comme il le ferait avec un échiquier réel. Au programme de déterminer après le déplacement si celui est possible ou non et dans ce cas la pièce revient à la case d'origine (avant le déplacement).

@Roland

Pour les 32 pièces, comment les déclarerais-tu ?

Je n'ai pas réfléchi à cela. Comme ça je dirai que je définirai une classe TPiece avec les différentes caractéristiques (position, type de pièce, couleur...). Ensuite, j'utiliserai un TObjectList<TPiece> pour gérer la collection de pièce.

[Roland Chastain]

Voici le zip avec 2 petites animations pour recentrer la pièce sur la case sous le pointeur lorsque l'utilisateur relâche le bouton de la souris pour montrer la simplicité

Très joli, le petit effet. J'achète !

[Paul TOTH]

Voici le zip avec 2 petites animations pour recentrer la pièce sur la case sous le pointeur lorsque l'utilisateur relâche le bouton de la souris pour montrer la simplicité
Project1.zip

@ALWEBER
Belle interface !
La difficulté que je vois en 3D est le déplacement des pièces sur le plateau à l'aide de la souris : comment déplacer la pièce en 3D alors que la souris ne permet un déplacement qu'en 2D. En sélectionnant une pièce, il est possible d'indiquer les cases possibles de fin du mouvement en fonction du type de pièce sélectionné. L'utilisateur pourrait cliquer sur une des cases proposées et le déplacement s'effectue. Il me semble que cette technique apporte une aide non négligeable au joueur.

Je pense que Roland souhaite une véritable simulation c'est à dire sans aider le joueur. Le joueur doit pouvoir déplacer les pièces librement comme il le ferait avec un échiquier réel. Au programme de déterminer après le déplacement si celui est possible ou non et dans ce cas la pièce revient à la case d'origine (avant le déplacement).

@Roland

Je n'ai pas réfléchi à cela. Comme ça je dirai que je définirai une classe TPiece avec les différentes caractéristiques (position, type de pièce, couleur...). Ensuite, j'utiliserai un TObjectList<TPiece> pour gérer la collection de pièce.

pour le déplacement 3D il suffit de projeter le déplacement de la souris sur le plan de plateau de jeu afin de rendre le déplacement naturel

[gbegreg]

pour le déplacement 3D il suffit de projeter le déplacement de la souris sur le plan de plateau de jeu afin de rendre le déplacement naturel

Oui c'est vrai, je devais être fatigué hier soir...
Il faudra peut être limiter les déplacements de la caméra autour de l'échiquier : si on le voit par la tranche les déplacements seront impossibles.

[ALWEBER]

C'est très joli. Bravo !

On pourrait prendre les choses autrement : si tu veux, j'ai tout ce qu'il faut pour faire un jeu d'échecs à partir de ton interface 3D.

Ne serait-ce, dans un premier temps, qu'un arbitre qui reconnaît les coups légaux et les différentes situations de jeu (échec, mat, etc.). J'ai une unité en Pascal qui fait cela, avec une démo Delphi.

Moi, tout en appréciant la beauté et la prouesse technique de la 3D, je ne souhaite pas l'utiliser dans mon projet. Mais (au cas où cela t'intéresse) je veux bien te donner un coup de main pour compléter ton interface.

Voici le source du programme. La fonction de sélection est opérationnelle. On peut rapprocher nos deux univers et faire un vrai jeux d'échecs 3D.
J'ai fait ça il y a 4 ou 5 ans. Je dois reprendre un certain nombre de traitements internes pour qu'il soit plus élégant.
A ta disposition
Voici le programme : Echec3D_V3.zip

[Roland Chastain]

@ALWEBER

Merci pour le code source du projet. Compilation réussie avec Delphi 10.2.

@tous

Donc, j'ai eu la réponse à ma question : FMX est approprié pour faire ce que je voudrais.

Mais j'aimerais bien avoir encore votre aide sur le point suivant.

Si j'ai plusieurs images, le code actuel ne va plus. Je ne vais pas déclarer 32 images (pour 32 pièces) avec trois méthodes pour chacune. Donc ce sera un tableau ou une liste mais là techniquement je ne vois comment faire pour que les quatre méthodes du code actuel servent pour toutes les pièces. Si je faisais ça à ma façon, je chercherais dans la liste à partir de la position de la souris quelle image a été cliquée, et je conserverais l'index de cette image dans une variable globale. C'est comme ça que vous feriez aussi, ou il y a mieux ?

@gbegreg

Quand tu parlais d'une classe, tu pensais à une classe dérivée de TImage, c'est ça ?

[Coussati]

salut,

je pense que tout dépend de comment tu vois la chose ...

je suis allé sur le site que tu as donné : https://lichess.org/tv

et je trouve que c'est assez simple, les pions sont simples, c'est une sorte d’aperçu en hauteur ?

si c'est ce que tu cherches à réaliser, sur quoi bloques tu ?

[gbegreg]

Si j'ai plusieurs images, le code actuel ne va plus. Je ne vais pas déclarer 32 images (pour 32 pièces) avec trois méthodes pour chacune. Donc ce sera un tableau ou une liste mais là techniquement je ne vois comment faire pour que les quatre méthodes du code actuel servent pour toutes les pièces. Si je faisais ça à ma façon, je chercherais dans la liste à partir de la position de la souris quelle image a été cliquée, et je conserverais l'index de cette image dans une variable globale. C'est comme ça que vous feriez aussi, ou il y a mieux ?

@gbegreg

Quand tu parlais d'une classe, tu pensais à une classe dérivée de TImage, c'est ça ?

Oui et en lui affectant des attributs supplémentaires (par exemple le type de pièce...) et en attribuant ses événements OnMouseDown, OnMouseUp et OnMouseMove aux procédures adéquates dans son constructeur. Ensuite une collection TObjectList<laClasse> qui gèrera la collection des pièces.

[SergioMaster]

Bonjour,
@Alweber je savais bien que j'avais déjà vu un jeu d'échec en 3D quelque-part dommage que je n'ai pu citer ce superbe travail lors de mon premier passage dans cette discussion.

Je ne vais pas déclarer 32 images (pour 32 pièces) avec trois méthodes pour chacune.

Moi je verrais
une seule classe générale par exemple TPiece pour les mouvements (pourquoi ne pas innover et en faire un interface ?)
une collection d'objet ImagePiece contenant 6 objets (pion,tour,cavalier,fou,reine,roi) pour les structures TPathImage ou image (png...) des pièces, avec une fonction de "colorisation", voire des effets d'animation (TPathAnimation)
une classe TPion = class (TPiece) avec les propriétés positions sur l'échiquier, couleur et une du type d'image

Mais bon, ce que je propose est loin d'être abouti, juste une petite réflexion matinale après mon café, je voulais surtout saluer le travail d'Alweber, pour moi la 3D est encore une barre très haute