Guide pour créer une interface web avec Unreal Engine Remote Control

Ce que vous apprendrez dans ce guide

Unreal Engine Remote Control est un système qui permet de gérer le contenu d’un projet en dehors de l’interface de l’éditeur. Il accepte les requêtes HTTP et les messages WebSocket via un serveur web ; les applications web peuvent s’en servir pour lire et modifier les propriétés exposées à Blueprint et Python. Dans ce guide, nous expliquons comment activer le plugin Remote Control Web Interface, intégrer les propriétés d’un Remote Control Preset dans une application web et les contrôler à l’aide de widgets.

Outre le contrôle à distance, le système permet à plusieurs clients web de se connecter au même projet. Les modifications apportées par un client sont répercutées sur les autres via le serveur web. Cette méthode peut donc être utile dans un environnement de travail collaboratif en direct ou lorsqu’une interface dédiée à certains contrôles du projet est nécessaire. La fonctionnalité étant indiquée comme bêta, il convient d’en tester les limites et les conditions de fonctionnement avant de l’utiliser, en particulier dans un projet destiné à être publié.

Prérequis et installation

Le guide officiel de Remote Control Web Interface indique NodeJS 8 comme version minimale et 14.15.5 comme version maximale. Cette plage correspond aux prérequis mentionnés dans la documentation ; avant l’installation, il est important de vérifier la compatibilité avec la version d’Unreal Engine utilisée et l’environnement de développement existant. Les sources ne précisant pas de numéro de version d’Unreal Engine, aucune hypothèse supplémentaire n’est formulée ici concernant la compatibilité des versions.

Après avoir ouvert le projet dans Unreal Editor, allez dans Edit > Plugins depuis le menu principal. Repérez le plugin Remote Control Web Interface dans la catégorie Messaging, activez-le, puis redémarrez le moteur. Pour vérifier que le plugin a bien lancé l’application web, ouvrez l’Output Log via Window > Developer Tools > Output Log et filtrez les résultats avec l’expression « remote control web ». Le guide officiel donne un exemple de message de démarrage confirmant que l’application web fonctionne sur le port 7000.

Le port utilisé par Remote Control Web Interface peut être modifié dans les paramètres Plugins > Remote Control, accessibles depuis Edit > Project Settings. Pour ouvrir l’application web depuis la machine sur laquelle tourne le moteur, saisissez 127.0.0.1:7000 dans la barre d’adresse du navigateur. Pour y accéder depuis d’autres machines, la documentation officielle recommande de consulter les instructions Quick Start sur l’exposition de l’API Remote Control aux autres ordinateurs. Comme ce guide ne donne pas d’étapes supplémentaires pour cette configuration réseau, nous nous limitons à la connexion locale.

Étape par étape : connecter un preset à l’interface web

1. Préparez le preset. Le système Remote Control peut agir sur des fonctions et des propriétés exposées à Blueprint et Python. Pour exposer le contenu du projet à l’API sans écrire de code, vous pouvez utiliser un Remote Control Preset. L’application web lit le contenu du preset ouvert dans la session Unreal. Avant de passer à l’interface, vérifiez donc que les propriétés à contrôler figurent bien dans le preset.

2. Ouvrez l’application web. Une fois le plugin démarré, utilisez l’un des navigateurs pris en charge. Le guide officiel cite Chrome, Firefox et Safari. Si l’application web est ouverte sur la même machine, utilisez l’adresse locale indiquée. Si l’interface ne se charge pas, vérifiez le message de démarrage dans l’Output Log et assurez-vous que la connexion utilise le bon port.

3. Passez en mode Design. À l’ouverture de la page, une application Remote Control vide peut apparaître. Utilisez le sélecteur Control de l’interface pour passer en mode Design. Examinez ensuite les propriétés du preset dans l’onglet Properties. Faites glisser une propriété depuis la liste de gauche vers la zone de l’interface pour créer un widget associé à cette propriété. Si vous la déposez sur un panneau, le widget y est ajouté ; en l’absence de panneau, l’application en crée un et y place le widget.

4. Choisissez le type de widget adapté. L’interface propose notamment des boutons, sélecteurs de couleur, cadrans, listes déroulantes, joysticks, étiquettes, listes, panneaux, sliders, onglets, champs de texte, bascules et vecteurs. Un panneau contient les autres widgets et doit être ajouté en premier. Pour présenter différents groupes d’interface dans des onglets, le widget List peut contenir des panneaux. Certains formats de données permettent de modifier le mode d’affichage ; par exemple, une donnée de type vector peut être présentée sous forme de joystick, de cadran ou de slider.

5. Faites un essai en mode Control. Après avoir placé les widgets, repassez en mode Control. Modifiez la propriété dans l’interface web et observez si la modification est répercutée dans Unreal Editor. Pour que les changements restent visibles lorsque l’éditeur est en arrière-plan, il est recommandé de désactiver Use Less CPU when in Background, dans General > Performance sous Edit > Editor Preferences.

6. Enregistrez la mise en page. Pour enregistrer la disposition de l’interface web, sauvegardez le Remote Control Preset correspondant dans Unreal Editor. À la prochaine ouverture, l’application utilisera la dernière disposition enregistrée. En mode Design, la sélection d’un widget permet de modifier son libellé dans le panneau de paramètres ; si le widget est associé à une propriété, il est également possible de changer la propriété liée. Les widgets inutiles peuvent être supprimés individuellement ou avec le panneau qui les contient.

Conséquences pour les workflows d’architecture et d’archviz

Pour les équipes d’architecture, d’architecture d’intérieur et d’archviz, l’intérêt principal de cette approche est de regrouper dans une interface web certains contrôles exposés dans le projet, sans donner accès à l’ensemble de l’éditeur. Une équipe peut, par exemple, concevoir une interface adaptée à sa méthode de travail ; les paramètres à contrôler doivent toutefois être préalablement exposés via un Remote Control Preset. Les sources ne fournissant pas d’exemples précis de paramètres architecturaux, le choix des propriétés de la scène dépend de la structure du projet.

La prise en charge de plusieurs clients simultanés et la propagation des modifications aux autres clients peuvent être utiles lors de revues collaboratives en direct. Il est possible d’ajouter un onglet Level Snapshots à l’application web pour créer de nouveaux instantanés du niveau ou revenir à un instantané existant ; le plugin Level Snapshots doit être activé. L’onglet Sequencer répertorie les séquences du projet et permet de lancer ou de reprendre celles qui se trouvent dans le niveau courant. Toutefois, même si la page répertorie toutes les séquences du projet, seules celles présentes dans le niveau courant peuvent être lues ; le filtre repose également sur le chemin de l’asset, et non sur son appartenance à un niveau.

La compatibilité de l’installation, l’accès réseau et le statut bêta sont des points à prendre en compte par les studios et les étudiants. La documentation officielle limite la plage de versions de NodeJS à des versions antérieures ; en outre, le système est désactivé par défaut dans les projets packagés et en mode jeu. Pour l’activer dans ces modes, les indicateurs de lancement suivants sont indiqués dans la documentation :

-RCWebControlEnable -RCWebInterfaceEnable

Ces indicateurs sont ajoutés à la ligne de commande lors du lancement du projet Unreal. La fonctionnalité étant décrite comme bêta, il est recommandé de tester séparément le scénario d’utilisation prévu avant une publication ou une présentation client.

Problèmes fréquents

Si l’application web ne s’ouvre pas, vérifiez d’abord que le plugin est activé et que le moteur a été redémarré. Recherchez ensuite le message de démarrage dans l’Output Log à l’aide du filtre « remote control web » ; si le port a été modifié, celui indiqué dans l’adresse du navigateur doit également être mis à jour. Si les changements ne sont pas visibles dans l’éditeur, vérifiez le paramètre qui réduit l’utilisation du CPU en arrière-plan.

Si une propriété ne figure pas dans la liste, vérifiez qu’elle se trouve dans le Remote Control Preset ouvert. Plusieurs presets peuvent être utilisés, mais un seul peut être ouvert à la fois. Par ailleurs, si le preset correspondant n’est pas enregistré, la disposition de l’interface risque de ne pas être conservée comme prévu à la prochaine ouverture. Même si les onglets Level Snapshots ou Sequencer sont visibles, vérifiez séparément que le plugin requis ou les conditions liées au niveau sont réunis pour utiliser la fonction correspondante.

Étapes suivantes

Commencez par vérifier la connexion locale avec un seul preset et quelques widgets. Organisez ensuite l’interface nécessaire à l’aide d’onglets et de panneaux, puis enregistrez le preset. Si vous prévoyez d’utiliser plusieurs clients, Level Snapshots ou Sequencer, testez chaque fonctionnalité dans ses conditions de fonctionnement propres. Pour établir une connexion depuis d’autres ordinateurs, consultez les instructions Quick Start officielles ; ne tentez pas de deviner les paramètres réseau qui ne sont pas détaillés dans cette source.

Sources et licence

Ce contenu a été adapté en turc à partir de la documentation officielle d’Epic Games sur Unreal Engine Remote Control et Remote Control Web Application. Les deux sources sont proposées sous une licence libre.