Comment concevoir la carte d’un jeu RPG avec le Framework Phaser

Découvrez comment réaliser une carte et son intéractivité pour les jeux style RPG avec le framework JavaScript Phaser.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment concevoir la carte d’un jeu RPG avec le Framework Phaser

Bonjour et bienvenu sur Développement Facile.

Voici un nouveau cours dédié au Framework Phaser qui je vous le rappelle, ce Framework vous permet de créer des jeux pour les mobiles et le Web, pour les Smartphones, les tablettes et les ordinateurs. C’est un Framework qui vous facilite énormément la création de jeux pour les mobiles et pour le Web.

Aujourd’hui vous allez apprendre à créer le début d’un jeu RPG, souvent dans les jeux RPG comme vous voyez sur l’écran, vous avez accès à une carte et vous sélectionnez un lieu pour vous y rendre, là ça indique, vous avez sélectionné la ville numéro trois et comme ça vous vous déplacez sur la carte ici, vous sélectionnez la ville numéro deux et après dans le déroulé de votre jeu RPG, ça va lancer un nouvel écran. Pour lancer un nouvel écran vous l’avez vu dans les cours précédents c’est avec les états de jeux, ou ça vous permet d’appeler des classes, des fichiers qui construisent une nouvelle interface et donc ça lancerait au clic sur la ville zéro par exemple, un nouvel écran de jeux donc le niveau du jeu RPG.

Comment on fait tout ça en code ?

Comme d’habitude vous incluez le Framework phaser, le fichier main, vous désactivez le fichier cache uniquement pendant la face de développement, très simplement, vous avez les variables du jeu phaser, l’objet phaser, largeur hauteur du jeu, et toutes les petites variables du jeu, la carte du jeu, pour sauvegarder la position de départ, quand je dit touche sur l’écran c’est-à-dire lorsque vous êtes en multitouches sur un Smartphone ou une tablette, c’est représenté par le mot touche, multitouche, voilà, la gestion du multitouche, la vitesse de déplacement etc. comme d’habitude vous créez votre objet game, je vous ai mis, vous pouvez mettre toutes les variables du jeu dans la variable game.global et ensuite vous accédez à ces variables game.Global.Le nom de la variable, cela comme je vous l’ai dit la dernière fois ça vous évite de déclarer en global pour JavaScript des variables si vous avez besoin de nommer deux fois la même, au moins ici elles sont associées à l’instance phaser game ce qui est beaucoup plus simple pour vous. Vous avez le preload que vous commencez à connaître par cœur, vous chargez tous les graphismes, la carte et les villes, vous pouvez effectuer un affichage en plein écran, comme d’habitude, il suffit d’appeler la fonction goFullScreen dans oncreate ici et là vous allez créer votre carte avec un groupe, dans la carte, dans le groupe vous allez regrouper la carte du jeu et toutes les villes, vous positionnez aléatoirement toutes les villes, en faisant un add image et en la positionnant, vous rajoutez une propriété à la ville donc ce sera son nombre, c’est-à-dire quand vous cliquez ici vous avez un nombre qui s’affiche c’est le numéro de la ville tout simplement, ce qui correspond à la ville lorsqu’elle a été créée et ensuite centrez la carte, quand vous rechargez la carte est toujours centrée, vous pouvez vous déplacer à gauche à droite en haut en bas, elle est toujours centrée. Et vous ajoutez, dès que l’utilisateur clique sur l’écran on touche map et un texte informatif sélectionnez une ville pour commencer le jeu, comme vous voyez ici, votre texte informatif.

On touche map qu’est-ce qu’on fait ?

Ca va vous permettre de déplacer la carte au joueur, il va déplacer la carte, on met à jour les écouteurs de déplacement, stop map c’est quand il va relâcher la touche sur la carte, le joueur appuie avec son doigt sur l’écran de son Smartphone ou de sa tablette, il déplace la carte, et quand il relâche, on relâche. Vous pouvez même cliquer sur une ville, il effectue un déplacement c’est géré, je vais vous montrer comment ça a été fait astucieusement, là vous cliquez, vous cliquez et là vous pouvez déplacer, vous recliquez ça s’affiche bien, voilà, vous ajouter un écouteur pour appeler drag map, justement c’est ce qui permet de déplacer la carte tout simplement, on limite le déplacement évidemment en fonction de la carte et de la taille du jeu donc on peut pas aller, là la carte c’est le bout de la carte ici, vous ne pouvez pas aller plus loin, pareil en haut, pareil à gauche et à droite et en bas également, donc ça évite de déplacer la carte, ça s’arrête le déplacement à la taille de la carte et en fonction de la zone d’affichage de votre jeu tout simplement, là on relâche la carte, on supprime l’école baraque, on remet à jour les écouteurs et lorsqu’on sélectionne une ville, ça marche ?

Là vous avez une ville avec, on descend la souris, on sélectionne une ville, on relâche la souris ou on relâche le doigt de l’écran, on confirme la sélection de la ville, alors là, on met une ville candidate Sprite en sélection et quand on relâche, vous avez sélectionné la ville avec son numéro parce qu’on transmet l’événement ici, this, et donc this c’est l’objet ville que l’on transmet à l’appel de la fonction sélecte on et cotent on, tout simplement.

On met une ville candidate, si on déplace la ville, si on déplace la carte pardon en appuyant sur ville candidate on est égal à nulle, parce qu’on est en mode déplacement, là c’est la ville zéro, je clic sur la ville zéro je peux déplacer parce qu’on est en mode de déplacement, donc le clic sur la vie n’est pas pris en compte, là il est pris en compte tout simplement. C’est cette astuce très  intelligent d’utiliser candidate town et lorsque l’on relâche, on confirme la ville sélectionnée donc voilà vous pouvez commencer à créer votre RPG avec sur la carte une sélection de ville, donc soit elles sont aléatoires comme là, vous pouvez vous déplacer vers un monstre marin, sur un bateau ici, libre à vous de continuer la création de ce jeu RPG avec les cours précédents sur phaser vous avez tout ce qu’il faut donc les cours gratuits précédents sur phaser, tout ce qu’il faut pour créer un jeu RPG, vous cliquez sur la ville numéro deux, vous avez, vous appelé game.State donc la gestions des états des interfaces avec phaser, ça va lancer votre nouvelle interface.

Comme d’habitude sous ce cours vous trouverez en téléchargement le code source complet, vous pouvez réutiliser dans vos jeux pour les mobiles, les tablettes, le Web, si vous avez des questions posez les directement sous cette vidéo l’équipe développement facile vous répondra, et maintenant si vous voulez aller beaucoup plus loin dans le développement de jeux avec le Framework phaser que ce soit pour les mobiles, les tablettes, le Web je vous invite à cliquer juste au-dessus de ce cours, il y a  une bannière, une image, un lien cliquable, vous allez cliquer dessus vous serez redirigé vers une deuxième vidéo qui vous explique comment utiliser le potentiel de phaser, des Framework pour créer des jeux performants, des applications performantes sur les tablettes, iPad, iPhone, les Smartphones iPhone, sous Android il y a l’équipe développement facile qui vous accompagne si vous rencontrez des difficultés pour utiliser tel ou tel code source implémenter dans votre application, l’équipe développement facile vous accompagne personnellement donc je vous explique tout ça dans la deuxième vidéo, cliquez simplement sur le lien au-dessus de ce cours, le lien l’image cliquable, en se retrouvent dans la deuxième vidéo, à tout de suite

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple de carte de RPG

Retrouvez le code source commenté de l’exemple de carte pour jeu style RPG réalisé avec le framework Phaser.

Montrez vos cartes de RPG réalisé avec Phaser

Utilisez la zone commentaire pour montrer vos réalisations de carte de RPG avec le framework Phaser.