En el tutorial de hoy, vamos a empezar con la primera parte para realizar un juego fenomenal en JavaScript. est Publier es una de las muestras de que este langage de programmation es sumamente vérsatil, fácil de aprender, y te ayudará a simplificar muchos aspectos de tu código. Así que, sin mas que decir ¡Comencemos!
Étape 1: Premiers pas avec un arrière-plan animé
Je voulais vraiment écrire un tutoriel sur une technologie de jeu que j'aime utiliser, alors la voici. Dans cette histoire, nous allons commencer à faire un petit jeu de tue les avec PixiJS, une bibliothèque Javascript très simple et cool.
Ce que nous allons faire exactement, c'est créer un vaisseau spatial capable de bouger et de tirer, les vagues ennemies arrivent et un beau fond animé avec des nuages en mouvement. La première partie (celle que vous lisez maintenant) se concentrera sur l'arrière-plan.
Comment commencer?
Commençons par lancer notre projet: j'ai téléchargé une structure de code déjà établie, nous travaillons donc tous sur la même base. Cependant, si vous souhaitez le faire vous-même, je mets une photo de mon dossier juste en dessous:
Cliquez ici pour télécharger votre dossier
Necesitaremos un serveur local para ejecutar el juego: Te invito a descargar WAMP si estás trabajando con Windows, o MAMP para macOS, son gratuitos y fáciles de usar. Vamos a poner tu carpeta de juegos en el servidor (htdocs for MAMP / www for WAMP) y teclear el relier localhost en tu le navigateur favorito (para mí sería: http://localhost:8888/Spaceship/bin/)
Au indice.html, nous importons les fichiers javascript d'en-tête:
<script src="../src/lib/pixi.min.js"></script> <script src="“../src/main.js”"></script>
… Et nous devons faire de même pour chaque fichier que nous créons. Vient ensuite l'initialisation de Pixi (qui est basée sur le moteur de rendu WebGL):
var renderer = PIXI.autoDetectRenderer (window.innerWidth, window.innerHeight);
Pour ce didacticiel, nous demandons au jeu de couvrir toute la fenêtre du navigateur, donc si vous l'essayez maintenant, vous obtiendrez un arrière-plan totalement noir.
Le fichier main.js est l'endroit où tout le jeu commence. C'est comme un manager, avec la première fonction d'exécution du jeu et la boucle où nous pouvons dire au jeu quoi faire dans chaque image. Ce que nous voulons, c'est un fond bleu pour le ciel lorsque le jeu commence, alors mettons à jour le fonction init:
function init () {renderer.backgroundColor = 0x22A7F0; renderer.render (étape); boucle (); }
Pixi utilise le format de couleur hexadécimal, vous devez donc écrire votre code couleur précédé de 0x. Sauvegardons et voyons le résultat dans votre navigateur!
Des nuages partout!
Ce fond est très ennuyeux, ajoutons quelques nuages flottants.
Tout d'abord, ajoutons un nouveau fichier de classe CloudManager dans le dossier src (qui créera et déplacera les nuages).
classe CloudManager {constructor () {} update () {}}
N'oubliez pas de l'ajouter au fichier index.html comment avons-nous fait pour main.js:
<script src="../src/lib/pixi.min.js"></script> <script src="../src/CloudManager.js"></script> <script src="../src/main.js"></script>
Le constructeur est le point d'entrée de cette classe où l'on peut ajouter le fonction de spawn pour nos nuages. Ce que nous voulons, c'est fondamentalement une méthode capable de créer un cloud chacun X secondes, et c'est parfait car il y a un truc javascript pour ça:
window.setInterval (function () {}, 1000);
Ce morceau de code, placé dans le constructeur, appellera ce qui se trouve à l'intérieur des crochets de jeu toutes les 1000 millisecondes (= 1 seconde).
Ajoutons des sprites cloud dans le dossier assets, et comme mieux nous avons 2 images différentes: (les nuages sont blancs avec un fond transparent donc ils étaient invisibles sur cette page, mais voici les liens sur GitHub:
Nous devons charger les sprites avant le début du jeu, alors ajoutez-les dans la fonction Pixi.loader.add:
PIXI.loader.add (["assets / cloud_1.png", "assets / cloud_2.png"]). Load (init);
Ok maintenant nous pouvons montrer les nuages dans la méthode setInterval du CloudManager:
window.setInterval (function () {const sprite = (Math.random ()> 0.5? "cloud_1": "cloud_2"); this.cloud = new PIXI.Sprite (PIXI.loader.resources ["assets /" + sprite + ".png"]. texture); this.cloud.anchor.set (0.5, 0.5); this.cloud.position.set (renderer.width * 1.2, renderer.height * Math.random ()); stage. addChild (this.cloud);}, 1000);
Pour reprendre ce code:
- Tout d'abord, nous calculons un nombre aléatoire entre 0 et 1, et soit il est inférieur à 0,5, donc nous stockons le premier sprite dans une constante, soit c'est le second.
- Ensuite, nous créons un nouvel objet sprite avec l'image que nous avons obtenue dans la ligne précédente.
- Le point d'origine de ce sprite sera son coin supérieur gauche, nous plaçons donc son point d'ancrage au centre.
- Nous devons montrer le nuage au-delà du bord droit de l'écran, afin qu'il puisse se déplacer vers la gauche sur l'écran: renderer.width * 1.2 est la position du bord gauche + la largeur de l'écran + 20% de sa largeur. Nous pouvons être sûrs que nous ne le verrons pas se reproduire. Pour la position et, renderer.height * Math.random () est un nombre entre 0 et la hauteur de la fenêtre. Par conséquent, la position verticale du nuage sera située entre le haut et le bas de l'écran.
- Enfin, nous ajoutons ce nuage à la scène.
Si vous exécutez ce code, rien ne devrait apparaître, et c'est exprès car ils doivent disparaître de la vue. Alors maintenant, nous devons les faire bouger.
La fonction de mise à jour est l'endroit idéal pour le faire. Mais nous devons stocker les nuages dans un déployer pour pouvoir itérer et définir leurs positions. Initialisons un nouveau tableau dans le constructeur de CloudManager:
this.cloudsList = [];
... et pousse les nuages après le fonction stage.addChild:
this.cloudsList.push (this.cloud);
Nous pouvons maintenant itérer le tableau de mise à jour et définir la position de chaque cloud:
this.cloudsList.forEach (fonction (élément) {élément.position.x - = 4;});
Maintenant, cela devrait fonctionner!
Oh attendez, quelque chose devrait nous déranger: où vont tous ces nuages?
Sí, si no los eliminamos después de que salieron de la pantalla, seguirán existiendo y puede causar algunos problemas de rendimiento. Añadamos una declaración de forEach para cada uno de ellos que los borre cuando su posición horizontal être un poco inferior al borde izquierdo de la pantalla (así que no podemos verlos saliendo):
if (element.position.x <-renderer.width * 0.3) {element.destroy (); array.splice (0, 1); }
Nous en avons fini avec les nuages!
Que diriez-vous de faire une variation aléatoire de la taille des nuages? Ajoutez ceci au bloc de construction cloud:
soit minScale = 0,2; soit maxScale = 1,2; let scale = Math.random () * (maxScale - minScale) + minScale; this.cloud.scale.set (échelle, échelle);
S'il vous manque quelque chose ou que cela ne fonctionne pas dans votre code, vous pouvez vérifier le résultat ici.
Passez maintenant à la partie suivante pour terminer notre premier jeu en JavaScript. Continuer!
