Mise en place de l'environnement de travail

Prerequis :

• Windows XP ou superieur
  
• 2,5 Go d'espace disque dur
  

(0.1)

Sommaire :

• Introduction
  
• Choix du langage et de la plateforme
  
• Visual Studio Express 2012 for Web
  
• TypeScript
  
• Creation du premier projet
  
• jQuery
  
• Git for Windows
  
• Personnalisation de Visual Studio
  
• L'alternative Notepad++
  
• Conclusion
  

(0.2)

1. Introduction

Quand on souhaite developper un jeu en tant qu'amateur, tout debute souvent par une idee originale ou simplement une envie venue a maturite qui nous pousse a franchir le pas et a nous lancer dans un projet de developpement. Cependant, passe cette premiere etape, la realite du concret reprend ses droits et on se pose fatalement de nombreuses questions : choix du langage, choix de la plateforme, choix des bibliotheques logicielles ou du moteur de jeux, etc. On peut se sentir assez facilement perdu, et a raison, tant ce n'est pas le manque d'innovations qui guettent l'industrie du logiciel de nos jours.

C'est pourquoi, apres avoir moi-meme tatonne longtemps a chercher des outils et des solutions, cet article se veut une petite introduction pour partir sur des bases suffisamment stables dans un projet de developpement qui comportera suffisamment de problemes pour ne pas perdre inutilement du temps sur des questions de simple organisation mais qui ont leur importance si elles ne sont pas prises en compte.

2. Choix du langage et de la plateforme

Choisir une technologie plutot qu'une autre est toujours matiere a debats et a controverses. Ici, nous ne chercherons pas a justifier par A+B les choix faits, l'important etant d'obtenir au final un jeu qui fonctionne dans un delai raisonnable.

Nous opterons dans le cadre de cette discussion pour la plateforme Web, a savoir les principaux navigateurs du marche. Cela aura l'avantage d'avoir un jeu qui pourra tourner sur de nombreuses architectures techniques (Windows, Linux, Mac, Android, iOs, etc.) sans retoucher a la moindre ligne de code. Concernant le langage de nombreux choix sont possibles comme les moteurs de jeu tel Unity ou Unreal Engine, mais meme si ces derniers sont reconnus actuellement dans le domaine des jeux video, il n'en est pas de meme dans l'industrie du logiciel prise dans son ensemble.

Nous partirons du postulat que parmi les motivations a developper un jeu, on peut trouver celle de vouloir apprendre ou se perfectionner dans l'activite meme du developpement pour un usage generaliste. C'est la raison pour laquelle choisir un moteur de jeux proprietaire ne nous aidera pas forcement a acquerir des connaissances utiles dans le monde de l'entreprise, qui recherche plus des competences sur l'informatique de gestion.

Pour un jeu Web, si nous excluons donc les moteurs de jeux (et a fortiori les outils de creation de jeux comme Game Maker ou RPG Maker) pour une raison de re employabilite des connaissances ainsi apprises a travers un tel projet, un langage comme Javascript vient immediatement a l'esprit, et a juste titre.

Javascript qui a connu une montee en puissance ces dernieres annees grace aux travaux de normalisations du HTML et des CSS, est actuellement la pierre angulaire du Web dynamique. Tout ou presque est possible avec Javascript. Pour s'en convaincre, j'invite les lecteurs a consulter le projet Epic Citadel et ce qui se fait autour des technologies Emscripten et Asm.js.

Neanmoins, malgre un Javascript pratiquement incontournable des qu'une application concerne le Web, traine encore l'heritage de son passe. Jadis concu pour apporter une petite dose d'intelligence a des sites Web sous la forme de quelques lignes de codes, ce sont aujourd'hui des applications de plusieurs dizaines, voire centaines de milliers de lignes qui sont ecrites en Javascript. Ce qui pose quelques problemes de debogage a cause entre autre de son typage dynamique et aussi des problemes d'architecture logicielle par l'absence de reelle notion de Programmation Orientee Objet, remplacee dans Javascript par la notion puissante de prototype, mais neanmoins differente.

Ceci etant dit, meme si notre projet ne sera pas un monstre d'ingenierie logicielle, il y a fort a parier qu'il depassera la dizaine de milliers de ligne de code (en comptant les commentaires). Ce qui risque de poser un petit souci de confiance envers le code produit ainsi que des dizaines et des dizaines d'heures perdues a debugger une erreur qui aurait ete detectee a la compilation dans un langage de type C/C++.

Il existe actuellement deux principales alternatives interessantes au Javascript pur qui sont CoffeScript et TypeScript. Ce sont tous deux des langages qui permettent de compiler le code source, type et oriente objet, vers du Javascript, permettant ainsi de retomber sur nos pieds avec un code resultant en Javascript, interpretable sur tous les navigateurs.

Sans rentrer dans une guerre de religion pour l'un ou pour l'autre, nous choisirons ici le langage TypeScript qui est certain un peu moins mature que CoffeScript, mais a pour avantage d'etre un sur-ensemble de Javascript (autrement dit, du code Javascript natif est directement reconnu sous TypeScript, ce qui n'est pas le cas de CoffeScript), c'est un projet Open Source dont le code est accessible a tous, et a ete cree par le papa de C# qui travaille chez Microsoft ce qui est un gage de serieux quoiqu'on en dise.

Le principal defaut de TypeScript est sa relative jeunesse, puisque le langage est toujours au stade de developpement, meme si une version de production est prevue d'ici la fin de l'annee, ce qui restreint a l'heure actuelle les outils prenant en charge ce nouveau langage qui reste neanmoins promis a se perenniser.

Pour tirer pleinement parti des possibilites de ce langage, papa de C# oblige, il nous faudra installer Visual Studio si vous ne l'avez pas deja.

3. Visual Studio Express 2012 for Web

Visual Studio est un environnement de developpement integre (IDE) tres populaire mis au point par Microsoft qui supporte nativement les principaux langages de l'editeur (C#, ASP, J#) ainsi que le Javascript. Ce logiciel est payant et relativement onereux pour une activite en amateur, mais heureusement il existe une version gratuite, Visual Studio Express, qui est cependant bridee avec notamment une restriction a un seul langage et une limitation dans l'ajout de modules complementaires. Malgre tout, cela sera amplement suffisant pour nos besoins.

Il est recommande de faire attention a bien telecharger la version anglaise et non pas francaise de Visual Studio, du fait d'un bug sur la localisation de la derniere version de TypeScript 0.9.1.

Telechargez Visual Studio Express 2012 for Web - English

Ceci telechargera l'image ISO de Visual Studio Express 2012 for Web - English, et pour lancer l'installation proprement dire, il vous faudra soit graver sur un CD ou bien utiliser un logiciel de virtualisation tel Virtual Clone Drive dont on pourra trouver des tutoriels sur la toile tel que celui-ci.

A noter aussi que l'installation necessite plus de 2 Go d'espace libre sur votre disque dur.

Laissez-vous guider par la procedure d'installation, simple mais assez longue, en restant sur les choix par defaut.

4. TypeScript

Une fois Visual Studio Express 2012 for Web installe, ainsi que les mises a jour de base et l'obtention d'une cle d'enregistrement pour usage prive, nous pouvons installer TypeScript.

Pour rappel, TypeScript est un langage fortement type avec une syntaxe orientee-objet plus conventionnelle que celle du Javascript, et qui permet de generer au final du Javascript afin d'etre interprete par tous les navigateurs.

L'avantage de ce langage reside en partie sur le fait que c'est un sur-ensemble du Javascript et ce qui lui permet d'accepter nativement n'importe quel code Javascript.

Telechargez le plugin TypeScript 0.9.1 pour Visual Studio

A noter que si vous avez installe une version differente que la version anglaise de Visual Studio Express 2012 for Web, alors le plugin de TypeScript ne fonctionnera pas.

5. Creation du premier projet

Armes desormais de Visual Studio et de son plugin TypeScript, nous voila pret pour creer notre projet dans l'outil de developpement.

Il faut tout d'abord savoir que Visual Studio fait une distinction logique entre la notion globale de solution et celle de projets qui sont des composants d'une solution. Tout au long de ce guide, le mot projet en italique, designera la notion specifique a Visual Studio, tandis que le mot projet sans mise en forme en italique designera la definition du langage courant, a savoir developper un jeu video. La notion de solution est pour le moment facultative, car etant surtout necessaire dans le cadre de grandes applications d'entreprise.

Pour creer un projet, cliquez sur le menu FILE > New Project, ou bien appuyez sur CTRL + MAJ + N. Une fenetre de dialogue telle que ci-dessous devrait apparaitre :

(5.1)

Puis saisissez les informations necessaires dans les champs suivants :
Projet : PremierJeuVideo
Location : C:/Users/VotreCompte/Dev

Si vous n'avez pas de sous-repertoire Dev dans votre repertoire utilisateur dedie, je suppose que vous ne vous etes pas connecte en Administrateur, alors Visual Studio le creera pour vous.

Veillez aussi a ce que l'option Create directory for solution soit decoche afin d'eviter de rajouter un niveau d'arborescence inutile.

Une fois la fenetre de creation de projet validee, vous pouvez ignorer la fenetre suivante a propos du Team Foundation Server. Cela peut etre eventuellement utile dans le cadre d'un projet en equipe, mais je suppose aussi que vous realisez votre projet en solo.

Nous allons maintenant mettre en place une arborescence type qui nous permettra de ranger les multiples fichiers qui seront impliques pour ce projet. Le but est au final d'obtenir l'arborescence minimale suivante :
PremierJeuVideo \-- art | \-- interface | \-- sounds +-- doc | \-- private | \-- public \-- lib \-- src \-- tools

(5.2)

Voici un rapide descriptif des repertoires de cette arborescence :

• art : ensemble des elements artistiques du projet
  
• art/interface : ensemble des elements d'interface utilisateur
  
• art/sounds : musiques et bruitages
  
• doc : documentation du projet
  
• doc/private : documentation interne
  
• doc/public : documentation utilisateur
  
• lib : bibliotheques Javascript personnalisee
  
• src : sous-projets contenant les fichiers sources
  
• tools : utilitaires divers facilitant la gestion du projet
  

(5.3)

Il est entendu que cette arborescence n'est pas complete. Elle sera completee au fil des developpements, notamment le repertoire "src" pour le moment vide.

La creation de cette arborescence peut se faire a travers le panneau Solution Explorer qui devrait apparaitre par defaut a droite.

(5.4)

A l'aide d'un clic droit sur l'element PremierJeuVideo designant la racine du projet, un menu contextuel devrait apparaitre ou vous pouvez choisir l'option Add > New Folder. De cette facon vous pourrez creer simplement l'arborescence du projet au sein de Visual Studio.

6. jQuery

S'il y a un framework incontournable pour qui veut developper en Javascript, c'est bien jQuery developpe et maintenu par Google.

Neanmoins, pour l'integrer a nos developpements TypeScript, il convient de generer un fichier d'interfacage pour TypeScript afin que le compilateur puisse verifier le typage de votre code utilisant jQuery.

Pour recuperer en local le framework jQuery ainsi que le fichier d'interfacage TypeScript, c'est tres simple, il suffit d'utiliser le module NuGet integre a Visual Studio. Pour cela, dans le panneau Solution Explorer comme dans le paragraphe precedent, cliquez droit sur l'element racine du projet PremierJeuVideo puis cliquez sur l'option Manage NuGet Packages.

Apres une phase de chargement, voici le type d'ecran qui devrait s'afficher :

(6.1)

Le package jQuery devrait arriver en tete de liste. Si ce n'est pas le cas, vous pouvez le rechercher a l'aide de la zone de recherche en haut a droite. Cliquez sur le bouton Install.

En l'etat, jQuery est operationnel pour qui veut programmer en Javascript, mais comme dit precedemment, il a besoin d'un complement pour que TypeScript puisse l'exploiter.

Dans le champ de saisie de recherche en haut a droite, tapez : jquery.Typescript.DefinitelyTyped

Puis cliquez sur le bouton Install sur l'element correspondant a notre recherche (en principe le premier) dans la zone principale de la fenetre

A l'issue de cette etape, nous venons d'installer avec succes jQuery pour TypeScript.

7. Git for Windows

Un cycle de developpement n'est jamais lineaire et gerer manuellement les versions de ses fichiers sources quand ceux-ci se multiplient peut se reveler un veritable casse-tete.

Pour repondre a ce probleme aussi ancien que la programmation, les developpeurs ont mis au point des outils pour gerer les modifications apportees aux fichiers sources. Il en existe de nombreux qui se regroupent sous l'appellation CVS (Control Version System). Nous utiliserons l'un d'entre eux qui se nomme Git for Windows qui a l'avantage d'etre simple a utiliser et compatible avec la solution d'hebergement de sources en ligne [color=#0000FF]GitHub[/color].

Telechargez Git for Windows

Lors de l'installation, il est recommande de laisser toutes les options par defaut.

Une fois installe, nous allons indiquer a Git d'utiliser le repertoire de la solution precedemment creee avec Visual Studio en cliquant sur l'option Creer un nouveau depot.

Dans la zone de saisie, tapez le repertoire du projet que vous avez cree avec Visual Studio precedemment : C:/Users/VotreCompte/Dev/PremierJeuVideo

(7.1)

Indiquons maintenant a Git de suivre les modifications de tous les fichiers du projet en les selectionnant tout d'abord :

• mettre en surbrillance le tout premier element de la liste en haut a gauche,
  
• faire defiler l'ascenseur pour parvenir tout en bas,
  
• maintenir la touche MAJ et cliquer sur le dernier element.
  

(7.2)

Une fois tous les fichiers selectionnes, nous pouvons en demander l'indexation de trois facons :

1. En selectionner dans le menu Commit > Indexer
   
2. En cliquant sur le bouton Indexer modifs.
   
3. En tapant sur CTRL + T.
   

(7.3)

Si une boite de dialogue apparait pour avertir qu'un nombre important de fichiers sont sur le point d'etre indexes
Si une boite de dialogue apparait pour vous demander de realiser une conversion de retour chariot, accepter la conversion en cliquant sur le bouton Continuer.

Desormais, tous les fichiers qui se trouvaient dans le panneau des Modifs non indexees en haut a gauche, devraient apparaitre maintenant dans le panneau des Modifs indexees (pour commit) en bas a gauche.

Dans la zone de saisie inferieure, correspondant a la description de vos modifications, tapons le texte "Initialisation", et cliquons sur le bouton Commiter.

Nous venons ainsi de creer le depot de suivi des changements de notre projet dans Git ce qui sera tres utile lorsque vous souhaiterez revenir sur une ou plusieurs modifications malencontreuses.

Nous pouvons apporter un petit raffinement a notre suivi des changements dans la mesure ou certains fichiers sont generes et modifies automatiquement par Visual Studio comme les fichiers internes de Visual Studio pour gerer le projet, ou bien les fichiers de travail qui seront generes lors des compilations. A l'aide d'un editeur de texte, dans le repertoire du projet, ici en l'occurrence C:\Users\VotreCompte\Dev\PremierJeuVideo\, creez un fichier denomme .gitignore avec le contenu suivant :
.gitignore:pakages.config*.csproj*.csproj.user*.sln*.suobin/obj/

(7.4)

8. Personnalisation de Visual Studio

Visual Studio y compris dans son edition Express est un outil tres puissant. Neanmoins, cela ne l'exonere pas de quelques lacunes qu'il est possible de combler a l'aide d'outils externes.

Il sera par exemple utile de pouvoir compiler independamment du reste du projet un seul fichier TypeScript, notamment pour des raisons de rapidite. Tout comme il peut etre interessant d'appeler Git for Windows sans quitter Visual Studio.

On peut rajouter un appel a ces deux outils simplement en cliquant sur le menu TOOLS > External Tools.

(8.1)

Si vous avez laisse les options par defaut durant l'installation de ces deux outils, voici les parametres a saisir pour ces deux outils.

Parametres pour TypeScript

• Title: TypeScript
  
• Command: C:\Program Files\Microsoft SDKs\TypeScript\tsc.exe
  
• Arguments: $(ItemPath)
  
• Initial directory: $(ItemDir)
  

(8.2)

Parametres pour Git for Windows

• Title: Git for Windows
  
• Command: C:\Program Files\Git\bin\wish.exe
  
• Arguments: "C:\Program Files\Git\libexec\git-core\git-gui"
  
• Initial directory: $(SolutionDir)
  

(8.3)

9. L'alternative Notepad++

Si vous etes allergique a Visual Studio et sa consommation de memoire vie de plusieurs centaines de Mo, vous pouvez vous rabattre sur des editeurs plus simples et moins gourmands en ressources machine.

Si vous etes sur le systeme d'exploitation Windows, il existe une solution open source qui a fait ses preuves : Notepad++

En plus d'etre a la base un editeur de texte tres puissant, il s'est vu rajouter de nombreuses fonctionnalites au fil du temps faisant de lui un outsider non negligeable par rapport a des solutions commerciales dans le domaine du developpement logiciel.

Meme si vous ne comptez pas programmer votre jeu avec Notepad++, je vous recommande neanmoins de l'installer pour tous les services qu'il pourra vous rendre comme la conversion des fichiers en UTF8 et ses plugins de formatage de fichiers XML.

Telechargez Notepad++

Une fois Notepad++ installe puis lance, configurons-le pour en faire un environnement TypeScript friendly.

Encodage

Le compilateur TypeScript dans sa version 0.9 n'accepte plus que les fichiers encodes en UTF-8. Pour eviter de se retrouver devant de mysterieuses erreurs d'inclusion de fichiers, activons d'emblee le mode UTF-8 par defaut. Pour cela, cliquez sur le menu Parametrage > Preferences > Nouveau document. Selectionnez la troisieme option, UTF-8.

Auto completion

L'auto completion est une fonction dans un environnement de developpement qui permet d'accelerer sensiblement la saisie a partir des premiers caracteres en se basant sur l'ensemble des variables, des fonctions et autres identificateurs deja declares dans le projet, tout en filtrant les possibilites en fonction du contexte de la saisie (eg. seuls les attributs de l'objet courant seront pris en compte).

Notepad ne permet pas d'aller jusqu'a ce raffinement, mais permet tout de meme de proposer une liste de l'ensemble des mots deja present dans un fichier source. Pour activer cette possibilite, il faut cliquer sur le menu Parametrage > Preferences > Auto completion, puis selectionnez les options suivantes :

• Activer la completion automatique > Completion de mot
  
• Parametres affiches durant la saisie
  
• A partir du 2 e caractere
  

(9.1)

Coloration syntaxique
Bien qu'il n'existe pas a ma connaissance de fichier de definition de coloration syntaxique pour TypeScript, nous pouvons utiliser une possibilite bien pratique offerte par Notepad++, a savoir la possibilite d'etendre la coloration syntaxique d'un langage deja defini.

Pour cela cliquez sur le menu Parametrage > Configurateur de coloration syntaxique.

(9.2)

Tout d'abord, vous pouvez si vous le souhaitez changer ici le theme de votre editeur. Certains developpeurs preferent non sans raison un fond moins vif que le blanc brillant par defaut, mais cela reste avant tout une histoire de gouts personnels.

Dans la premiere liste de gauche, recherchez et selectionnez l'element Javascript.
Dans la deuxieme liste, selectionnez l'element KEYWORD.

Dans la zone de saisie en bas denommee Ext. utilisateur, saisissez ts qui est l'extension des fichiers TypeScript.

Enfin, dans la zone de saisie tout a droite denommee Mots-cles utilisateur, saisissez les uns a la suite des autres, les mots suivants :
any boolean class constructor declare enum export extends implements import interface module number public private require static string super

Il existe de nombreux plugins pour Notepad++. Parmi eux, deux seront indispensables a notre situation :

• NppExec
  
• XML Tools
  

(9.3)

Pour verifier si ces deux plugins sont installes ou non, il suffit de cliquer sur le menu Complements et de rechercher ces deux noms. Si au moins l'un des deux manque a l'appel, pas de souci, l'installation d'un plugin est tres simple grace a un autre plugin qui est livre par defaut avec l'outil, a savoir Plugin Manager qu'on peut retrouver egalement dans ce menu Complements.

Plugin Manager un petit module qui permet de rechercher l'ensemble des plugins disponibles et de les installer. C'est en quelque sorte l'equivalent de NuGet sous Visual Studio.

Une fois ces deux plugins d'installes, et surtout NppExec, nous pourrons definir les commandes predefinies suivantes :

• TypeScript
  
• Git for Windows
  

(9.4)

La procedure de definition est identique pour ces trois commandes, seule le script d'execution varie. Cette procedure est la suivante :
1. Cliquez sur le menu Complements > NppExec > Execute, ou appuyer sur la touche F6.
2. Dans la zone de saisie, tapez le script de la commande
3. Cliquer sur le bouton Save
4. Donner un nom a votre commande
5. Cliquez sur le menu Complements > NppExec > Advanced Options. Dans la boite de dialogue qui s'affiche, seule la zone Menu Item est vraiment importante.
6. Dans le champ de saisie Item name, taper le nom de votre commande.
7. Dans le menu deroulant Associated script qui se trouve juste en dessous, choisissez la commande souhaitee puis valider en cliquant sur le bouton OK.

(9.5)

Script de commande TypeScript

cd "$(CURRENT_DIRECTORY)"
tsc.exe "$(FILE_NAME)"

Script de commande Git for Windows

"C:\Program Files\Git\bin\wish.exe" "C:\Program Files\Git\libexec\git-core\git-gui"

Apres, rien ne vous empeche d'ajouter les commandes de votre choix comme make/jake, node.js et bien d'autres, mais cela depasserait sans doute le cadre de ce guide.

10. Conclusion

Comme nous venons de le voir, l'installation d'un environnement de developpement en TypeScript n'est pas tres compliquee, mais n'est pas si triviale non plus lorsqu'on demarre de rien, ce qui est souvent le cas quand on debute dans le developpement.

Tout ce qui est decrit dans cet article est absolument facultatif. En effet, il est tout a fait possible de realiser un projet sans mettre en place toute cette logistique, mais tot ou tard, a mesure de la complexification de l'application, le besoin d'organisation se fera ressentir, et il sera plus difficile d'y remettre de l'ordre a posteriori que de partir sur de bonnes bases.

En esperant que cet article vous a ete utile.

( Partie 2 )