Application de bureau

Design de jeu d’aventure insulaire

Explorez Harbor Skirmish, une petite île côtière avec des parcours sur les toits, trois emplacements d’armes et une interface à la première personne au ton ludique.

OpenDesignDesign et réalisation
Officiel
Interface de jeu par navigateur4 écrans
Design de jeu d’aventure insulaire : vue d’ensemble de l’île et écran d’accueil
GPT 6 Astra · Exemple d’évaluationCapture d'écran 1 sur 4

LLM Arena sept. 2026

Notes de cas
Modèle
GPT 6 Astra
Tâche de design
Créer Harbor Skirmish, une aventure insulaire jouable avec déplacements et combats par vagues.
Résultat
Application de bureau

Usages adaptés

  • Prototypes de jeux par navigateurRelier une scène jouable à ses états d’accueil et de pause.
  • Interfaces à la première personneOrganiser les informations de déplacement, de santé et d’armement autour de la vue.
  • Écrans de lancement de jeuxPrésenter le cadre sans énumérer toutes les commandes clavier.

Points clés

  • Une île avant la batailleLa vue d’ouverture situe les rues, les toits et la mer environnante.
  • Un HUD au centre dégagéLes états sont placés sur les bords pour garder la visée visible.
  • Une pause au ton ludiqueUne carte inclinée intègre l’interruption à l’identité visuelle.

Un design de jeu d’aventure insulaire qui s’ouvre sur la mer

Harbor Skirmish présente son décor d’en haut avant de placer le joueur dans une rue. Le titre remplit la gauche de l’écran d’accueil, tandis que l’île occupe la droite. Toits colorés, tour de l’horloge et front de mer sont visibles ensemble. Le joueur se fait ainsi une idée du lieu avant que la caméra à la première personne ne lui retire cette vue d’ensemble.

L’interface crème, jaune et vert foncé évoque davantage une affiche de vacances imprimée qu’un tableau de bord militaire. Le court texte de départ décrit une invasion de lapins incontrôlables ; le bouton bien visible Let’s Play propose ensuite une seule action évidente. L’accueil présente les bases du déplacement et de la visée, tandis que les instructions supplémentaires restent séparées de cette invitation principale.

L’écran d’accueil complet associe le titre et l’action de jeu à une vue en hauteur de Seabreeze Island.
L’écran d’accueil complet associe le titre et l’action de jeu à une vue en hauteur de Seabreeze Island.

Une carte sans panneau cartographique

La vue en hauteur de l’île explique le rapport entre rues et toits sans ajouter de schéma séparé. La tour et les groupes de toitures dessinent des formes reconnaissables que l’on retrouve au niveau du sol. C’est une introduction utile au décor, mais elle ne prouve pas que chaque toit visible soit accessible.

Une action de départ bien affirmée

Let’s Play reprend le jaune qui signale ensuite l’arme sélectionnée. Sa forme inclinée et sa bordure décalée ressortent sur la mer plus calme. Le texte environnant est assez bref pour que le bouton ne concurrence pas un manuel complet de commandes.

Un langage graphique qui se prolonge

Le petit logo Harbor Skirmish reste dans un coin pendant la partie. Les touches crème, les libellés verts et l’accent chaud reviennent aussi dans le HUD et la carte de pause. Le passage d’une scène aérienne à une scène à la première personne n’introduit donc pas un style d’interface sans rapport.

Organiser le HUD à la première personne autour de l’île

Pendant le jeu, le centre est principalement réservé à la rue et au repère de visée. Le score apparaît vers le haut à gauche, la vague et les ennemis restants vers le haut à droite, et le lieu ainsi que la vitesse près du haut au centre. La santé et l’état de la ruée occupent le bas à gauche ; l’arme et les munitions, le bas à droite.

Une grande partie de ces informations est directement superposée à la scène plutôt qu’enfermée dans des panneaux imposants. L’île reste visible, mais le contraste dépend alors du bâtiment, du ciel ou du sol derrière chaque libellé. La bande de commandes crème en bas adopte l’approche inverse : elle offre aux petites touches un arrière-plan constant, là où la lecture doit être précise.

La vue complète à la première personne conserve la rue visible entre les groupes d’états et de commandes alignés sur les bords.
La vue complète à la première personne conserve la rue visible entre les groupes d’états et de commandes alignés sur les bords.
Trois types de retours pendant la partie
AffichageInformation transmiseImportance de la distinction
Score et vagueProgression dans la partie locale en coursUn score de session n’est ni une note d’évaluation du modèle ni un résultat sauvegardé.
Santé et disponibilité de la ruéeÉtat de survie et action de déplacement disponibleLe libellé de ruée indique sa disponibilité, pas un succès débloqué.
Nom de l’arme et munitionsOutil sélectionné et valeurs de munitions affichéesLe nom doit changer avec l’emplacement actif, et pas seulement sa mise en évidence.

Changer d’arme et reprendre après une pause

Les trois emplacements numérotés restent visibles sous les noms Ink Rifle, Scattergun et Paper Blade. Sélectionner 2 change l’emplacement actif et le nom de l’arme en Scattergun. Ce double retour est plus informatif qu’un simple changement de bordure : il identifie la sélection à la fois dans les raccourcis et à côté de l’affichage des munitions.

La carte de pause conserve le score actuel, met la reprise en avant et rassemble des instructions de déplacement supplémentaires.
La carte de pause conserve le score actuel, met la reprise en avant et rassemble des instructions de déplacement supplémentaires.
  1. Apprendre à se déplacer dans le contexte du jeu

    Les indications WASD, de balancement, de saut et de glissade sont proches du bas de la scène active. Le repère distinct Hold E to Grapple se trouve plus près du centre. Cette répartition garde les commandes générales accessibles tout en plaçant une indication plus locale auprès du mécanisme de déplacement, même si plusieurs aides simultanées peuvent encore concurrencer la vue.

  2. Faire une pause sans perdre le décor

    Escape ouvre Island time, une carte crème sur une version floutée de la rue. Le score actuel reste visible dans la carte. Comme la scène sous-jacente demeure reconnaissable, l’interruption paraît liée à la partie plutôt qu’à une navigation vers une page de réglages séparée.

  3. Distinguer la reprise de la sortie

    Back to It est la grande action jaune, tandis que Back to the island est une alternative plus petite et soulignée. Ces formulations proches méritent une vérification attentive : la hiérarchie visuelle aide à reconnaître la reprise, mais des libellés plus explicites réduiraient l’ambiguïté pour les personnes qui découvrent l’expérience.

Ce que montre cet exemple de jeu local

L’export fourni contient un jeu local solo et un environnement 3D rendu. Le lancement, le changement d’arme sélectionnée et l’ouverture de la pause ont été vérifiés. La galerie n’est ni un benchmark de performances, ni une partie terminée, ni la preuve que tous les mécanismes de déplacement fonctionnent sur tous les appareils. Aucun mode multijoueur en ligne, service de comptes ou classement sauvegardé n’a été vérifié. Le libellé du modèle provient du nom de fichier fourni.

Comment créer un design de jeu d’aventure insulaire dans OpenDesign

  1. Télécharger et installer OpenDesign

    Téléchargez l'application de bureau, installez-la et finalisez la configuration. Créez un projet pour votre design.

    Télécharger OpenDesign
  2. Concevoir ensemble l’accueil et la vue de jeu

    Commencez par une petite île et deux positions de caméra. Gardez le principal point de repère visible depuis la vue d’ensemble et depuis la rue. Définissez les couleurs communes de l’interface avant d’ajouter des armes ou des détails au décor.

    Invite suggérée

    Créez un design de jeu d’aventure insulaire pour un jeu fictif par navigateur nommé Harbor Skirmish. Sur l’écran d’accueil, montrez une île côtière colorée vue d’en haut, avec un grand titre à gauche et un unique bouton jaune Jouer. Utilisez des surfaces crème, des libellés vert foncé, des bordures décalées et des cartes légèrement inclinées. Passez à une scène de rue à la première personne avec le score et la vague en haut, la santé et l’état de la ruée en bas à gauche, puis l’arme et les munitions en bas à droite. Conservez trois emplacements numérotés pour Ink Rifle, Scattergun et Paper Blade. Ajoutez une carte de pause avec le score actuel, une action principale pour reprendre et une action distincte pour revenir à l’accueil. Utilisez uniquement l’état de la session locale ; ne suggérez ni multijoueur, ni scores sauvegardés, ni connexion à un compte. Rendez les commandes clavier visibles et laissez le centre de la scène dégagé.

  3. Suivre une sélection dans tout le HUD

    Sélectionnez chaque arme et vérifiez simultanément son emplacement, son nom et ses munitions. Mettez ensuite le jeu en pause, puis reprenez avec cette sélection. Le test utile consiste à vérifier que l’interface décrit un état cohérent, et non que chaque élément paraît convaincant pris isolément.

  4. Vérifier le contraste sur plusieurs arrière-plans

    Examinez les libellés d’état devant des murs clairs, des toits sombres et le sol de la rue. Préservez l’ouverture de la scène, mais ajoutez un fond discret derrière les petits textes lorsque c’est nécessaire. Vérifiez que les actions de pause restent distinctes sans dépendre uniquement de leur couleur.

  5. Exporter et obtenir un lien de partage

    Exportez votre design finalisé, puis utilisez Partager dans OpenDesign pour obtenir un lien de partage. Ouvrez le lien dans une fenêtre de navigateur distincte et vérifiez que la version souhaitée ainsi que ses ressources sont disponibles avant de l'envoyer.

OpenDesign Desktop

Un seul design system. Votre marque, cohérente partout

Dans le Vibe Design Workspace complet, appliquez les mêmes règles de marque aux sites, slides, prototypes interactifs, dashboards, images et vidéos HTML. Connectez Codex, Claude Code, Cursor et vos autres agents de code locaux, puis créez gratuitement.

  • Sites, slides, prototypes, dashboards, images et vidéos
  • Plus de 140 design systems et la bibliothèque complète de modèles et skills
  • Codex local et plus de 21 agents de code · Gratuit
Télécharger gratuitement

Disponible sur macOS et Windows