Passer au contenu principal

Création graphique de l'Outrun (mode terrestre)

Design et graphismes des pages de l'Outrun

Mis à jour hier

⚠️ L’Outrun propose trois modes : terrestre, aquatique et aérien. Cet article concerne uniquement le mode Terrestre.


Dans cet article, nous vous expliquons comment créer les éléments graphiques liés à la mécanique Outrun (mode terrestre). Ces éléments sont personnalisables et doivent être importés dans l'onglet Apparence de votre page de jeu.

Vous pouvez télécharger le fichier Photoshop (.psd) regroupant tous les éléments graphiques. Nous vous expliquons également comment modifier facilement chaque élément. Si vous le souhaitez, il est possible d’utiliser d’autres logiciels (Canva, Figma, etc.) pour créer vos propres éléments graphiques, à condition de respecter les dimensions indiquées ci-dessous.


Avant de commencer

Le template Photoshop contient deux plans de travail :

  • Vue Desktop : c’est ici que vous pouvez modifier tous les éléments de la mécanique de jeu.

  • Vue Mobile : elle sert uniquement à prévisualiser le rendu sur un appareil mobile (ne pas modifier directement).

Tous les éléments personnalisables sont disponibles dans le groupe de calques bleu. MODIFY / EXPORT contient 12 calques. Ces 12 calques sont des objets dynamiques que vous pouvez ouvrir et modifier via un double-clic. Tous les éléments dont les couleurs sont personnalisables lors de l’intégration sont disponibles dans le groupe de calques bleu MODIFY COLORS ONLY. Vous pouvez double-cliquer sur chacun de ces calques pour en changer la couleur et reporter les couleurs sélectionnées lors de l’intégration.

Arrière-plan et fond de jeu

La mécanique de jeu est intégrée par-dessus l’arrière-plan de votre page. Vous pouvez prévoir un espace dédié à la mécanique du jeu dans votre arrière-plan.

Variables

Si vous souhaitez afficher des variables sur votre page, comme le temps restant ou le score du participant, pensez à prévoir un espace dédié dans votre conception graphique pour ces éléments.


Paramètres graphiques

Vous pouvez configurer uniquement des couleurs unies sur certains éléments du décor dans Adictiz Box :

Des bandes horizontales plus foncées sont automatiquement générées par rapport à la couleur sélectionnée pour la piste afin de simuler un effet de défilement.


Visuels du véhicule

La taille du visuel est libre mais nous recommandons de ne pas dépasser une taille de 300 x 300 px. Il est placé automatiquement en bas et au centre de la route. Vous pouvez créer des visuels spécifiques lorsque le véhicule se déplace vers la droite et la gauche de la piste.

Véhicule

Véhicule gauche

Véhicule droite


Visuel de l’horizon

Le visuel de l’horizon doit faire 850 x 230 px. La gauche et la droite du visuel doivent correspondre pour pouvoir être répétées dans la largeur sans que l’on ne voit de coupure lorsque le mode "virage" est activé.

Taille : 850x230px

Répétition du fond de jeu

Correspondance du décor pour duplication

et défilement horizontal sans coupure

Le visuel de l’horizon se place automatiquement juste au dessus de la ligne d'horizon de la piste. La couleur sélectionnée pour le ciel est visible au dessus du visuel de l’horizon, nous vous conseillons donc de laisser la partie haute de votre visuel vide ou d’une couleur identique à celle du ciel pour une meilleure intégration visuelle.


Obstacles

Vous pouvez créer jusqu'à 4 visuels différents pour les obstacles à éviter. La taille des visuels est libre mais nous recommandons de ne pas dépasser une taille de 300 x 300 px. Ils se répartissent automatiquement sur la piste.

Obstacle 1

Obstacle 2


Bonus / Malus

Bonus bouclier

Le visuel du bonus bouclier est facultatif. La taille du visuel est libre mais nous recommandons de ne pas dépasser une taille de 70 x 70 px. Les bonus rendent le joueur invulnérable aux obstacles pendant un certain laps de temps. Ils se répartis

sent automatiquement sur la piste.

Bonus Bouclier

Bonus point

Le visuel du bonus point est facultatif. Vous pouvez créer plusieurs visuels différents. La taille des visuels est libre mais nous recommandons de ne pas dépasser une taille de 70 x 70 px. Lorsque le joueur ramasse un bonus, il obtient des points supplémentaires. Les bonus se répartissent automatiquement sur la piste.

Bonus point générique

Bonus point chiffré (configurable)

Malus perte de contrôle

Le visuel du malus perte de contrôle est facultatif. La taille du visuel est libre mais nous recommandons de ne pas dépasser une taille de 70 x 70 px. Lorsque le joueur roule sur le malus, il perd le contrôle de son véhicule pendant un certain laps de temps. Les malus se répartissent automatiquement sur la piste.

Malus perte de contrôle


Décors bords de piste

Vous pouvez créer jusqu’à 4 visuels différents pour les décors des bords de piste. La taille est libre mais ils doivent être proportionnels au visuel du véhicule. La densité d’affichage de ces décors est configurable directement dans l'éditeur. Vous pouvez différencier les décors des bords droit et gauche de la piste.

Décor bord de piste


Décors latéraux

Vous pouvez créer jusqu’à 4 visuels différents pour les décors latéraux. La taille est libre mais ils doivent être proportionnels aux visuels du véhicule. La densité d’affichage de ces décors est configurable directement lors de l’intégration. Vous pouvez différencier les décors latéraux du bord droit et gauche de la piste.

Décor latéral


Exportation

  1. Sélectionnez les calques

  2. Cliquez droit sur l’un d’eux et sélectionnez Exporter sous…

  3. Sélectionnez les paramètres suivants dans la popin d’exportation :

    1. Format : PNG

    2. Transparence : activée

    3. Convertir en sRVB : activé

    4. Incorporer le profil couleur : activé

  4. Cliquez sur le bouton Tout exporter… et sélectionnez le dossier de destination "Assets - Outrun" de votre répertoire de Rendu.

Cette méthode rogne automatiquement l’espace vide autour des assets.

Icône de pièce jointe
Avez-vous trouvé la réponse à votre question ?