Comment géreriez-vous différents formats d'image dans un jeu de plateforme 2D?

Il y a longtemps, 4: 3 était quasiment le seul rapport que vous puissiez trouver sur un PC. Aujourd'hui, le plus courant est 16h10, mais la plupart des nouveaux moniteurs (en particulier les ordinateurs portables) sont 16: 9.

J'écris un jeu de plateforme en 2D et je ne peux pas décider comment gérer les différents ratios.

Voici quelques idées:

1. 4: 3 obtient plus de contenu, les écrans larges sont coupés en haut et en bas
2. 16: 9 obtient plus de contenu, les autres sont coupés à gauche et à droite
3. Le jeu est en 16: 9 avec des barres horizontales noires pour les autres RA
4. Le jeu est en 4: 3 avec des barres verticales noires pour les autres RA

Si vous n'avez aucune raison impérieuse de rendre votre jeu "large" (auquel cas utilisez l'approche 3) ou étroit (auquel cas utilisez l'approche 4), optez pour une combinaison de 1 et 2 (ou éventuellement de 3 et 4 si vous le souhaitez). cacher des choses hors écran).

Sélectionnez un format d'image de compromis (16:10 est un bon exemple, voire 16:11). Si l'utilisateur est sur 16: 9, donnez-lui plus de contenu sur le côté et s'il est sur 4: 3, donnez-lui plus de contenu en haut et en bas.

En tout cas, je trouve préférable de le mettre en œuvre avec quelque chose comme ceci dans votre classe d'appareil photo:

float scaleToFitWidth = viewport.Width / nominalWorldSize.Width;
float scaleToFitHeight = viewport.Height / nominalWorldSize.Height;
float scale = Math.Min(scaleToFitWidth, scaleToFitHeight); // world to client

À ce stade, vous pouvez simplement essayer différentes tailles nominales mondiales (c.-à-d. La taille de la caméra en unités mondiales) et sélectionner simplement la meilleure.

Eh bien, comme conseil de base, sur PC, je dirais "ne supposez pas que votre utilisateur souhaite utiliser le mode plein écran". Et en mode fenêtré, choisissez votre ratio idéal et utilisez-le directement.

Je pense que les utilisateurs acceptent généralement les barres noires lorsqu'ils sont présentés avec du contenu en plein écran. Les stratégies 3 et 4 sont donc acceptables, voire idéales. Ils ont l’avantage que vous sachiez toujours combien de contenu vous restituez: c’est-à-dire qu’il n’ya pas de bogue sournoise qui ne se produit que lorsqu’elle s’exécute en écran large.

Si vous essayez d’être adaptatif et de détecter le ratio utilisateur par le biais de la résolution de l’écran et d’afficher le plus de contenu possible, vous devez alors prendre en compte le contenu de priorité haute et basse de manière différente. Le contenu prioritaire est un élément que l'utilisateur doit absolument voir à l'écran. Si le jeu est hors écran, le jeu échoue. Il s’agit donc d'éléments du HUD et de l'interface utilisateur, de l'avatar du joueur et de tout ce avec quoi il interagit. Le contenu à faible priorité est un contenu qui, s'il est à l'écran, est bien, mais s'il est hors écran, ce n'est pas grave. Ex.: Graphiques d'arrière-plan et éléments raisonnablement éloignés de l'avatar.

En supposant que vous ayez un UI / HUD superposé à un monde 2D "physique", alors c'est assez simple. Les éléments à faible priorité sont faciles, vous devez simplement vous assurer que la fenêtre 4: 3 est centrée sur les éléments intéressants, puis dessinez le plus possible les éléments de priorité faible à gauche ou à droite. Les objets hautement prioritaires dans le monde 2D (par exemple, votre personnage, les ennemis que votre personnage combat directement) doivent toujours être conservés dans la fenêtre 4: 3. Cela signifie que votre code de jeu n’a pas d’agrandissement de la caméra pour tirer parti de l’écran supplémentaire, car vous aurez alors un code de jeu agissant différemment en mode écran large. Demandez au code de jeu de supposer que le monde est rendu en 4: 3 et ne laissez que votre code de rendu se rendre compte qu'il y a en réalité plus que ce qui est visible.

La disposition des éléments UI / HUD peut être abordée de deux manières:

1. Positionnement dynamique: Spécifiez tous vos éléments par rapport aux bords de l’écran (c’est-à-dire pas tous par rapport à 0,0). Selon votre rapport de format, les éléments seront plus proches ou plus éloignés du centre de l'écran. Avantages: vous permet d'accrocher des choses aux coins et de les avoir «juste travailler». Inconvénients: Difficile d’obtenir une mise en page qui fonctionne bien au centre et risque de chevauchement des éléments.
2. Positionnement statique conservateur: Disposez tous vos éléments en 4: 3 et décalez-les simplement lorsque vous utilisez un écran large. Avantages: logique / coordonnées de présentation simples et non ambiguës. Inconvénients: laisse un espace mort visuel à gauche et à droite de vos commandes d'interface utilisateur, où vous verrez le monde 2D en arrière-plan, mais pas d'interface utilisateur.

Lequel est le plus approprié pour votre jeu? Si vous créez Canabalt (c’est-à-dire un jeu qui dépend de la vitesse horizontale), un rapport de format large avec des barres noires (# 3) sur des aspects plus étroits serait idéal pour mettre en évidence les mouvements latéraux. D'autre part, si vous avez un jeu plus aérien comme Super Smash Brothers, un écran plus grand (n ° 2 ou n ° 4) serait préférable. Je baserais ma décision sur ce qui fonctionne le mieux pour le match.

Je conviens avec d’autres intervenants qu’il convient de faire attention aux éléments pouvant être visibles sur un écran mais pas sur un autre.

Castle Crashers semble utiliser un peu de # 2 et un peu de # 3 - vous obtenez des barres noires sur un écran 4: 3, et aussi une zone visible très légèrement plus petite - mais vous devriez toujours avoir une "zone de sécurité" sur les bords où vous ne mettez de toute façon rien de vital (pour des écrans comme les téléviseurs à tube cathodique qui coupent les bords)

Il y a une autre option. Vous pouvez cadrer pour un rapport intermédiaire et effectuer le recadrage et l’agrandissement (ou la limite) des deux résolutions normales.

Je pense que le tournage de la télévision est conçu de cette manière, de sorte que le grand écran a l’air correct (tout le monde n’est pas encombré au milieu de la scène), alors que le recadrage au format 4: 3 n’est pas aussi radical et qu'il y a un panoramique minimal.

Voici un article de blog sur la gestion de plusieurs tailles d’écran sur des appareils mobiles, et voici la deuxième partie de la procédure de codage de cette approche en Java avec libgdx . C'est un peu la réponse d'Andrew mais peut aider quelqu'un d'autre.

L'article de blog couvre trois approches principales:

1. Live avec des barres noires sur le dessus ou sur les côtés.
2. Utilisez une fenêtre virtuelle.
3. Utilisez des éléments flottants, comme vous le feriez dans une mise en page de flexbox de page Web.

Le numéro 1 est assez explicite.

Pour illustrer non. 2, supposons que vous souhaitiez prendre en charge trois périphériques différents avec trois formats d'image différents. Ouvrez l'image dans un éditeur d'image. Pour le premier appareil, dessinez le rectangle le plus large au rapport d'aspect de cet appareil qui s'intégrera dans votre image. Faites la même chose pour le deuxième appareil et le troisième appareil. Votre zone utilisable, ou fenêtre virtuelle, est l'intersection de ces trois rectangles. Rien de ce qui est en dehors de cette fenêtre ne peut pas être garanti visible.

N ° 3 implique de placer des objets sur l'écran de la même manière que vous placeriez des éléments sur une page Web à l'aide de flexbox ou de floats. Par exemple, placez le bouton de pause à 5 pixels du haut et 5 pixels de la droite. Quel que soit le format de l’appareil, le bouton de pause sera toujours dans le coin supérieur droit.