Plus d’informations bientôt.

Les éléments importants de l’interface sont donc mis en avant grâce à l’Accent Color. Inutile de préciser qu’il vaut mieux éviter de mettre d’autres couleurs fixées dans le code, au risque que l’utilisateur ai choisi une Accent Color similaire. Il ne verrait plus grand chose.

Mais l’œil appartient à la physique et si on souhaite ajouter d’autres couleurs il est possible de calculer celles qui s’adapteront le mieux, selon votre œil, à l’Accent Color de l’application. On pourra alors utiliser soit la couleur inverse qui sera la couleur contrastant le plus avec l’Accent Color, soit la couleur complémentaire qui est la couleur la plus agréable à l’œil face à l’Accent Color. On obtient donc au final deux couleurs qui s’accordent entre elles dans votre design.

Comment calculer ces couleurs? Adobe a eu la bonne idée de nous donner les formules sur son site : http://adobe.ly/nF5WXx

Cet article va donc vous aider a mettre en place ces formules dans vos projets Silverlight et XNA pour ainsi utiliser tout le potentiel des Accent Colors liées aux Contrast Accent Colors et Complementary Accent Colors.

Pour commencer, ouvrez votre outil favoris qui est Visual Studio puis créez un projet Windows Phone Application. Une fois ouvert, ajouter une classe Tools.cs (ou autre, l’important est de connaitre le nom du namespace pour pouvoir utiliser ces fonctions dans le reste de votre code). C’est cette classe qui va contenir les fonctions utiles pour récupérer nos couleurs depuis n’importe où dans l’application.

Accent Color

L’accent color est la couleur la plus simple à obtenir en Silverlight. Elle est accessible directement depuis les ressources de l’application sous forme de SolidColorBrush.

On peut y acceder directement dans le XAML :

//ou encore

Ou dans le code behind :

Color accentColor = ((SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"]).Color;

Il n’est donc pas nécessaire de s’en occuper dans notre classe Tools, mais il est important de savoir la récupérer pour calculer les autres couleurs.

Contrast Accent Color

C’est ici que l’on commence à effectuer des calculs. Comme l’explique Adobe, pour obtenir la couleur inverse, ou contrast color, il faut prendre la valeur opposée de chaque valeur RVB qui composent notre couleur. Par exemple avec R la valeur rouge, on prendra 255-R. En code cela donne ceci :

        public static Color GetAccentContrastColor()
        {
            Color accentColor = ((SolidColorBrush)Application.Current.Resources["PhoneAccentBrush"]).Color;

            Color contrastColor = new Color()
            {
                R = (byte)(255 - accentColor.R),
                G = (byte)(255 - accentColor.G),
                B = (byte)(255 - accentColor.B),
                A = (byte)255
            };

            return contrastColor;
        }

On reconstruit tout un objet Color grâce aux différentes valeurs de l’accent color. Celles si ayant été préalablement soustraites à 255.

Complementary Accent Color

Pour la couleur complémentaire, ou Complementary Color, c’est un peu différent. Le calcul est le même que pour la couleur inverse mais au lieu de prendre 255 on prend la somme de la plus grande valeur RVB avec la plus petite valeur RVB.

         public static Color GetAccentComplementatyColor()
        {
            Color accentColor = ((SolidColorBrush) Application.Current.Resources["PhoneAccentBrush"]).Color;

            byte maxValue = Math.Max(accentColor.R, accentColor.G);
            maxValue = Math.Max(maxValue, accentColor.B);

            byte minValue = Math.Min(accentColor.R, accentColor.G);
            minValue = Math.Min(minValue, accentColor.B);

            byte sumValues = (byte) (maxValue + minValue);

            Color complementaryColor = new Color() {
                R = (byte)(sumValues - accentColor.R),
                G = (byte)(sumValues - accentColor.G),
                B = (byte)(sumValues - accentColor.B),
                A = (byte)255
            };

            return complementaryColor;
        }

Ici le helper Math est très utile pour trouver les minimum et maximum des valeurs RVB.

Utilisation

Maintenant que notre classe est construite vous allez devoir modifier votre projet pour pouvoir l’utiliser.

Ouvrez App.xaml.cs et ajoutez dans son constructeur :

// Add brushes for contrast and complementary colors based on accent color.
Resources.Add("AccentComplementaryColor", Tools.GetAccentComplementatyColor());
Resources.Add("AccentContrastColor", Tools.GetAccentContrastColor());

Il vous suffira alors d’utiliser ces ressources dans votre code XAML:

Et le designer?

Vous aurez surement remarqué que même si le code fonctionne à la compilation, la couleur reste transparente dans le designer de Visual Studio. C’est normal car le constructeur de App.xaml.cs n’est pas appelé. Pour corriger ce problème, ajouter un dictionnaire de ressources en ajoutant un fichier XML au projet appelé DesignDictionary.xaml. Mettez y un et ajoutez dedans ces brushes :

Elles correspondent aux couleurs calculées pour la couleur par defaut du designer : le bleu.

Allez dans App.xaml et ajoutez y le dictionnaire précédemment créé.

Maintenant votre designer se basera sur les resources du dictionnaire, mais celles-ci seront écrasée par les vrais valeurs calculées à l’exécution du programme.

Dans Visual Studio créez un nouveau projet de type Windows Phone Game (4.0) et ajoutez votre classe Tools.cs.

Avant de rajouter notre code il va falloir rajouter deux références importantes :

using Microsoft.Xna.Framework;
using System.Windows;

Microsoft.Xna.Framework nous permettra d’accéder à la classe Color compatible avec notre jeu.
System.Windows nous permettra d’accéder à la classe Application du téléphone et de récupérer son Accent Color. Pour pouvoir ajouter cette référence, il faut aller dans l’arborescence du projet, effectuer un click droit sur le dossier Resources puis selectionner Add Reference, dans la liste qui s’affiche, prenez System.Windows.

Maintenant, place au code !

Commençons par la fonction de récupération de l’Accent Color. Par defaut cette propriété n’est pas disponible en XNA, il faudra donc passer par le namespace System.Windows (d’ou l’ajout de sa référence un peu plus haut) et aller chercher dans les ressources de l’application la propriété PhoneAccentColor :

var accentColor = ((System.Windows.Media.Color)Application.Current.Resources["PhoneAccentColor"]);

Hélas ce n’est pas tout, car grâce à ce code, vous obtiendrez un objet Color qui n’est pas de type XNA. Il va donc falloir le convertir.

var xnaColor = new Color { A = accentColor.A, R = accentColor.R, G = accentColor.G, B = accentColor.B };

Une fois le tout assemblé en une fonction GetAccentColor(), vous devriez obtenir ceci :

        public static Color GetAccentColor()
        {
            var accentColor = ((System.Windows.Media.Color)Application.Current.Resources["PhoneAccentColor"]);
            var xnaColor = new Color { A = accentColor.A, R = accentColor.R, G = accentColor.G, B = accentColor.B };

            return xnaColor;
        }

Pour les couleurs inverses et couleurs complémentaires, c’est la même chose :

        public static Color GetAccentComplementatyColor()
        {
            var accentColor = ((System.Windows.Media.Color)Application.Current.Resources["PhoneAccentColor"]);

            byte maxValue = Math.Max(accentColor.R, accentColor.G);
            maxValue = Math.Max(maxValue, accentColor.B);

            byte minValue = Math.Min(accentColor.R, accentColor.G);
            minValue = Math.Min(minValue, accentColor.B);

            var sumValues = (byte)(maxValue + minValue);

            var complementaryColor = new Color
            {
                R = (byte)(sumValues - accentColor.R),
                G = (byte)(sumValues - accentColor.G),
                B = (byte)(sumValues - accentColor.B),
                A = 255
            };

            var xnaColor = new Color
            {
                A = complementaryColor.A,
                R = complementaryColor.R,
                G = complementaryColor.G,
                B = complementaryColor.B
            };

            return xnaColor;
        }

        public static Color GetAccentContrastColor()
        {
            var accentColor = ((System.Windows.Media.Color)Application.Current.Resources["PhoneAccentColor"]);

            var contrastColor = new Color
            {
                R = (byte)(255 - accentColor.R),
                G = (byte)(255 - accentColor.G),
                B = (byte)(255 - accentColor.B),
                A = 255
            };

            var xnaColor = new Color { A = contrastColor.A, R = contrastColor.R, G = contrastColor.G, B = contrastColor.B };

            return xnaColor;
        }

Voici un petit exemple de ce que vous pouvez obtenir avec de gauche à droite du purple, du teal et du pink et leurs couleurs complémentaires (en bas) et opposées (en haut à gauche)

Vous n’êtes maintenant plus limités à une seule couleur. Faites en bon usage et rendez vos applications moins austères.

Sources des projets SL et XNA : télécharger

Je commence cette année (euh… bonne année au fait) avec un petit test d’intégration de Unity3D dans WordPress.

En fait c’est un test pas vraiment poussé car il sert juste à vérifier le fonctionnement du plugin Unity WordPress Blog Plugin (donc vous vous douterez bien que c’est sensé fonctionner du premier coup).

Mais ce test va tout de même servir à vous montrer que Unity3D c’est super. En effet, l’exemple suivant est une application bête et méchante d’un tutorial de Will Goldstone et nécessite tout au plus 1h de travail et 0 lignes de codes. Preuve de la facilité d’accès de cet IDE.

Pour essayer, il suffit de cliquer sur l’image, puis de se déplacer avec les touches directionnelles ou ZQSD, et la barre espace pour sauter.

Please view the full post to see the Unity content.

Bien sûr, Unity3D n’est pas uniquement destiné aux débutants. Si vous touchez un peu au scripts, les possibilités deviennent vite infinies. Et j’espère bien vous le prouver dans mes prochains billets. Mais pour cela, il va falloir attendre un petit peu

En attendant, voici un peu de publicité pour le portail francophone de la communauté Unity3D : Unity3D-France. Vous y trouverez toute l’actualité Unity3D, de très bons tutos, et un forum d’entraide déjà bien actif.

Logo de Unity

Qu’est-ce que Unity? C’est une plateforme de développement destinée à la 3D temps réel. Elle a l’avantage par rapport à la concurrence de réunir :

• Une utilisation simple. Mêmes les graphistes ne sachant pas développer peuvent arriver à faire des scènes magnifiques.
• Une souplesse de programmation. Les développeurs ont accès à une panoplie de fonctions de bases vraiment complète, sans pour autant être limités par celles-ci. Il est possible, en mettant les mains dans le cambouis, d’arriver à un résultat vraiment poussé digne des grands jeux next-gen.
• Une communauté active. Il est facile d’obtenir de l’aide sur une fonction et il n’est pas rare de voir quelqu’un partager ses scripts. Il est rarement nécessaire de devoir réinventer la roue.
• Une bonne portabilité. Unity permet de développer pour Windows/MacOS voir même iPhone selon la version. De plus il est possible de compiler soit un stand alone, soit d’intégrer sa scène sur une page web. Pour la deuxième option, tout personne ayant installé le plugin Unity3D (au même titre que Flash ou Silverlight) pourra utiliser votre application directement depuis son navigateur, tout en gardant des performances 3D dignes de ce nom.

La liste des fonctionnalités est encore longue, mais celles-ci sont les plus notables. Cerise sur le gâteau? Alors que Unity existait en version pro à 1500$ et en version Indie à 200$, la version Indie est récemment devenue gratuite, sans pour autant sacrifier les possibilités commerciales restées inchangées!

Pour la partie qui nous intéresse, le développement, Unity laisse le choix entre 2 langages : Javascript et C# (basé sur mono). Au développeur de choisir selon ses habitudes. Mais nous ne sommes pas limités à un seul de ces deux langages. En effet, il est possible d’utiliser ET des scripts Javascript ET des scripts C# au sein d’un même projet, ce qui n’est pas négligeable lorsqu’on travaille en équipe.

Je parle de scripts, car le développement avec Unity n’est pas de la programmation à proprement parler, mais du scripting. Un script Unity contient par défaut une méthode Start() et une méthode Update() définissant son comportement et est réutilisable à l’infini. En effet, une fois un script créé, il suffit de le lier à n’importe quel objet de la scène pour que cet objet l’utilise (par le biais des méthodes Start et Update). A savoir qu’un même objet n’est pas limité à un seul script. Une caméra peut, par exemple, contenir un script de déplacement, ainsi qu’un script d’effet (par exemple changer la focale). De par ce fait, l’aspect communautaire est grandement facilité, un script pouvant être partagé et réutilisé sans aucune modification nécessaire.

A savoir que le côté « script » ne limite aucunement les possibilités de développement. Voici par exemple une démo, effectuée par notre graphiste (Steph3D pour les intimes) :

Au programme : gestion de plus de 10 000 objets tout en restant fluide, utilisation de shaders, de systèmes de particules, gestion de la caméra (pour les déplacements), de la gravité etc. Une ancienne version du projet peut être testée sur cette page en « Web Browser Integration » (d’autres démo sont disponibles sur son site).

En bref, Unity c’est super pour commencer, et même pour continuer. Nouvel objectif donc : arriver à maitriser le monstre. J’ai pour but d’arriver à la fin de cette année scolaire, avec assez de bagage technique pour pouvoir gérer une scène Unity complexe, voir un petit jeu.

Depuis mes débuts dans le monde informatique, mon rêve est de pouvoir un jour travailler dans le domaine de la 3D temps réel (et aussi dans les IHM mais ça c’est une autre histoire). Enfin au tout début c’était surtout « je veux faire des jeux vidéos », mais une fois compris que ça ne voulait rien dire car cela ne correspondait pas à un seul domaine, j’ai donc recompilé mon rêve pour le rendre plus réalisable.

Mais cela n’est qu’histoire ancienne, car j’ai maintenant les compétences et les outils pour mettre un pied dans ce monde de fou.

Histoire de déroger à la règle, je ne vais pas commencer ce blog par un billet de présentation. Alors “a quoi sert ce billet” me demanderez vous? Bah à vous dire que je ne vais pas faire de présentation.

Et oui, si j’avais voulu faire un billet de présentation, j’aurais commencé par dire “Bonjour tout le monde !” et là ce n’est pas le cas. Ah si? Zut alors… Oui mais bon, je me suis arrêté là, je n’ai pas continué en disant “Bienvenue dans mon nouveau blog, il va être consacré à la présentation de mes projets et à divers tutoriaux”.

En plus tous ceux qui me connaissent savent déjà que ça va parler de développement informatique (.Net, C++, PHP etc), d’infographie (2D, 3D etc) et peut être même des deux en même temps (3D temps réel, Unity3D etc). Ce qui rend inutile le fait de l’annoncer dans un tel billet.

Donc pour être clair, ceci n’est pas un billet de présentation…

… mais bienvenue  dans mon nouveau blog quand même.

Ldoppea.