Dernière mise à jour : 22/06/2017 à 15h37

Current Project : ...

Index des tutoriaux

Sprite Emitter

Dans la création d'un décor, on est très rapidement confronté à un problème qui ne se posait pas sous un jeu comme Unreal1 ou UT99, tout simplement parce que la solution était simple à l'époque : comment créer par exemple, des flammes, des particules pour un téléporter etc. Sous les premières versions du moteur Unreal, Tout se faisait par utilisation de textures transparentes appliquées sur des plans perpendiculaires afin d'obtenir un bon résultat sous tous les angles de vue. Sous UT2003 et UT2004, des effets réalistes et convaincants peuvent enfin être créé grâce à la gestion des particules;

Nous allons nous intéresser à la création des sprites avec un Emitter sous UT200X. Mais d'abord, une petite introduction aux sprites :

Qu'est-ce qu'un Sprite ?

Voilà une question tout à fait judicieuse. Un Sprite, qu'est-ce que c'est ? C'est un plan, une surface plate, qui a la particularité de toujours faire face à la camera. Les sprites ont toujours été présent et indispensables dans la création de jeux vidéo car ils sont le moyen le plus simple de représenter quelque chose. Prenons l'exemple du premier jeu de shoot à avoir rencontré un véritable succès, j'ai nommé le bien aimé Doom1 : Si vous y avez déjà joué, vous avez du vous rendre compte que les ennemis, les objets et même l'arme que vous tenez entre les mains, ne sont pas modélisé en 3d : seul le décor l'est partiellement. C'est ce que l'on appelle la 2.5 D : deux dimensions et demi, car on ne peut plus parler de 2D, mais le terme 3D semble encore une surestimation.

Les ennemis sont en fait constitués d'une seule surface plate, sur laquelle est plaquée la texture représentant l'ennemi. Cette surface vous fait toujours face. Pour vous donner l'illusion de la 3D, le moteur de Doom 1 calcul si vous êtes devant, derrière, à coté ou aux 3/4 du monstre et plaque une texture différente sur la plaque : le monstre selon d'autres angles. Ces ennemis sont en fait des sprite : il n'y a qu'une surface en 2D sur laquelle est appliquée une texture. Cette surface fait toujours face à la camera. Pour créer une flamme, ce sera pareil : notre emitter va en fait émettre des plaques sur laquelle il plaquera la texture que nous désirons, créant ainsi l'illusion des particules. En réalité, nous allons allez encore plus loin.

Création d'un Sprite Emitter

Pour commencer, créez une pièce de... Disons 256*1024*1024. Nous allons tester de nombreux effets, certains assez spectaculaires. Vous allez vite vous rendre compte que les emitters sont vos alliés les plus précieux pour rendre un décor fantastique. Insérez une lampe dans votre pièce et ajoutez un emitter.

Scène vide

Pour ceux qui ne sauraient pas où cela se trouve dans l'actor browser, faites bien attention, il y a un Xemitter qu'il ne faut pas choisir :

Emitter dans l'actor browser

Poursuivons. Allez dans les propriétés de votre emitter. Onglet "emitter" justement : pour l'instant, il n'y a rien d'autre qu'un champ "Emitter" avec un petit "+" à coté. Il va falloir ajouter un objet pour créer nos effets.
Cliquez sur le champ à coté de "Emitter" et cliquez sur le bouton "ajout." qui apparait.

Ajout d'un système de sprites

Un champ apparait qui contient pour l'instant le mot "None". Vous pouvez le laisser comme cela ou donner un nom a votre emitter. Laissez le vide, cela n'influence en rien la création d'autres emitters, et cela ne sert à rien. En dessous, se trouve un champ "Nouv." qui contient la valeur "Beam Emitter". Cliquez sur ce champ et dans le menu déroulant, choisissez "sprite Emitter". Enfin, cliquez sur le bouton "Nouv." qui apparait à droite du champ :

propriétés des Emitter

Stupeur ! Pas moins de 26 onglets apparaissent. Laissez-moi-vous faire peur : chacun contient cinq ou six options au minimum. Eh oui, cela ne s'annonce pas de tout repos. Commençons par voir les effets de bases :

A) Créer Un flux de particules

Pour cette première partie, qui devrait nous permettre de voir les principales propriétés des emitters, nous allons créer une projection continue de petites étoiles dans une direction donnée. Tout d'abord, basculez votre fenêtre 3d en mode affichage dynamique en cliquant sur le petit Joystick. Vous remarquerez que votre emitter émet déjà des particules :

Emitter par défaut

Pour notre effet, nous allons donc devoir changer la texture émise par défaut, la taille de ces particules, leur donner du mouvement...

...Et quelques petites effets supplémentaires.

Pour commencer, allez cherche une texture de petite étoile. Vous en trouverez aisément dans le package "EpicParticle", group "Flares" :

Textures de Flares

Voilà déjà de quoi nous satisfaire? J'ai choisi arbitrairement une texture qui me plaisait : FlashFlare1, la deuxième. Elle a l'avantage d'être bien visible. Pour la couleur, ne vous inquiétez pas, nous pourrons la changer à loisir.
Commençons enfin, vous allez voir que ce n'est pas si compliqué que ca en à l'air, c'est surtout un peu intimidant. Dans les propriétés de votre emitter, allez chercher l'onglet "Texture".

Voici la liste des propriétés de cet onglet :

En mettant notre texture et en choisissant un affichage de type AlphaBlend, notre texture est émise, et est très transparente. Mais l'effet est encore loin d'être convaincant. Pour améliorer cela, il faut au moins donner du mouvement et une taille normale aux particules.

Premières particules

Allez donc dans l'onglet "Size" Les propriétés sont ici trop nombreuses et trop peu utiles pour être détaillées. Elles sont de plus, assez ardu comprendre, et vous n'en aurez certainement jamais besoin. Retenez surtout les propriétés suivantes :

Onglet Size

Pour nos besoins, des particules de 25 à 30 de diamètre suffiront. Assurez-vous qu'UniformSize est à vrai, puis, dans StartSizeRange, mettez le minimum de X à 25, et le maximum à 30. Pas besoin de toucher à quoi que ce soit d'autre.

Les sprites sont redimensionnés

Maintenant que cela est réglé, nous allons nous intéresser au mouvement de la particule. Allez dans l'onglet Velocity. Cette fois ci, c'est une véritable flopée de termes incompréhensibles :

Onglet Velocity

La plupart ne servent qu'à des cas très spécifiques, que vous n'aurez certainement jamais l'idée d'utiliser. Malgré tout, la plupart de ces paramètres peuvent vous permettre d'exécuter des actions très variées. Pour l'instant, nous n'allons nous intéresser qu'à une seule propriété : celle que vous utiliserez toujours : Start Velocity Range. Celle-ci permet de déterminer la vitesse d'une particule sur tous les axes. Si vous entrez une valeur dans le Champ X et que la particule part dans la direction opposée à celle que vous désirez, vous pouvez entrer une valeur négative : en effet, une valeur positive signifie un déplacement le long de cet axe, et une valeur négative le fait dans l'autre sens.

Pour nos besoins, il suffira d'entrer en Y Max=150 et Min=50.

Les particules se dévellopent

Le tutorial pourrait s'arrêter là, mais nous allons encore voir deux ou trois choses importantes dans les propriétés d'un emitter :

Onglets General et Location

Tout d'abord, dans l'onglet "Location", se trouve une propriété très important : startLocationRange. Elle permet de spécifier la zone d'apparition des particules. En effet, elles sortent pour l'instant toute du même point, ce qui créé une ligne parfaite de particules. Pour modifier cela, et les faire apparaitre sur un plan, il suffit d'augmenter les valeurs minimales et maximales. Si vous modifiez les valeurs de X, Y et Z, les particules apparaitront par défaut dans un cube ayant les dimensions spécifiées.

J'ai modifié les valeurs X et Z : j'ai mis aux deux 50 au max et -50 au minimum. Il en résulte que les particules apparaissent dans un champ allant de 50 unités au dessus de l'emitter jusqu'à 50 unités en dessous, et de 50unités sur la droite à 50 unités sur la gauche.

StartLocationRange

En second lieu, le nombre de particules est très bas. C'est un peu dommage car ca rend l'effet un peu faiblard. Pour remédier à cela, onglet General, et augmentez le nombre de la propriété "MaxParticles" (par défaut à 10, en mettant 30 on peut arriver à un bon effet) :

MaxParticles

Pour notre effet, on pourrait se contenter de cela. Mais pourquoi se priver de quelques couleurs ? Allez hop, onglet Color, il y a plein de propriétés intéressantes :

Onglet Color

Voici la liste des propriétés et leurs effets :

ColorMultiplierRange : Voici une propriété dont le fonctionnement échappe vite à toute logique : vous pouvez y entrer des valeurs pour changer la couleur desparticules de manière aléatoire. C'est à dire que chaque particule aura une couleur à elle, en passant par toute les nuances possibles de bleu, rouges, vert, bleu violet etc. Une propriété à manipuler avec précautions, voir pas du tout à cause de son effet "carnaval" qui ne convient pas à la plupart des maps.

ColorScale : il s'agit de la principale propriété de cet onglet. Elle vide par défaut, ce qui signifie que les particules ont la couleur par défaut de la texture (dans mon cas, la texture est blanche, donc les particules sont blanches, logique). Lorsque vous ajoutez un objet à cette liste, vous obtenez deux propriétés nouvelles :

Le Colorscale

La première permet de choisir une couleur (vous savez comment faire), soit dans une bande chromatique (en cliquant sur le champ puis sur le bouton "..."), soit en la prenant dans la map (avec le bouton ramass.").
Le deuxième nouveau paramètre est "relative time". Il est très important. Vous devez y entrer une valeur entre 0 et 1. 0 représente le début de la vie de la particule et 1 représente la fin de sa vie. Ainsi, une valeur de 0.5 représente le milieu de sa vie, 0.25 le quart, 0.75 les trois quarts etc.

Imaginons par exemple que je mette trois objets dans la liste de ColorScale. Disons que je mets une couleur verte avec un relative time 0, un couleur jaune avec un relative time 0.5 et une couleur rouge avec un relative time 1.

Le résultat sera le suivant :

Couleur modifiée le long d'un ColorScale

Les couleurs des particules sont un long fondu du vert vers le rouge en passant par le jaune. La particule apparait verte (temps 0), atteint le jaune à la moitié de sa vie (temps 0.5) et deviens rouge vers la fin (temps 1).

Poursuivons, et soyons perfectionnistes : les particule sont une durée de vie toute identiques, et l'effets n'est pas très réaliste du coup. Qu'a cela ne tienne, onglet "Time", diminuez les valeurs de "LifeTimeRange" qui sont par défaut à 4 :

Onglet Time

Voilà qui est mieux. Un dernier détail et nous passerons à autre chose : les particules apparaissent et disparaissent subitement. Il serait mieux qu'elles fassent un fondu à leur arrivée et à leur fin. Pour cela, direction l'onglet "fading".

Onglet Fading Modification du Fading

Voilà. Vos particules ont une bonne taille, un bon mouvement, changent de couleur, font des fondus et sont assez nombreuses. Vous pouvez déjà réaliser pas mal d'effets avec cela. Mais tous les effets de flammes et de particules dont la forme doit changer au fur et à mesure du temps, vous sont encore hors de portée. Nous allons voir ca dans la deuxième partie :

Subdivisions de textures

Pour créer une flamme, le mieux serait une texture qui se déforme avec le temps. Malheureusement, ce n'est pas possible. Heureusement (vous pouvez être heureux), il existe quand même un moyen de simuler ce genre d'effets. Allez regarder le package "EmitterTextures", et ouvrez le group "multiframe" :

Textures subdivisées

Toutes ces textures sont divisées. Chaque texture a plusieurs petites parties qui donnent un bon effet lorsqu'elles s'enchaînent. Tout le but du jeu est de comprendre comment faire pour les enchainer.

Ajoutez un emitter, et ajoutez dans ses propriétés un objet Sprite Emitter.

Un deuxième Emitter

Dans le Texture Browser, allez chercher une texture représentant des flammes. Pour ma part, package emittertextures, group multiframe, j'ai choisi la texture Fire3.

Selection d'une texture subdivisée de feu

Mettez-là en tant que texture dans votre emitter. Vous vous rendrez vite compte que ce ne marche pas tout à fait comme prévu :

Effet peu aboutit

Pourtant, si vous avez bien lu le début du tutorial, vous savez qu'il y a pas mal de propriétés de l'onglet "Textures" qui sont dédié à la subdivision de la texture. C'est justement ce que nous allons utiliser ici.

Pour commencer, observez votre texture : la mienne est constituée de 16 images : 4 colonnes et 4 lignes. Donc logiquement, je vais demander 4 subdivisions sur les deux axes.
Le truc est donc tout simple : changez TextureUSubdivision et TextureVSubdivision à 4 :

La texture n'affiche qu'une seule frame

Comme vous le voyez, le moteur découpe votre texture, et n'en affiche qu'un subdivision à la fois. Modifiez la taille des particules pour arriver à un effet convenable, et pour simuler le mouvement ascendant de la chaleur, dans l'onglet Velocity, changez le paramètre Z de la propriété StartVelocityRange à 25 Max et 20MIn. Changez aussi la durée de vie des particules à 2 ou 3 secondes :

>Amélioration de l'effet

L'effet de flammes et déjà bien mieux. Pour améliorer, nous allons définir l'ordre des subdivisions : pour l'instant, une particule arrive en jeu et passe aléatoirement de subdivisions en subdivisions.

Avant d'aller plus loin, une petite explication s'impose : les subdivisions d'une texture sont numérotées. En effet, le moteur, lorsqu'il procède au découpage, donne un chiffre à chaque petite partie. L'attribution se fait ainsi : la première subdivision, la partie en haut à gauche de l'image, se voit attribuer le numéro 0. Ensuite, la subdivision à droite de celle-ci est numérotée 1, la suivante 2, etc. Jusqu'à ce que le moteur arrive au bord de la texture. Ils descendent donc la ligne suivante, et numérote la partie toute à gauche. Pour mieux visualiser, il existe une texture, package EmitterTextures, group FrameAnim :

Repère temporel du Frame Anim

Vous voyez bien ainsi l'ordre du découpage de la texture (qui sur la texture commence à 1, et non pas à 0 d'ailleurs).

Donc, dans l'onglet Texture, changez "SubdivisionStart" à 0, et"SubdivisionEnd" à 15 si vous avez comme moi une texture à 16 parties. Pour améliorer l'effet, n'hésitez pas à mettre "BlendBeetwensubdivision" à Vrai !

Effet aboutit

C'est quasiment fini. Vous savez utiliser les textures subdivisées. Néammoins, je me permets de repréciser deux trois petites choses :

Pour peaufiner le feu, il faudrait diminuer un peu le nombre de particule et jouer sur le SizeScale pour que les particules soient plus grosses au début de leur vie qu'à la fin pour simuler l'étrécissement progressif des flammes. Avec un peu de travail en plus, voilà ce que vous pourriez obtenir :

Effet avec colorscale et sizescale

Qu'ai-je fait ? J'ai juste ajouté un ColorScale qui fait passer la texture de sa couleur normale à un rouge très vif en passant par un jaune orangée, j'ai modifié le nombre de particules (de 10, elles sont passées à 15), j'ai mis un SizeScale (0=35, 0.5= 25, 1=20), et j'ai baissé la Velocity en Z à 15max et 10min.
L'effet est bon, plus qu'à trouver une cheminée ou un Static-Mesh de torche !

Pour des effets plus compliqué, il faudra se référer à la liste des propriétés à la fin de la série. Je vais juste détailler l'onglet spécifique aux Sprite Emitter, l'onglet "Sprite" :

Vous avez de la chance, il n'est pas très fourni.

Effet final

2005-2016, by Hellkeeper.

Valid XHTML 1.1 CSS 2.1