Créer son jeu pour 0 € ou le blog d'un créateur indépendant fauché.

Créer son jeu pour 0 € ou le blog d'un créateur indépendant fauché.

Par krys64 Blog créé le 21/11/10 Mis à jour le 04/11/15 à 21h48

Pourquoi s'embêter à monter un studio de jeu vidéo à coups de millions et d'équipes surdimensionnées alors qu'il est si simple de tout faire soi-même ?
Vous suivrez sur ce blog les aventures d'un créateur indépendant qui va édifier petit à petit son projet de jeu afin de conquérir le monde.

Ajouter aux favoris
Signaler

Pour créer un niveau de mon jeu avec tous les éléments qui s'agencent dynamiquement, j'utilise un bon vieux système de tableau qui a la forme suivante :

private var myMap1 = [
0, 0, 11, 0,11,11, 8, 1,  2, 0, 0, 5, 0, 0,  2, 3, 4, 0, 0, 1,4, 5, 0, 1,  2, 3, 4,
0,11,  0,11, 0, 0, 0, 8,  2, 3, 0, 0, 0, 0,  2, 3, 4, 0, 0, 1,4, 5, 0, 1,  2, 3, 4,
0, 0,  0, 0, 4, 0, 4, 1,  4, 0, 0, 10, 0, 0,  2, 3, 4, 0, 0, 1,4, 5, 0, 1,  2, 3, 4,
0, 0,  0, 0, 0, 0, 0, 1,  2, 8, 0, 0, 10, 0,  2, 3, 4, 0, 0, 1,4, 5, 0, 1,  2, 3, 4,
0, 0,  0, 0, 0, 0, 0, 1,  2, 8, 0, 0, 0, 10,  2, 3, 4, 0, 0, 1,4, 5, 0, 1,  2, 3, 4
];

Chaque chiffre correspond à un élément du décor qui va être intégré dans le niveau. Par exemple :

Par exemple les 2 hamburgers correspondent au 2 "11" que l'on peut voir en partant de la gauche du tableau.

Ensuite un script parcours le tableau et fait le travail. Cependant, le tableau étant en dur dans le code, j'ai cherché un moyen de l'externaliser et heureusement tout est prévu. Je créé un fichier .txt que je place au niveau da ma structure de projet. Ensuite j'appelle le fichier comme suit :

import System.IO; // Je fait un appel des classes de lecture/écriture d'Unity

private var fileName = "level1.txt"; // Je définie l'emplacement du fichier, ici un lien relatif

function Start(){
// au démarrage du jeu
    var sr = new StreamReader(Application.dataPath + "/" + fileName); // on créé un stream depuis l'application mère vers level1.txt
    var fileContents = sr.ReadToEnd(); // Dans cette variable, on place le contenu du .txt
    sr.Close(); // on stoppe le stream

    var _chars= fileContents.Split(","[0]);// on enlève toutes les virgules, ce qui créé des blocs de chaines

    var _array:Array=new Array(); // on créé un nouveau tableau
      for (_char in _chars) { // on scanne la variable _chars et à chaque bloc de chaine...
          _array.push(parseInt(_char )); // on place le bloc dans le tableau en transformant la chaine de caractères en entier numérique
    }
    //::::::::::::::::::::::::::::::::::::::::::::::::::::::
    myMap=_array; // on retourne le tableau final
    GoPanel(); // on lance le panneau d'intro
    generateObjects(); // on génère le niveau
}

Ainsi, je peux changer et créer tous mes niveaux sans avoir besoin de recompiler l'application juste en modifiant le fichier.txt ou en en créant de nouveaux. Voilà une bonne technique de fainéant assez connue ;).

Ajouter à mes favoris Commenter (1)

Signaler

Les punks passent à l'attaque est j'ai décidé d'ajouter un effet de fondu sur la scène lors de l'explosion. Comme vous pouvez le constater sur la vidéo, l'explosion est exclue du fondu.

Pour obtenir cet effet sympa je vais utiliser 2 caméras :

-sur la principale je vais faire le rendu de tous les objets à l'exception de ceux disposant du layer camera2.

-sur la camera 2, je fait l'inverse et j'exécute le rendu des objets disposant du layer camera2.

Ensuite dans les propriétés des caméras je place la 2ème sur un calque supérieur à la principale. Les 2 caméras on de plus constamment la même position. Ce système peut aussi permettre de mettre des objets 3D au dessus d'une interface Gui ou de splitter un écran en 2 pour jouer à 2

De plus, lors de l'explosion je créé une sphere invisible par script pour appliquer les dégats au joueur qui devient rouge lorsqu'il est touché. Le script de la sphere de collision

function sphereDamage(){
    var basicsInRange : Collider[] = Physics.OverlapSphere(transform.position,detectionRange);
    for(var i:Number=0;i<basicsInRange.length;i++){
        if(basicsInRange[i].gameObject.name=="Player1"){
            basicsInRange[i].gameObject.transform.SendMessage ("applyDamage", 1,SendMessageOptions.DontRequireReceiver);
        }
    }
}

Ajouter à mes favoris Commenter (1)

Signaler

Comme vu dans les précédents articles, mon punk et mon explosion sont créés. Il ne me reste plus qu'à créer un projectile en forme de cocktail molotov qui apparaitra lors de l'attaque du punk.

Le cocktail molotov est construit sur le même système d'animation vu précédemment, mais je lui ai rajouté un composant rigidbody afin que lui soit appliqué le moteur physique. J'ai donc créé la fonction suivante lors de l'attaque :

function throwMolotov(){
    yield WaitForSeconds(0.2);// on attend 200 millisecondes
    var cocktailMolotov = Instantiate (molotov , Vector3(transform.position.x,transform.position.y+1,transform.position.z+0.1), transform.rotation);/// on fait apparaitre le cocktail molotov
    cocktailMolotov.rigidbody.AddForce (-50, 400, 0);//on lui applique une force physique de -50 sur l'axe des x et de 400 sur l'axe des y
}

Et c'est partit pour le lancer de la mort :)

Ajouter à mes favoris Commenter (0)

Signaler

On a vu que lorsque ma sphere touche le sol, cela provoque une explosion. Pour ajouter un peu plus d'effet, je vais ajouter une lumière qui va donner un côté plus réaliste à l'explosion en eclairant les objets envirronnants.

Pour cela, c'est très simple, sur mon objet explosion, je vais ajouter un objet "Point Light" qui est une lumière sphérique d'une intensité de 5 et d'un range de 13.  Cette lumière apparait en même temps que l'explosion et je vais créer un script qui va baisser son intensité au fur et à mesure que les flammes disparaissent . Je place ce script sur l'objet explosion :

private var lightHalo:Transform; // variable qui contiendra l'objet lumière

function Start(){
    lightHalo = transform.Find("lightHalo"); //On cherche l'objet lumière du nom de "lightHalo" dans l'objet explosion
   
}

function FixedUpdate(){ // dans cette boucle infinie
    lightHalo.light.intensity=lightHalo.light.intensity-0.1; // on diminue l'intensité de l'objet lightHalo de 0.1
    if(lightHalo.light.intensity<=0){// si l'intensité est inférieure ou égale à 0, elle vaudra 0
        lightHalo.light.intensity=0;
    }
}

Dans l'éditeur d'Unity 3D, vous pouvez voir le jeu image par image, ce que je fait dans la vidéo ci-dessous pour voir l'effet réalisé :

Ajouter à mes favoris Commenter (2)

Signaler

Notre punk étant sur la scène de jeu, je vais donc lui ajouter un cocktail molotov qu'il va jeter. Pour cela, la première étape est déjà de créer un objet explosif avec Unity.

Je créé donc une sphere qui va me servir de base et je lui adjoint un script qui permet de faire apparaitre une explosion lorsque la sphere touche un objet :

var explosionPrefab : Transform;//Objet particules explosifs

function OnCollisionEnter(collision : Collision) {//Lorsque le collider de la sphere touche quelque chose
    var contact : ContactPoint = collision.contacts[0];//on détermine les points de contatcs
    var rot : Quaternion = Quaternion.FromToRotation(Vector3.up, contact.normal);//on détermine l'angle d'impact
    var pos : Vector3 = contact.point;//on met dans une variable la position du contact
    Instantiate(explosionPrefab, pos, rot);// on fait apparaitre l objet explosif
    Destroy (gameObject);//on détruit la sphere
}

Pour créer une explosion, Unity dispose d'un excellent système de particules qui compte de multiples réglages et on peut y adjoindre une texture animée. Pour créer cette texture, je vais utiliser l'excellent logiciel Explosion Texture Generator qui est gratuit et exporte des tileset d'explosions au format png.

Ainsi en quelques minutes, j'ai créé une superbe explosion digne des plus grands FPS du siècle.

Vous pouvez admirer le résultat en vidéo :

Ajouter à mes favoris Commenter (2)

Signaler

Bon, on a un perso, quelques obstacles mais il manque des ennemis sur ma scène. Je vais donc ajouter un skater punk lanceur de cocktails molotov histoire de pimenter le jeu.

Pour cela, j'effectue plusieurs étapes toujours grace à des logiciels gratuits. Tout d'abord je créé 3 animations du punk dans un logiciel qui permet d'exporter des fichiers flash au format swf et qui se nomme Yuzhe Cool Motion. Ce logiciel est très proche de Flash dans son interface et je vais dessiner et animer mon personnage sur 16 images clés pour chaque étape.

Ainsi j'aurais une animation du punk statique sur son skate, une animation nommée attack1 et une dernière nommée attack2 (L'attaque compte 32 images animées mais est divisée en 2 parties).

Je génère donc 3 fichiers swf comportant des animations sur 16 images clés chacune. Je vais donc placer chaque animation dans un fichier png de 4 images sur 4. Je vais donc utiliser SwfSpriteSheet qui est une application air gratuite et qui permet de faire ce type d'export swf-png en un clic. Le résultat sera le suivant pour les 2 animations d'attaque :

et ceci :

Ensuite j'importe ces images dans Unity 3D et elles me serviront de texture sur un plane 3D (un mesh carré). Afin d'animer tout l'ensemble j'utilise un script qui est disponible sur le Wiki d'Unity mais que j'ai modifié à ma sauce pour permettre d'enchainer les animations.

Le tout donne ceci en vidéo :

A noter que j'utilise la même technique pour animer Jason. Dans une prochaine étape j'animerais le cocktail molotov et ses dégats apocalyptiques ;)

Ajouter à mes favoris Commenter (0)

Signaler

Bon, c'est pas tout d'avoir des hamburgers qui trainent dans mon jeu mais il va falloir un peu les animer.

Pour cela j'ai placé sur mon hamburger un objet de collision sphérique (composant sphereCollider-paramètre isTrigger coché) qui permet de détecter ce qui entre en contact.

Lorsque mon objet "Player1" va le toucher, je vais lancer un script qui crééra une animation toujours grace à iTween et jouera un son que j'ai cré avec le logiciel gratuit sfxr.

Ce qui donne le script suivant placé sur l'objet hamburger.

gameObject.AddComponent ("AudioSource");//on ajoute dynamiquement un composant audioSource
var gainSound: AudioClip;//on créé une variable son pour le son créé avec sfxr

function OnTriggerEnter (other : Collider) {//Si un objet touche le hamburger
    if (other.gameObject.name=="Player1"){//on vérifie qu'il s'agit de Player1
        audio.PlayOneShot(gainSound,0.5);//On joue le son une fois
        //
        iTween.MoveAdd(gameObject,{"y":0.5, "time":1, "transition":"linear"});//on anime le hamburger
        iTween.RotateAdd(gameObject,{"y":360, "time":0.5, "transition":"easeinexpo"});
        iTween.FadeTo(gameObject,{"alpha":0, "time":0.8, "transition":"linear"});
        iTween.ScaleAdd(gameObject,{"amount":Vector3(0.5,0.5,0.5),"time":0.5, "transition":"linear"});
        iTween.ScaleTo(gameObject,{"scale":Vector3(0,0,0),"time":0.5,"delay":0.5, "transition":"linear"});
        yield WaitForSeconds(1);//au bout de une seconde après le contact
        Destroy(gameObject);//on detruit l'objet hamburger de la scène
    }
}

Ce qui nous donne :


Ajouter à mes favoris Commenter (0)

Signaler

Il est temps d'ajouter un peu de son au et pour cela je place sur la caméra, qui dispose d'un écouteur de son, un composant "audioclip" qui permet de gérer les sons. J'importe dans Unity mes sons de skate au format ogg (j'utilise l'éditeur audio gratuit audacity et la banque de sons freesound) et je les place dans un tableau.

Ensuite suivant les actions, je joue les sons de ce tableau. Le format ogg est privilégié car il est le plus adapté pour un export Iphone mais on peut importer des sons mp3 et wav.

Ce qui donne ce rendu final.

Voici le script que j'utilise donc :

var jasonSound: AudioClip[];//tableau dans lequel je place mes objets sons dans l'éditeur

function playSound(_string){//fonction qui lance les sons suivant les actions
    audio.pitch=1;
    if(_string=="idle")
    {
        audio.loop = true;
        audio.volume=0.3;
        audio.clip=jasonSound[0];
        audio.Play();
    }
    if(_string=="run")
    {
        audio.loop = true;
        audio.volume=1;
        audio.clip=jasonSound[1];
        audio.Play();
    }

    if(_string=="jump")
    {
        audio.loop = false;
        audio.volume=0.3;
        audio.clip=jasonSound[2];
        audio.Play();
    }
    if(_string=="landing")
    {
        audio.PlayOneShot(jasonSound[3],0.2);
    }
    if(_string=="falling")
    {
        if(audio.clip!=jasonSound[2]){
            audio.Stop();
        }
    }
}

Ajouter à mes favoris Commenter (0)

Signaler

L'interface Gui d'un jeu vidéo concerne tous les textes et éléments que vous pouvez visionner sur un jeu. Les scores, inventaires, compteurs sont en général des éléments 2D composés de png ou de jpeg.

Dans la vidéo qui suit, vous avez 2 exemples de GUI intégrés. Tout d'abord l'effet de fondu au noir au lancement et le texte "Let's skate jason !".

Pour réaliser cela sous Unity, j'utilise plusieurs choses :

-Le script iTween qui permet de créer des transitions de toutes sortes (alpha, position, rotation...)
-Un script permettant d'adapter un élément graphique à la résolution de l'écran.

Une fois le script iTween intégré au projet, voici mon script pour créer ce que l'on voit dans la vidéo. :

var introTexture : GUITexture;// png représentant le panneau "let's skate jason !"

function Start(){
    GoPanel();// Au lancement du jeu, on joue la fonction goPanel()
}

function GoPanel(){
    introTexture=Instantiate(introTexture, Vector3(2,0.5,0), introTexture.transform.rotation);// On fait apparaitre le png à droite de la scène hors champ camera
    introTexture.gameObject.name="introTexture";

    iTween.CameraFadeAdd();// Ceci créé le fond noir de la caméra
    iTween.CameraFadeFrom(iTween.Hash("amount",1));// On applique le fond noir
    iTween.CameraFadeTo(iTween.Hash("amount",0,"time",1));// On créé un fondu de 1 seconde

    iTween.MoveTo(introTexture.gameObject,{"x":0.5,"y":0.5,"z":0,"time":1,"delay":1,"easetype":"easeOutExpo"});// la texture se déplace au centre de la scène après un délai de 1 seconde depuis le lancement et sur un temps de 1 seconde.
    iTween.MoveTo(introTexture.gameObject,{"x":-3,"y":0.5,"z":0,"time":1,"delay":3,"easetype":"easeInExpo"});A la 3ème seconde la texture disparait vers la gauche dans une transition de 1 seconde
    yield WaitForSeconds(5);// on stoppe la fonction pendant 5 secondes
    Destroy(introTexture.gameObject);// On détruit la texture qui ne sert plus à rien
}

L'utilisation de iTween est donc très pratique pour créer des animations d'interfaces très facilement et je vous conseille de visiter le site officiel pour découvrir toutes les possibilités.

Ajouter à mes favoris Commenter (0)

Signaler

Comme vous avez pu le remarquer, notre héros Jason le skater est capable de faire des grind de la mort sur certains objets comme les barrieres. A cela j'ai rajouté un petit rendu d'étincelles du plus bel effet.
Cet effet est réalisé grace au système de particules d'Unity, pour cela je fait Gameobject>create other>particle system. Ensuite dans le material je place une image créé pour l'apparence de l'étincelle et par du script j'active desactive l'émetteur de particules.

var etincelles : GameObject;

function isGrindind(){
    etincelles.particleEmitter.emit = true;
}

function isNotGrindind(){
    etincelles.particleEmitter.emit = false;
}

Ce qui nous donne en vidéo ceci :


Ajouter à mes favoris Commenter (4)

Archives