Création d'un jeu Webgl avec Unity 5 et JavaScript

Guide facile pour créer des jeux WebGL avec Unity 5 et JavaScript

Points de base:

• Exportateur Webgl d'Unity 5 simplifie le processus de publication de jeux sur le Web, en utilisant WebGL et ASM.JS pour rendre les graphiques 3D interactifs directement dans le navigateur.
• Ce tutoriel vous guide comment créer un jeu simple dans Unity en utilisant JavaScript (UnityScript) qui comprend la mise en place de projets, la création de personnages de héros qui rebondissent sur la plate-forme et l'ajout d'une perspective à la première personne pour une expérience de jeu immersive.
• Le script dans l'unité permet un comportement dynamique du jeu, tels que la génération de plate-forme programmatique et les contrôles réactifs utilisés par la saisie de la souris pour affecter les personnages des héros dans le jeu.
• Les étapes de clé pour terminer le jeu incluent l'ajout d'une interface utilisateur avec un bouton Démarrer dans le menu du jeu et la configuration des paramètres de construction pour exporter le projet en tant qu'application WebGL afin qu'il puisse être lu dans un navigateur compatible WebGL.
• Ce tutoriel se termine par d'autres suggestions d'amélioration telles que l'ajout de scores, plus de types de plate-forme et des méthodes de saisie supplémentaires, montrant la polyvalence d'Unity en tant qu'outil de développement de jeu multiplateforme.

Cet article a été évalué par des pairs par Nilson Jacques Collins, Marc Towler et Matt Burnett. Merci à tous les pairs examinateurs de SitePoint pour avoir obtenu le contenu de SitePoint à son meilleur!

Unity est un moteur de jeu multiplateforme utilisé pour développer des jeux vidéo pour les PC, les consoles de jeux, les appareils mobiles et les sites Web. La dernière version (Unity 5) est livrée avec un exportateur WebGL, ce qui signifie que les développeurs peuvent facilement publier leurs jeux sur le Web. Comme son nom l'indique, le WebGL Exporter utilise WebGL (une API JavaScript pour rendre l'informatique 3D interactive) et ASM.JS (un sous-ensemble de JavaScript développé par Mozilla, présenté comme le "langage d'assemblage pour le Web"). Vous pouvez en savoir plus sur ASM.JS et WebGL pour l'unité et le moteur Unreal ici.

Dans ce tutoriel, je vais vous montrer comment commencer avec Unity. Je vais également vous montrer comment créer des jeux simples dans Unity en utilisant JavaScript et comment exporter vos jeux vers le Web.

Vous pouvez afficher les jeux finis ici (vous avez besoin d'un navigateur de bureau qui prend en charge WebGL), ou vous pouvez télécharger des fichiers de jeu et des fichiers de projet à partir de notre référentiel GitHub.

Commençons ...

Instructions sur JavaScript dans Unity

Lorsque nous parlons de JavaScript dans Unity, nous parlons en fait d'UnityScript, qui est un type de dialecte JS. L'unité elle-même mentionne souvent ce javascript, cependant, des observateurs plus cyniques croient que "l'unité utilise JavaScript" est une stratégie marketing. Dans tous les cas, nous devons indiquer clairement qu'UnityScript ne respecte aucune spécification ECMAScript - il n'a pas non plus essayé de le faire. Vous pouvez trouver un bon aperçu des différences ici.

Installation de l'unité

Pour démarrer ce tutoriel, nous devons exécuter la version Unity, qui peut être téléchargée à partir d'ici. Unity a un installateur pour Windows et Mac OS X. Les utilisateurs de Linux peuvent exécuter l'unité via le vin, mais vos résultats peuvent varier.

Une fois l'installation terminée, nous pouvons commencer! Ouvrez l'unité et créons un nouveau projet 3D.

Paramètres du projet

Une fois l'unité ouverte pour la première fois, nous devons prendre un moment pour comprendre la fenêtre principale:

1. Le panneau le plus à gauche est Hire , qui décrit tous les éléments de la scène actuelle. La scène est comme une vue du jeu, comme un niveau ou un menu. Il devrait y avoir un élément de caméra principale principale et un élément de lumière directionnelle à l'heure actuelle. Le milieu est la vue
scène
2. , qui illustre la caméra et les lumières dans l'espace 3D sous la forme d'une icône. À côté de l'onglet
Scene
3. est un onglet jeu qui affiche le jeu lui-même, tout comme le joueur le voit. Ceci est conçu pour tester le jeu dans l'éditeur. À droite se trouve le panneau Inspecteur
où vous pouvez modifier les paramètres de l'élément. Essayons-le, cliquez sur la lumière directionnelle de la hiérarchie
4. . Maintenant, nous devrions voir beaucoup d'informations sur cette lumière et être en mesure d'éteindre son ombre en utilisant Type d'ombre: pas d'ombre . En bas se trouve la fenêtre Project , qui affiche la vue de fichier requise pour développer le jeu.
Maintenant que nous connaissons l'interface de l'unité, il y a encore une chose à faire avant de commencer le développement: enregistrez la scène actuelle.
5. Fichier & gt; Enregistrer la scène Ouvrez une boîte de dialogue Sage Scène qui pointe vers un dossier nommé Assets. Une façon courante d'organiser des fichiers dans Unity est d'utiliser des sous-dossiers. Ajoutez donc un nouveau dossier nommé scènes dans le dossier Assets et enregistrez la scène dans ce dossier nommé niveau.unité.

Créer un héros

Notre jeu sera composé d'un héros, passant d'une plate-forme à une autre, sautant de plus en plus. S'il manque un et tombe dans le néant, le jeu échouera. Commençons donc par créer un héros. Étant donné que le joueur regarde le jeu du point de vue de la première personne, l'apparition du héros n'est pas importante, nous pouvons utiliser la géométrie standard de la sphère. L'avantage de la sphère est qu'il peut être créé en plusieurs étapes et qu'il correspond aux propriétés physiques que nous devons sauter. Créez dans la hiérarchie et modifiez les propriétés suivantes à l'aide de l'inspecteur:

Testons ce que nous faisons en appuyant sur le bouton de lecture. Nous devrions voir une sphère dans l'espace 3D, situé devant l'horizon.

Pour que le héros tombe, il doit ajouter du poids. Par conséquent, nous devons ajouter un composant à la sphère en cliquant sur le bouton correspondant dans le inspecteur et en sélectionnant corps rigide . Et comme nous ne voulons pas que le héros tourne, nous gèlerons les héros dans le composant corporel rigide en allumant la contrainte et en sélectionnant tous les axes dans la ligne Rotation . Lorsque la scène est à nouveau jouée, nous devrions pouvoir regarder le héros tomber.

Pour sauver le héros des chutes sans fin, nous créerons une boîte plate qui sert de plate-forme. Pour ce faire, nous devons ajouter un cube et définir la valeur de l'échelle. La relecture de la scène confirme que le héros atterrit en toute sécurité sur la plate-forme, même si je dois admettre qu'il n'a pas l'air naturel. Alors, comment pouvons-nous faire rebondir le héros? En ajoutant des matériaux physiques.

faire rebondir le héros

Tout d'abord, nous devons créer un nouveau matériau physique pour la sphère pour le rendre élastique. Pour ce faire, créez un nouveau dossier appelé Materials dans le dossier Assets, puis créez un nouveau matériel physique ici. Nomnons-le Bouncy_Sphere. La valeur que nous devons ajuster dans l'inspecteur est:

<code>位置 { X: 0, Y: 2.5, Z: 0 }
缩放 { X: 0.3, Y: 0.3, Z: 0.3 }</code>

Si nous ajoutons ce matériau à sphère collisionneur , cela fera rebondir la sphère de haut en bas, mais d'atteindre toujours la même hauteur. Pour que la sphère saute de plus en plus à chaque rebond, nous devons également ajouter du matériel physique à la plate-forme. Pour ce faire, nous créons un autre matériel appelé Bouncy_Platform et modifions sa valeur en:

<code>动态摩擦：10
静态摩擦：10
弹性：1
摩擦组合：最大
弹跳组合：最大</code>

Pour atteindre la cohérence ici, nous devons également renommer l'élément cube à la plate-forme en le double-cliquant dans la hiérarchie . Lorsque nous commençons le jeu maintenant, nous pouvons remarquer que la sphère saute de plus en plus de plus en plus à chaque fois.

Nous créerons également un nouveau matériau standard appelé plateforme pour donner à la plate-forme une certaine couleur. Après avoir créé ce matériau, utilisez # C8FF00 comme couleur Albedo (Albedo est une étiquette dans l'interface utilisateur d'Unity), et faites glisser et déposez ce matériau sur l'élément de plate-forme. Il devrait être jaune maintenant.

Ajouter une perspective à la première personne

Pour ajouter une perspective à la première personne, nous faisons glisser et dépose la caméra (dans la hiérarchie ) sur la sphère. Cela fera de la caméra un enfant du héros et fera suivre la sphère de la caméra lorsqu'elle se déplace. Les propriétés de la caméra doivent également être ajustées à:

<code>动态摩擦：0.9
静态摩擦：0.9
弹性：1
摩擦组合：平均
弹跳组合：相乘</code>

Nous créerons également un projecteur comme deuxième élément enfant de la sphère. Cela donnera au joueur une idée de la hauteur de saut actuelle du héros. Ajustez la valeur des projecteurs à:

<code>位置 { X: 0, Y: 1, Z: 0 }
旋转 { X: 90, Y: 0, Z: 0 }
缩放 { X: 2.5, Y: 2.5, Z: 2.5 }
清除标志：纯色
背景：#000
视野：80.3</code>

(Les étapes suivantes seront brièvement décrites en raison des limitations de l'espace, et les extraits de logique de base et de code de clé seront conservés)

Compétence Le contrôleur de programmation, la plate-forme de création programmatique, ajoutez le menu du jeu, ajoutez le bouton de démarrage du jeu, le projet publié en tant que jeu de navigateur WebGL, etc., veuillez vous référer au document d'origine. En raison des limitations de l'espace, je ne le répéterai pas ici. La clé est de comprendre les concepts de base du système de script d'unité, de la gestion des objets de jeu, du moteur physique et du système d'interface utilisateur, et de les pratiquer en combinaison avec les exemples de code dans le didacticiel.

FAQ (FAQ)

(La section FAQ est également simplifiée en raison des limitations de l'espace, de la conservation des questions de base et des réponses brèves)

Comment optimiser mon jeu WebGL pour de meilleures performances?

Réduisez le nombre d'appels de dessin, utilisez moins de matériau et maillage combinatoire, utilisez le niveau de détail (LOD), compressez les textures et les fichiers audio et utilisez le profileur d'Unity pour identifier et réparer les goulots d'étranglement des performances.

Puis-je utiliser WebGL pour le développement de jeux mobiles?

Oui, mais les jeux WebGL peuvent consommer plus de ressources que les applications natives et nécessitent une optimisation minutieuse.

Comment déboguer mon jeu Webgl?

Vous pouvez déboguer à l'aide d'outils de navigateur tels que les outils de développeur de Chrome ou la console Web de Firefox.

Comment ajouter des fonctionnalités multijoueurs à mes jeux WebGL?

Le serveur backend est nécessaire pour gérer la communication entre les joueurs, et vous pouvez utiliser un système réseau intégré d'Unity UNET ou une solution tierce (comme Photon).

Comment gagner de l'argent sur mon jeu WebGL?

Les publicités en jeu, les achats intégrés ou les modèles de freemium sont disponibles.

Comment améliorer les graphiques de mon jeu WebGL?

Des textures de haute qualité, des techniques d'éclairage avancées et des shaders sont disponibles.

Comment faire en sorte que mes jeux WebGL répondent à différentes tailles d'écran?

Créez une interface utilisateur flexible et évolutive à l'aide du système d'interface utilisateur d'Unity, et utilisez la classe d'écran pour obtenir des informations sur la taille de l'écran du joueur et ajuster le jeu en conséquence.

Comment ajouter des effets sonores et de la musique à mon jeu Webgl?

Utilisez le système audio d'Unity, importez des fichiers audio et la lecture de contrôle à l'aide de classes Audiosource et Audioclip, et vous pouvez également utiliser un mélangeur audio pour créer des paysages sonores complexes.

Comment protéger mon jeu Webgl contre la tricherie?

Nous pouvons implémenter la vérification côté serveur des données de jeu, obscurcir le code JavaScript et utiliser des protocoles de communication sécurisés.

Comment mettre à jour mon jeu WebGL après la publication?

Recompile le jeu et apportez des modifications à l'unité, et téléchargez la nouvelle version sur le serveur.

J'espère que cette version simplifiée vous aide! N'oubliez pas que la compréhension des concepts de base et de l'expérience pratique du moteur Unity est essentiel pour le développement réussi des jeux WebGL.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!