Backstage est un serious game qui a  a reçu le prix Now.belle 2013 lors de la conférence seriousgame.fr, ainsi que le Trophée Technologies Educatives au salon de EDUCATEC - EDUCATICE 2013.
Durant ce projet de 6 mois, j'ai intervenu en tant qu'Infographiste / Ergonome Interface dans la conception des bâtiments, des fx et de l'interface. J'ai profité de ce projet pour étayer et valider mon mémoire sur l'Interface Contextualisée.
Domaine d'intervention: Bâtiments, Fx, Interfaces
 
Technique utilisée:
vectoriel --> Illustrator, Flash
digital painting --> Photoshop
 
Site officiel du jeu: http://www.backstage-game.com/
Conception des bâtiments
Un premier essai de conception basé sur 6 étapes:
- croquis à la main
- ton et couleur sous Photoshop
- vectorisation sous Illustrator
- fusion du croquis et de la vectorisation sous Photoshop
- ajustement contraste et ombre sous illustrator
- finalisation du bâtiment
Une autre technique sera testé à l'aide seulement de Flash basé également sous 6 étapes:
- croquis à la main
- vectorisation sous Flash
- texturing via flash par transparence
- reforcement des contours sous Flash
- fusion du calque texture, de l'applat couleur et du renforcement contour
- Etat final du bâtiement après jout de l'ombre
La technique final retenue sera l'utilisation exclusive de Flash et sans texture, il n'y a plus que 2 étapes:
- croquis à la main
- vectorisation et colorisation sous Flash avec l'ajout des ombres et du décor
Exemples de bâtiments
Assemblage des bâtiments sous forme de quartier
L'assemblage est réalisé une première sous Flash directement sur la scène pour tester l'agencement. La compilation final se fait sur un éditeur conçus pur l'occasion.
Quartier 1: C'estle quartier central du jeu avec la salle de concert en travaux qui évoluera avec le temps et la Mairie.
Quartier 2: il s'agit du quartier des bâtiments administratifs principalement
Quartier 3: Dans ce quartier, le joueur trouvera la plus part des réponses à ses questions en matière de sécurité avec les Pompiers par exemples.
Quartier 4: Ce quartier concentre les bâtiments de communication comme la radio ou la télévision.
Conception des Interfaces
L'interface a été conçus sur la théorie de mon mémoire sur les Interfaces Contexutalisées à l'aide de Flash uniquement. J'ai conçus les icônes ainsi que le style général "BD", seul les personnages ne sont pas de moi.
GUI de customisation du personnage de manière contextualisé comme si celui-ci était dans sa chambre.
HUD de la salle de concert
La salle de concert est évolutive et "personnalisable" en construisant les salles et en améliorant celles-ci sur 3 niveaux. 
Conception de la salle de concert
Dans un premier essai de concpetion, je réalise à la main toute la salle (ci-contre la scène). Lorsque l'essai semble concluant, je réalise tous les éléments consituant chaque salle, dans un second temps un autre inforgraphiste s'occupera de la mise en couleur après que j'ai assembler tous les élemnts pour former les salles sous Phtoshop.
Salle de concert niveau 1
Salle de concert niveau 2
Salle de concert niveau 3
Quelques effets spéciaux
Afin de pouvoir visualiser les différents Fx, je vous invite à cliquer sur ces liens en attendant que je réalise des vidéos de démonstration.
Backstage
Published:

Backstage

Serious Game de 6 mois de conception. Travail d'Interface, bâtiment et fx

Published: