Personnaliser le split screen d'Unreal Engine avec un plugin simple

La puissance et la polyvalence de l'Unreal Engine ont révolutionné l'industrie du jeu vidéo, permettant aux développeurs de créer des mondes numériques époustouflants que les joueurs peuvent explorer. Parmi ses nombreuses fonctionnalités, la possibilité de mettre en œuvre la fonctionnalité d'écran partagé pour les jeux multijoueurs est un favori de longue date aux yeux de beaucoup. Le jeu en écran partagé permet à des amis de se réunir autour d'un seul écran et de vivre ensemble des expériences multijoueurs palpitantes. Dans cet article, nous souhaitons parler de cette fonctionnalité et de la manière dont elle peut être personnalisée à l'aide des Plugins Unreal Engine.

Commençons par une brève introduction. Unreal Engine Split Screen est une fonctionnalité permettant le rendu de plusieurs fenêtres d'affichage dans une seule fenêtre d'application. Elle est couramment utilisée, par exemple, dans les jeux proposant un mode multijoueur local. Unreal Engine prend en charge l'écran partagé nativement, mais l'implémentation se limite à certaines des dispositions les plus populaires uniquement. Parfois, cela ne suffit pas, et certains de vos projets peuvent nécessiter une disposition personnalisée. C'est le cas, notamment lorsqu'il s'agit de tailles d'écran différentes pour différents joueurs.

Ce sujet est particulièrement important pour HMI (interface homme-machine) et automobile projets. Ces projets nécessitent souvent plusieurs viewports dans une seule application pour visualiser toutes les informations nécessaires. Malheureusement, l'écran à division égale par défaut utilisé par la plupart des jeux ne répondrait que rarement aux besoins d'une application industrielle.

Dans cet article, nous souhaitons vous montrer comment une mise en page personnalisée en écran partagé sous Unreal Engine peut être réalisée à l'aide de plugins. Bien sûr, il existe d'autres moyens d'obtenir un résultat similaire. Vous pouvez y parvenir, par exemple, en modifiant directement le code source d'Unreal Engine. Cependant, cette approche nécessite de reconstruire l'intégralité du moteur, ce qui est chronophage et potentiellement problématique. Ajouter le code directement au projet était également une possibilité, bien sûr, mais l'utilisation d'un plugin Unreal Engine facilite sa réutilisation dans différents projets.

Un scénario réel de cette approche serait notre HMI DigiTwin projet, où nous voulions trois fenêtres d'affichage avec une option de basculer vers une seule remplissant toute la zone :

Sans plus attendre, passons directement à la manière de procéder.

Comment personnaliser l'écran partagé d'Unreal Engine

Commençons par créer un nouveau projet Unreal Engine. Choisissez l'un des modèles ou utilisez un projet existant (si vous le préférez).

N'oubliez pas d'activer la prise en charge de C++.

Nous devons maintenant activer le mode multijoueur local.

Ouvrez le blueprint du niveau, comme dans l'écran ci-dessous :

Créez deux joueurs supplémentaires avec les identifiants de manette 1 et 2 :

Lancez le projet pour vérifier le résultat ; l'écran partagé à 3 joueurs par défaut sera utilisé :

Créer un nouveau plugin

Ouvrez le menu des plugins Unreal Engine en sélectionnant Edit -> Plugins :

Cliquez sur « Add », puis sélectionnez « Blank » et saisissez un nom pour votre plugin. Confirmez avec le bouton « Create Plugin » :

Créer une nouvelle implémentation de GameViewportClient

Sélectionnez Tools -> New C++ Class…, puis basculez vers « All Classes » et sélectionnez GameViewportClient comme parent.

Continuez en appuyant sur « Suivant » :

Saisissez un nom pour la nouvelle classe (par ex., CustomGameViewportClient), puis sélectionnez le plugin comme module cible dans la liste déroulante :

Le build échouera pour l'instant ; c'est attendu :

Résolution du problème de l'éditeur de liens

Basculez vers la fenêtre Visual Studio ; elle devrait déjà s'être ouverte automatiquement en arrière-plan.

Naviguer versPluginExample\Plugins\CustomSplitScreen\Source\CustomSplitScreen\CustomSplitScreen.Build.cs dans l'arborescence du projet.

Localisez « PrivateDependencyModuleNames » et ajoutez « InputCore » à la liste :

Recompiler avec le bouton Live Coding dans l'éditeur UE :

Implémenter CustomGameViewportClient

Les configurations d'écran partagé sont stockées dans UGameViewportClientSplitscreenInfo et indexées par les valeurs ESplitScreenType::Type.

Déclarons un ID pour notre configuration d'écran partagé personnalisée. Pour ce faire, définissez un nouveau type enum CustomGameViewportClient.h basé sur les valeurs ESplitScreenType existantes :

UENUM(BlueprintType) namespace ECustomSplitScreenType { enum Type { // 0 value required by UE None, // Custom Splitscreen, next value after last built-in splitscreen type ThreePlayer = ESplitScreenType::SplitTypeCount, SplitTypeCount }; }

N'oubliez pas d'inclure l'en-tête VieportSplitscreen dans le même fichier.

#include "Engine/ViewportSplitScreen.h"

Ensuite, implémentons un constructeur. Dans CustomGameViewportClient.h, déclarez-le sous « public » :

UCustomGameViewportClient();

Ensuite, dans le fichier source CustomGameViewportClient.cpp, implémentez le constructeur comme suit :

UCustomGameViewportClient::UCustomGameViewportClient() : Super(FObjectInitializer::Get()) { // Resize SplitscreenInfo to fit our custom config SplitscreenInfo.SetNum(ECustomSplitScreenType::SplitTypeCount, false); // Fill the custom config SplitscreenInfo[ECustomSplitScreenType::ThreePlayer].PlayerData.Add(FPerPlayerSplitscreenData(0.33f, 1.00f, 0.66f, 0.00f)); //1 SplitscreenInfo[ECustomSplitScreenType::ThreePlayer].PlayerData.Add(FPerPlayerSplitscreenData(0.66f, 0.50f, 0.00f, 0.00f)); //2 SplitscreenInfo[ECustomSplitScreenType::ThreePlayer].PlayerData.Add(FPerPlayerSplitscreenData(0.66f, 0.50f, 0.00f, 0.50f)); //3 }

Après cela, nous avons besoin d'une logique personnalisée pour sélectionner cette nouvelle mise en page. Celle-ci est implémentée dans la méthode UpdateActiveSplitscreenType.

Nous devons le surcharger dans notre classe enfant :

virtual void UpdateActiveSplitscreenType() override;

Et voici une implémentation de base :

void UCustomGameViewportClient::UpdateActiveSplitscreenType() { ECustomSplitScreenType::Type SplitType = ECustomSplitScreenType::None; const int32 NumPlayers = GEngine->GetNumGamePlayers(GetWorld()); if (NumPlayers == 3) { // If Player count is equal 3, select custom Splitscreen ActiveSplitscreenType = static_cast<ESplitScreenType::Type>(ECustomSplitScreenType::ThreePlayer); } else { // Otherwise fallback to default behaviour Super::UpdateActiveSplitscreenType(); } }

Une fois de plus, compilez avec le bouton Live Coding dans l'éditeur UE.

Configurez le projet pour utiliser la classe nouvellement créée

Ouvrez Edit -> Project Settings…,

Accédez à Engine -> General Settings, et trouvez Default Classes -> Game Viewport Client Class

Ou recherchez simplement « Game Viewport » dans la barre de recherche

Sélectionnez CustomGameViewportClient dans la liste déroulante.

L'éditeur UE demandera de redémarrer ; continuez :

Exécutez le projet et vérifiez le résultat final :

Résumé : Utilisez le plugin pour personnaliser l'écran partagé d'Unreal Engine

Il s'agit bien sûr d'un exemple très basique ; la logique et les mises en page peuvent être bien plus complexes. Vous pouvez créer des mises en page personnalisées en fonction du nombre de joueurs, augmenter le nombre maximal de joueurs au-delà des 4 par défaut, ou même déplacer et redimensionner les fenêtres d'affichage à l'exécution (en surchargeant UGameViewportClient::LayoutPlayers()).

Nous espérons que cet article servira d'inspiration pour ce qui est possible. Le code du plugin créé pour cet article est disponible au téléchargement ici.

Besoin d'aide pour le développement avec Unreal Engine ? Notre équipe est prête à vous aider. Visitez notre Page des services de développement HMI pour plus d'informations.

FAQ

Pouvez-vous personnaliser la disposition en écran partagé dans Unreal Engine ?

expand_more

Oui. Unreal Engine permet de personnaliser les dispositions en écran partagé, mais les options par défaut sont limitées. Pour créer des dispositions plus avancées, vous pouvez remplacer la classe GameViewportClient et définir votre propre agencement de fenêtres. Dans l'article, nous démontrons comment procéder à l'aide d'un plugin léger plutôt qu'en modifiant le code source du moteur.

Pourquoi utiliser un plugin pour personnaliser l'écran partagé d'Unreal Engine ?

expand_more

L'utilisation d'un plugin rend votre projet modulaire et plus facile à maintenir. Au lieu de modifier le code principal d'Unreal Engine, vous implémentez la logique personnalisée dans un module séparé. Cette approche rend les mises à jour plus sûres et permet de réutiliser la fonctionnalité d'écran partagé sur plusieurs projets.

Quel rôle joue GameViewportClient dans la configuration en écran partagé ?

expand_more

GameViewportClient est responsable de la gestion des viewports dans Unreal Engine. En créant une classe personnalisée dérivée de GameViewportClient, vous pouvez redéfinir la façon dont les viewports sont créés, positionnés et rendus, permettant ainsi des dispositions d'écran partagé entièrement personnalisées.

Quand avez-vous besoin d'une disposition d'écran partagé personnalisée ?

expand_more

Les dispositions personnalisées en écran partagé sont utiles lorsque les dispositions standard ne correspondent pas aux besoins de votre application. Cela peut se produire dans les environnements de simulation, les systèmes HMI ou les projets multijoueurs où différents viewports nécessitent des tailles ou des agencements différents.