Microsoft Popfly démocratise le développement des jeux sur PC

Author : John Montgomery, Group Manager, Microsoft Popfly,
Blog : http://blogs.msdn.com/johnmont/

This article appeared in the Expression Newsletter; subscribe to get the next issue.

Microsoft Popfly ( http://www.popfly.com ) est un outil Web simple qui permet de créer et partager des applications (pages Web, applications Web hybrides ou jeux occasionnels) pouvant être intégrées à des pages Web personnelles, des blogs ou des pages Facebook. Conçu pour être utilisé par des personnes ayant peu de connaissances en programmation, voire aucune, il permet de créer rapidement des contenus Web à la présentation soignée. Pour arriver à ce résultat, nous avons dû créer un environnement de programmation Web d'un nouveau genre, à la fois léger et facile à utiliser.

Dans cet article, nous allons brièvement examiner les concepts de base qui nous ont guidés lors de la création de Popfly, puis nous créerons un jeu simple qui nous permettra de mettre ces concepts en application.

Acteurs et scènes : les concepts Popfly

Lorsque nous avons conçu Popfly, nous voulions avant tout en faire un service convivial à la portée de tous. Nous nous sommes donc efforcés de remplacer les concepts de programmation les plus courants par des abstractions visuelles. Ainsi, certains composants complexes caractéristiques de l’univers des jeux (niveaux, éditeurs de niveaux et de personnages, événements et mouvements) ont été remplacés par un ensemble de concepts plus simples dans lequel les jeux ne sont rien de plus que des acteurs intervenant dans différentes scènes.

De la même façon, nous avons remplacé des concepts de programmation courants tels que les événements par la notion de comportement. Les comportements du jeu sont affectés à des acteurs et à des scènes ; ils permettent de regrouper un événement et les actions qui doivent se produire lorsque ce dernier se produit.

Le concept de jeu a été conservé pour des éléments plus généraux tels que les scores. Enfin, nous voulions aussi que les utilisateurs puissent voir immédiatement le résultat de leurs créations, d’où l’ajout d’un bouton « Play! » qui permet de tester le jeu à tout moment.

Sur le plan pratique, Popfly est une application Silverlight qui utilise un grand nombre des technologies associées, notamment le marquage XAML utilisé par Silverlight et par Windows Presentation Foundation. Par exemple, lorsque les utilisateurs naviguent dans l’interface utilisateur de Popfly, leurs choix sont enregistrés au format XAML. Le moteur de jeu Popfly, qui est une combinaison de JavaScript, C # et XAML, lit le code XML et exécute le jeu en fonction des paramètres qui y sont définis. Cependant, pour les utilisateurs qui trouvent l’interface utilisateur de Popfly trop restrictive, nous avons aussi prévu la possibilité de créer des comportements en JavaScript et de télécharger des acteurs complexes utilisant du code XAML.

En ce qui concerne l’interface utilisateur, nous avons cherché à rendre Popfly le plus convivial possible. L’utilisation d’icônes plus grandes et plus explicites nous a permis de réduire au strict minimum la quantité de texte affiché dans les boîtes de dialogue. Nous nous sommes également efforcés d'éviter cette multiplication d’icônes qui alourdit l’interface de si nombreux programmes. Côté couleurs et polices, nous avons préféré des couleurs vives aux tons noirs et gris habituels, ainsi que des polices à la fois lisibles et plus originales qu’à l’accoutumée. Nous avons également fait en sorte que les utilisateurs d’écrans présentant une résolution de 1024 x  768 puissent eux aussi utiliser Popfly.

Création d’un jeu simple sous Popfly

Pour illustrer ces explications, nous allons créer un jeu simple mettant en scène deux acteurs dont l’un poursuit l’autre, qui à son tour suit les mouvements de la souris. Accédez au site Popfly ( http://www.popfly.com ), connectez-vous et cliquez sur « Create a Game  ». Popfly affiche un ensemble de modèles représentant les types de jeux que vous pouvez créer. Vous pourriez aussi copier un jeu créé par une autre personne, mais pour l’instant, cliquez simplement sur « …or start from scratch ».

Cliquez sur l’icône « Scenes ». Vous pouvez voir que 5 scènes par défaut (« Intro », « Main », « Won », « Lost » et « How to Play ») ont déjà été intégrées à votre jeu, ce qui est largement suffisant pour l’opération que nous allons effectuer. En revanche, nous allons remplacer l'arrière-plan blanc par quelque chose d'un peu plus animé. Pour ce faire, vous pouvez choisir parmi les nombreux arrière-plans proposés par Popfly ou télécharger l’arrière-plan de votre choix. Dans le cas présent, choisissez un arrière-plan dans la liste proposée.

Cliquez sur le bouton « Save   » pour enregistrer votre progression.

Nous devons maintenant ajouter des acteurs. Pour ce faire, cliquez sur l’icône « Actors   » affichée en haut à gauche du créateur de jeux. Popfly affiche une longue liste de personnages disponibles, mais nous décidons qu’aucun ne nous convient. Nous allons plutôt apporter au jeu une touche plus personnelle en téléchargeant nos propres personnages.

Cliquez sur l’icône « Game   ». La partie droite de l’écran affiche des options permettant d’ajouter des fichiers à partir du Web ou de votre ordinateur. Dans le cas présent, nous allons sélectionner deux fichiers qui se trouvent sur l’ordinateur, à savoir adam.jpg et john.jpg. Popfly télécharge chaque fichier automatiquement dès que vous cliquez dessus, sans attendre que vous ayez cliqué sur le bouton correspondant. Les deux acteurs que nous venons de télécharger seront le héros du jeu et son adversaire.

La prochaine étape consiste à transformer ces images statiques en acteurs. Pour ce faire, cliquez sur le bouton « Actors », puis sur « New ». Ensuite, cliquez sur l’icône « Actor 1 » qui vient d’être créée puis sur l’icône «  Appearance   » affichée au-dessous et désignée par une flèche. Cette flèche fait partie des indications affichées par Popfly lorsque la prochaine étape à effectuer n’est pas forcément évidente pour l’utilisateur.

Popfly affiche maintenant une palette de pinceaux, un outil texte et une zone qui permet d'entrer du code brut XAML, le langage de marquage utilisé pour l’affichage des objets sous Popfly. Nous allons en profiter pour apporter quelques modifications. Commençons par réduire la taille de l’acteur pour passer de la taille par défaut de 150 x 150 pixels à 40 x   40 pixels. Pour ce faire, il suffit de taper 40 dans les zones « Width » et « Height ».

Ensuite, nous allons ajouter l'une des images téléchargées à l'apparence de l'acteur. Cliquez sur la pellicule et choisissez l’image d’Adam dans le sélecteur d’images. Grâce à l’opération que nous avons effectuée à l’étape précédente, celle-ci s'affiche automatiquement au format 40 x 40. Cliquez sur la croix (X) affichée en haut à droite de la fenêtre de l'acteur. Il nous reste maintenant à effectuer les mêmes opérations pour John ; cliquez sur le bouton « New » et suivez les mêmes instructions que pour Adam.

Nos deux acteurs doivent maintenant être ajoutés à une scène. Cliquez sur le bouton « Scenes   » pour revenir à la scène principale. Dans la palette de gauche, vous pouvez voir que Popfly a automatiquement ajouté vos deux nouveaux acteurs. Il nous faut maintenant ajouter une instance de chaque acteur au jeu. Cliquez tout d’abord sur l’acteur 1, puis sur l’endroit où vous voulez qu’il apparaisse dans la scène. Recommencez l’opération pour le second acteur, en veillant à le placer à une certaine distance du premier. Ces positions définissent l’endroit où les acteurs apparaîtront au début du jeu.

À ce stade, cliquer sur « Play   » ne vous avancerait pas à grand-chose, puisque ces acteurs n'ont encore été associés à aucun comportement. Pour réaliser cette association, cliquez sur l’icône « Actors », puis sur l’acteur 1.

Dans l’éditeur affiché au-dessous de ce dernier, cliquez sur le bouton « Behaviors   ». Popfly peut interpréter un grand nombre de comportements de base : mouvement, tir, disparition, apparition, etc. Tous ces comportements sont construits sur le même modèle : les événements qui se produisent déclenchent un ensemble donné d’actions. Dans le cas présent, l’acteur 1 (notre héros) doit suivre les déplacements de la souris.

Nous devons donc l’associer à un mouvement. Pour ce faire, cliquez sur l’icône « Motion   ». Pour que l’acteur 1 suive les déplacements de la souris, il suffit de modifier un seul élément du comportement. Cliquez sur la propriété « Motion   » de « Motion 1 » pour accéder à l'éditeur de mouvements de Popfly.

L’éditeur de mouvements comprend plusieurs composants avec lesquels vous pourrez ensuite vous familiariser à tout moment. Pour l’heure, nous devons simplement modifier l’écran de base de deux façons. Tout d’abord, cliquez sur le bouton « Mouse », puis sur la flèche « Toward ». Cette association indique à l’acteur 1 qu’il doit se déplacer en se dirigeant toujours vers le pointeur de la souris. Vous pouvez définir d’autres propriétés telles que la vitesse maximale ou la durée de l’action, mais ces modifications ne sont pas nécessaires pour l’instant. Notez au passage qu'avec une vitesse par défaut de 100 pixels par seconde, notre héros n’a vraiment rien d’un sprinteur... Cliquez sur X pour fermer cet écran, puis cliquez de nouveau sur X pour fermer la fenêtre qui permet de définir le comportement de l'acteur 1.

La prochaine étape consiste à définir le comportement de l’acteur 2. Dans le cas présent, nous voulons qu’il suive l’acteur 1 en se déplaçant un peu plus rapidement. Cliquez sur l’acteur 2, puis sur « Behaviors », et ajoutez un mouvement en cliquant sur l’icône « Motion ». Comme précédemment, il nous suffit de modifier la propriété « Motion » de ce comportement. Pour ce faire, cliquez sur le bouton « Motion » affiché à côté de « Motion 1 ». Pour que l'acteur 2 suive l'acteur 1, nous devons définir ses mouvements en fonction de l'acteur 1. Cliquez sur le bouton « Actor », sélectionnez l’acteur 1 dans la fenêtre, cliquez sur X pour fermer cette fenêtre et sélectionnez « Toward ». Vous pouvez ajouter un peu de piment au jeu en définissant la vitesse maximale de l’acteur 2 sur 105, ce qui lui permettra de se déplacer un peu plus vite que l’acteur 1. Cliquez sur X dans l’angle supérieur droit de la fenêtre affichée pour la fermer, puis fermez également la fenêtre suivante.

Nous allons pouvoir tester notre jeu ! Pour ce faire, cliquez sur le bouton « Play   ». Lorsque l’écran d’introduction s’affiche, cliquez une seconde fois pour lancer le jeu. Sur votre écran, l’acteur 2 va poursuivre l'acteur 1, puis le rattraper et le pousser en dehors de l'écran.

Conclusion

Certes, ce jeu n’a pour l’instant rien de bien passionnant, mais il fonctionne ! Pour continuer à vous familiariser avec Popfly, vous pouvez essayer de modifier le comportement de l’acteur 1 pour qu’il tire sur l’acteur 2 lorsque vous cliquez sur la souris, ou encore pour que le jeu se termine si l’acteur 2 est touché ou si les deux acteurs se télescopent. Grâce à cette petite démonstration, vous en savez déjà suffisamment sur les comportements pour créer toutes sortes de jeux avec Popfly, rapidement et en toute simplicité.

Lorsque nous avons créé Popfly, notre objectif était d'encourager les utilisateurs à développer leurs propres idées de jeux. Le pari semble réussi, puisque parmi les personnes ayant créé des jeux avec Popfly jusqu’à présent, on trouve aussi bien des programmeurs professionnels que des enfants de 12 ans.

Pour en savoir plus sur Popfly, rendez-vous sur le site Wiki http://www.popflywiki.com(en anglais) ou naviguez sur le site et testez les nombreux jeux créés par les autres utilisateurs.