Récupérer la couleur d’un pixel avec le Framework Phaser et gérer les collisions avec une image

Dans ce nouveau cours sur le framework Phaser apprenez une nouvelle façon de gérer les collisions dans votre jeu.

Tout est expliquer dans la vidéo.

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

Récupérer la couleur d’un pixel avec le Framework Phaser et gérer les collisions avec une image

Bonjour à tous et bienvenu sur Développement Facile.

Encore un nouveau cours consacré aux Framework phaser, le Framework pour créer des jeux très rapidement pour les mobiles, les ordinateurs de bureau donc sur les Smartphones et les tablettes, ça permet de simplifier énormément votre développement en faisant appel à des fonctions qui vous simplifient la vie notamment dans la gestion des collisions, la gravité, le chargement des éléments etc., la gestion des touches du clavier, les niveaux d’un jeu donc aujourd’hui dans ce nouveau cours vous allez apprendre une nouvelle façon de gérer la collision entre deux éléments c’est-à-dire vous avez une image avec des zones transparentes et ici le serpent devient rouge dès qu’il touche un élément de l’image donc ça peut vous permettre de changer de couleur comme c’est sur l’écran ou alors dans un jeu pendant le déplacement d’un personnage, de lui faire perdre des vies suivant l’endroit où il se déplace sur votre carte donc sur votre image. Il y a deux images aléatoirement qui se chargent avec, c’est des png avec des zones transparentes ou le serpent reste bleu et des zones où il y a une image donc un élément qui n’est pas transparent d’une autre couleur et donc le serpent devient rouge si il touche cette zone.

Alors c’est très simple à faire en code vous allez voir, comme d’habitude vous intégrez le framework phaser et le fichier main en mode développement, sans la gestion du cache, désactivez la gestion du cache de votre navigateur, voilà les variables du jeu donc la longueur d’un élément fait un pixel, la longueur du serpent, le tableau qui contient tous les éléments, l’objet serpent le bitmap et la taille du jeu donc vous créez votre instance the game, le préchargement des données donc rappelez-vous la petite fonction qui vous permet d’avoir un nombre aléatoire entre deux valeurs minimums et maximums toutes les deux incluses, très pratique cette fonction donc si c’est un on charge le décor Google, si c’est deux on charge la carte YouTube tout simplement, on créé la structure de notre serpent, onCreate on créé notre jeu donc le décor on l’intègre dans un bitmap et on ajoute ce bitmap dans le jeu tout simplement, donc comme les display objet en actionscript et le serpent, on créé notre objet serpent et en update on va mettre à jour en temps réel en continu pendant le jeu, donc la couleur de base du serpent, le canal alpha pour qu’on puisse le voir, donc on l’efface au préalable et on le recréait, on positionne par rapport à la souris le serpent tout simplement en X et en Y, ensuite on parcourt tous les pixels, on bouge le serpent bien évidemment, et on parcourt tous les pixels du serpent et on récupère la couleur du pixel actuel et si la couleur n’est pas transparente donc si elle est différente de zéro la couleur, vous faites un get pixel tout simplement à l’endroit où est le pixel du serpent, le serpent devient rouge et là on boucle sur tous les éléments voilà, c’est tout, à chaque fois on update est appelé en continu là et donc pour chaque pixel du serpent on vérifie tout simplement si la couleur, donc là il ne rentre pas en collision avec l’image, il ne passe que par la zone transparente tout du long donc le serpent reste bleu dès qu’il rentre en collision il devient rouge, fin de la collision, donc ça peut vous ouvrir tout un champ de possibilités dans vos jeux, donc regardez get pixel sur un bitmap donc à partir d’une image vous créez un bitmap de la taille de votre jeu, ensuite vous dessinez le décor donc c’est l’image décor qui est ici, une mise à jour et vous l’ajoutez en tant que Sprite à la position 00 dans votre jeu, ça c’est le graphique donc le serpent vous créez une ligne style avec la couleur et vous changez la couleur de la ligne dès que il y a une collision donc le get pixel récupère une autre couleur que transparente, donc sur le canal alpha. Voilà un exemple très rapide d’un jeu surtout dans le concept en fait c’est très important. Voilà avec l’image YouTube j’essaye de passer entre les lettres mais ce n’est pas évident, vous voyez que le serpent peut passer par-dessus lui-même et il n’est pas détecté en collision, collision, donc ça vous ouvre tout un champ de possibilités pour créer des cartes de jeu vraiment très facilement.

Alors comme d’habitude vous pourrez télécharger le code source complet de ce cours sous cette vidéo donc le code source de ce jeu commenté, vous pouvez télécharger sous cette vidéo si vous avez des questions posez-les également sous cette vidéo l’équipe développement facile est à votre disposition pour vous répondre en cas de difficultés et maintenant je vous invite à regarder la deuxième vidéo, c’est-à-dire juste au-dessus de ce cours il y a une bannière, un lien cliquable qui vous permet d’accéder à une deuxième vidéo ou vous allez aller beaucoup plus loin dans la création de jeux HTML 5 JavaScript pour les Smartphones, les tablettes, les ordinateurs, vous allez découvrir la méthode développement facile, la programmation orientée objet, la puissance des événements et les modèles de conceptions pour énormément simplifier votre développement, travailler en équipe et créez vos jeux ou vos applications deux à trois fois la plus rapidement et en éliminant les bugs dès leurs conceptions, je ne dis pas que vous aurez zéros bugs, mais en tout cas vous aurez beaucoup mais beaucoup moins de bugs, et si vous en avez, ce qui arrive à tout le monde, moi le premier ce sera beaucoup plus simple de les détecter parce que vous aurez organisé votre code en différents fichiers JavaScript, différentes classes donc le debug sera très simple, très rapide à effectuer donc je vous explique tous en détails dans la deuxième vidéo, vous allez même pouvoir profiter des conseils des experts de l’équipe développement facile, donc des experts en développements qui ont 10 ans d’expérience dans plusieurs langages qui seront là vous aider, pour répondre à toutes vos questions et pour vous accompagner pendant la création de vos applications, l’utilisation des exemples de code source, donc juste au-dessus ce cours il y a une image, un lien cliquable, cliquez tout simplement dessus on se retrouve tout de suite dans la deuxième vidéo à tout de suite.

[/ppmtoggle] [/ppmaccordion]

Télécharger le jeu de serpent présenté dans la vidéo

Retrouvez le code source commenté de l’exemple de jeu de serpent présenté dans la vidéo

Quel cours sur Phaser souhaitez vous voir approfondir ?

Utilisez la zone commentaire pour poser vos questions et nous faire savoir quel prochain cours vidéo vous voudriez avoir