IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Voir le flux RSS

Blog de Serge Girard (aka SergioMaster)

[Actualité] Utilisation ludique d'un style FMX (jeu de taquin)

Noter ce billet
par , 03/06/2021 à 18h38 (22798 Affichages)
L'objectif de ce billet n'est pas de refaire une nouvelle version d'un jeu de Taquin que vous pourrez retrouver dans cette discussion.

Lors de l'écriture de la version FMX de ce jeu, une idée, en relation avec mes travaux sur les styles, m'a titillé : était-il possible d'utiliser un style pour charger les pièces du puzzle ? L'utilisation de la palette Style m'était jusqu'à présent plutôt "terra incognita" et ses objets souvent source de frustrations au cours de mes divers démêlés avec les styles.

Nom : Style_01.PNG
Affichages : 3370
Taille : 13,0 Ko

Je tiens à souligner qu'il s'agit bien des styles FMX, ceux utilisés en VCL sont beaucoup plus "figés" et, s'il y a similitudes et possibilités de transformation de l'un vers l'autre mes "recherches" n'ont pas été plus loin dans cette direction.

L'occasion faisant donc le larron, je me suis donc mis en tête de créer un style qui contiendrait l'image de mon puzzle ainsi que la découpe de ses différentes pièces.
Un outil est proposé : le concepteur de style de bitmaps et c'est d'abord par là que mes efforts se sont portés. Mal m'en a pris pour une première utilisation, ce fut un échec total ! J'en ai certainement mal compris les arcanes ou l'outil n'est pas fait pour l'objectif fixé.
Je suis alors passé par ce que je connais mieux : le dépôt d'un TStyleBook sur une forme et l'ouverture de son éditeur.

Voilà ce que je veux obtenir :

Nom : Style_02.png
Affichages : 2872
Taille : 127,7 Ko

Je vais maintenant indiquer les diverses étapes qui m'ont été nécessaires pour réaliser cela.
Mais, tout d'abord, notez que le style sera un style dit 'Default' afin qu'il s'applique quelle que soit la plateforme cible.

  • Double-cliquez sur le composant StyleBook1 déposé sur la forme afin d'ouvrir le concepteur de styles.
  • Glissez-déposez ensuite un TImage dans l'arborescence du StyleContainer.


Nom : Style_03.png
Affichages : 2895
Taille : 32,1 Ko

  • Chargez une image (propriété MultiResBitmap) et changer la propriété StyleName en quelque chose de plus "parlant" que le nom par défaut proposé Image1Style(un nom neutre me sera utile plus tard aussi utiliserai-je 'modele' pour la suite).


Nom : Style_04.png
Affichages : 2885
Taille : 53,3 Ko

Il est désormais temps de créer notre première pièce du puzzle.
  • Glissez-déposez un TLayout au niveau de la racine (StyleContainer) et dans ce TLayout, auquel vous aurez changé la propriété StyleName en 'piece01', ajoutez un TStyleObject.
  • Changez la propriété StyleLookup du StyleObject créé (y mettre le StyleName du TImage).
  • Utilisez le bouton proposé par la propriété SourceLink qui va ouvrir une nouvelle fenêtre, Éditeur BitmapLinks.


Nom : Style_05.png
Affichages : 2867
Taille : 95,2 Ko

  • La première chose à faire est de réduire le zoom de façon à visualiser l'image entière.
  • Agrippez les deux coins jaunes de façon à retailler la zone à définir. Quand vous les déplacerez, les valeurs TBounds (en haut de la fenêtre) se modifieront. L'objectif est d'obtenir une taille de 100 x 100 (mon image de base étant en 400 x 400).

Ce n'est pas forcément évident au début, ne vous focalisez pas trop sur des délimitations juste, nous verrons plus tard comment ranger cela.
  • Refaites alors les opérations pour chaque pièce.

Le refaire pour chaque pièce, même s'il y en a que 16, c'est long ! Toutefois, pour comprendre certains principes et avant que j'explique comment
créer ces pièces plus rapidement, prenez le temps de créer la pièce numéro 2 (à droite de la première, TBounds(100,00,0,00)-(200,00,100,00)) et celle qui sera sous la première (pièce numéro 5, TBounds(0,00,100,00)-(100,00,200,00)).

Je vous livre donc l'astuce, pour éviter ces répétitions et corriger les petits défauts de positions :
  • Sauvegardez votre style (vous avez un bouton pour cela). Assurez vous de bien utiliser l'extension .style pour obtenir une version texte de ce dernier, l'extension .fsf produira une version "compilée", j'écrirai plutôt compressée, illisible.
  • Ouvrez le fichier créé avec un outil tel que Notepad++.


Code XML : 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
object TStyleContainer
  object TImage
    StyleName = 'modele'
    MultiResBitmap.Height = 400
    MultiResBitmap.Width = 400
    MultiResBitmap = <
      item
        Width = 400
        Height = 400
        PNG = {
          89504E470D0A1A0A0000000D494844520000019000000190080600000080BF36
          CC000000017352474200AECE1CE90000000467414D410000B18F0BFC61050000
          FFBA49444154785EECBD07A0654771E75D2FE737392AA2882414404248800011
<!-- je vous fais grâce des quelque 2700 lignes suivantes de l''image -->
         66FB0FEEB55FF8D0476CDFCEFD9136373F671DED1DE107350352A142850A152A
          340EB3FF13E4E33CC0A3EE7CFE0000000049454E44AE426082}
        FileName = 
          'D:\serge\Documents\Embarcadero\Studio\Projets\Sidney\stoneedge.png'
      end>
    Align = Center
    Size.Width = 274.000000000000000000
    Size.Height = 269.000000000000000000
    Size.PlatformDefault = False
    Visible = False
  end
  object TLayout
    StyleName = 'piece01'
    Align = Center
    Visible = False
    TabOrder = 3
    object TStyleObject
      StyleName = 'StyleObject1Style'
      SourceLookup = 'Modele'
      SourceLink = <
        item
          SourceRect.Left = 2.000000000000000000
          SourceRect.Top = 1.000000000000000000
          SourceRect.Right = 100.000000000000000000
          SourceRect.Bottom = 100.000000000000000000
        end>
    end
  end
  object TLayout
    StyleName = 'piece02'
    Align = Center
    Visible = False
    TabOrder = 2
    object TStyleObject
      StyleName = 'StyleObject1Style'
      SourceLookup = 'Modele'
      SourceLink = <
        item
          SourceRect.Left = 100.000000000000000000
          SourceRect.Right = 200.000000000000000000
          SourceRect.Bottom = 100.000000000000000000
        end>
    end
  end
  object TLayout
    StyleName = 'piece05'
    Align = Center
    TabOrder = 1
    object TStyleObject
      StyleName = 'StyleObject1Style'
      SourceLookup = 'Modele'
      SourceLink = <
        item
          SourceRect.Top = 100.000000000000000000
          SourceRect.Right = 100.000000000000000000
          SourceRect.Bottom = 200.000000000000000000
        end>
    end
  end
 end
Ce qui nous intéresse, c'est un bloc de TLayout, définissant une piéce
Code XML : 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
  object TLayout
    StyleName = 'piece01'
    Align = Center
    Visible = False
    TabOrder = 3
    object TStyleObject
      StyleName = 'StyleObject1Style'
      SourceLookup = 'Modele'
      SourceLink = <
        item
          SourceRect.Left = 2.000000000000000000
          SourceRect.Top = 1.000000000000000000
          SourceRect.Right = 100.000000000000000000
          SourceRect.Bottom = 100.000000000000000000
        end>
    end
  end
Il suffira de le reproduire par copier-coller en changeant la propriété StyleName et les différentes propriétés de SourceLink pour obtenir un découpage parfait. Une fois fait :
  • Sauvegardez le fichier modifié.
  • Revenez à l'IDE Delphi et à votre programme.
  • Chargez à nouveau le style (pour récupérer les modifications faites).



Il ne reste plus qu'à utiliser le style.
N'oubliez pas, même si la clôture de l'onglet Concepteur de styles se charge de vous le rappeler, d'appliquer le style (bouton le plus à droite).

Dans la deuxième image de cet article, pour illustrer l'objectif, j'ai utilisé un TGridLayout pour contenir des TPanels qui, eux, auront chacun une propriété StyleLookup différent.
Il n'est pas sûr que le TGridLayout soit le composant le plus adapté pour codifier le jeu, mais, il n'était pas non plus dans mes desseins que de le faire.

Par contre, je me suis plus attardé sur l'image, était-il possible de changer l'image utilisée dans le style à l'exécution ?
J'aurais, bien sûr, pu faire un style par image, mais ma curiosité m'a poussé à le vérifier.
De l'idée, loufoque, à la réalisation, il ne m'a fallu qu'un peu de code et quelques explorations de solutions concernant l'application du style ainsi modifié.

Code Delphi : 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
43
44
45
46
47
48
 
procedure TMainForm.ButtonChangeImageClick(Sender: TObject);
var pStream : TMemoryStream;
    pFMXObj : TFMXObject;
begin
 
// Passage de l'image via un stream
pStream:=TMemoryStream.Create;
try
  PStream.LoadFromFile('test1.png');
  pFMXObj:=StyleBook1.Style.FindStyleResource('modele');
  if Assigned(pFMXObj) then
    begin
      PStream.Position:=0;
      TImage(pfMXObj).Bitmap.LoadFromStream(Pstream);
    end;
finally
  pStream.Free;
end;
 
//pFMXObj:=StyleBook1.Style.FindStyleResource('modele');
//if Assigned(pFMXObj) then
//    begin
//      TImage(pfMXObj).Bitmap.LoadFromFile('test1.png');
//    end;
 
// Forcer le dessin du GridLayout
GridLayout1.BeginUpdate;
GridLayout1.EndUpdate;
 
// variante Repaint par piece
//for var i:= 0 to GridLayout1.ChildrenCount-1 do
//  TPanel(Gridlayout1.Children[i]).Repaint;
 
 
// Variante re-dessin complet
//for var i:= GridLayout1.ChildrenCount-1 downto 0 do
//  Gridlayout1.Children[i].Free;
//
//for var i := 1 to 16 do
//   begin
//     with TPanel.Create(Self) do
//      begin
//         StyleLookup:=Format('piece%.2d',[i]);
//         Parent:=GridLayout1;
//     end;
//   end;
end;

Nom : Style_06.png
Affichages : 2787
Taille : 438,5 Ko

Je suis prêt à parier qu'il y a encore d'autres solutions code que je n'ai pas explorées à l'heure actuelle.
Je gage aussi que changer le découpage de pièces en fonction de la taille de l'image (j'ai triché en utilisant des images de tailles identiques de 400x400) l'est tout autant. C'est une autre histoire à écrire. Atteindre les propriétés de SourceRect ne sera pas aussi simple.

En tout cas, j'espère que cette utilisation "ludique" des styles FMX changera peut-être votre opinion sur ceux-ci.

Envoyer le billet « Utilisation ludique d'un style FMX (jeu de taquin) » dans le blog Viadeo Envoyer le billet « Utilisation ludique d'un style FMX (jeu de taquin) » dans le blog Twitter Envoyer le billet « Utilisation ludique d'un style FMX (jeu de taquin) » dans le blog Google Envoyer le billet « Utilisation ludique d'un style FMX (jeu de taquin) » dans le blog Facebook Envoyer le billet « Utilisation ludique d'un style FMX (jeu de taquin) » dans le blog Digg Envoyer le billet « Utilisation ludique d'un style FMX (jeu de taquin) » dans le blog Delicious Envoyer le billet « Utilisation ludique d'un style FMX (jeu de taquin) » dans le blog MySpace Envoyer le billet « Utilisation ludique d'un style FMX (jeu de taquin) » dans le blog Yahoo

Mis à jour 04/06/2021 à 14h44 par ClaudeLELOUP

Tags: delphi, fmx, styles
Catégories
Programmation , Delphi , FMX

Commentaires

  1. Avatar de Gouyon
    • |
    • permalink
    Très intéressant. En fait les styles sont de très puissants outils car ils permettent de vraiment faire des belles choses. Mais ça demande de l'investissement et du travail mais ça vaut vraiment le coup. Depuis que j'ai découvert ça je ne peux plus m'en passer.