Event Orizon Studio

Event Orizon Studio

Créé le 22 mai 2018 #game #indie #unity #godotEngine #gameDev Contact


  • Pour ce premier pack de goodies de cette page, l'audio designer et le graphiste 2d vous offrent:
    - 3 pack d'icônes de curseur de souris 
    - plus d'une dizaine de sons Sci-fi
    - 1 bande son à utiliser en boucle

    Ce pack est sous licence Creative Common - CC BY 4.0
     


  • Retrouvez un tutoriel vidéo sur notre chaîne Youtube ce samedi 01/06/2019, afin de poursuivre votre apprentissage des shader avec le Shader Graphe de Unity.


    Au programme:

    - NoeudScene Node

    - Imiter un effet obtenu avec grabpass (inutilisable avec le LWRP)

    - Ajouter de la couleur à la texture

    - ajouter de la transparence à la texture finale

    - Exposer des propriétés dans l'éditeur


    Vous pouvez déjà trouver ci-dessous le Shader Graphe utilisé.

    Le shader est compatible Unity 2018 ET 2019.


    A très vite !


  • En terme de 2D et de shader il existe bien moins de ressources pour des effets sympas à faire. 
    Concernant l'effet outline il y a quand même une ressource utile comme point de départ.
    Ce shader est basé sur la coloration des pixels concernés par l'outline, lors de la fonction fragment du shader.
    Mais le principal défaut de ce shader c'est qu'il colorie la bordure de l'outline à l'intérieur du sprite et non à l'extérieur !

    Aujourd'hui nous allons nous baser sur ce premier shader pour le faire évoluer vers un vrai outline et non un fake outline. Nous exposerons donc ici les concepts utilisés sans pour autant fournir le package final qui sera disponible sur l'asset store et en accès Tipeur.

  • Principe de base du shader initial
  • Prenons n'importe quel sprite et plaquons le sur une grille pour représenter nos pixels. Evidemment sur notre écran réel il y a bien plus de pixels, mais ici on simule nos pixels pour comprendre le principe du shader.


  • Si vous étudiez de près le shader indiqué en introduction, vous verrez que l'algorithme est somme toute assez simple.
    - Dans la fonction frag, appelée pour chaque pixel, transparent, à rendre de notre sprite, on regarde si les pixels adjacents sont transparents.
    - Si au moins un des pixels est transparent, c'est que l'on est au bord du sprite, on applique donc à ce pixel en cours de lecture, la couleur de l'outline
    - Sinon on conserve la couleur initiale du sprite

    Démonstration en images...

  • Sur l'image ci-dessus, le pixel rouge est lu, et l'algorithme interroge la valeur de l'alpha des cases adjacentes (les cases blanches).

    Comme au moins un des pixels adjacents est transparent, le pixel lu sera de la couleur de la bordure !

    rem: en réalité il ne s'agit par réellement de pixel mais de texel, qui est l'unité des textures. Mais par simplicité pour l'explication nous faisons ce raccourci.


  • Bien que cela semble fonctionner, vous pouvez d'ailleurs tester par vous même, encore une fois en vous rendant sur la page du shader initial, on imagine assez vite que la bordure finale colorée, sera bien interne et non externe !
  • Principe de base du nouveau shader
  • Nous ce que l'on souhaiterait c'est bien un effet outline 2d extérieur ! 
    Ainsi non seulement, on ne perdrait pas de détail de la texture initiale du sprite, mais en plus l'effet avec largeur sera bien meilleur.



  • Il est à noter qu'avec la version outline externe, les "boites" des sprites, ne doivent pas être trop serrées, au risque de ne pas trop pouvoir augmenter la largeur de la bordure d'outline.
    Avec ce point en tête, on obtiendrait du coup un bien meilleur visuel.

    Pour passer donc du shader inital à notre nouveau shader, il suffit d'inverser la façon de penser.

  • Ainsi on va plutôt regarder si les pixels adjacents du pixel lu (toujours en rouge), est justement non transparent...

    - Dans la fonction frag, appelée pour chaque pixel à rendre de notre sprite, on regarde si le pixel lu est transparent et si les pixels adjacents sont non transparent.

    - Si au moins un des pixels adjacents est non transparent, c'est que l'on est au bord du sprite, on applique donc à ce pixel en cours de lecture, la couleur de l'outline

    - Sinon on conserve la couleur initiale du sprite


    Comme on peut le voir sur la capture ci-dessus, le pixel lu en haut à gauche, n'a pas de pixel adjacents non transparent, donc il reste transparent !

    Voilà vous avez le principe du nouveau shader, le reste demeure identique au shader initial.

    Si vous désirez télécharger le package complet avec les sources, merci d'envisager de devenir notre Tipeur.se !



  • Retrouvez un tutoriel vidéo sur notre chaîne Youtube samedi 25/05/2019, pour une découverte du package Unity, permettant de créer des animations 2D directement dans l'éditeur !


    Au programme:

    - Importer des sprites

    - Découvrir le package 2D Animation

    - Créer une animation directement dans l'éditeur de Unity


    Vous pouvez déjà trouver ci-dessous l'archive contenant les sprites utilisés dans la vidéo.


  • Retrouvez un tutoriel vidéo sur notre chaîne Youtube ce samedi 11/05/2019, afin de poursuivre votre apprentissage des shader avec le Shader Graphe de Unity.

    Au programme:
    - Noeud Sample Texture2D
    - Ajouter de la couleur à la texture
    - Contrôler une propriété du shader par script

    Vous pouvez déjà trouver ci-dessous le Shader Graphe utilisé et en bonus le Shader Graphe avec l'utilisation d'une texture normale (normal texture).

    A très vite pour un article traitant du codage, sans Shader Graphe, d'un shader 2D.


  • La dernière fois, nous avions vu comment prendre le contrôle de la couleur des textes de notre fenêtre d'éditeur... mais certains textes restent "inaccessibles" (Base Settings et Optional Settings!!

    Nous allons donc plonger dans la notion de style.

    N'hésitez à retrouver le code source final sur le dernier post en lien ci-dessus, car nous repartirons de ce code existant.

    Une fois le code prêt, la première chose à faire est de commenter la ligne qui permet de changer GLOBALEMENT la couleur des textes :  //GUI.contentColor = Color.blue;


  • Une GUI qui a du style
  • Une grande partie des éléments GUI acceptent en paramètre un objet de type GUIStyle, qui permet d'indiquer la couleur du texte, la font à utiliser et d'autres paramètres utiles.

  • On peut pousser assez loin l'étude des style sous Unity, aussi nous nous limiterons à changer la couleur du texte.
    Il est important de comprendre qu'un élément peut prendre 4 états:
    - focused: l'élément à le focus
    - active: click sur l'élément
    - hover: survol de l'élément
    - normal: aucun des 3 états précédents !!

    Ainsi si on désire créer un style, que l'on assignera par la suite à un éléments GUI, on doit tout d'abord créer un objet de type GUIStyle

  • Une fois l'instance crée, on peut alors modifier ses propriétés comme la couleur du texte dans l'état "normal" ou encore le padding (espace interne) appliqué à l'élément GUI, quand on lui appliquera ce style.
    Comme on peut le voir ci-dessous, le label "Base Settings" aura notre nouveau style et il devrait donc maintenant vous apparaître de couleur rouge à 50 % !!

  • Ainsi fait votre label recalcitrant vient enfin de changer de couleur et notre premier objectif est atteint !

    En fouillant un peu dans la documentation (cf lien ci-dessus), amusez vous un peu à changer deux trois paramètres... par exemple ..."comment feriez vous pour changer la couleur en bleu, quand notre label possède le focus ?"

    De plus sachez que l'éditeur de Unity possède plusieurs styles par défaut, regroupés au sein d'un même asset, un GUISkin. Il est d'ailleurs tout à fait possible de créer votre propre skin !!


    Premier objectif atteint donc !! Super !! Mais comme nous avons commenté la ligne : //GUI.contentColor = Color.blue;

    Et bien tous les autres labels, sont de nouveau noirs...🤔

  • Utiliser les EditorStyles
  • Ici on aborde les styles de l'Editor même, oui, oui, vous lisez bien...pas seulement ceux appliqués aux éléments GUI que vous ajoutez ! 

    En effet en jouant sur ces styles on "transforme" aussi l'ensemble de l'éditeur de Unity.

    Ceci dit c'est ici une des façons les plus simples pour pouvoir styliser les autres labels. Avec les EditorStyles on va pouvoir avoir accès aux styles appliqués à tous les éléments de type EditorGUILayout ..et si vous avez devant le script du premier post, vous avez remarqué que tous les derniers éléments GUI, sont de ce type.


  • En lisant la documentation on voit que bon nombre de styles embarqués sont disponibles, et ainsi on voit que le style EditorStyles.boldLabel concerne notre second label recalcitrant "Optionnal Settings" 👍
    Le code ci-dessus vous montre comment styliser la couleur de tous les labels, avec en bonus la couleur du label (en gras) que nous ne pouvions pas changer lors du dernier post !
    L'image ci-dessous vous montre le résultat final.

  • Alors certes c'est très multicouleurs comme résultat, et il est bien sûr hors de question de faire cela pour un éditeur.
    Mais avec ces 2 nouvelles données, GUIStyle et EditorStyles, on peut maintenant plus facilement styliser nos custom editor.
    Retrouvez le script final à ce stade en téléchargement...

Un éditeur en couleur...

- 0
  • Créer un éditeur personnalisé avec ses fonctionnalités sous Unity, c'est une chose mais à un moment donné ou un autre il faudra se poser la question du style...
    De quelle couleur seront les textes ? De quelle couleur seront les fonds ? ...Et la couleur du fond général ?
    En un mot : styliser la couleur de l'éditeur !
  • Package IMGUIModule
  • Vous avez peut-être commencé votre apprentissage de Unity sur les interfaces (UI), directement avec le "nouveau" package UnityEngine.UI, mais ça n'a pas toujours été le cas !!

    En effet avant ce package, pour ce qui est de l'UI, il fallait forcément passer par l'ancien package devenu peu à peu UnityEngine.IMGUIModule.


    Ce dernier package contient en réalité tout le nécessaire pour réaliser nos éléments d'interface de notre éditeur, pas seulement pour le style !!


  • Pour ce qui est des couleurs particulièrement, et avant de pouvoir créer notre propre style (GUIStyle), il faut s'attarder sur la classe GUI, qui contient certains champs tout à fait pertinents pour notre objectif...la couleur !!
  • Changer la couleur
  • Il existe actuellement trois champs utiles concernant la couleur:
    - GUI.contentColor
    - GUI.color
    - GUI.backgroundColor
    Ceci étant, dans la plupart des cas, on a pas besoin des les utiliser tous...mais au fait quelle est la définition de ces champs ?

    contentColor
    La notion de "content" indique dans Unity, le contenu...ainsi tout naturellement ce champ permet d'indiquer la couleur du contenu, donc la couleur du texte.


  • Ainsi selon le code ci-dessous, le texte du bouton aura son texte de couleur "Color.yellow", soit ...jaune !


    backgroundColor

    Ce second champ agit, lui sur la couleur des fonds. Il est à noter que l'on peut tout à fait mixer les utilisation de ces champs, afin de personnaliser les textes ET les fonds !



  • Sur l'image ci-dessus, le texte est blanc et notez bien ...le fond est jaune. Discret, certes ! Mais bien jaune !

    Le code adapté serait donc : GUI.backgroundColor = Color.yellow;

    Il est à noter que par "fond", on entend aussi par là les fonds des input aussi. Mais testez par vous même, ce sera bien plus édifiant. Pourquoi ne pas commencer par télécharger le package initial de l'éditeur, disponible sur GitHub, et décortiquer le code ?


    color

    Ce dernier champ dédié à la couleur, agit sur les 2 à la fois: text et background. Ainsi on peut encore mixer et ajouter une autre couleur à ce stade pour l'ensemble de l'interface.

    Mais attention car cette valeur sera multipliée par backgroundColor et contentColor ... ainsi vous risquez vite d'arriver à saturation et donc d'avoir ...du noir !!

    Utilisez donc ce paramètre avec parcimonie.

    Encore une fois n'hésitez pas à faire vos propres tests !!


  • Maintenant que l'on sait modifier à souhait les couleurs principales de l'éditeur, et surtout qui fait quoi, il serait super de pouvoir regrouper la notion de couleur avec la notion de taille ou encore font (police) d'un texte, non ?
    Ainsi nous pourrions définir un style, par exemple pour tous nos titres, et un autre pour nos textes de paragraphe ou de label.

    RDV au prochain épisode pour parler de ce point. 
  • Mise en pratique
  • Pour terminer prenons un cas d'étude en partant d'un script de test, issu de la documentation officielle de Unity, et adaptons les couleurs à nos souhaits ...


    Dans un premier temps, lisez bien la documentation pour comprendre comment mettre en place une fenêtre (window) custom dans Unity.

    Puis dans un second temps, créez le script et testez dans Unity. Pour ouvrir votre fenêtre d'éditeur, il faut faire => Window -> MyWindow.

    Enfin nous allons ajouter une couleur choisie pour les textes. Ainsi dans la méthode OnGUI(), et au tout début, placez le code suivant: GUI.contentColor = Color.blue;

    Ce faisant vous devriez ensuite voir les textes des labels passer en bleu, comme convenu !

    Continuons directement par le changement de la couleur de fond des input:

    GUI. backgroundColor = Color.yellow;

    Le résultat obtenu est sur la capture ci-dessous.


  • A ce stade vous pouvez bien sûr tenter d'utiliser GUI.color, mais attention !! (cf avertissement plus haut)


    Vous aurez sûrement remarqué, mais certains textes ne passent pas en bleu, comme le texte "base settings", ou encore "optional settings".

    Pour pouvoir modifier cela, nous allons avoir besoin de la notion de style, tout en remettant en question l'utilisation trop directe et globale des champs contentColor et backgroundColor !!

    Ainsi pour l'instant tentez de placer vos propres couleurs. Pour rappel vous n'êtes pas obligé d'utiliser les couleurs pré-configurées de l'éditeur Unity => new Color (1,1,1,1); //blanc pur full opacity !


    On se donne RDV au prochain épisode pour parler de style et de surcharge de style

    A très vite !

  • Avec la sortie de cet éditeur disponible sur GitHub, nous avançons sur une partie de la customisation, afin de pouvoir changer l'aspect (design) de l'éditeur.
    Tout d'abord les couleurs: textes et fond des éléments GUI.
    Cette étape est en cours de réalisation ... la suite au prochain épisode !