Share
PlayCanvas facilite la création de contenu interactif 3D basé sur WebGL. Tout en JavaScript, il s'exécute donc de manière native dans le navigateur sans plug-ins. C'est un moteur assez jeune qui n'existe que depuis 2014, mais il gagne rapidement en popularité avec des noms comme Disney, King et Miniclip qui l'utilisent pour développer des jeux..
C’est un excellent outil pour deux raisons principales: tout d’abord, c’est un moteur de jeu complet qui prend en charge tout, des graphismes aux collisions en passant par l’audio et même l’intégration avec les gamepads / VR. (Ainsi, vous n'aurez pas à chercher les bibliothèques externes ni à vous soucier de problèmes de compatibilité de navigateur pour la plupart des choses.) Le second, et ce qui le distingue vraiment, est son éditeur basé sur un navigateur..
Voici à quoi ressemble un exemple de projet dans l'éditeur intégré au navigateur de PlayCanvas. C'est un moyen très puissant et pratique d'organiser votre travail ou même de collaborer avec d'autres en temps réel.Si vous avez l'habitude de travailler avec le moteur Unity, l'éditeur de PlayCanvas devrait vous paraître familier (il utilise même un système similaire à base de composants pour chaîner les fonctionnalités). Contrairement à Unity, PlayCanvas n’est pas multiplateforme et ne peut publier que sur le Web. Cependant, si vous vous souciez uniquement du Web, il s’agit là d’un avantage considérable, car le moteur du Web est extrêmement 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 en ligne et les outils ne sont gratuits que pour les projets publics.Cela vaut certainement la peine de payer si vous développez un travail commercial avec ce logiciel, mais vous pouvez toujours l'utiliser simplement comme cadre de code gratuitement..
C'est ce que nous allons créer:
Vous pouvez essayer une démo en direct.
Le projet lui-même est public, vous pouvez donc l'explorer et / ou le placer sur sa page de projet..
Vous n'avez pas besoin de connaître les jeux en 3D pour suivre, mais je suppose que je connais un peu les bases de JavaScript..
Le résultat final est une démo relativement simple dans laquelle il suffit de survoler et de repousser les astéroïdes, mais qui couvre suffisamment de fonctionnalités de base qui seront utiles pour créer tout type de jeu en 3D. La première partie couvrira la configuration de base, l’utilisation des modèles, du système physique et des commandes de la caméra. La partie 2 couvrira le système de balle, les astéroïdes géniteurs et le travail avec du texte.
Rendez-vous sur playcanvas.com et créez un compte.
Une fois connecté, cliquez sur le bouton projets languette dans le tableau de bord et appuyez sur le gros orange Nouveau bouton créer un nouveau projet. Cela devrait faire apparaître la boîte "nouveau projet". Sélectionnez "projet vide" et donnez-lui un nom:
Une fois que vous avez terminé, appuyez sur le bouton créer en bas à droite. Cela vous enverra à la page de synthèse 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 la grande orange bouton d'éditeur.
Lorsque vous entrez dans votre premier projet, PlayCanvas vous montrera de nombreuses astuces concernant son éditeur. Vous pouvez les rejeter pour l'instant. Les principales choses à noter sont:
Pour créer un nouvel objet dans votre scène, cliquez sur le petit bouton plus en haut du panneau de hiérarchie:
Remarque: Vous pourriez créer accidentellement un nouvel objet dans un objet déjà existant. Ceci est utile pour construire des objets composés de plusieurs pièces ou liés d'une manière ou d'une autre. Vous pouvez déplacer des objets dans le panneau de la hiérarchie pour contrôler l'imbrication. Faites-le glisser sur le Racine objet pour le replacer en haut de la hiérarchie.
Par exemple, je vais créer une nouvelle boîte et la colorier en rouge. Pour lui donner une couleur personnalisée, nous devons créer un nouveau matériau. Vous pouvez le faire dans le panneau des ressources, soit en cliquant avec le bouton droit de la souris n'importe où dans le panneau, soit en cliquant sur la petite icône Plus:
Une fois créé, sélectionnez votre matériau et attribuez-lui un nom descriptif tel que "RedMaterial" (vous pouvez voir le champ du nom dans le panneau de l'inspecteur)..
Maintenant, faites défiler le diffuser section et changer la couleur:
Une fois que cela est fait, revenez en arrière et sélectionnez la nouvelle boîte que vous avez créée (soit en cliquant dessus dans la scène ou dans le panneau de la hiérarchie). Définissez ensuite son matériau sur le matériau personnalisé que nous venons de créer:
Et la boîte devrait maintenant être rouge! Notez que le matériau que vous avez créé peut être attaché à autant d'objets que vous le souhaitez..
Pour activer la physique sur un objet, nous devons ajouter deux composants: Corps rigide et Collision.
Ajoutez le corps rigide en cliquant sur "Ajouter un composant" dans le panneau d'inspecteur de votre objet:
Assurez-vous que son type est défini sur dynamique:
Et puis 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 à travers le sol! Pour résoudre ce problème, vous devrez également ajouter un corps rigide et une collision à l'avion, en vous assurant que son type de corps rigide est statique (pour 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 (sur l’axe X ou Z) pour le regarder rouler..
Il est utile de parler brièvement du système de composants, car il s’agit d’un élément fondamental de l’architecture de PlayCanvas. Conceptuellement, l’idée est de séparer la fonctionnalité des objets. Le plus gros avantage est la possibilité de composer un comportement complexe à 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 l'appareil photo à n'importe quoi pour le transformer en appareil photo ou attacher un corps rigide et le heurter à 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 Wikipedia..
Maintenant que vous êtes à l'aise avec les bases, nous pouvons commencer à mettre en place notre jeu spatial. Il nous faut au moins un navire et un astéroïde pour travailler. Il y a deux façons d'ajouter des modèles:
PlayCanvas propose un magasin (similaire au magasin Unity Asset Store) dans lequel vous pouvez rechercher et télécharger des fichiers directement dans votre projet. Pour y accéder, il suffit de cliquer sur bibliothèque dans le panneau des actifs.
Le magasin est très récent, il est donc plutôt rare, mais c’est un bon endroit pour trouver des espaces réservés ou des ressources à expérimenter..
J'ai utilisé l'actif de hovership du magasin comme navire de joueur.
PlayCanvas prend en charge le téléchargement de fichiers FBX, OBJ, 3DS et COLLADA (DAE), mais 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 au format souhaité..
Vous pouvez trouver le modèle d'astéroïde que j'ai utilisé sur Blendswap.com. Notez que vous souhaiterez peut-être optimiser vos modèles 3D avant de les utiliser dans le jeu. Par exemple, ce modèle d'astéroïde contient plus de 200 000 triangles! Cela pourrait convenir à un objet spécial du 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 modificateur Decimate de Blender est un moyen simple d’optimiser vos modèles. Je l'ai utilisé 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 panneau d'actifs), vous pouvez les ajouter à votre scène. Pour ce faire, le plus simple consiste à faire glisser le modèle dans la scène:
C'est le modèle réel que vous pouvez ajouter à la scène. Les autres atouts qui l’entourent sont la texture / le matériau, etc..Comme avant, ajoutez un corps rigide et un composant de collision au navire. Une astuce que vous pouvez faire avec une collision consiste à ajouter le maillage de l'objet réel en tant que forme de collision. Cela résulterait en 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 forme de collision (et une sphère pour les astéroïdes) et édité le demi-étendue correspondre approximativement à la forme du modèle.
L'un des problèmes que vous pouvez rencontrer lors de l'ajustement des formes de collision est l'impossibilité de la décaler du centre. Un moyen facile de contourner ce problème (en plus de devoir compenser le modèle lui-même dans quelque chose comme Blender avant de l'exporter) consiste à créer un objet parent doté de la collision et du corps rigide, ainsi qu'un objet enfant possédant le modèle lui-même. Donc, vous pouvez décaler le modèle en tant qu’enfant par rapport au parent qui contient la collision.
Voici comment je l’ai configuré pour le projet de démonstration, vous pouvez donc jeter un coup d’œil à celui-ci pour voir comment cela se passe..
Puisque notre jeu se déroule dans l'espace, nous devons remplacer la gravité par défaut. Vous pouvez le faire dans les paramètres de la scène. Tout en bas à gauche de votre écran, cliquez sur le bouton icône d'engrenage. Cela ouvrira les paramètres dans le panneau de l'inspecteur. Recherchez la section physique et modifiez la valeur de gravité:
Pour vous assurer que cela a fonctionné, essayez à nouveau de lancer et voyez si le vaisseau flotte juste dans l'espace.
Ce n'est pas tout à fait l'espace sans un fond étoilé, alors pendant que nous sommes dans les paramètres de la scène, ajoutons une skybox. Vous pouvez en prendre un dans le magasin ou simplement en trouver un en ligne que vous aimez. Une fois que vous l'avez, ajoutez-le dans la section de rendu:
Cela devrait donner au jeu un plus nébuleux ressentir. Ce serait également le bon moment pour nettoyer votre scène et supprimer tous les objets de test créés précédemment..
C’est là que nous arrivons enfin à écrire du code. Le système de script de PlayCanvas est un autre élément qui devrait être familier si vous avez utilisé Unity. Vous créez des scripts pouvant être attachés à n’importe quel objet, et ces scripts peuvent avoir les attributs qui sont configurés pour chaque objet. Les attributs de script sont très utiles et accomplissent deux choses principales:
Accédez à l'onglet Actifs et créez un nouvel actif de type. Scénario. Ce sera le code pour le comportement du vaisseau, donc nommez-le quelque chose comme "Fly". Double-cliquez dessus pour ouvrir l'éditeur de script.
Le manuel de l'utilisateur PlayCanvas est une référence très utile lors de la rédaction de scripts, tout comme la référence de l'API. L'auto-complétion permet également de déterminer facilement les méthodes disponibles. Nous allons commencer par faire simplement pivoter notre navire. Tapez ceci dans le mettre à jour une fonction:
this.entity.rigidbody.applyTorque (0,1,0);
À l'intérieur de n'importe quel script, ce fait référence au composant de script lui-même, alors que this.entity fait référence à l'objet auquel le script est attaché. De cette manière, vous pouvez accéder à n’importe quel composant attaché à l’entité. Ici, nous accédons au corps rigide et lui appliquons une force angulaire.
Assurez-vous de sauvegarder votre script maintenant.
Avant que notre script ne soit trop impliqué, attachons-le à notre vaisseau pour voir si cela fonctionne. Pour cela, ajoutez simplement un composant de script à votre navire, puis ajoutez votre script "voler" à cela. Notez que vous ne pouvez ajouter qu'un seul composant de script par objet, mais que vous pouvez ajouter plusieurs scripts à l'intérieur de ce composant..
Une fois que vous lancez, vous devriez voir votre navire en rotation!
Comme indiqué ci-dessus, les attributs de script rendent notre code beaucoup plus flexible. 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éé:
Accentsconagua
Fly.attributes.add ('speed', type: 'number', par défaut: 10, titre: 'Ship Speed');Dans ce cas, le nom de mon script est Voler. La seule option requise est type.
Pour voir l'attribut dans l'éditeur, retournez à votre composant de script et cliquez sur l'icône avec le script en forme de deux flèches. C'est le bouton d'analyse qui recherchera tous les attributs et mettra à jour l'éditeur. Votre composant devrait maintenant ressembler à ceci:
Enfin, pour utiliser la valeur de l'attribut dans votre script, il suffit de faire ceci. [nom_attribut]. Donc, si nous voulions que cela soit la vitesse de rotation, nous pourrions changer notre ligne de code pour:
this.entity.rigidbody.applyTorque (0, this.speed, 0);
Remarque: en l'absence d'amortissement angulaire, la vitesse de rotation du navire est d'autant plus forte que la force est longue. Si vous supprimez la force, il conservera son inertie et continuera à tourner à la même vitesse. Pour changer cela, réglez l’amortissement angulaire dans le composant de corps rigide sur quelque chose de supérieur à zéro..
Maintenant nous voulons le script pour pouvoir orienter le vaisseau avec les flèches. Une approche naïve pourrait ressembler à ceci:
Fly.prototype.update = fonction (dt) if (this.app.keyboard.isPressed (pc.KEY_RIGHT)) this.entity.rigidbody.applyTorque (0, this.speed, 0); if (this.app.keyboard.isPressed (pc.KEY_LEFT)) this.entity.rigidbody.applyTorque (0, this.speed * -1,0); if (this.app.keyboard.isPressed (pc.KEY_UP)) this.entity.rigidbody.applyTorque (this.speed * -1,0,0); if (this.app.keyboard.isPressed (pc.KEY_DOWN)) this.entity.rigidbody.applyTorque (this.speed, 0,0); ;
Pouvez-vous dire quel est le problème avec ce script? Essaye le. Pouvez-vous facilement indiquer le navire où vous voulez?
Pensez-y avant de continuer à lire. Comment régleriez-vous cela??
Le problème est que nous appliquons une force en coordonnées globales sans tenir compte de la position du navire. Si le bateau est horizontal par rapport à la caméra et que nous le faisons pivoter sur l’axe des y lorsque nous appuions sur les touches gauche / droite, il tourne correctement. Mais si le navire est vertical, une rotation sur l'axe des ordonnées est maintenant un tonneau.
Le même problème se poserait si nous essayions également de faire avancer le navire. La direction "en avant" dépend de la position du navire et ne peut être absolue..
Maintenant, chaque entité a trois vecteurs de direction que nous pouvons utiliser: en haut, droite, et vers l'avant. Pour tourner à gauche / droite, on tourne le long du en haut axe, et de haut en bas nous tournons le long du droite axe. Ceux-ci sont en haut et droite par rapport à l'entité. Une version corrigée ressemblerait à ceci:
Fly.prototype.update = fonction (dt) var horizontalForce = this.entity.up.clone (); var verticalForce = this.entity.right.clone (); if (this.app.keyboard.isPressed (pc.KEY_RIGHT)) this.entity.rigidbody.applyTorque (horizontalForce.scale (this.speed * -1)); if (this.app.keyboard.isPressed (pc.KEY_LEFT)) this.entity.rigidbody.applyTorque (horizontalForce.scale (this.speed)); if (this.app.keyboard.isPressed (pc.KEY_UP)) this.entity.rigidbody.applyTorque (verticalForce.scale (this.speed * -1)); if (this.app.keyboard.isPressed (pc.KEY_DOWN)) this.entity.rigidbody.applyTorque (verticalForce.scale (this.speed)); ;
Ajouter le mouvement en avant est la même idée:
if (this.app.keyboard.isPressed (pc.KEY_Z)) this.entity.rigidbody.applyForce (this.entity.forward.clone (). scale (-1));
Si le mouvement vous semble trop lent ou trop glissant, passez un peu de temps à peaufiner les facteurs de vitesse et d’amortissement pour l’atteindre à la bonne place..
Il est difficile de suivre un navire en mouvement avec une caméra statique. Le moyen le plus simple de faire en sorte que la caméra suive un objet est simplement de la placer en tant qu’enfant de cet objet..
Essayez de faire glisser la caméra dans le panneau de la hiérarchie sur votre vaisseau. Un moyen pratique d'ajuster la vue de la caméra consiste à passer à la vue en scène de cette caméra. Cliquez sur le bouton en haut de l'écran où il est écrit La perspective. Cela vous donnera une liste déroulante avec toutes les différentes vues de scènes que vous pouvez sélectionner. Sélectionner Caméra, qui devrait être la plus éloignée. C'est une vue spéciale parce que tout ce que vous voyez dans l'éditeur correspond à ce que la caméra verra dans le jeu..
Une fois que vous avez ajusté la vue de la caméra, veillez à revenir en perspective ou à toute autre vue pour éviter de gâcher accidentellement les angles de la caméra..
Pointe: Si un objet est sélectionné dans la hiérarchie mais que vous ne le trouvez pas dans votre scène, appuyez sur F. Cela va focaliser la vue sur cet objet et zoomer dessus. 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 vaisseau (aussi rigide qu’elle puisse être). (Vous ne pourrez pas savoir si vous bougez si la caméra bouge et s'il n'y a pas d'autres objets dans le monde, essayez donc d'en ajouter.)
Une caméra coincée sur le lecteur n’est pas très intéressante. Cet article sur le blog de PlayCanvas explore différents types de mouvements de caméra. Le plus simple que nous puissions mettre en œuvre est le regarde la caméra.
Pour ce faire, replacez d'abord la caméra sur l'objet racine..
Ensuite, créez un nouveau script appelé Regarder.
La fonction de mise à jour de ce script devrait ressembler à ceci:
LookAt.prototype.update = function (dt) this.entity.lookAt (this.target.getPosition ()); ;
Et il devrait avoir un attribut:
LookAt.attributes.add ('cible', type: 'entité');Maintenant, attachez ce script à l'objet caméra. Appuyez sur le bouton d’analyse et définissez la cible comme étant l’entité du navire..
Essayez de lancer! Si tout va bien, votre caméra restera en place mais se dirigera simplement vers le navire.
Vous pouvez implémenter les autres types de caméras de la même manière. le suivi caméra mentionné dans l'article de blog semble idéalement le plus agréable, mais je l'ai trouvé trop nerveux lorsque le framerate plonge un peu, donc pour la démo finale, j'ai fini par aller avec un appareil photo qui était attaché comme un enfant au navire, mais scripté pour se déplacer et faire pivoter comme le navire l'a fait.
Ne vous inquiétez pas si cela vous semble un peu écrasant. PlayCanvas est un moteur complexe avec beaucoup de cloches et de sifflets. Il y a beaucoup à explorer et garder le manuel à portée de main est un bon moyen de se repérer. Un autre bon moyen d'apprendre consiste simplement à trouver des projets publics et à regarder comment les choses se font.
La deuxième partie commence par la création d'un système de puces, puis par l'ajout d'astéroïdes sur lesquels tirer, et nous complétons par l'ajout d'un compteur FPS et d'un texte dans le jeu. Si vous avez des demandes ou des suggestions, ou si quelque chose n'est pas clair, s'il vous plaît faites le moi savoir dans les commentaires!
