Connexion
FAQ MembresM’enregistrer

Tuto2: Déplacement d'objet par clic se sourie

Les bureaux E17 et E18

Tuto2: Déplacement d'objet par clic se sourie

Messagepar chrisripp » 29 Oct 2017 21:53

Déplacement d'objet par clic se souris


Mise en place:
Créer un dossier tuto2 dans lequel vous allez copier coller le script monbg.edc. que nous avons vu dans le 1er tuto.
viewtopic.php?p=8007#p8007
Code: Tout sélectionner
// Title:   TUTO 1 Background
    // Author:  Chrisripp/Triki1
    // Placer toute les images de votre projet dans images
    images {
       // image "filename.png" option to storage method;[options d'enregistrement]
       // STORAGE_METHOD can be:
       // COMP = compressed, no loss [compressé pas de perte de qualité]
       // RAW = uncompressed, no loss [non compressé pas de perte de qualité]
       // LOSSY = compressed with quality loss, next param is quality level (0-100) [compression avec perte de qualité de 0 à 100]
       //
       image, "bg.png"  COMP;       
    }
    collections {
       group {
          name, "e/desktop/background";
          max: 1920  1200; //[taille max de l'image]
          min: 640  480; // [taille mini de l'image]
          parts {
        /* BACKGROUND */
             part {
                name, "bg";
                description {
                   state, "default" 0.0;
                   rel1 {
                      relative, 0.0  0.0;
                      offset,   0   0;
                   }
                   rel2 {
                      relative, 1.0  1.0;
                      offset,   -1   -1;
                   }
                   image {
                      normal, "bg.png";
                   }
                   fill {
                      smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
                   }
                } // fin des descriptions
             } // fin de part
          } // fin des parts
       } // fin du groups
    } // fin de la collection

Renommer le tuto2.edc
Placer votre bg.png du 1er tuto
Placer votre script builds.sh , éditer le et remplacer le nom des scripts edc et edj en tuto2.edc et tuto2.edj
Placer toutes les images qui composerons votre nouveau fond.

Quelques explications


Je vais reprendre la même theme que j'ai utilisé pour mon 1er tutoriel, mais cette fois ci je vais utiliser 3 calques:
-le fond étoilé Image
-le soleil Image
-le vaisseau Image

Je vais utiliser le fond étoilé pour le fond , puis je placerai le soleil et en 1er plan le vaisseau.
Pour cela nous allons juste rajouter des "part" dans "parts"
Code: Tout sélectionner
parts {
    part {
    }
    ...
}

Les « parts » sont un ensemble de « part », chacune d'elles représentant les éléments graphiques présents dans un thème, donc un bouton, label, etc.
http://louis-du-verdier.developpez.com/ ... ?page=edje

Nous allons copier la part background
Code: Tout sélectionner
/* BACKGROUND*/
         part {
            name, "bg";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "etoile2.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part background

et cela 2 fois nous avons au tolal 3 part
renommer les ainsi:
/* BACKGROUND Stars*/
/* SUN*/
/* Vaisseau Arcadia*/
Nommer chaqu'une des part en:
Code: Tout sélectionner
 part {
            name, "bg";

Code: Tout sélectionner
part {
            name, "sun";

Code: Tout sélectionner
part {
            name, "arcadia";

Placer vos 3 calques etoile,sun,vaisseau dans chacune de vos part
Code: Tout sélectionner
image {
                  normal, "etoile.png";
               }

Code: Tout sélectionner
image {
                  normal, "sun.png";
               }

Code: Tout sélectionner
image {
                  normal, "vaisseau.png";
               }

On n'oubli pas la section images ou l'on place toutes nos images composant le background.
Cela donne au final:
Code: Tout sélectionner
// Title:   TUTO 2
// Author:  Chrisripp/Triki1

images {
   // image "filename.png" option to storage method;[options d'enregistrement]
   // STORAGE_METHOD can be:
   // COMP = compressed, no loss [compressé pas de perte de qualité]
   // RAW = uncompressed, no loss [non compressé pas de perte de qualité]
   // LOSSY = compressed with quality loss, next param is quality level (0-100) [compression avec perte de qualité de 0 à 100]
   //
   image, "etoile.png"  COMP;
   image, "sun.png"  COMP;   
   image, "arcadia5.png"  COMP;   
   
}
collections {
   group {
      name, "e/desktop/background";
      max: 1920  1200; //[taille max de l'image]
      min: 640  480; // [taille mini de l'image]
      parts {
    /* BACKGROUND Stars*/
         part {
            name, "bg";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "etoile.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part background
// --------------------------------------------------------------------------------------------------------------------------   
          /* SUN */
         part {
            name, "sun";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "sun.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part sun
//---------------------------------------------------------------------------------------------------------------------------- 
          /* Vaisseau Arcadia*/
         part {
            name, "arcadia";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "arcadia5.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part
// ---------------------------------------------------------------------------------------------------------------------------         
      } // fin des parts
   } // fin du groups
} // fin de la collection

Image

Code: Tout sélectionner
La Fonction dragable


Pour déplacer un calque a la sourie on va utiliser la fonction dragable sur le soleil et le vaisseau
Pour indiquer que le calque réagis à la souris on place mouse event sous le nom de la part que l'on veux faire réagir
Code: Tout sélectionner
 name, "....";
mouse_events: 1;

et a la fin de description on place la commande dragable:
Code: Tout sélectionner
dragable {
               //confine: background;
               x: 1 1 1;
               y: 1 1 1;
            }

Notre code final nous donnent:
Code: Tout sélectionner
// Title:   TUTO 2
// Author:  Chrisripp/Triki1

images {
   // image "filename.png" option to storage method;[options d'enregistrement]
   // STORAGE_METHOD can be:
   // COMP = compressed, no loss [compressé pas de perte de qualité]
   // RAW = uncompressed, no loss [non compressé pas de perte de qualité]
   // LOSSY = compressed with quality loss, next param is quality level (0-100) [compression avec perte de qualité de 0 à 100]
   //
   image, "etoile.png"  COMP;
   image, "sun.png"  COMP;   
   image, "arcadia5.png"  COMP;   
   
}
collections {
   group {
      name, "e/desktop/background";
      max: 1920  1200; //[taille max de l'image]
      min: 640  480; // [taille mini de l'image]
      parts {
    /* BACKGROUND Stars*/
         part {
            name, "bg";
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "etoile.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
         } // fin de part background
// --------------------------------------------------------------------------------------------------------------------------   
          /* SUN */
         part {
            name, "sun";
            mouse_events: 1;
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "sun.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
            dragable {
               //confine: background;
               x: 1 1 1;
               y: 1 1 1;
            }
         } // fin de part sun
//---------------------------------------------------------------------------------------------------------------------------- 
          /* Vaisseau Arcadia*/
         part {
            name, "arcadia";
            mouse_events: 1;
            description {
               state, "default" 0.0;
               rel1 {
                  relative, 0.0  0.0;
                  offset,   0   0;
               }
               rel2 {
                  relative, 1.0  1.0;
                  offset,   -1   -1;
               }
               image {
                  normal, "arcadia5.png";
               }
               fill {
                  smooth, 1; // [resize 1= yes 0= no][redimensionement 1= oui 0= non]
               }
            } // fin des descriptions
            dragable {
               //confine: background;
               x: 1 1 1;
               y: 1 1 1;
         } // fin de part
// ---------------------------------------------------------------------------------------------------------------------------         
      } // fin des parts
   } // fin du groups
} // fin de la collection


Vous pouvez maintenant compiler en lançant
Code: Tout sélectionner
./buids.sh

Copier/coller tuto2.edj dans .e/e/backgrounds/
vous pouvez slider votre fond
Image
Image
Image
Image
Avatar de l’utilisateur
chrisripp
 
Messages: 588
Enregistré le: 07 Déc 2011 18:26

Retourner vers Enlightenment

Qui est en ligne

Utilisateurs parcourant ce forum : Aucun utilisateur enregistré et 1 invité

cron