Développer son premier jeu Web (1/x)
Mise en place de l'environnement de travail
Prérequis :
- Windows XP ou supérieur
- 2,5 Go d'espace disque dur
Sommaire :
- Introduction
- Choix du langage et de la plateforme
- Visual Studio Express 2012 for Web
- TypeScript
- Création du premier projet
- jQuery
- Git for Windows
- Personnalisation de Visual Studio
- L'alternative Notepad++
- Conclusion
1. Introduction
Quand on souhaite développer un jeu en tant qu'amateur, tout débute souvent par une idée originale ou simplement une envie venue à maturité qui nous pousse à franchir le pas et à nous lancer dans un projet de développement. Cependant, passée cette première étape, la réalité du concret reprend ses droits et on se pose fatalement de nombreuses questions : choix du langage, choix de la plateforme, choix des bibliothèques logicielles ou du moteur de jeux, etc. On peut se sentir assez facilement perdu, et à raison, tant ce n'est pas le manque d'innovations qui guettent l'industrie du logiciel de nos jours.
C'est pourquoi, après avoir moi-même tâtonné longtemps à chercher des outils et des solutions, cet article se veut une petite introduction pour partir sur des bases suffisamment stables dans un projet de développement qui comportera suffisamment de problèmes 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 plutôt qu'une autre est toujours matière à débats et à controverses. Ici, nous ne chercherons pas à justifier par A+B les choix faits, l'important étant d'obtenir au final un jeu qui fonctionne dans un délai raisonnable.
Nous opterons dans le cadre de cette discussion pour la plateforme Web, à savoir les principaux navigateurs du marché. Cela aura l'avantage d'avoir un jeu qui pourra tourner sur de nombreuses architectures techniques (Windows, Linux, Mac, Android, iOs, etc.) sans retoucher à la moindre ligne de code. Concernant le langage de nombreux choix sont possibles comme les moteurs de jeu tel Unity ou Unreal Engine, mais même si ces derniers sont reconnus actuellement dans le domaine des jeux vidéo, il n'en est pas de même dans l'industrie du logiciel prise dans son ensemble.
Nous partirons du postulat que parmi les motivations à développer un jeu, on peut trouver celle de vouloir apprendre ou se perfectionner dans l'activité même du développement pour un usage généraliste. C'est la raison pour laquelle choisir un moteur de jeux propriétaire ne nous aidera pas forcément à acquérir des connaissances utiles dans le monde de l'entreprise, qui recherche plus des compétences sur l'informatique de gestion.
Pour un jeu Web, si nous excluons donc les moteurs de jeux (et à fortiori les outils de création de jeux comme Game Maker ou RPG Maker) pour une raison de ré employabilité des connaissances ainsi apprises à travers un tel projet, un langage comme Javascript vient immédiatement à l'esprit, et à juste titre.
Javascript qui a connu une montée en puissance ces dernières années grâce 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 à consulter le projet Epic Citadel et ce qui se fait autour des technologies Emscripten et Asm.js.
Néanmoins, malgré un Javascript pratiquement incontournable dès qu'une application concerne le Web, il traîne encore l'héritage de son passé. Jadis conçu pour apporter une petite dose d'intelligence à 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 écrites en Javascript. Ce qui pose quelques problèmes de débogage à cause entre autre de son typage dynamique et aussi des problèmes d'architecture logicielle par l'absence de réelle notion de Programmation Orientée Objet, remplacée dans Javascript par la notion puissante de prototype, mais néanmoins différente.
Ceci étant dit, même si notre projet ne sera pas un monstre d'ingénierie logicielle, il y a fort à parier qu'il dépassera la dizaine de milliers de lignes 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 à debugger une erreur qui aurait été détectée à la compilation dans un langage de type C/C++.
Il existe actuellement deux principales alternatives intéressantes au Javascript pur qui sont CoffeScript et TypeScript. Ce sont tous deux des langages qui permettent de compiler le code source, typé et orienté objet, vers du Javascript, permettant ainsi de retomber sur nos pieds avec un code résultant en Javascript, interprétable 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 certes un peu moins mature que CoffeScript, mais a pour avantage d'être 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 également un projet Open Source dont le code est accessible à tous, et enfin il a été créé par le papa de C# qui travaille chez Microsoft ce qui est un gage de sérieux quoiqu'on en dise.
Le principal défaut de TypeScript est sa relative jeunesse, puisque le langage est toujours au stade de développement, même si une version de production est prévue d'ici la fin de l'année, ce qui restreint à l'heure actuelle les outils prenant en charge ce nouveau langage qui reste néanmoins promis à se pérenniser.
Pour tirer pleinement parti des possibilités de ce langage, papa de C# oblige, il nous faudra installer Visual Studio si vous ne l'avez pas déjà.
3. Visual Studio Express 2012 for Web
Visual Studio est un environnement de développement intégré (IDE) très populaire mis au point par Microsoft qui supporte nativement les principaux langages de l'éditeur (C#, ASP, J#) ainsi que le Javascript. Ce logiciel est payant et relativement onéreux pour une activité en amateur, mais heureusement il existe une version gratuite, Visual Studio Express, qui est cependant bridée avec notamment une restriction à un seul langage et une limitation dans l'ajout de modules complémentaires. Malgré tout, cela sera amplement suffisant pour nos besoins.
Il est recommandé de faire attention à bien télécharger la version anglaise et non pas française de Visual Studio, du fait d'un bug sur la localisation de la dernière version de TypeScript 0.9.1.
Téléchargez Visual Studio Express 2012 for Web - English
Ceci téléchargera 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 nécessite plus de 2 Go d'espace libre sur votre disque dur.
Laissez-vous guider par la procédure d'installation, simple mais assez longue, en restant sur les choix par défaut.
4. TypeScript
Une fois Visual Studio Express 2012 for Web installé, ainsi que les mises à jour de base et l'obtention d'une clé d'enregistrement pour usage privé, nous pouvons installer TypeScript.
Pour rappel, TypeScript est un langage fortement typé avec une syntaxe orientée-objet plus conventionnelle que celle du Javascript, et qui permet de générer au final du Javascript afin d'être interprété par tous les navigateurs.
L'avantage de ce langage réside 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.
Téléchargez le plugin TypeScript 0.9.1 pour Visual Studio
A noter que si vous avez installé une version différente que la version anglaise de Visual Studio Express 2012 for Web, alors le plugin de TypeScript ne fonctionnera pas.
5. Création du premier projet
Armés désormais de Visual Studio et de son plugin TypeScript, nous voilà prêt pour créer notre projet dans l'outil de développement.
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, désignera la notion spécifique à Visual Studio, tandis que le mot projet sans mise en forme en italique désignera la définition du langage courant, à savoir développer un jeu vidéo. La notion de solution est pour le moment facultative, car étant surtout nécessaire dans le cadre de grandes applications d'entreprise.
Pour créer un projet, cliquez sur le menu FILE > New Project, ou bien appuyez sur CTRL + MAJ + N. Une fenêtre de dialogue telle que ci-dessous devrait apparaître :
Puis saisissez les informations nécessaires dans les champs suivants :
Projet : PremierJeuVideo
Location : C:/Users/VotreCompte/Dev
Si vous n'avez pas de sous-répertoire Dev dans votre répertoire utilisateur dédié, je suppose que vous ne vous êtes pas connecté en Administrateur, alors Visual Studio le créera pour vous.
Veillez aussi à ce que l'option Create directory for solution soit décoché afin d'éviter de rajouter un niveau d'arborescence inutile.
Une fois la fenêtre de création de projet validée, vous pouvez ignorer la fenêtre suivante à propos du Team Foundation Server. Cela peut être éventuellement utile dans le cadre d'un projet en équipe, mais je suppose aussi que vous réalisez votre projet en solo.
Nous allons maintenant mettre en place une arborescence type qui nous permettra de ranger les multiples fichiers qui seront impliqués pour ce projet. Le but est au final d'obtenir l'arborescence minimale suivante :
Voici un rapide descriptif des répertoires de cette arborescence :
Code auto:0 : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
5
6
7
8
9
10
- art : ensemble des éléments artistiques du projet
- art/interface : ensemble des éléments d'interface utilisateur
- art/sounds : musiques et bruitages
- doc : documentation du projet
- doc/private : documentation interne
- doc/public : documentation utilisateur
- lib : bibliothèques Javascript personnalisée
- src : sous-projets contenant les fichiers sources
- tools : utilitaires divers facilitant la gestion du projet
Il est entendu que cette arborescence n'est pas complète. Elle sera complétée au fil des développements, notamment le répertoire "src" pour le moment vide.
La création de cette arborescence peut se faire à travers le panneau Solution Explorer qui devrait apparaître par défaut à droite.
A l'aide d'un clic droit sur l'élément PremierJeuVideo désignant la racine du projet, un menu contextuel devrait apparaître où vous pouvez choisir l'option Add > New Folder. De cette façon vous pourrez créer simplement l'arborescence du projet au sein de Visual Studio.
6. jQuery
S'il y a un framework incontournable pour qui veut développer en Javascript, c'est bien jQuery développé et maintenu par Google.
Néanmoins, pour l'intégrer à nos développements TypeScript, il convient de générer un fichier d'interfaçage pour TypeScript afin que le compilateur puisse vérifier le typage de votre code utilisant jQuery.
Pour récupérer en local le framework jQuery ainsi que le fichier d'interfaçage TypeScript, c'est très simple, il suffit d'utiliser le module NuGet intégré à Visual Studio. Pour cela, dans le panneau Solution Explorer comme dans le paragraphe précédent, cliquez droit sur l'élément racine du projet PremierJeuVideo puis cliquez sur l'option Manage NuGet Packages.
Après une phase de chargement, voici le type d'écran qui devrait s'afficher :
Le package jQuery devrait arriver en tête de liste. Si ce n'est pas le cas, vous pouvez le rechercher à l'aide de la zone de recherche en haut à droite. Cliquez sur le bouton Install.
En l'état, jQuery est opérationnel pour qui veut programmer en Javascript, mais comme dit précédemment, il a besoin d'un complément pour que TypeScript puisse l'exploiter.
Dans le champ de saisie de recherche en haut à droite, tapez : jquery.Typescript.DefinitelyTyped
Puis cliquez sur le bouton Install sur l'élément correspondant à notre recherche (en principe le premier) dans la zone principale de la fenêtre
A l'issue de cette étape, nous venons d'installer avec succès jQuery pour TypeScript.
7. Git for Windows
Un cycle de développement n'est jamais linéaire et gérer manuellement les versions de ses fichiers sources quand ceux-ci se multiplient peut se révéler un véritable casse-tête.
Pour répondre à ce problème aussi ancien que la programmation, les développeurs ont mis au point des outils pour gérer les modifications apportées 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'être simple à utiliser et compatible avec la solution d'hébergement de sources en ligne GitHub.
Téléchargez Git for Windows
Lors de l'installation, il est recommandé de laisser toutes les options par défaut.
Une fois installé, nous allons indiquer à Git d'utiliser le répertoire de la solution précédemment créée avec Visual Studio en cliquant sur l'option Créer un nouveau dépôt.
Dans la zone de saisie, tapez le répertoire du projet que vous avez créé avec Visual Studio précédemment : C:/Users/VotreCompte/Dev/PremierJeuVideo
Indiquons maintenant à Git de suivre les modifications de tous les fichiers du projet en les sélectionnant tout d'abord :
- mettre en surbrillance le tout premier élément de la liste en haut à gauche,
- faire défiler l'ascenseur pour parvenir tout en bas,
- maintenir la touche MAJ et cliquer sur le dernier élément.
Une fois tous les fichiers sélectionnés, nous pouvons en demander l'indexation de trois façons :
- En sélectionner dans le menu Commit > Indexer
- En cliquant sur le bouton Indexer modifs.
- En tapant sur CTRL + T.
Si une boite de dialogue apparaît pour avertir qu'un nombre important de fichiers sont sur le point d'être indexés, ignorez-là simplement et poursuivez.
Si une boite de dialogue apparaît pour vous demander de réaliser une conversion de retour chariot, accepter la conversion en cliquant sur le bouton Continuer.
Désormais, tous les fichiers qui se trouvaient dans le panneau des Modifs non indexées en haut à gauche, devraient apparaitre maintenant dans le panneau des Modifs indexées (pour commit) en bas à gauche.
Dans la zone de saisie inférieure, correspondant à la description de vos modifications, tapons le texte "Initialisation", et cliquons sur le bouton Commiter.
Nous venons ainsi de créer le dépôt de suivi des changements de notre projet dans Git ce qui sera très utile lorsque vous souhaiterez revenir sur une ou plusieurs modifications malencontreuses.
Nous pouvons apporter un petit raffinement à notre suivi des changements dans la mesure où certains fichiers sont générés et modifiés automatiquement par Visual Studio comme les fichiers internes de Visual Studio pour gérer le projet, ou bien les fichiers de travail qui seront générés lors des compilations. A l'aide d'un éditeur de texte, dans le répertoire du projet, ici en l'occurrence C:\Users\VotreCompte\Dev\PremierJeuVideo\, créez un fichier dénommé .gitignore avec le contenu suivant :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
2
3
4
5
6
7
8
8. Personnalisation de Visual Studio
Visual Studio y compris dans son édition Express est un outil très puissant. Néanmoins, cela ne l'exonère pas de quelques lacunes qu'il est possible de combler à l'aide d'outils externes.
Il sera par exemple utile de pouvoir compiler indépendamment du reste du projet un seul fichier TypeScript, notamment pour des raisons de rapidité. Tout comme il peut être intéressant d'appeler Git for Windows sans quitter Visual Studio.
On peut rajouter un appel à ces deux outils simplement en cliquant sur le menu TOOLS > External Tools.
Si vous avez laissé les options par défaut durant l'installation de ces deux outils, voici les paramètres à saisir pour ces deux outils.
Paramètres pour TypeScript
- Title: TypeScript
- Command: C:\Program Files\Microsoft SDKs\TypeScript\tsc.exe
- Arguments: $(ItemPath)
- Initial directory: $(ItemDir)
Paramètres 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)
9. L'alternative Notepad++
Si vous êtes allergique à Visual Studio et sa consommation de mémoire vive de plusieurs centaines de Mo, vous pouvez vous rabattre sur des éditeurs plus simples et moins gourmands en ressources machine.
Si vous êtes sur le système d'exploitation Windows, il existe une solution open source qui a fait ses preuves : Notepad++
En plus d'être à la base un éditeur de texte très puissant, il s'est vu rajouter de nombreuses fonctionnalités au fil du temps faisant de lui un outsider non négligeable par rapport à des solutions commerciales dans le domaine du développement logiciel.
Même si vous ne comptez pas programmer votre jeu avec Notepad++, je vous recommande néanmoins 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.
Téléchargez Notepad++
Une fois Notepad++ installé puis lancé, configurons-le pour en faire un environnement TypeScript friendly.
Encodage
Le compilateur TypeScript dans sa version 0.9 n'accepte plus que les fichiers encodés en UTF-8. Pour éviter de se retrouver devant de mystérieuses erreurs d'inclusion de fichiers, activons d'emblée le mode UTF-8 par défaut. Pour cela, cliquez sur le menu Paramétrage > Préférences > Nouveau document. Sélectionnez la troisième option, UTF-8.
Auto complétion
L'auto complétion est une fonction dans un environnement de développement qui permet d'accélérer sensiblement la saisie à partir des premiers caractères en se basant sur l'ensemble des variables, des fonctions et autres identificateurs déjà déclarés dans le projet, tout en filtrant les possibilités 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'à ce raffinement, mais permet tout de même de proposer une liste de l'ensemble des mots déjà présent dans un fichier source. Pour activer cette possibilité, il faut cliquer sur le menu Paramétrage > Préférences > Auto complétion, puis sélectionnez les options suivantes :
- Activer la complétion automatique > Complétion de mot
- Paramètres affichés durant la saisie
- A partir du 2 è caractère
Coloration syntaxique
Bien qu'il n'existe pas à ma connaissance de fichier de définition de coloration syntaxique pour TypeScript, nous pouvons utiliser une possibilité bien pratique offerte par Notepad++, à savoir la possibilité d'étendre la coloration syntaxique d'un langage déjà défini.
Pour cela cliquez sur le menu Paramétrage > Configurateur de coloration syntaxique.
Tout d'abord, vous pouvez si vous le souhaitez changer ici le thème de votre éditeur. Certains développeurs préfèrent non sans raison un fond moins vif que le blanc brillant par défaut, mais cela reste avant tout une histoire de goûts personnels.
Dans la première liste de gauche, recherchez et sélectionnez l'élément Javascript.
Dans la deuxième liste, sélectionnez l'élément KEYWORD.
Dans la zone de saisie en bas dénommée Ext. utilisateur, saisissez ts qui est l'extension des fichiers TypeScript.
Enfin, dans la zone de saisie tout à droite dénommée Mots-clés utilisateur, saisissez les uns à 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 à notre situation :
- NppExec
- XML Tools
Pour vérifier si ces deux plugins sont installés ou non, il suffit de cliquer sur le menu Compléments et de rechercher ces deux noms. Si au moins l'un des deux manque à l'appel, pas de souci, l'installation d'un plugin est très simple grâce à un autre plugin qui est livré par défaut avec l'outil, à savoir Plugin Manager qu'on peut retrouver également dans ce menu Compléments.
Plugin Manager un petit module qui permet de rechercher l'ensemble des plugins disponibles et de les installer. C'est en quelque sorte l'équivalent de NuGet sous Visual Studio.
Une fois ces deux plugins d'installés, et surtout NppExec, nous pourrons définir les commandes prédéfinies suivantes :
- TypeScript
- Git for Windows
La procédure de définition est identique pour ces trois commandes, seule le script d'exécution varie. Cette procédure est la suivante :
1. Cliquez sur le menu Compléments > 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 à votre commande
5. Cliquez sur le menu Compléments > 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 déroulant Associated script qui se trouve juste en dessous, choisissez la commande souhaitée puis valider en cliquant sur le bouton OK.
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"
Après, rien ne vous empêche d'ajouter les commandes de votre choix comme make/jake, node.js et bien d'autres, mais cela dépasserait sans doute le cadre de cet article.
10. Conclusion
Comme nous venons de le voir, l'installation d'un environnement de développement en TypeScript n'est pas très compliquée, mais n'est pas si triviale non plus lorsqu'on démarre de rien, ce qui est souvent le cas quand on débute dans le développement.
Tout ce qui est décrit dans cet article est absolument facultatif. En effet, il est tout à fait possible de réaliser un projet sans mettre en place toute cette logistique, mais tôt ou tard, à 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 à postériori que de partir sur de bonnes bases.
En espérant que cet article vous sera utile.
Répondre avec citation
Partager