Advertisement
  1. Game Development
  2. 3D
Gamedevelopment

Créer un tir à l'espace avec PlayCanvas: partie 1

by
Difficulty:BeginnerLength:LongLanguages:
This post is part of a series called Create a Space Shooter with PlayCanvas.
Create a Space Shooter With PlayCanvas: Part 2

French (Français) translation by New Lune (you can also view the original English article)

PlayCanvas facilite la création de contenu interactif 3D WebGL pour le Web. C'est tout JavaScript, donc il fonctionne nativement dans le navigateur sans aucun plugin. C'est un moteur assez jeune qui n'existe que depuis 2014, mais il a gagné rapidement des noms comme Disney, King et Miniclip en l'utilisant pour développer des jeux.

C'est un excellent outil pour deux raisons principales: d'abord, il s'agit d'un moteur de jeu entièrement équipé, de sorte qu'il gère tout, du graphisme et de la collision à l'audio et même de l'intégration avec gamepads/VR. (Donc, vous ne devrez pas rechercher des bibliothèques externes ou vous soucier de problèmes de compatibilité avec les navigateurs pour la plupart des choses.) Le deuxième, et ce que je pense le fait vraiment ressortir, est leur éditeur basé sur un navigateur.

Screenshot of PlayCanvass editor
C'est à quoi ressemble un exemple de projet dans l'éditeur in-browser de PlayCanvas. C'est un moyen vraiment puissant et pratique d'organiser votre travail ou même de collaborer avec d'autres personnes en temps réel.

Si vous avez l'habitude de travailler avec le moteur Unity, l'éditeur de PlayCanvas devrait être familier (il utilise même un système basé sur les composants pour lier les fonctionnalités). Contrairement à Unity, PlayCanvas n'est pas multiplate-forme et ne peut publier que pour le Web. Cependant, si le Web est tout ce dont vous vous souciez, cela finira par être un gros avantage, car l'accent mis par le moteur sur le Web le rend très rapide et léger par rapport à la concurrence.

Une dernière note: alors que le moteur lui-même est gratuit et open source, l'éditeur et les outils en ligne sont gratuits pour les projets publics. Il vaut certainement la peine de payer si vous développez un travail commercial avec lui, mais vous pouvez toujours l'utiliser uniquement comme cadre de code gratuitement.

Le résultat final

C'est ce que nous allons créer:

In-game screenshot of space shooter

Vous pouvez essayer une démo en direct.

Le projet lui-même est public, afin que vous puissiez faire un piquant et/ou le forquer sur sa page de projet.

Vous n'avez pas besoin d'avoir une expérience avec les jeux 3D à suivre, mais je vais assumer une certaine familiarité de base avec JavaScript.

Créer notre propre projet à partir de Scratch

Le résultat final est une démo relativement simple où vous venez de voler et de pousser les astéroïdes, mais cela couvre suffisamment de fonctionnalités de base qui seront utiles pour créer n'importe quel jeu 3D. La partie 1 couvrira la configuration de base, en travaillant avec les modèles, le système de physique et les contrôles de caméra. La partie 2 couvrira le système de balle, engendrant des astéroïdes et travaillant avec du texte.

1. Configuration du projet

Rendez-vous sur playcanvas.com et créez un compte.

Une fois que vous êtes connecté, cliquez sur l'onglet projects dans le tableau de bord et appuyez sur le new bouton orange pour créer un nouveau projet. Cela devrait ouvrir la boîte "new project". Sélectionnez "blank project" et donnez-lui un nom:

Dialog box for creating a new project

Une fois que vous avez fini, appuyez sur le bouton create en bas à droite. Cela vous enverra à la page d'aperçu du projet. Ici, vous pouvez accéder à vos paramètres et ajouter des collaborateurs. Pour l'instant, nous allons simplement plonger dans le projet, alors cliquez sur le grand orange bouton editor.

Lorsque vous entrez votre premier projet, PlayCanvas vous montrera beaucoup d'astuces sur son éditeur. Vous pouvez les renvoyer pour l'instant. Les principaux éléments à noter sont les suivants:

  • Le panneau de gauche (hiérarchie) est une liste de tous vos objets du monde. C'est aussi là où vous pouvez ajouter, dupliquer ou supprimer des entités de votre scène.
  • Le panneau droit (inspecteur) est l'endroit où vous modifiez les propriétés de l'objet sélectionné. Après avoir sélectionné un objet (en cliquant dessus), vous pourrez définir sa position et son orientation, ou joindre des scripts et des composants.
  • Le panneau inférieur (actifs) contient tous vos actifs. C'est là que vous pouvez télécharger des textures ou des modèles 3D ainsi que créer des scripts.
  • La scène centrale est l'endroit où vous pouvez éditer et construire votre monde de jeu.

2. Création d'un objet

Pour créer un nouvel objet dans votre scène, cliquez sur le petit bouton plus en haut du panneau hiérarchique:

How to create a new entity

Remarque: Vous pouvez accidentellement créer un nouvel objet à l'intérieur d'un déjà existant. Ceci est utile pour construire des objets composés de plusieurs parties ou qui sont liés de quelque manière que ce soit. Vous pouvez déplacer des objets autour du panneau hiérarchique pour contrôler l'imbrication. Faites-le glisser sur l'objet Root pour le placer en haut de la hiérarchie.

Par exemple, je vais créer une nouvelle boîte et la colorer en rouge. Pour lui donner une couleur personnalisée, nous devons créer un nouveau matériel. Vous pouvez le faire dans le panneau des ressources, soit en cliquant avec le bouton droit n'importe où à l'intérieur du panneau, soit en cliquant sur l'icône plus petit:

How to add a new material

Une fois créé, sélectionnez votre matériel et donnez-lui un nom descriptif tel que "RedMaterial" (vous pouvez voir le champ de nom dans le panneau de l'inspecteur).

Maintenant, défilez vers le bas de la section diffuse et modifiez la couleur:

How to change the diffuse color to red

Une fois que cela est terminé, revenez en arrière et sélectionnez la nouvelle boîte que vous avez créée (en cliquant dessus dans la scène ou dans le panneau hiérarchique). Ensuite, définissez son matériel sur le matériau personnalisé que nous venons de créer:

Where to set an objects material

Et la boîte devrait maintenant être rouge! Notez que le matériel que vous avez créé peut être joint à autant d'objets que vous le souhaitez.

3. Ajout de physique

Pour activer la physique sur un objet, nous devons ajouter deux composants: Rigid Body et Collision.

Ajoutez le corps rigide en cliquant sur "Add Component" dans le panneau de l'inspecteur sur votre objet:

How to add a rigid body component to an entity

Assurez-vous que son type est défini sur dynamic:

Where to set rigid body type

Ensuite, ajoutez un composant de collision de la même manière.

Lancez maintenant votre jeu en cliquant sur le petit bouton de lecture en haut à droite de votre scène. Vous devriez voir votre boîte tomber dans le sol! Pour réparer cela, vous devrez ajouter un corps rigide et une collision au plan, en vous assurant que son type de corps rigide est statique (de sorte qu'il ne tombe pas aussi bien).

Défi: Juste pour le plaisir, essayez d'ajouter une sphère et inclinez légèrement le plan (soit sur l'axe X ou Z) pour le voir rouler.

Une note sur le système de composants

Il vaut la peine de parler brièvement du système de composants, car c'est une partie fondamentale de l'architecture de PlayCanvas. Conceptuellement, l'idée est de séparer la fonctionnalité des objets. Le plus grand avantage est la capacité de composer des comportements complexes à partir de composants modulaires plus petits.

Par exemple, si vous regardez la caméra dans votre scène, vous remarquerez que ce n'est pas un objet spécial. C'est juste une entité générique avec un composant de caméra attaché. Vous pouvez attacher un composant de caméra à n'importe quoi pour le transformer en caméra, ou attacher un corps rigide et une collision à l'appareil photo pour le transformer en un objet solide (essayez-le!).

Si vous êtes curieux, vous pouvez en savoir plus sur les avantages et les inconvénients des systèmes de composants sur la page Wikipédia.

4. Ajout d'un modèle

Maintenant que vous êtes à l'aise avec les bases, nous pouvons commencer à regrouper notre jeu spatial. Nous avons besoin d'au moins un navire et un astéroïde avec lequel travailler. Il existe deux façons d'ajouter des modèles:

Prenez un modèle de PlayCanvas's Library

PlayCanvas dispose d'un magasin (similaire à l'Unity Asset Store de certaines façons) où vous pouvez trouver et télécharger des actifs directement dans votre projet. Pour y accéder, cliquez simplement sur le library dans le panneau des actifs.

Le magasin est très nouveau, donc c'est assez rare, mais c'est un bon endroit pour trouver des espaces réservés ou des atouts pour expérimenter.

J'ai utilisé l'actif du hovership depuis mon magasin.

Téléchargez votre propre modèle

PlayCanvas prend en charge le chargement des fichiers FBX, OBJ, 3DS et COLLADA (DAE), mais il préfère FBX. Vous pouvez facilement convertir n'importe quel modèle 3D en FBX en l'ouvrant avec Blender et en l'exportant dans votre format désiré.

Vous pouvez trouver le modèle d'astéroïde que j'ai utilisé sur Blendswap.com. Notez que vous souhaitez optimiser vos modèles 3D avant de les utiliser dans le jeu. Par exemple, ce modèle d'astéroïdes contient plus de 200 000 triangles! Cela pourrait être bien pour un objet spécial dans le jeu, mais une fois que j'ai ajouté plus d'une centaine d'astéroïdes dans la scène, les choses ont vraiment ralenti. Le Decimate du Blender modificateur est un moyen simple d'optimiser vos modèles. J'ai utilisé cela pour réduire le modèle d'astéroïdes à environ 7,000 triangles sans perdre trop de détails.

Une fois que les modèles sont dans votre projet (vous devrez peut-être actualiser si vous ne le voyez pas tout de suite dans votre panel d'actifs), vous pouvez les ajouter à votre scène. La façon la plus simple de le faire est de simplement faire glisser le modèle vers la scène:

How to add the hovership model into the scene
C'est le même modèle que vous pouvez ajouter à la scène. Les autres atouts qui l'entourent sont la texture/le matériel, etc.

Tout comme précédemment, ajoutez un corps rigide et un composant de collision au navire. Une astuce que vous pouvez faire avec collision est d'ajouter le maillage de l'objet réel comme sa propre forme de collision. Cela entraînerait un maillage de collision parfait, mais ne serait pas très efficace. Pour cette démo, j'ai opté pour une boîte simple comme ma forme de collision (et une sphère pour les astéroïdes) et a édité les half-extents pour correspondre à peu près à la forme du modèle.

Comment décaler la forme de collision

Un problème auquel vous pouvez rencontrer lors de l'ajustement des formes de collision est l'incapacité de le compenser du centre. Un moyen simple de contourner cela (en plus d'avoir à compenser le modèle lui-même dans quelque chose comme Blender avant de l'exporter) est de créer un objet parent qui a la collision et le corps rigide, et un objet enfant qui possède le modèle lui-même. Ainsi, vous pouvez compenser le modèle en tant que enfant par rapport au parent qui contient la collision.

C'est ainsi que je l'ai configuré pour le projet de démonstration, afin que vous puissiez regarder cela pour voir comment cela se fait.

5. Modification des paramètres de gravité et de scène

Comme notre jeu est défini dans l'espace, nous devons passer outre à la gravité par défaut. Vous pouvez le faire dans les paramètres de la scène. En bas à gauche de votre écran, cliquez sur le gear icon. Cela ouvrira les paramètres dans le panneau de l'inspecteur. Trouvez la section physique et modifiez la valeur de gravité:

Where to disable gravity

Pour vous assurer que cela fonctionne, essayez de lancer à nouveau et de voir si le navire flotte juste dans l'espace.

Ce n'est pas assez d'espace sans un fond étoilé, alors que nous sommes dans les paramètres de la scène, ajoutons une Skybox. Vous pouvez en prendre un dans le magasin ou trouver un en ligne que vous aimez. Une fois que vous l'avez, ajoutez-le dans la section de rendu:

How to add a skybox

Cela devrait donner au jeu une sensation plus nébuleuse. Ce serait également un bon moment pour nettoyer votre scène et supprimer tous les objets de test que nous avons créés auparavant.

6. Script du navire

C'est là que nous obtenons enfin l'écriture d'un code. Le système de script de PlayCanvas est une autre chose qui devrait être familier si vous avez utilisé Unity. Vous créez des scripts qui peuvent être attachés à n'importe quel objet, et ces scripts peuvent comporter des attributs configurés par objet. Les attributs de script sont très utiles et accomplissent deux choses principales:

  1. Modularité. Vous pouvez créer un script qui définit comment un ennemi se déplace avec un attribut de vitesse et réutilisez celui-ci pour différents types d'ennemis à des vitesses différentes.
  2. Collaboration. Les attributs de script peuvent être modifiés directement dans l'éditeur sans avoir à toucher aucun code. Cela permet aux concepteurs d'entrer et de modifier les valeurs elles-mêmes sans avoir à déranger le programmeur ou à creuser le code.

Créer un script

Accédez à l'onglet des ressources et créez un nouvel élément de type Script. Ce sera le code pour le comportement du navire, alors, nommez-le comme "Fly". Double-cliquez dessus pour ouvrir l'éditeur de script.

Le manuel d'utilisation de PlayCanvas est une référence très utile lors de l'écriture de scripts, de même que la référence de l'API. L'achèvement automatique facilite également la compréhension des méthodes disponibles. Nous allons commencer par faire tourner notre navire. Tapez ceci dans la fonction de update:

À l'intérieur de n'importe quel script, this s'agit du composant script lui-même, alors que this.entity fait référence à l'objet auquel le script est joint. Vous pouvez accéder à l'un des composants attachés à l'entité de cette façon. Nous accédons ici au corps rigide et nous appliquons une force angulaire.

Assurez-vous d'enregistrer votre script maintenant.

Joingnez un script

Avant que notre script ne soit trop impliqué, attachez-le à notre navire pour voir si cela fonctionne. Pour le faire, ajoutez simplement un script component à votre navire, puis ajoutez votre script "fly" à cela. Notez que vous ne pouvez qu'ajouter un composant de script par objet, mais vous pouvez ajouter plusieurs scripts à l'intérieur de ce composant.

Une fois que vous lancez, vous devriez voir votre bateau tourner!

Ajoutez un attribut

Comme discuté ci-dessus, les attributs de script rendent notre code beaucoup plus souple. Vous pouvez en ajouter un en tapant ceci en haut de votre code, juste après la première ligne où le script est créé:

Dans ce cas, le nom de mon script est Fly. La seule option requise est le type.

Pour voir l'attribut dans l'éditeur, reportez-vous à votre composant de script, puis cliquez sur l'icône avec deux flèches sur le script Fly. C'est le bouton d'analyse qui recherchera des attributs et mettra à jour l'éditeur. Votre composant devrait maintenant ressembler à ceci:

Where to find script attributes

Enfin, pour utiliser la valeur de l'attribut dans votre script, il suffit de faire this.[attribute_name]. Donc, si nous voulions que ce soit la vitesse de rotation, nous pourrions changer notre ligne de code pour:

Remarque: Comme il n'y a pas d'amortissement angulaire, le navire continuera à tourner plus vite si la force est appliquée. Si vous retirez la force, elle conservera son inertie et continuera à tourner à la même vitesse. Pour changer cela, réglez l'amortissement angulaire dans le composant du corps rigide à quelque chose au-dessus de zéro.

Mouvement avec des flèches

Maintenant, nous voulons le script afin que nous puissions orienter le navire avec les touches fléchées. Une approche naïve pourrait ressembler à ceci:

Pouvez-vous dire quel est le problème avec ce script? Essaye le. Pouvez-vous facilement pointer le navire où vous voulez?

Faites-en une réflexion avant de lire. Comment réparerez-vous cela?

Le problème, c'est que nous appliquons une force dans des coordonnées globales sans prendre en compte l'endroit où le navire est confronté. Si le navire est horizontal par rapport à la caméra, et on le fait pivoter sur l'axe des y quand on appuie sur la gauche/droite, puis il tourne correctement. Mais si le navire est vertical, une rotation sur l'axe y est maintenant un rouleau de tonneau.

Le même problème se produirait si nous essayions de déplacer le navire aussi. La direction qui est "en avant" dépend de l'endroit où le navire est confronté et ne peut pas être absolu.

Maintenant, commodément, chaque entité possède trois vecteurs de direction que nous pouvons utiliser: upright et forward. Pour tourner à gauche/à droite, nous tournons le long de l'axe up, et vers le haut et vers le bas, nous tournons le long de l'axe de right. Ceux-ci sont up et right par rapport à l'entité. Une version fixe ressemblerait à ceci:

L'ajout de mouvement vers l'avant est la même idée:

Si le mouvement se déclenche ou trop glissant, passez du temps à peaufiner les vitesses et les facteurs d'amortissement pour l'obtenir là où il se sent bien.

7. Contrôles de la caméra

Il est difficile de suivre un navire en mouvement avec une caméra statique. La façon la plus simple de faire suivre l'appareil est juste en mettant l'appareil photo comme un enfant de cet objet.

Essayez de faire glisser l'appareil photo dans le panneau hiérarchique sur votre navire. Un moyen pratique d'ajuster la vue de la caméra est de passer à la vue de cette caméra en scène. Cliquez sur le bouton en haut de l'écran où il est indiqué Perspective. Cela vous donnera un menu déroulant avec toutes les différentes vues de scène que vous pouvez sélectionner. Sélectionnez la Camera, qui devrait être la plus éloignée. C'est une vue spéciale parce que tout ce que vous voyez dans l'éditeur est ce que la caméra verra dans le jeu.

Une fois que vous avez réglé la vue de la caméra, assurez-vous de revenir à la perspective ou à toute autre vue pour éviter d'avoir mal au hasard les angles de la caméra.

Astuce: si vous avez un objet sélectionné dans la hiérarchie, mais que vous ne pouvez pas le trouver dans votre scène, appuyez sur F. Cela focalisera la vue sur cet objet et l'agrandira. Vous pouvez voir plus de raccourcis clavier en cliquant sur le bouton du clavier à l'extrême gauche de votre écran.

À ce stade, vous devriez avoir une caméra qui suit votre navire (aussi rigide que possible). (Vous ne pourrez pas vous dire si vous déménagez si la caméra évolue et qu'il n'y a pas d'autres objets dans le monde, alors essayez d'en ajouter.)

Scripts de caméra

Une caméra qui est collée sur le lecteur n'est pas très intéressante. Cette publication sur le blog PlayCanvas explore différents types de mouvement de caméra. Le plus simple que nous puissions mettre en œuvre est le regard sur la caméra.

Pour ce faire, passez d'abord la caméra sur l'objet racine.

Ensuite, créez un nouveau script appelé lookAt.

La fonction de mise à jour de ce script devrait ressembler à:

Et il devrait avoir un attribut:

Attachez ce script à l'objet de la caméra. Appuyez sur le bouton d'analyse et définissez la cible pour être l'entité du navire.

Essayez de lancer! Si tout s'est bien passé, votre caméra restera en place mais va simplement s'orienter vers le navire.

Vous pouvez implémenter les autres types de caméras de la même manière. Le trailing follow camera mentionnée dans la publication du blog est idéalement la plus belle, mais j'ai constaté qu'elle était trop nerveuse lorsque le cadencement trempe un peu, alors, pour la démo finale, j'ai fini par aller avec une caméra qui était attachée comme un enfant au navire mais scripté pour se déplacer et tourner comme le faisait le navire.

Conclusion

Ne vous inquiétez pas si certains d'entre eux se sent un peu débordants. PlayCanvas est un moteur complexe avec beaucoup de cloches et de sifflets. Il y a beaucoup à explorer, et garder le manuel à proximité est un bon moyen de trouver votre direction. Une autre bonne façon d'apprendre est simplement en trouvant des projets publics et en regardant comment les choses sont faites.

La partie 2 débutera par la création d'un système de balle, puis par l'ajout de certains astéroïdes à tirer, et nous compléterons en ajoutant un compteur FPS et un texte dans le jeu. Si vous avez des demandes ou des suggestions, ou si quelque chose n'est pas clair, faites-le moi savoir dans les commentaires!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.