Share
Dans ce tutoriel, je vais vous aider à créer votre premier jeu HTML5 contrôlé par un contrôleur Leap Motion, à l'aide du moteur Kiwi.js. (Au cas où vous n'en auriez jamais entendu parler, Kiwi.js est un moteur de jeu relativement nouveau qui cible HTML5, WebGL et JavaScript.)
Après avoir entendu parler du contrôleur Leap Motion, je savais que je devais en avoir un. Il s’agit d’un capteur matériel qui prend en charge les mouvements des mains et des doigts, sans contact ni contact avec les mains..
Je voyais cela comme une nouvelle frontière du jeu qui n’était pas encore complètement explorée. Comment pourrais-je laisser passer une opportunité aussi excitante? Après que ma manette soit arrivée et que je passe les jours suivants à jouer avec toutes les applications de la boutique Airspace, j'ai décidé de la faire évoluer et de créer mes propres jeux..
Pour suivre ce didacticiel, vous aurez besoin d’un éditeur de texte et d’un navigateur. J'utilise Sublime Text 2 et je préfère Google Chrome pour ses outils de développement complets, mais le flux de travail sera sensiblement le même quel que soit l'éditeur de texte ou le navigateur que vous choisissez..
Vous aurez également besoin d'une copie de Kiwi.js, du plug-in Kiwi.js Leap Motion Controller et d'un contrôleur Leap Motion. Pour nous aider à démarrer, nous allons utiliser un jeu Kiwi.js plan; Les plans sont des modèles qui accélèrent la création de jeux en incluant toute la configuration initiale non spécifique à un jeu (telle que la création de structures de dossiers). Vous devriez télécharger le plan de démarrage du site Kiwi.JS.
Une fois que vous avez téléchargé le plan directeur, vous devriez pouvoir accéder au dossier du plug-in situé à l'intérieur. Une fois là-bas, vous devrez extraire le plug-in Leap Motion Controller vers le plugins dossier.
Dans le plan de mise en route, vous remarquerez qu’à l’intérieur du États dossier, situé à l'intérieur du src dossier, il y a trois fichiers JavaScript. Ceux-ci contiennent la principale États que nous devrons exécuter ce jeu particulier de Kiwi.js.
UNE Etat dans Kiwi.js est la classe principale que nous utilisons pour créer un jeu. Les états sont utilisés pour séparer les différentes sections d'un jeu; un seul jeu peut être composé de nombreux états différents. Cela signifie que nous ne pouvons jamais avoir un seul État actif à un moment donné.
Le plan directeur a séparé le jeu Kiwi.js en trois états: l’état de chargement, l’état d’introduction et l’état de jeu..
À l'intérieur de l'état de chargement, nous devons charger nos actifs dans le jeu. Puisque nous faisons un jeu de base pour commencer, il ne faudra pas charger beaucoup d’actifs. Le jeu que nous allons créer donnera simplement un retour visuel sur la position de votre main et de vos doigts, représentée par des points..
Pour cet exemple, nous allons utiliser les deux actifs ci-dessous. (Ne vous inquiétez pas, ces graphiques ne sont pas censés être jolis!)
Le point vert sera utilisé pour montrer la position de votre main dans le jeu, et le point rouge sera utilisé pour montrer la position de chaque doigt, je les ai donc nommés hand.png et finger.png, respectivement. Enregistrez-les sous ces noms dans le img dossier à l'intérieur du les atouts dossier.
Pour charger ces éléments dans le jeu, vous devez les ajouter à la mémoire cache du jeu via le précharge () méthode de État de chargement, qui se trouve dans le États dossier, dans le fichier nommé chargement.js, ainsi:
Accentsconagua
GettingStarted.Loading.preload = function () KiwiLoadingScreen.prototype.preload.call (this); this.addImage ('hand', 'assets / img / finger.png'); this.addImage ('finger', 'assets / img / hand.png'); ;Cela signifie que nous pourrons accéder aux images d’autres États du jeu et les utiliser. Commençons donc à les utiliser..
Pour permettre au jeu Kiwi.js d’utiliser le contrôleur Leap Motion, vous devez créer un objet contrôleur depuis le plugin Leap Controller.
Premièrement, nous devons inclure les scripts de contrôleur de saut dans la index.html fichier, comme si:
Deuxièmement, nous devons nous assurer que le Jeu objet sait que nous utilisons le plugin Leap Controller.
le Jeu objet est le moteur d'un jeu Kiwi.js; il gère l'initialisation de tous les différents gestionnaires de jeux. Laisser le Jeu sachant que nous voulons qu’il utilise le plugin Leap Motion Controller, nous devons modifier ses options de jeu. Cela peut être fait en ajoutant une ligne de code à l'intérieur du game.js fichier situé à l'intérieur du src dossier:
var gameOptions = renderer: Kiwi.RENDERER_WEBGL, plugins: ['LeapMotion'], // Ajoutez cette ligne de code largeur: 800, hauteur: 600
Maintenant, nous sommes prêts à créer notre objet contrôleur, en appelant la ligne suivante à l'intérieur du init () méthode du Jouer Etat, que vous pouvez trouver à l'intérieur du États dossier à l'intérieur du play.js fichier. Vous remarquerez que l’Etat n’a pas encore de init () méthode, vous devrez donc ajouter ceci. Pour plus de commodité, nous appellerons l'objet Contrôleur de saut contrôle:
GettingStarted.Play.init = function () this.control = Kiwi.Plugins.LEAPController.createController ();
Ensuite, nous allons créer des sprites que nous pourrons utiliser pour montrer la position de notre main et de nos doigts dans le jeu: un sprite "main" et cinq "doigt", en particulier. Pour ce faire, créez simplement un Kiwi.GameObject.Sprite et l'ajouter à l'état; le meilleur endroit pour le faire est dans le créer méthode de l'état.
Dans cet extrait, nous créons les sprites et les ajoutons à la scène, puis nous les stockons dans le tableau de doigts:
GettingStarted.Play.create = function () this.hand = new Kiwi.GameObjects.Sprite (this, this.textures ['hand'], 0, 0); this.addChild (this.hand); this.fingers = []; pour (var i = 0; i <= 5; i++) var temp = new Kiwi.GameObjects.Sprite(this, this.textures['finger'], 0, 0); this.addChild(temp); this.fingers.push(temp); ;
Une fois que le jeu a préchargé ses actifs et créé, le Jouer La boucle de mise à jour d'état commencera à s'exécuter C’est là que tous les trucs amusants que vous créez se produiront!
Dans ce cas, nous allons déplacer les sprites que nous venons de créer sur les positions de la main et des doigts correspondants, comme détecté par le contrôleur de mouvement Leap. Cela peut être fait facilement en accédant à diverses propriétés de l'objet Contrôleur de saut:
mains [0] .posX et mains [0] .posY vous donnera les coordonnées x et y, dans le plan vertical parallèle au contrôleur de mouvement de saut, de la première main que le contrôleur détecte.mains [0] .pointables [n] .tipX et mains [0] .pointables [n] .tipY vous donnera les coordonnées x et y, dans le même espace, de la pointe du nième doigt de cette main.Dans l'extrait suivant, vous verrez que j'ai centré la position de la main et des doigts en déplaçant la position x de moitié par rapport à la largeur de la scène, en inversant la position y et en ajoutant la hauteur de la scène à la position y. position:
GettingStarted.Play.update = function () Kiwi.State.prototype.update.call (this); this.hand.x = this.control.hands [0] .posX + (game.stage.width * 0.5); this.hand.y = -this.control.hands [0] .posY + (game.stage.height); for (var i = this.fingers.length - 1; i> = 0; i--) this.fingers [i] .x = this.control.hands [0] .pointables [i] .tipX; this.fingers [i] .x + = game.stage.width * 0.5; this.fingers [i] .y = -this.control.hands [0] .pointables [i] .tipY; this.fingers [i] .y + = game.stage.height; ; ;
Regardez l'exemple ci-dessous pour voir ce que nous avons fait!
Avec l'exemple ci-dessus, vous serez en mesure de voir à quelle vitesse et avec précision le contrôleur de mouvement de saut est avec Kiwi.js. De plus, avec les capacités de suivi du contrôleur Leap Motion, vous pouvez rapidement voir comment vous pouvez gérer plusieurs interactions avec une seule main..
Vous trouverez ci-dessous une liste ou des valeurs que le plug-in Leap Motion Controller suit actuellement pour Kiwi.js:
pointables.active propriété.main.active propriété.posX, posy, et posZ valeurs de l'objet de la main, comme nous l'avons vu.Il est également temps de regarder la plage à laquelle le contrôleur Leap Motion peut suivre votre main. Vous remarquerez que le contrôleur a des limites à sa plage de suivi, comme illustré par l'image ci-dessous..
Alors vous pensez probablement, "Qu'est-ce qui se passe quand ma main quitte cette plage?" Eh bien, le contrôleur de saut remarque instantanément que votre main n’est plus visible et règle le actif propriété de la main à faux. Il enregistre également toutes les données de la dernière position connue de votre main jusqu'à ce que votre main redevienne visible..
Jusqu'ici, nous n'avons fait qu'une démo de base, ce qui peut être cool, mais ce n'est pas vraiment amusant. Ensuite, créons un jeu comme celui présenté ci-dessous:
Dans ce jeu, nous allons animer des sprites. J'ai créé une feuille de sprite "FlappyNyan" que je vais utiliser pour ce didacticiel, ainsi que des blocs colorés qui seront utilisés pour le traçage de couleur laissé par FlappyNyan. Vous êtes invités à utiliser ces actifs. Il suffit de les récupérer dans le dépôt GitHub du tutoriel..
Au lieu d'utiliser la norme Lutin GameObject, nous voudrons créer une nouvelle classe qui s'étend Lutin. Le but de cette classe est d’aider à créer la traînée de couleur du chat. Si vous souhaitez approfondir votre jeu, vous pouvez implémenter la physique des arcades dans la classe, ce qui permet une détection simple des collisions et donne accès à des propriétés telles que la vitesse et l'accélération..
Pour créer une classe, vous devez créer un fichier JS séparé dans le dossier entités dossier; appeler Nyan.js. Vous devrez également inclure ce script dans votre index.html fichier, de la même manière que les scripts du plugin:
Dans ce fichier, créez un FlappyNyan classe qui a une animation de six images:
var FlappyNyan = fonction (état, x, y) Kiwi.GameObjects.Sprite.call (this, état, state.textures ['FlappyNyanCat'], x, y); this.state = state; this.animation.add ('marcher', [0, 1, 2, 3, 4, 5], 0.1, vrai); this.animation.play ('marcher'); FlappyNyan.prototype.update = function () Kiwi.GameObjects.Sprite.prototype.update.call (this); Kiwi.extend (FlappyNyan, Kiwi.GameObjects.Sprite);Ensuite, nous voulons créer la piste de FlappyNyan. Pour ce faire, nous allons continuellement créer des boîtes qui ressembleront à ce que FlappyNyan laisse toujours derrière lui: un magnifique arc-en-ciel de couleurs..
Pour cela, j'ai créé une autre classe, appelée MovingBox. Cette classe crée simplement une boîte d'une certaine couleur, se déplace vers la gauche jusqu'à ce qu'elle soit hors de l'écran, puis se supprime du jeu:
var MovingBox = fonction (état, x, y, texture) Kiwi.GameObjects.StaticImage.call (this, état, state.textures [texture], x, y, false); this.physics = this.components.add (nouveau Kiwi.Components.ArcadePhysics (this, this.box)); this.xVelo = -200; this.yVelo = 0; this.physics.velocity.x = this.xVelo; this.physics.velocity.y = this.yVelo; MovingBox.prototype.update = function () Kiwi.GameObjects.StaticImage.prototype.update.call (this); this.physics.update (); si (this.x < -50) this.destroy(); Kiwi.extend(MovingBox,Kiwi.GameObjects.StaticImage);
N'oubliez pas d'inclure le MovingBox classe dans le index.html page.
Maintenant, vous vous demandez peut-être comment utiliser ces boîtes - abordons-la ensuite. Ces boîtes qui suivront FlappyNyan représenteront le nombre de doigts actifs (c'est-à-dire les doigts visibles par le contrôleur Leap Motion)..
Puisque nous voulons que les boîtes suivent les FlappyNyan objet, nous allons créer une méthode pour générer ces boîtes à l'intérieur du FlappyNyan classe.
Pour ce faire, il vous suffit d’ajouter cette méthode à la FlappyNyan classe:
FlappyNyan.prototype.spawnBoxes = fonction (un, deux, trois, quatre, cinq) if (un) this.state.streamerGroup.addChild (new MovingBox (this.state, this.x, this.y + 05, ' yellowBox ')); if (deux) this.state.streamerGroup.addChild (nouvelle MovingBox (this.state, this.x, this.y + 15, 'orangeBox')); if (trois) this.state.streamerGroup.addChild (new MovingBox (this.state, this.x, this.y + 25, 'greenBox')); if (quatre) this.state.streamerGroup.addChild (nouvelle MovingBox (this.state, this.x, this.y + 35, 'pinkBox')); if (five) this.state.streamerGroup.addChild (new MovingBox (this.state, this.x, this.y + 45, 'blueBox'));
Puisque nous voulons créer ces boîtes à chaque image, ajoutez la méthode spawn à la boucle de mise à jour du fichier. FlappyNyan classe:
this.spawnBoxes (this.state.control.hands [0] .pointables [0] .active, this.state.control.hands [0] .pointables [1] .active, this.state.control.hands [0] .pointables [2] .active, this.state.control.hands [0] .pointables [3] .active, this.state.control.hands [0] .pointables [4] .active);
Maintenant que nous avons mis en place les deux classes dont nous avons besoin, il ne reste plus qu’à créer un FlappyNyan objet dans le Créer() méthode du Jouer Etat et ajouter un Kiwi.Group pour stocker les boîtes, puis les ajouter à la scène.
this.streamerGroup = new Kiwi.Group (this); this.addChild (this.streamerGroup); this.flappyNyan = new flappyNyan (this, 100, 100); this.addChild (this.flappyNyan);
Une fois que cela est fait, nous voulons mettre à jour sa position, comme nous l’avons fait pour l’objet hand dans le jeu précédent..
this.flappyNyan.x = this.control.hands [0] .posX + game.stage.width * 0.5; this.flappyNyan.y = -this.control.hands [0] .posY + game.stage.height;
Et c'est tout! Vous devriez maintenant avoir un jeu où vous contrôlez un FlappyNyan!
Si vous avez des questions, n'hésitez pas à les poser. Vous pouvez trouver tout le code source et les ressources dans le dépôt GitHub du tutoriel..
