LE STYLE U.P.A.

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

Notre priorité est d'avoir des graphismes simples et clairs.
Le style est graphique, 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, concis. Si un fond n'est pas nécessaire, ce sera un aplat vide.

-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...

Si un décor est nécessaire, afin d'amener une ambiance adulte, il suggérera des éléments architecturaux intemporels:
-le néo antique ou Greek Revival: colonnes, volutes, chanfreins.
-le Streamline en second choix.

Plusieurs astuces graphiques sont disponibles.
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.
-la perspective.
-les fontes.

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

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.

Je conseille d'utiliser le vectoriel sous Photoshop. Il permet de bien maîtriser les courbes, et d'effectuer des changements rapides.

LES COULEURS

Les couleurs choisies devront être désaturées et sobres: nous devons éviter le coté cartoon.
(Plus à venir...)

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

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.

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 isométrique, 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

Les animations devront être sobres. On doit éviter absolument les amortis, l'élasticité... (pas de tex avery!)
(Plus à venir...)

LES FONTES

Les titres sont en  et sont aligniés au centre.
Cette typographie fantaisiste ne doit être utilisée que pour les titres, sans effets, sans graisse.
La taille est de 15 pixels de haut sur DS.

Les textes sont en , sont alignés à gauche.
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.

Les fichiers Truetype sont disponibles :
\\ubisoft.org\Projects\MWC2-WII\Graphique\Charte Graphique\fontes\FontDinner.ttf
\\ubisoft.org\Projects\MWC2-WII\Graphique\Charte Graphique\fontes\TWCent.TTF
Et ils sont à installer dans C:\WINDOWS\Fonts

L'utilisation des typographies ont un coût: nous devons payer à chaque nouvelle typo.
Pour animer le jeu, il nous faut une certaine diversité de typo. 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 :




Exemple:
une variante de Century, très très étroite:

(utilisée dans Mystery Marquee-Broadway, pour les néons.)

ONYX 1.17

(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 à Pierre-Luc Courchesne.

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-wii-data/Graphisme/PSD/_Template.psd De plus, si on utilise les actions-script, avec le plug-in Ubi Bit Depth, les images auront les mêmes couleurs que la DS. Ce plugin photoshop permet de convertir une palette 16 millions de couleurs à celle de la DS, c'est-à-dire en 32 couleurs parmi 256 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.