Création d'une interface 2D dans une application 3D (tutoriel FireMonkey 3D)

Remonter à Tutoriel : Création d'une application FireMonkey 3D

Une application 3D ne peut pas utiliser directement les composants 2D tels que les boutons ou les listes. Toutefois, un moyen simple de traiter ce problème consiste à créer un pont entre les scènes 3D et 2D. FireMonkey fournit le composant FMX.Layers3D.TLayer3D à cet effet.

Ajout et ajustement d'une surface 2D (TLayer3D) et d'un TButton

1. Avec la fiche sélectionnée dans l'inspecteur d'objets ou la vue Structure, double-cliquez sur TLayer3D dans la Palette d'outils. Le composant TLayer3D apparaît :

   

2. Vous pouvez maintenant utiliser le composant TLayer3D en tant que surface pour les composants FireMonkey 2D.

   Avec TLayer3D sélectionné dans la vue Structure ou l'inspecteur d'objets, ajoutez un TButton. Dans la vue Structure, assurez-vous que le bouton est l'enfant de la couche (layer), et pas un enfant de la fiche (si vous avez besoin de corriger la hiérarchie, faites glisser le TButton et déposez-le sur la couche).

   Un TButton FireMonkey est similaire à un TButton de la VCL, et il comporte de nombreux événements et propriétés similaires. Toutefois, dans ce cas, le bouton est situé sur une couche suspendue dans l'espace, ressemblant à un morceau de papier :

   

   Dans l'inspecteur d'objets, définissez la propriété suivante du bouton :

   Align = alCenter

   Vous pouvez choisir un alignement de votre choix à des fins de lisibilité.

   Voici le TButton quand il est centré sur le TLayer3D :

   

3. Pour simuler une surface 2D, changez le type Projection du composant TLayer3D. Dans l'inspecteur d'objets, définissez la propriété suivante de la couche :

   Projection = pjScreen

   Une projection d'écran est une projection pixel-à-pixel du plan d'écran avec une caméra fixe (invisible), et l'avant-plan du champ de vue 3d est maintenant un plan d'écran. Chaque objet est toujours 3D, mais il peut être manipulé comme s'il était 2D.

   Votre application 3D devrait maintenant ressembler à la figure suivante :

   

4. Comme vous le voyez, le composant TLayer3D a éclipsé la scène, en n'en laissant apparaître qu'une partie. Pour garantir la visibilité à la fois de la scène et de la couche qui contient vos contrôles 2D, utilisez l'inspecteur d'objets pour définir les propriétés suivantes du composant TLayer3D :
   • Align = alRight (ou un autre alignement de votre choix)
   • Width = 100 (ou une autre largeur de votre choix, spécifiée en pixels)

   Par exemple :

   

Ajout de boutons, d'événements et de gestionnaires d'événements

Vous disposez maintenant d'une simple scène 3D dans laquelle vous pouvez facilement assigner des événements aux objets. Par exemple, la capture d'écran suivante montre les événements disponibles pour le composant TCube dans l'inspecteur d'objets :

Ajoutez maintenant les boutons qui modifient les objets ajoutés à votre fiche.

Avec TLayer3D sélectionné dans la vue Structure ou l'inspecteur d'objets, ajoutez une paire d'objets TButton. Dans la vue Structure, assurez-vous que les boutons sont des enfants de la couche, et pas des enfants de la fiche. Changez les propriétés Text pour la paire de boutons en :

• Increase Width, Decrease Width

  Créez ensuite cinq autres paires de boutons et changez leurs propriétés Text en :

• Increase Height, Decrease Height
• Increase Depth, Decrease Depth
• Light Off, Light On
• Move Left, Move Right
• Rotate Clockwise, Reverse Clockwise

Votre fiche devrait ressembler à ceci :

• Implémentez ensuite la fonctionnalité des boutons en double-cliquant sur chaque bouton à tour de rôle. Considérons des valeurs d'incrémentation et de décrémentation à 1.

 
   // The Delphi implementation for the Increase Width and Decrease Width buttons
 
   procedure TForm1.IncreaseWidthClick(Sender: TObject);
   begin
     Cube1.Width := Cube1.Width + 1;
   end;
 
   procedure TForm1.DecreaseWidthClick(Sender: TObject);
   begin
     Cube1.Width := Cube1.Width - 1;
   end;

 
   // The C++ implementation for the Increase Width and Decrease Width buttons
 
   void __fastcall TForm3D1::IncreaseWidthClick(TObject *Sender)
   {
     Cube1->Width = Cube1->Width + 1;
   }
 
   void __fastcall TForm3D1::DecreaseWidthClick(TObject *Sender)
   {
     Cube1->Width = Cube1->Width - 1;
   }

Faites de même pour Height et Depth.

• Implémentez ensuite la fonctionnalité des boutons Light On et Light Off.

 
   procedure TForm1.LightOnClick(Sender: TObject);
   begin
     Light1.Enabled := True;
   end;
 
   procedure TForm1.LightOffClick(Sender: TObject);
   begin
     Light1.Enabled := False;
   end;

 
   void __fastcall TForm3D1::LightOffClick(TObject *Sender)
   {
     Light1->Enabled = 0;
   }
 
   void __fastcall TForm3D1::LightOnClick(TObject *Sender)
   {
     Light1->Enabled = 1;
   }

• Exécutez le projet en appuyant sur F9. Quand vous cliquez sur les boutons Increase/Decrease, la taille du cube change. Dans l'image de gauche, vous voyez que la taille du cube a augmenté.

• L'appui sur le bouton Light Off retire l'éclairage ou les ombres du cube, qui devient complètement sombre. L'image de droite montre le cube après l'appui sur le bouton Light Off. Cliquez sur le bouton Light On pour réactiver l'éclairage.

• Vous pouvez aussi changer la position du cube et l'angle de rotation. Pour ce faire, implémentez la fonctionnalité des boutons Move Left, Move Right, Rotate Clockwise et Reverse Clockwise.

 
 
   procedure TForm1.MoveLeftClick(Sender: TObject);
   begin
    Cube1.Position.X := Cube1.Position.X + 1;
   end;
 
 
   procedure TForm1.MoveRightClick(Sender: TObject);
   begin
    Cube1.Position.X := Cube1.Position.X - 1;
   end;
 
   procedure TForm1.RotateClockwiseClick(Sender: TObject);
   begin
     Cube1.RotationAngle.X := Cube1.RotationAngle.X - 10;
   end;
 
   procedure TForm1.ReverseClockwiseClick(Sender: TObject);
   begin
     Cube1.RotationAngle.X := Cube1.RotationAngle.X + 10;
   end;

 
   void __fastcall TForm3D1::MoveLeftClick(TObject *Sender)
   {
 	Cube1->Position->X = Cube1->Position->X + 1;
   }
 
 
   void __fastcall TForm3D1::MoveLeftClick(TObject *Sender)
   {
 	Cube1->Position->X = Cube1->Position->X + 1;
   }
 
   void __fastcall TForm3D1::RotateClockwiseClick(TObject *Sender)
   {
     Cube1->RotationAngle->X = Cube1->RotationAngle->X - 10;
   }
 
   void __fastcall TForm3D1::ReverseClockwiseClick(TObject *Sender)
   {
     Cube1->RotationAngle->X = Cube1->RotationAngle->X + 10;
   }

• Exécutez le projet en appuyant sur F9. Quand vous cliquez sur les boutons Move Left / Move Right, la position du cube change. Cliquez sur le bouton Move Left. Le cube se déplace sur la gauche. Il est aussi observable dans l'image de gauche.

• Quand vous cliquez sur les boutons Rotate Clockwise / Reverse Clockwise, l'angle de rotation du cube change. Cliquez sur le bouton Rotate Clockwise plusieurs fois. Le cube s'incline sur la droite. Observez comment l'effet de la lumière change les ombres sur le cube lors de son inclinaison. Il est aussi observable dans l'image de droite.

Précédent

• Création de l'interface utilisateur (tutoriel FireMonkey 3D)

Voir aussi

• Création d'un composant FireMonkey (Delphi)
• Application FireMonkey 3D
• Utilisation des événements et des gestionnaires d'événements