Premiers pas avec Cocos2d-JS

Les jeux vidéo sont actuellement l'une des composantes les plus importantes de l'économie numérique, chaque année des milliards de dollars sont investis dans la conception, le développement et la maintenance de jeux vidéo, et en même temps une plus grande quantité est reçue par les personnes qui consomment ce type de contenu.
Il est très simple de penser que les jeux vidéo ne sont que pour les enfants ou pour les gens qui sont dans ce monde, mais la réalité est différente, tous les jeux ne sont pas pour enfants, et tout le monde ne doit pas être fans pour profiter d'un bon jeu, il y en a des milliers de cas, mais deux exemples peuvent être Candy Crush et les Sims, le premier était une révolution dans le domaine des jeux sur les réseaux sociaux et mobiles, générant quotidiennement beaucoup d'argent, et le second, beaucoup plus ancien, était une révolution dans les jeux PC puisqu'il incluait de nombreuses personnes qui n'ont jamais pensé à prendre un intérêt pour les jeux vidéo.

AGRANDIR

Toute cette introduction nous amène à un outil qui facilite la création de jeux vidéo, car il est Cocos2d-JS, qui n'est rien de plus qu'un cadre qui nous permet de créer des jeux simples en 2 dimensions pour tout type d'appareil prenant en charge JavaScript Oui HTML5.
Grâce au fait que ce cadre est entièrement réalisé en JavaScript, les exigences d'utilisation ne sont pas si difficiles à satisfaire, voyons ce dont nous avons besoin pour ce tutoriel pour développer des projets avec Cocos2d-JS:
Éditeur de texteNous avons besoin d'un outil qui nous permette d'écrire le code de nos applications, il existe actuellement un IDS officier qu'est-ce qu'il est IDE Cocos Code Cependant, il n'est disponible que pour les fenêtres Oui MAC. Bien sûr, nous pouvons utiliser l'éditeur de notre préférence, donc l'IDE ci-dessus est la première suggestion, dans le cas de ce tutoriel, l'éditeur utilisé est Texte sublime en version 2, mais ce n'est pas indispensable.
Un serveur webEn raison des différentes parties du framework, nous avons besoin d'un serveur Web pour construire nos applications, généralement un environnement Apache il nous servira comme il peut être XAMPP, LAMPE ou alors WAMP, même si nous avons des connaissances approfondies en configuration de serveur, nous pouvons utiliser un serveur comme Nginx pour servir notre contenu, mais ce n'est pas obligatoire.
Navigateur avec prise en charge HTML5Dans notre cas, nous utiliserons Édition développeur de Firefox pour ses avantages pour le développement Web, mais si nous avons un navigateur préféré, nous pouvons continuer à l'utiliser sans problème.
La première chose que nous devons faire est de télécharger les fichiers nécessaires pour pouvoir utiliser les ressources disponibles, pour cela nous pouvons accéder au site officiel et effectuer le téléchargement correspondant, nous devons d'abord choisir la version la plus récente, dans notre cas en particulier c'est le 3.5Cependant, d'autres révisions peuvent être publiées. Voyons à quoi ressemble la zone de téléchargement :

AGRANDIR

On voit que l'on a d'autres produits de la société en charge du framework, comme le IDS et un kit d'outils de développement, cependant nous ne sommes intéressés que pour le moment Cocos2d-JS, que l'on peut voir en deuxième position dans la liste des produits. Il est important de noter que le débit est supérieur à 350 Mo nous devons donc préparer un espace pour ce fichier mais nous ne devrions pas avoir peur car ce téléchargement comprend une grande quantité de matériel, donc le vrai moteur n'est pas si lourd.
Une fois que nous avons le framework sur notre ordinateur, nous devons décompresser le fichier et dans le dossier cadres nous allons localiser le dossier cocos2d-html5 et nous allons le copier dans le répertoire où nous allons démarrer notre projet, qui dans ce cas s'appellera premier jeu, il devrait initialement ressembler à ceci :

Ensuite, dans notre projet, nous devons créer un dossier appelé src et trois fichiers supplémentaires; les index.html qui est le conteneur principal de notre application et est le fichier qui sera appelé dans le navigateur depuis le serveur web. L'archive main.js qui contiendra tout notre code JavaScript correspondant à la logique de notre jeu, et enfin le fichier projet.json qui contiendra les paramètres de configuration pour que notre jeu puisse fonctionner correctement. Voyons à quoi devrait ressembler notre structure finale :

Une fois que nous avons notre configuration initiale, il est temps de créer notre jeu, bien sûr un jeu est complexe et ce que nous allons créer aura une fonctionnalité très basique juste en nous montrant un message à l'écran, ce n'est pas quelque chose qui rivalise avec les jeux sur le marché mais c'est un début pour voir comment les choses fonctionnent dans le cadre.
Dans nos archives index.html nous devons inclure la bibliothèque CCBoot de Cocos2d-JS, nous devons également inclure notre fichier main.js, et enfin au sein de notre corps nous devons inclure une étiquette Toile qui est chargé de recevoir les informations de l'exemple que nous créons, voyons à quoi ressemble le code source de notre exemple :

 Notre premier jeu 

Puisque nous avons fait la première étape maintenant, nous allons passer au fichier main.js, ce fichier ne porte généralement pas de logique de jeu difficile, sa fonctionnalité est la plupart du temps de servir de fichier de configuration pour indiquer certains paramètres au moteur et pour pouvoir inclure la vraie logique au sein du projet, nous y placerons le code suivant :

 cc.game.onStart = function () {cc.view.setDesignResolutionSize (320, 480, cc.ResolutionPolicy.SHOW_ALL); cc.director.runScene (nouveau gameScene ()); }; cc.game.run ();

Ici, nous avons simplement défini ce qui va se passer lorsque le jeu démarre, les deux lignes à l'intérieur de la fonction principale doivent indiquer la résolution et la scène qu'il doit démarrer et enfin dans la dernière ligne, nous indiquons qu'il doit démarrer le jeu. Le code semble un peu compliqué au début, mais petit à petit on comprendra et avec lui la complexité diminuera.
Maintenant nous allons configurer notre projet, pour cela nous allons modifier le fichier projet.json, dans lequel nous allons définir le moteur, le nombre d'images par seconde du jeu, qui est son conteneur, et la liste des fichiers qui contiennent la logique de notre jeu, nous verrons ce dernier à l'étape suivante. Pour l'instant voyons ce que nous allons placer initialement dans le fichier :

 {"debugMode": 0, "showFPS": false, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "cocos2d-html5/", "modules": [" cocos2d "]," jsList " : [" src / gamescript.js "]}

Il est très important que le contenu de ce fichier soit un JSON valide, car sinon notre application ne démarrera pas.
Une fois cela fait, il est temps d'intégrer la logique de notre premier exemple, pour cela nous allons dans le dossier src de notre projet, où nous allons créer le fichier script de jeu.js, si nous sommes des observateurs nous réaliserons que c'est le fichier que nous définissons dans le projet.json et nous commençons à voir comment les pièces commencent à s'emboîter.
Dans ce nouveau fichier, nous allons créer la scène de notre jeu, avec cela nous allons le démarrer, bien sûr nous n'avons rien de graphique à montrer donc nous allons simplement imprimer quelque chose sur la console JavaScript, voyons le code que nous devons inclure :

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Notre jeu n'est pas amusant, mais ça marche =)"); }});

Maintenant que tout est en place, nous devons appeler notre dossier de projet depuis le navigateur et ouvrir la console développeur ou un module complémentaire qui nous permet de voir la console JavaScript pour voir le résultat de tout notre travail :

AGRANDIR

Comme nous pouvons le voir, notre première tentative a été couronnée de succès, nous avons déjà une base définie sur laquelle travailler et nous avons fait nos premiers pas avec ce cadre.
Pourquoi faire des jeux 2D ?Par ailleurs, beaucoup peuvent se demander quel est l'avantage de faire un jeu en 2 dimensions aujourd'hui, et la réponse est très simple : parce qu'ils sont amusants, et qu'ils nous permettent d'exploiter la possibilité de faire des jeux dans des environnements peu performants. , ce qui peut nous rapprocher d'une grande masse de joueurs potentiels qui n'ont pas de console mais qui avec les bons mots et actions peuvent acheter notre jeu ou s'il s'agit d'un modèle gratuit pour faire partie de notre communauté.
Avec cela, nous avons terminé ce didacticiel et nous pouvons dire que la génération de contenu ludique est l'un des domaines avec la plus grande croissance et la plus grande concurrence aujourd'hui, qui devrait continuer à croître en particulier sur les appareils mobiles et on s'attend à ce qu'un grand de jeux vidéo comme Nintendo va barboter dans ces plateformes, donc si nous sommes intéressés par une part du gâteau, des outils tels que Cocos2d-JS Ils nous aideront à entrer plus facilement sur le marché.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif