Outils pour utilisateurs

Outils du site


fr:tutorial:tutorial01

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
fr:tutorial:tutorial01 [2016/08/31 12:38]
Nicolas Ronvel [L'importance du fond]
fr:tutorial:tutorial01 [2018/06/06 10:13] (Version actuelle)
Nicolas Ronvel [Code complet du Template]
Ligne 1: Ligne 1:
-FIXME **Cette page n'est pas encore traduite entièrement. Merci de terminer la traduction**\\ //​(supprimez ce paragraphe une fois la traduction terminée)//​ 
- 
 <WRAP center round tip 60%> <WRAP center round tip 60%>
 **Attention** - Tout en suivant ce tutorial, il se pourrait que vos modifications de template ne soient parfois pas prises en compte. Dans ce cas, commencez par vérifier l'​intégrité de votre code de template, au format JSON, avec par exemple un outil comme [[http://​jsonlint.com/​|Json Validator]]. Peut-être qu'un caractère spécial est manquant ou en trop ? Cet outil vous aidera à trouver ce genre d'​erreur. **Attention** - Tout en suivant ce tutorial, il se pourrait que vos modifications de template ne soient parfois pas prises en compte. Dans ce cas, commencez par vérifier l'​intégrité de votre code de template, au format JSON, avec par exemple un outil comme [[http://​jsonlint.com/​|Json Validator]]. Peut-être qu'un caractère spécial est manquant ou en trop ? Cet outil vous aidera à trouver ce genre d'​erreur.
Ligne 23: Ligne 21:
   "​styles":​ [   "​styles":​ [
     {     {
 +      "​key":​ "​default",​
 +      "​name":​ "​Default",​
       "​fields":​ [       "​fields":​ [
         { "​name":​ "​name",​ "​label":​ "​Name",​ "​default":​ "​Nobbla " }         { "​name":​ "​name",​ "​label":​ "​Name",​ "​default":​ "​Nobbla " }
Ligne 33: Ligne 33:
       "​canvasHeight":​ 750       "​canvasHeight":​ 750
     }     }
-  ]+  ]
 +  "​description":​  
 +  { 
 +    "​description":​ "​Template for Blood Bowl's Starplayers,​ with the V3 design",​ 
 +    "​title":"​Blood Bowl Classic Starplayer",​ 
 +    "​credits":​ "by Nicolas Ronvel",​ 
 +    "​key":​ "​bb-starplayers-v3",​ 
 +    "​url":​ "​https://​github.com/​Gulix/​geckos/"​ 
 +  }
 } }
 </​code>​ </​code>​
Ligne 111: Ligne 119:
 Notre carte affiche maintenant le nom de notre Champion ! Si vous le modifiez dans le champ sur la gauche, il sera également modifié sur l'​image générée pour la carte (il faut quitter le focus du champ pour cela). Super ! Occupons-nous des autres champs ! Notre carte affiche maintenant le nom de notre Champion ! Si vous le modifiez dans le champ sur la gauche, il sera également modifié sur l'​image générée pour la carte (il faut quitter le focus du champ pour cela). Super ! Occupons-nous des autres champs !
  
-{{:​en:​tutorial:​01_ui03.png?​400|What it should look like}}+{{:​en:​tutorial:​01_ui03.png?​400|Ca devrait ressembler à ça}}
  
-===== Making a choice ​=====+===== Un choix à faire =====
  
-Before considering adding some more **editable fields** on our template, ​let's complete the layout of the cardThe different boxes which will contain the editable values have no text to describe them. We will add them by adding some **textbox** ​elements to the ''​canvasFields'' ​section+Avant de penser à rajouter d'​autres ​**champs éditables** dans notre template, ​complétons le fond de la carte. Les différents cadres sur la droite, qui vont contenir les valeurs éditables, n'ont pas de texte pour les décrireNous allons les ajouter via des **textbox** ​dans la section ​''​canvasFields''​. ​
  
-Those elements will not be linked to a variable, ​so why don't we put them on the background ​image ?+Ces éléments ne seront liés à aucune ​variable, ​pourquoi ne pas les avoir inclus dans l'​image ​de fond directement ​?
  
-What if we want to make our template ​accessible to other languages ​We'll just have to change the value of those fields instead of having to edit the image, ​and get the new and long //DataUrl// for the background image. So**textbox** elements it is !+Et si on souhaite traduire notre template ​dans d'​autres langues ​Nous aurons juste à modifier le contenu de ces textbox, au lieu de modifier l'​image, ​récupérer sa nouvelle ​DataUrl, ​et recopier celle-ci. Une bonne raison pour utiliser cette méthode ​!
  
 <code javascript>​ <code javascript>​
Ligne 132: Ligne 140:
 </​code>​ </​code>​
  
-I've repeated the **$name** ​field to show you what part of the template I've modified. Don't repeat it. To know how to set the coordinates of field, open up your background image in an image editor, like [[http://​www.getpaint.net/​index.html|Paint.NET]]. Then select the area where you want to put your field. The coordinates of your selection are usually shown on the bottom info bar of the editor.+La textbox utilisant ​**$name** a été reprise dans le code exemple pour montrer à quel niveau du code ajouter les nouveaux élémentsNe la recopiez pas ! 
  
-You can see that no ''​height''​ is set for the TextBoxes. They will auto-adjust their heightdepending on how much text they got.+Pour connaître les coordonnées où placer un élémentouvrez votre image de fond dans un éditeur tel que [[http://​www.getpaint.net/​index.html|Paint.NET]]. Puis sélectionnez la zone où vous souhaitez placer votre champ. Les coordonnées de votre sélection apparaitront normalement dans une barre d'​informations en bas du logiciel.
  
-Now, let's think of our 4 fields for the player's attributes : **Movement**,​ **Strength**,​ **Agility** & **Armour**. We could use a **text input** field, but then the user could put an Agility value of "​XX",​ which is meaningless. We'll opt instead for a [[..:​template:​choice_input|dropdown menu]], with only the existing and accepted values proposed.+Remarquez qu'il n'y pas de hauteur (''​height''​) de définie pour les TextBoxC'est parce qu'​elles s'​ajustent automatiquement en fonction de la quantité de texte fournie.
  
-Firstgo back to the ''​fields'' ​section of the template. ​Add four **options ​fields**. For eachwe define the options ​that the user will be able to selectEach option ​has value and a textThe text is (for now) only used as a way to display the options.+Maintenantréfléchissons à notre 4 champs pour les attributs des Champions : **Movement**,​ **Strength**,​ **Agility** & **Armour** (nous utiliserons les termes en anglais pour coller avec l'​article original et le code original, en version anglaise). On pourrait utiliser un **champ de texte**, mais cela permettrait aux utilisateurs de mettre, par exemple, une Agility à "​XX",​ ce qui est incohérent. Plutôt que cette voie, nous allons partir sur [[..:​template:​choice_input|listes déroulantes]],​ qui ne proposeront que des valeurs acceptables. 
 + 
 +Revenons à la section ​''​fields'' ​du template. ​Ajoutons-y 4  ​**champs d'options**. ​Pour chacun d'euxnous y définissons les options ​accessibles par l'​utilisateurChaque ​option a une valeur et un texteLe texte est utilisé pour afficher les options ​et récupérer leur contenu.
  
 <code javascript>​ <code javascript>​
Ligne 190: Ligne 200:
 </​code>​ </​code>​
  
-Edit your template ​code, apply the modifications, ​and let's see what changed on our cardOn the left partunder the previous ​**Name** ​field, 4 new fields appears : that's our **options** fields ​!+Modifiez en conséquence le code de votre templateappliquez ces modifications ​dans l'​éditeuret voyons ce que cela a changé sur notre carteDans la partie à gauchesous le champ **Name**, ​on trouve maintenant notre champs d'​options !
  
-{{:​en:​tutorial:​01_ui04.png?​500|Our new fields}}+{{:​en:​tutorial:​01_ui04.png?​500|Nos champs d'​options !}}
  
-Nowlike we did previously, we'll add four new **Textboxes** ​in our ''​canvasFields'' ​sectionThose elements will have a **text** property set with the variables ​that are generated by our optionsWe'll use for that the text of the ''​value'' ​property, accessible via the variable ''​$myVariable''​. ​See the [[..:​template:​choice_input|documentation]] ​for more informations ​on variables ​generated by those fields.+Comme précédemmentnous allons ajouter 4 **Textboxes** ​dans la section ​''​canvasFields''​. ​Ces éléments renseigneront leur propriété ''​text''​ avec les variables ​générées par les listes déroulantesNous utiliserons le texte de la propriété ​''​value'',​ accessible via la variable ''​$myVariable''​. ​Consultez la [[..:​template:​choice_input|documentation]] ​pour plus d'informations ​sur les variables ​générées par ces champs.
  
-We use again **textboxes**, with an adjustment of the color and the sizeHere is the added code, the first line being one already existing for you to know where to paste this code :+Nos **textbox** vont être ajustées au niveau de la taille et de la couleurVoici le code à ajouterla première ligne existant déjà et servant de point de repère ​:
  
 <code javascript>​ <code javascript>​
Ligne 206: Ligne 216:
 </​code>​ </​code>​
  
-We've now got an editable cardand when we change ​the value of one of our fields (Strength to 5for example), it is reflected on the image. ​But some fields are still missing. Now, let's illustrate our card !+Notre carte est maintenant éditableet chaque fois qu'une valeur ​change, ​l'image générée change en conséquenceIl est temps de passer à l'illustration ​! 
 +===== Photo d'​identité =====
  
-===== Mug Shot =====+Notre Champion a besoin d'une photo / illustration pour être correctement identifié. Pour cela, nous utiliserons un [[..:​template:​image_input|Champ Image]]. Ce type de champ permet à l'​utilisateur de charger une image pour chaque carte, image qui sera ensuite utilisée dans l'​image de la carte.
  
-Our Star Player need a photo / illustration to be correctly identified. For this purposewe'll use an [[..:template:​image_input|Image field]]. This type of field allows the user to load an image for each card, image that can then be used on the card+Actuellementle **Champ Image** est plutôt basique. ​[[https://​github.com/​Gulix/​geckos/​issues/​37|Des évolutions sont programmées]]. En attendant le développement de celles-cil'​utilisateur doit s'​assurer que le ratio de l'image qu'il charge correspond au ratio du cadre dans lequel ​on va l'​utiliser. Sinon, l'​image sera étirée.
  
-Right now, the **Image input** control is pretty basic. But it's [[https://​github.com/​Gulix/​geckos/​issues/​37|planned to evolve]]. Until completion of this Issue, the user has to ensure his image file corresponds,​ in ratio, to the image frame on the card. Or the image will be stretched. +Pour ajouter un **Champ Image**, ​ajoutons juste cette ligne à la section ​''​fields'' ​du template :
- +
-To add the **Image ​input** fieldjust add this line to the ''​fields'' ​part of the template :+
  
 <code javascript>​ <code javascript>​
Ligne 220: Ligne 229:
 </​code>​ </​code>​
  
-This field will generate a **$portray** ​variablewhich will contain the image in the form of a DataUrl (remember ​?). Just what we need to add an image to our canvas :+Ce champ génèrera une variable ​**$portray**, ​qui contiendra l'image sous forme de DataUrl (ça ne vous rappelle rien ?). Juste ce dont on a besoin pour notre canvas :
  
 <code javascript>​ <code javascript>​
Ligne 226: Ligne 235:
 </​code>​ </​code>​
  
-Apply those modifications to your template, ​and thenlook ...+Modifiez votre template, ​appliquez les modificationset admirez !
  
-{{:​en:​tutorial:​01_ui05.png?​500|Nobbla's Mug Shot}}+{{:​en:​tutorial:​01_ui05.png?​500|Nobbla ​en chair et en os !}}
  
-===== Do you have the skills ? =====+===== Bilan de compétences ​=====
  
-Three fields are still missing. Let's start with the easier one.+Trois champs manquent encore à l'appel. Commençons avec le plus aisé.
  
-==== Cost ====+==== Coût ====
  
-Each Star Player requires a certain ​amount of Gold Pieces to be recruited. Let's add an input field that will appear in the bottom of the cardThe editable field :+Chaque Champion nécessite un certain ​montant de Pièces d'Or pour être recrutéAjoutons un champ de texte pour renseigner cette valeur, qui apparaîtra en bas de la carte. 
 + 
 +Dans la partie ''​fields'' ​:
  
 <code javascript>​ <code javascript>​
Ligne 242: Ligne 253:
 </​code>​ </​code>​
  
-And the canvas field :+Dans la partie ''​canvasFields'' ​:
  
 <code javascript>​ <code javascript>​
Ligne 248: Ligne 259:
 </​code>​ </​code>​
  
-One new thing here is the use of the ''​fontStyle'' ​property in the canvas field. It sets the text to italicPretty easy to understand.+Première nouveauté, l'​utilisation de ''​fontStyle'' ​pour indiquer que le texte sera affiché en italiqueRien de bien compliqué là-dedans.
  
-The other thing is the use of an [[en:​template:​advanced_string_variables|Advanced String ​Variable]] ​with ''​$cost$ GP''​. ​It helps us build a more intelligent stringby always adding ​GP (Gold Pieces) ​to the cost string the user will useOf courseit could cause some issues ​(a Free star player ​?). But, again with a translated ​template ​in mindwe could easily change this value on the template. Or change the currency (SP for Silver Pieces ?).+Autre nouveauté, l'​utilisation d'​une ​[[en:​template:​advanced_string_variables|Variable ​de chaîne Avancée]] avec ''​$cost$ GP''​. ​Cela permet de construire une chaîne plus intelligenteen ajoutant ​GP (pour Gold Pieces) ​après le coût indiqué par l'​utilisateurBien sûrcela peut entraîner quelques soucis ​(un Champion gratuit ​?). Mais dans le cadre d'une traduction de template, ​cette valeur sera modifiée facilement
  
-==== Multilines ​====+==== A la ligne ====
  
-The next input field will be a new one the  ​[[..:​template:​multiline_text_input|Multiline Text Input]] fieldIt works like the classic ​**Text input** fieldbut allows the user to add line-breaksWe'll add two fields :+Nos prochains champs vont utiliser un nouveau type de champ le [[..:​template:​multiline_text_input|Champ de texte multiligne]]. Cela fonctionne comme un **Champ Texte** classiquemais l'​utilisateur peut y saisir des sauts de ligneAjoutons deux champs à notre section ''​fields''​ du template ​:
  
 <code javascript>​ <code javascript>​
Ligne 261: Ligne 272:
 </​code>​ </​code>​
  
-We now add two more **textboxes** that will be linked to these two fields ​:+Puis ajoutons les deux **textbox** correspondantes dans ''​canvasFields'' ​:
  
 <code javascript>​ <code javascript>​
Ligne 268: Ligne 279:
 </​code>​ </​code>​
  
-Those fields use an automatic wrapping method : lines that are too long are broken to be displayed on several linesAnd the user can still control when the line-breaks occur by setting them himself.+Ces champs utilisent un bornage automatique. Si le texte venait à être trop long pour la largeur spécifiée,​ un saut à la ligne automatique est ajoutéLes sauts de lignes de l'​utilisateur,​ saisis dans le champ éditable, sont évidemment pris en compte également. 
 +===== Et, c'est tout ? =====
  
-===== That's it ? =====+Pour ce tutoriel, oui, c'est tout. Vous disposez là d'un template fonctionnel pour vos cartes de Champions. Je vous encourage bien sûr à créer vos propres templates à l'aide de ce tutoriel et de cette base. Un espace de partage pour les templates est envisagé pour le futur, et la page de démo hébergera par défaut plusieurs templates ([[https://​github.com/​Gulix/​geckos/​issues/​30|cette évolution]] doit d'​abord être terminée).
  
-For this tutorialyesthat's it. You know have a functional template that allows you to get Star Player cards. Of coursewith the help of this tutorial, I encourage you to create your own template for your own needs. I will soon open a place to share the templates, and the demo page will host various templates (when [[https://​github.com/​Gulix/​geckos/​issues/​30|this issue]] is completed).+Si vous avez un souci avec ce tutorielou avec le logicieln'hésitez pas à demander de l'aidevia la création d'​un ​[[https://​github.com/​Gulix/​geckos/​issues/​new|ticket d'​incident]], ou via un message sur un forum où Geckos est présenté.
  
-If you have any trouble with this tutorial or the software, feel free to ask me for help, via the creation of an [[https://​github.com/​Gulix/​geckos/​issues/​new|Issue]],​ or via a message on a forum in which I'll participate. +===== Code complet du Template ​=====
- +
-===== Full code of the template ​=====+
  
 <code javascript template01-code.json>​ <code javascript template01-code.json>​
Ligne 282: Ligne 292:
     "​styles":​ [     "​styles":​ [
         {         {
 +            "​key":​ "​default",​
 +            "​name":​ "​Default",​
             "​fields":​ [             "​fields":​ [
                 { "​name":​ "​name",​ "​label":​ "​Name",​ "​default":​ "​Nobbla"​ },                 { "​name":​ "​name",​ "​label":​ "​Name",​ "​default":​ "​Nobbla"​ },
Ligne 356: Ligne 368:
             "​canvasHeight":​ 750             "​canvasHeight":​ 750
         }         }
-    ]+    ]
 +    "​description":​  
 +    { 
 +      "​description":​ "​Template for Blood Bowl's Starplayers,​ with the V3 design",​ 
 +      "​title":"​Blood Bowl Classic Starplayer",​ 
 +      "​credits":​ "by Nicolas Ronvel",​ 
 +      "​key":​ "​bb-starplayers-v3",​ 
 +      "​url":​ "​https://​github.com/​Gulix/​geckos/"​ 
 +    }
 } }
 </​code>​ </​code>​
fr/tutorial/tutorial01.1472639920.txt.gz · Dernière modification: 2016/08/31 12:38 par Nicolas Ronvel