Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision
Previous revision
Last revision Both sides next revision
fr:gdevelop5:objects:shape_painter [2017/12/02 04:46]
luduo created
fr:gdevelop5:objects:shape_painter [2019/07/20 13:48]
poustoff621
Line 1: Line 1:
 FIXME **This page is not fully translated, yet. Please help completing the translation.**\\ //(remove this paragraph once the translation is finished)// FIXME **This page is not fully translated, yet. Please help completing the translation.**\\ //(remove this paragraph once the translation is finished)//
  
-==== What a shape painter ​object is ====+# L'​objet Shape painter
  
-A shape painter ​object allow us to draw shapes in our game. It can be useful for making simple UI elements or even a selection box for example.+<note tip>​**Voir en action !** 🎮\\ 
 +[[#​Examples|Je préférerais examiner des exemples de l'​objet Shape painter ​! SVP, faites-les moi voir maintenant.]] 
 +</​note>​
  
-==== Add a shape painter object ​====+Un objet **Shape painter** (peintre de formes) permet de dessiner des formes dans le  jeu. Ce qui peut être utile pour créer des éléments d'​interface utilisateur simples. Le **Shape painter** peut même être utilisé pour créer une boîte de sélection. 
 + 
 +==== Ajouter un objet Shape Painter ​==== 
 + 
 +Pour ajouter un objet **Shape painter**, créez un nouvel objet à partir de la liste **Properties Editor** (Editeur de propriétés) à droite de l'​interface de l'​Éditeur de scène. Sélectionnez-cliquez ensuite sur le nouvel objet, sélectionnez **Edit object** et dans la liste qui s'​affiche,​ cliquez sur ** Shape painter**. 
 +Vous devrez peut-être faire défiler la liste pour le trouver.
  
-To add a shape painter object we need to select the Shape painter from the list when we add a new object. 
-You may need to scroll down in the list to find it. 
 {{ :​gdevelop5:​objects:​add-shape-painter-object.png?​nolink }} {{ :​gdevelop5:​objects:​add-shape-painter-object.png?​nolink }}
  
-==== Edit properties ​====+==== Éditer les propriétés ​==== 
 + 
 +Il s'agit ensuite d'​éditer les propriétés de l'​objet pour le faire correspondre à ce que nous voulons. De nouveau, cliquez sur l’objet créé dans la liste des propriétés à droite. Sélectionnez **Edit object** dans la liste déroulante qui s'​affiche. Une nouvelle fenêtre s'​ouvre. Elle affiche les propriétés de l'​objet **Shape painter**.
  
-Next we want to edit the properties. To do that, right click on the object and select Edit object from the list. It should bring up the object properties window. 
 {{ :​gdevelop5:​objects:​shape-painter-properties.png?​nolink }} {{ :​gdevelop5:​objects:​shape-painter-properties.png?​nolink }}
  
-==== Change the colour and opacity ​====+==== Changer la couleur et l'​opacité ​====
  
-In the properties window we can change the outline colourthe fill colour the opacity ​of each colour and the outline ​size of our object to make it appear just the way we need it.+La fenêtre des propriétés du **Shape painter** présente des options permettant de changer 
 + 
 +* la couleur du contour de l'​objet (**Outline color**), 
 +* l'​opacité de contour de l'​objet (**Outline ​opacity**), 
 +* l'​épaisseur de ce contour (**Outline ​size**), 
 +* la couleur de remplissage de l'​objet (**Fill color**), 
 +* l'​opacité du remplissage (**Fill opacity**).
  
 {{ :​gdevelop5:​objects:​change-color-of-shape-painter.png?​nolink }} {{ :​gdevelop5:​objects:​change-color-of-shape-painter.png?​nolink }}
  
-==== Relative ​object ​position ​====+==== Position relative de l'object ==== 
 + 
 +La position par défaut des formes que nous dessinons à l'​écran est relative à la positon de l'​objet **Shape painter** dans la scène.
  
-By default the position of the shapes we draw on the screen is relative to the shape painter object. ​ 
 {{ :​gdevelop5:​objects:​shape-painter-relative-position-property.png?​nolink }} {{ :​gdevelop5:​objects:​shape-painter-relative-position-property.png?​nolink }}
  
-In case of relative position when we draw the shape on our screen the position 0 on the and axis is going to be the position ​of the shape painter ​object so in case we want to draw a shape from position 100 pixels ​on and it is going to be 100 pixels ​from the shape painter ​object wherever it is on the screen.  +Dans le cas d'une position relative activée (case cochée dans la figure ci-dessus), la position ​de la forme dessinée sur l'​écran correspondra à la positon ​sur les axes et Y. Ce sera la position ​de l'​objet **Shape ​painter**. Autrement dit, si nous voulons dessiner une forme dont la position ​sur l’écran est de 100 pixels ​sur et de 100 pixels sur Y, sa position sera située à 100 pixels ​de l’objet **Shape ​painter** où que ce dernier se trouve sur l’écran.
-In case we untick the box the position 0 on the X and Y axis is going to be at the top left corner of our scene regardless where the object is located. If it not, it is going to make more sense when we actually start drawing our shapes.+
  
-==== Draw a shape ====+Lorsque la case est décochée, la position 0 sur les axes X et Y se trouve dans le coin supérieur gauche de la scène, quelle que soit la position de l'​objet.
  
-To draw a shape first we need to add the shape painter ​object to our sceneIf we run  the preview now we won't see anything as the object basically just add the functionality and hold our propertiesTo draw a shape we need to use eventsIn case you are not familiar with eventsI recommend to check out the events ​page on the wiki.+==== Dessiner une forme ==== 
 + 
 +Pour dessiner une forme, créez comme d'​habitude un nouvel objet à l'aide de l'​Éditeur d'​objets. Ajoutez ensuite l'​objet **Shape ​painter** à la scèneSi nous lançons l'aperçu maintenant, nous ne verrons rienL'​objet **Shape painter** ajoute simplement la fonctionnalité pour l'​objetPour l'​instantil ne contient que les propriétés / paramètres du **Shape painter**. Pour dessiner une forme, nous devons utiliser l'​Éditeur de scènes (**Scene Events Editor**). // Si vous n'​êtes pas familier avec les événements,​ je vous recommande de consulter la page des événements sur le wiki .// 
 + 
 +Allons dans l'​éditeur d'​événements de scène (**Scene Events Editor**) pour ajouter un événement. Une fois l'​événement ajouté, cliquez sur le texte **add action** (ajouter une action). 
 +Les formes primitives sont listées dans le menu déroulant **Primitive drawing**. 
 + 
 +{{ :​gdevelop5:​objects:​primitivedrawingeventchoices.png?​nolink |}} 
 + 
 +Nous avons le choix entre 3 types de formes à dessiner : le cercle, la ligne et le rectangle. Nous allons dessiner un rectangle. Sélectionnez **Rectangle** dans la liste déroulante.
  
-Let go to the events editor and add an event, then click add action. 
-Next find the events for Primitive drawing. We can choose from 3 different type of shapes to draw. Circle, Line and Rectangle. We are going to draw a rectangle on the screen so let select the Rectangle under drawing 
 {{ :​gdevelop5:​objects:​draw-shape-event.png?​nolink }} {{ :​gdevelop5:​objects:​draw-shape-event.png?​nolink }}
  
-Nexton the right side select the shape painter ​object we are going to use and for the top left position ​enter for both and and the bottom right position ​enter 100 for both and Y.+Sur le côté droitsélectionnez l'​objet **Shape ​painter** à utiliser. Pour la position ​en haut à gauche (**Top left side**), entrez ''​0''​ pour **X** et pour **Y**. Pour la position ​en bas à droite (**Bottom right side**), entrez ''​100''​ pour **X** et **Y**. 
 {{ :​gdevelop5:​objects:​draw-shape-event-properties.png?​nolink }} {{ :​gdevelop5:​objects:​draw-shape-event-properties.png?​nolink }}
  
-No if we launch a preview it will draw a 100 pixels ​wide and 100 pixels ​high rectangle on the screen.+Maintenant, si nous lançons un aperçu de la scène, un rectangle de 100 pixels ​de large et 100 pixels ​de haut sera dessiné dans la scène. 
 {{ :​gdevelop5:​objects:​rectanlge-shape-painter.png?​nolink }} {{ :​gdevelop5:​objects:​rectanlge-shape-painter.png?​nolink }}
  
-If we left the relative ​position ​enabledyou may notice our rectangle ​is in the the same position ​as the shape painter ​object even though it origin ​point is 0. Now if we disable that option ​and launch the preview againyou going to see our object is drawn in the top left corner of our scene+Si nous laissons la position ​relative activéenous remarquerons que le rectangle ​est à la même position ​que l'​objet **Shape ​painter**, même si son point d'​origine est 0. Si nous désactivons cette option ​et lançons à nouveau l'​aperçunous verrons que l'​objet est dessiné dans le coin supérieur gauche de la scène
-Using events we can also change any properties of a shape on the fly.+ 
 +L'​utilisation des événements permet de modifier les propriétés d’une forme à la volée. 
 + 
 +{{ :​gdevelop5:​objects:​shapepaintereventsexample.png |}} 
 + 
 +## Exemple ​
  
-==== Examples ====+<note tip>​**Voir en action !** 🎮\\ 
 +Ouvrez cet exemple en ligne.</​note>​
  
-List of examples coming soon +[[https://​editor.gdevelop-app.com/?​project=example://​advanced-shape-based-painter|{{ :​gdevelop5:​objects:​shapepainterobject.png?​nolink |}}]]
-  * selection box+
  
 +* https://​editor.gdevelop-app.com/?​project=example://​advanced-shape-based-painter