LES OBJECTIFS

Notre priorité est d'avoir des graphismes simples et clairs.
Vue notre cible, le jeu doit rester élégant.
Le style choisi est graphique, géométrique, s'inspire du schéma. C'est-à-dire qu'il s'oppose au réalisme, au descriptif, aux détails.
Nous nous concentrons sur l'action, les personnages, sur les couleurs.
Les décors sont réduits au strict minimum: le fond sera un aplat.




SOMMAIRE DE LA BIBLE GRAPHIQUE

Plusieurs astuces graphiques sont disponibles dans l'univers graphique que nous avons choisi:
- le style UPA.

Mais nous utiliserons de préférence que certaines caractéristiques afin d'avoir une cohérence tout le long du jeu:
-le dessin.
-les couleurs.
-le remplissage.
-la ligne.
-les fontes.

Notre jeu comporte des boutons. Nous avons des rêgles:
-les boutons dans le jeu.
-les boutons d'interface.

Le jeu nous impose des contraintes techniques, et de temps.
-Onyx 1.x
-l'animation.
-l'arborescence et la nomenclature.
-les scripts sous Photoshop ou Actions.
-le filtre PC-DS.

Quelques liens à ne pas suivre:
whoneedsdesigners.com
99 francs
Make your texts legible

Quelques liens pour l'inspiration:
todaysinspiration.blogspot.com
Pascal Blanchet

 

LE STYLE U.P.A.

Nous disposons d'une bibliothèque de références sélectionnées sur:
\\ubisoft.org\Projects\MWC2-DS\Graphique\References

-Les gags devront être plus surréalistes, ou clin d'oeil social aux adultes. L'humour doit être présent.
-Le choix de la musique est une musique positive et rythmée: Jazz, big band, swing...

 

LE DESSIN

Le style U.P.A. est simple et clair.
Le dessin ne doit pas être descriptif: pas d'anatomie, de plis dans les vêtements, etc.
Le sujet doit être synthétisé en formes géométriques et en quelques courbes.
La perspective doit être fausse. :)
Essayez d'interpréter votre sujet en 3 couleurs (couleur du fond comprise dans les 3).

Je conseille d'utiliser le vectoriel sous Photoshop. Il permet de bien maîtriser les courbes, d'effectuer des changements rapides et d'avoir ce trait simple, net et ''coupant''.
De plus, cela évite que nous nous attardons aux détails trop petits.
Il n’y a pas de trait de contour ‘’fil de fer’’, les aplats ne sont pas cerclés.
Certains traits peuvent être utiles à l’intérieur des masses pour faire apparaitre des détails pour décrire, aider à comprendre un objet : une chemise (col, ouverture), lunettes, …

 

LES COULEURS

Les couleurs choisies devront être rappelées des teintes fraîches printanières, estivales, en évitant le coté fluorescents et crues.
Elles pourront contraster avec des éléments plus petits de couleurs désaturées et sobres.
N'oublions pas que l'un de nos objectifs est l'élégance, et que nous nous adressons à un public adulte.

Afin de guider les yeux du joueur, le fond coloré sera si possible, plus sombre et saturé que les boutons qui devront paraître comme lumineux.

Les contrastes des couleurs des éléments graphiques présents dans les jeux, devront être choisis afin que le joueur puisse voir en premier les éléments principaux au jeu, les plus contrastés.
Cela formera une sorte de relief intuitif, un effet de profondeur dans l'esprit du joueur.

d
Le fond le plus clair est celui du bas.
Le premier contraste est la bulle blanche avec le texte en noir.
Le second contraste est le "Déposez..." qui est en dessous de la bulle.
Ensuite viennent les étoiles, et la mêche.
Et au fond les instructions de mots superflus "Aucun mot superflu restant "

Utilisez le filtre PC-DS afin d'obtenir les mêmes couleurs de votre Photoshop sur la DS.

 

LE REMPLISSAGE

Nous préfererons les aplats de couleur unis.

La couleur est sous forme de pastille, la couleur peut déborder les contours.

Si vous regardez le fauteuil, le tapis, les rideaux, la couleur dépasse...
Aussi ces pastilles de couleurs peuvent être transparente comme des calques.

Les fonds seront simplifiés et auront moins de contraste; de façon à maintenir l'attention sur les personnages ou les éléments du jeu.





Nous préférerons les aplats de couleurs à la ligne pour dessiner les petits objets.

d

Note: la ligne du décor du bas de l'image est trop petite.

Nous allons éviter le travail au pixel pour les sprites. Mais nous nous appliquerons à faire de l'anti-aliasing sur les sprites. Les objets que nous dessinerons, seront en aplat. Cela nous laissera des couleurs disponibles pour faire l'anti-aliasing.

Nous devons éviter le bitmapping oldschool, et préférer l'anti-aliasing.

 

LA LIGNE

La ligne avec la brosse carrée est moins molle...
La ligne est claire, de préférence: uniforme, donc pas de pleins et de déliais.

Vous pouvez la télécharger ici , et copier la ici.
La craie peut servir pour le remplissage, ou le contour: pour faire de la fourrure, de la neige...

Son utilisation est limitée:
-Les 16 couleurs des sprites ne rendront pas bien, à moins d'avoir qu'une teinte.
-On ne dessine pas tout comme pour un dessin au pastel.
-Le remplissage est fait en aplat, à moins que l'on est besoin de faire un dégradé...

Les lignes blanches servent à dessiner des objets transparents:

...ou à dessiner des éléments dans une ambiance sombre.

Les lignes en tirets ou en pointillés servent à dessiner des éléments immatériels:
le regard, une action, une pensée, un murmure.



L'utilisation des flêches est recommandée, pour l'explication.

Les étoiles,

 

L'ANIMATION

Nous distinguons l'animation des jeux et l'animation des personnages.

L'animation dans les jeux sera celle des boutons et des éléments graphiques du jeu.
Les boutons doivent apparaître de façon dynamique (translation) afin que l'on comprenne que ce sont des éléments mobiles donc interactifs .
Les éléments graphiques du jeu qui bougent, doivent expliquer le mécanisme du jeu, attirer le regard d'un écran à l'autre: il faut constamment savoir où se trouvent les yeux du joueur.

Les animations des personnages devront être sobres. Ce n'est pas un jeu d'animation, toutefois un peu de vie devrait être insufflée.
On doit éviter absolument les amortis, l'élasticité... (pas de tex avery!)
Cliquez ICI pour des exemples d'animations.

(Plus à venir...)

 

LES FONTES

Les textes et les titres sont en fonte2, sans graisse.
Les titres et les textes sont alignés au centre.
Son vrai nom est Futura Condensed, crée par Paul Renner (1878-1956).
Les chiffres sont en re (bold uniquement) et sont alignés au centre.
Cette typographie ne doit être utilisée que pour les chiffres, sans effets.

Sur la DS, La taille est de 20 pixels avec anti-aliasing pour les textes.
La taille des tutoriaux, ou dans le Gameplay sera 32 pixels.
Note: la taille de cette typo est plus petite que les truetypes en général. (-4 pixels)

La couleur des typos est blanche ou noire.
Le souligné, l’italique devront être évités. Si vous voulez mettre en évidence du texte, vous pouvez le mettre en Majuscules ou minuscules sur un fond coloré tel que :
titre.png

Les fichiers Truetype sont disponibles :
TWCent.TTF
SteelfishB.ttf
Et ils sont à installer dans C:\WINDOWS\Fonts

L'utilisation des typographies ont un coût: nous devons payer à chaque nouvelle police, un droit d'utilisation à fin commerciale.
Pour animer le jeu, il nous faut une certaine diversité de polices, mais une seule par minigame. Le style UPA nous permet d'avoir des typos dessinées à la main, plus ou moins droites et irréguliéres sur la ligne .
Nous utiliserons des typographies faites à la main, dans les minigames lorsque cela sera nécessaire, s’inspirant de celles-ci :
fonte1
fonte4
fonte3
fonte5

Exemple:
une variante de Steelfish, déformée:
typoD
(utilisée dans Mystery Marquee-Broadway, pour les néons.)

 

ONYX 1.x

(Pour installer, veuillez installer en cliquant sur les liens.)

L'installation des outils de Onyx 1.17, se fait à partir de:
\\ubisoft.org\projects\MWC2-DS\Informatique\OnyxTool.exe

Pour faire marcher correctement les outils Onyx 1.17, il faut installer:
DirectX End-User Runtimes (November 2007).

Si vous utilisez Visual C++ pour compiler et lancer sur votre kit,
Microsoft Visual C++ 2005 SP1 Redistributable Package (x86)

 

L'ARBORESCENCE

L'arborescence est simplifiée par rapport au 1er jeu, afin d'éviter des manipulations inutiles de répertoires.
Sur Perforce:1896 //mwc2-ds-onyx/mwc2/Data/Game/ds/
Demander à Enrique Escobar, notre "QA" .

LA NOMENCLATURE

La nomenclature devra être bien respectée afin que les fichiers soient triés par nom. Il existe 3 thêmes de fichiers, qui seront différenciés par leur préfixe:
SPR_ : sprite
BTN_ : bouton
BKG_ : background

Exemple dans le jeu WordTennis:


Pour les background, on notera le top ou le bottom des écrans ainsi:
BKG_Tennis_TOP.bmp
BKG_Tennis_BOT.bmp

Quelques rêgles:

-Les majuscules n'ont aucune importance, juste pour le confort de lecture.
-La description doit être courte (un mot).
-La description peut être en français ou en anglais.
-Pas d'accent, pas d'espace, pas de tiret (-).
-Tout fichier non utilisé devra être effacé. (Perforce permet de récupérer des fichiers effacés)

LES ACTIONS

J'ai fait 3 actions sous Photoshop CS pour sauver les PSD en format DS: résolution, couleurs, en 5 bits-DS.
Vous pouvez les télécharger ici.
et le copier ici.
Les touches raccourcis correspondantes :
Ctrl+F2 = convertit en 256 ,sauve en premier le bottom.bmp et puis le top.
Ctrl+F3 = convertit et sauve en bmp-256 couleurs .
Shift+Ctrl+F3 = convertit et sauve en bmp-16 couleurs .

A la fin des actions, nous revenons à l'état initial. (calque non aplati etc).
Si par exemple, le fichier protégé en écriture, le script est interrompu.

LE FILTRE

Il y a une différence entre ce que l'on voit sur l'écran PC et les écrans de la DS.
Nous allons essayer d'appliquer un filtre sur les backgrounds afin d'avoir la même image lorsqu'on joue avec une inclinaison raisonable des écrans de la DS, et la luminosité rêglée à moyen.

J'applique un calque en overlay de la façon ci -contre.

Le calque-filtre est présent dans le template dans Perforce.
//mwc2-ds-onyx/mwc2/RawData/Graphisme/PSD/_Template.psd


De plus, si on utilise les actions-script, avec le plug-in 5_5_5 (no dithering).8bf, les images auront les mêmes couleurs que la DS.
Il existe le plugin avec dithering: 5_5_5.8bf
Ce plugin a été écrit par Maxime Mercier.
Ce plugin photoshop permet de convertir une palette 16 millions de couleurs à celle de la DS, c'est-à-dire en 32 couleurs parmi 32768 nuances.
(et non 256 couleurs sur 16 millions de nuances)

EXEMPLE pour la palette 5bits:

ainsi, pour un dégradé en noir et blanc:
Sur Photoshop:
RGB=000, RGB=111, RGB=222, RGB=333,  etc
Sur la DS:
RGB=000, RGB=888, RGB=16-16-16, etc
chaque coordonnée de couleur est espacée de 8 nuances.

LES BOUTONS DANS LE JEU

Voici nos règles des boutons:

-Les mots sont des boutons.
-Les mots sont de grande taille: 32 pixels pour les mots, 24 pixels pour 2 lignes.
-1 animation à la fois.
-Le rythme est rapide pour les translations, assez lent pour les clignotements.
-Les clignotements se font 3 fois.

Les étapes de nos boutons:
L'apparition: les boutons glissent, jusqu'à leurs positions finales.

-Normal (attente): clignotement à tour de rôle avec les autres boutons.
Action: 
-Pushed: le bouton descend d'un pixel vers le bas.
-Selected: le fond du bouton change de couleur selon la réponse attendue:
    Bon résultat: Le fond du mot devient plus clair.
                                                      Les mauvaises réponses glissent hors champ.
                                                      Il ya un bonus visuel .
    Mauvais résultat: Le fond du mot devient rouge (#FF752B)
                                                             et le mot (noir) clignote 3 fois au blanc.
                                                             Un token est perdu.
                                                             Et puis, le mauvais résultat est grisé: Disabled.

exemple: