IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Présentation de SantaLib-Objs, la bibliothèque de jeux en JavaScript

SantaLib.frhttp://santalib.fr est un projet de bibliothèque JavaScript proposé par SmellInside pour concevoir des jeux rapidement.

Le projet s'est officiellement concrétisé en décembre 2011, avec une première version. Cette version permettait donc de concevoir des jeux rapidement en reprenant un modèle déjà existant, avec de nombreuses fonctionnalités implémentées : http://santalib.fr/Download0.6.html, ce n'est pas cette version que nous traiterons dans le tutoriel.


Aujourd'hui, Santalib.fr propose une version objet, la « SantaLib Objs », offrant ainsi le confort d'une vraie bibliothèque pour coder proprement et rapidement. On peut générer une simple carte (Map) en trois ou quatre lignes de code, y ajouter des bots, définir des types d'actions, rendre manœuvrables des éléments de la carte...

http://santalib.fr/bde-epitech-news.html, c'est ici que vous pourrez télécharger la version correspondant à ce tutoriel.


L'origine du nom attribué à ce projet provient de la période de Noël, c'est alors que les premières lignes de code sont tombées, ainsi qu'à la prononciation « sans ta lib » suggérant ainsi la simplicité de l'utilisation de la bibliothèque.


11 commentaires Donner une note à l´article (4.5)

Article lu   fois.

Les deux auteurs

Profil ProSite personnel

Profil Pro

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Prérequis

JavaScript : pour les personnes qui souhaitent approfondir leurs jeux.
HTML et CSS :pour les personnes qui souhaitent personnaliser leurs jeux.
Minimum :la notion de tableau à deux dimensions.

Dans ce tutoriel, nous commencerons par analyser la SantaLib Objs, puis nous terminerons par un exemple de son utilisation. Image non disponible Sur ce, bon tutoriel !

II. Préliminaire

Placez ce code impérativement là où vous souhaitez utiliser la SantaLib :

 
Sélectionnez
<div id="init_SantaLib"></div>
<script src="santalibObjs.js"></script>

santalibObjs.js est la bibliothèque que vous aurez bien sûr téléchargée au préalable sur le site officiel, pointant au bon endroit sur votre serveur.

III. Initialisation

On commence par initialiser la bibliothèque et paramétrer son utilisation (obligatoire, nécessite que tout soit bien paramétré avant) :

 
Sélectionnez
var plop = new SantaLib(); //On initialise notre bibliothèque.

plop.setHeight(10); //Hauteur Map.

plop.setWidth(30); //Largeur Map.

plop.loading(); //Charge la SantaLib.

plop.setBorder(); //Définit des bordures à notre Map (facultatif mais conseillé).

plop.pushMap(); //Provoque le chargement de la Map.

IV. Instanciation

L'instanciation est simplifiée au maximum, on renseigne les coordonnées et le nom de l'élément. Attention le nom de l'élément correspond à son image :

 
Sélectionnez
plop.pushEl(ordonnée,abscisse,'element'); //element.png

plop.pushEl(0,25,'5'); //Ici on positionne l'élément '5' correspondant à l'image 5.png à une position 0 en
ordonnée et 25 en abscisse.

V. Utilisation du clavier

On commence par initialiser le clavier :

 
Sélectionnez
plop.useKeyBoard();


À partir de là, on peut récupérer la dernière touche du clavier via :

 
Sélectionnez
plop.getTouche() ;


et passer les touches en non bloquantes :

 
Sélectionnez
this.manageBloquant = false ;

VI. Actions

La SantaLib permet d'affecter des actions à des éléments.

Déclarer un ennemi à un élément :

 
Sélectionnez
plop.addBadBoy('element','enemi');

plop.addBadBoy('5','666'); //On déclare 666 comme ennemi de 5. En cas de contact entre ces deux-là, le 5 est éliminé.


Soumettre un élément à la gravité :

 
Sélectionnez
plop.initializeApesanteur('element');
plop.initializeApesanteur('5'); //On soumet '5' à la pesanteur.


Déplacer un élément sur la Map :

 
Sélectionnez
plop.goLeft('5') //Dirige l'élément '5' vers la gauche.
plop.goRight('5') //Dirige l'élément '5' vers la droite.
plop.goUp('5') //Dirige l'élément '5' vers le haut.
plop.goDown('5') //Dirige l'élément '5' vers le bas.


Transformer un élément en bot. Autonome, il se déplacera tout seul où il veut sur la Map. On peut aussi le soumettre à la pesanteur :

 
Sélectionnez
plop.isBot('element') ; //L'élément sera converti en bot.
plop.isBot('5') ; //On indique que l'élément '5' sera un bot.

Rendre un élément déplaçable avec les flèches :

 
Sélectionnez
plop.managePerso ('element') ; //L'élément sera déplaçable avec les flèches.
plop.managePerso ('5') ; //On indique que l'élément '5' sera un bot.

Tester l'existence d'un élément :

 
Sélectionnez
plop.ExistItem('5') //Si l'élément 5 existe : retourne true sinon false

VII. Les propriétés avancées

La SantaLib est un objet, donc elle possède des paramètres tels que :

 
Sélectionnez
this.version //Permet de récupérer le numéro de version, ou de la modifier.


Les tailles de la Map :

 
Sélectionnez
this.width //Largeur de la Map.
this.height //Hauteur de la Map.

this.CoefM //Spécifique, ne pas toucher, mais fait le lien entre le tableau de données et l'affichage graphique.

Il est conseillé de les modifier en utilisant les méthodes de redimensionnement de la Map.

La couleur de la div contenant le jeu, à modifier avant d'utiliser le loading :

 
Sélectionnez
this.bgcolor //color background

manageBloquant //Permet de passer les touches en non bloquantes (onkeypress != onkeyup).


Permet de contrôler la pesanteur qui lie tous les éléments :

 
Sélectionnez
this.apesanteur //Passé à false, aucun élément ne sera soumis à la pesanteur.


On peut aussi augmenter la pesanteur ou la diminuer :

 
Sélectionnez
this.timeApesanteur

VIII. Les méthodes avancées

Ici quelques méthodes spécifiques, aidant pas mal pour déboguer vos programmes :

Concernant le DEBUGGING
Rafraichira, les images autour des coordonnées x et y :

 
Sélectionnez
plop.refreshZone(x,y);


Affichera la Map, sous la forme de caractères contenus dans le tableau de données :

 
Sélectionnez
plop.pushMapChar()


Concernant la personnalisation (INPUT, DIV, HTML, CSS... )
Avec la SantaLib il est possible aussi de générer des "input" personnalisés en se servant de :

 
Sélectionnez
plop.CreateForm(type,style,id)


Je m'explique, il suffit de renseigner l'id que l'on souhaite donner à l'élément que nous allons créer, puis le style CSS, et le type d'input que l'on souhaite.
Par exemple, je souhaite créer un champ texte, qui s'appelle 'toto' et dans lequel on peut écrire en rouge :

 
Sélectionnez
plop.CreateForm('text','color:red','toto')


On peut, par le biais des méthodes décrites ci-dessous, utiliser ces éléments. Image non disponible
Pour récupérer la valeur de notre champ 'toto' nouvellement créé on utilisera :

 
Sélectionnez
plop.GetValue(id); //Qui permet de renvoyer la valeur de l'élément grâce à son id.
plop.GetValue('toto'); //Nous renverra donc le contenu de toto.


On peut aussi modifier la valeur de notre petit input :

 
Sélectionnez
plop.ChangeValue(id,value);


On lui indique ainsi l'id de l'élément, et la valeur à lui affecter. Admettons que je souhaite écrire 'tadam !' dans mon champ text, je m'y prendrais ainsi :

 
Sélectionnez
plop.ChangeValue('toto','tadam !');


Et pour plus de personnalisation, SantaLib permet de toucher directement au HTML de la page ! Comme pour la création d'input nous avons un :

 
Sélectionnez
plop.GetHTML(id)

Qui permet de retourner le contenu HTML d'une div.
Et :

 
Sélectionnez
plop.ChangeValue(id, HTML)

qui permettra de remplacer, écrire ou bien modifier le contenu HTML de la div indiquée !

IX. Les cookies

On initialise un cookie de cette manière, rien de plus simple. Un nom, une valeur et le tour est joué :

 
Sélectionnez
plop.SetCookie(name,value)


Pour récupérer son contenu, rien de plus simple :

 
Sélectionnez
plop.ReadCookie(name)

X. Date et heure

Rien de plus simple pour récupérer la date et l'heure. Commençons par récupérer l'heure :

 
Sélectionnez
plop.GetTime()


Puis la date :

 
Sélectionnez
plop.GetDate()


Alors ? Image non disponible
Pas si dur. Image non disponible

XI. Animation

Il est possible que, pendant vos jeux, vous souhaitiez faire un affichage progressif d'images un peu comme une vidéo qui raconterait l'histoire du jeu.

SantaLib s'y soumet par le biais d'une méthode :

 
Sélectionnez
plop.DrawPicture(picture, timing)


En clair, il suffit que vous renseigniez le lien de l'image (picture) et le temps d'affichage (timing) de celle-ci. Un petit exemple :

 
Sélectionnez
plop.DrawPicture('http://www.developpez.net/template/images/logo.png', 2)

affichera le logo du Developpez pendant deux secondes sur votre écran.

XII. Exemple

 
Sélectionnez
<div id="init_SantaLib"></div>
<script src="santalibObjs.js"></script>
<script>
var plop = new SantaLib();
//Initialisation et paramétrage.
plop.setHeight(10);
plop.setWidth(30);
plop.loading();
plop.setBorder();
plop.useKeyBoard();


//Ajout de personnages.
plop.pushEl(5,15,'5');
plop.pushEl(9,2,'666');
plop.pushEl(5,2,'666');
plop.pushEl(1,2,'666');
plop.pushEl(1,15,'666');
plop.pushEl(9,15,'666');
plop.pushEl(9,29,'666');
plop.pushEl(5,29,'666');
plop.pushEl(1,29,'666');

//Affichage complet de la Map.
plop.pushMap();

//Paramétrage des personnages.
plop.addBadBoy('5','666');
plop.isBot('666');
plop.managePerso('5');

</script>


Nous allons étudier pas à pas la création de cet exemple. Nous commençons par initialiser notre bibliothèque :

 
Sélectionnez
<div id="init_SantaLib"></div>
<script src="santalibObjs.js"></script>


Puis nous allons travailler notre jeu dans une autre balise script :

 
Sélectionnez
<script> /* Notre jeu sera développé ici. */</script>


Commençons par initialiser notre bibliothèque dans un objet :

 
Sélectionnez
var plop = new SantaLib();


L'objet Demo nous permettra maintenant de jouer avec les attributs et les méthodes de notre bibliothèque. Nous allons donc maintenant paramétrer notre Map afin de pouvoir, par la suite, avoir un visuel :

 
Sélectionnez
plop.setHeight(10);

Notre Map fera donc 10 'block' de hauteur.

 
Sélectionnez
plop.setWidth(30);

Et 30 'block' de largeur.

 
Sélectionnez
plop.loading();

Nous lui indiquons de générer l'espace et les éléments nécessaires à notre jeu.

 
Sélectionnez
plop.setBorder();

Pour empêcher nos personnages de sortir de la Map, nous l'emprisonnons d'une bordure.

 
Sélectionnez
plop.useKeyBoard();

Et afin de pouvoir récupérer les touches frappées, nous initialisons le clavier.

Voilà, notre Map est donc prête à être utilisée, mais nous n'avons toujours pas de personnage. Nous allons donc en rajouter :

 
Sélectionnez
plop.pushEl(5,15,'5'); 
plop.pushEl(9,2,'666'); 
plop.pushEl(5,2,'666');
plop.pushEl(1,2,'666');
plop.pushEl(1,15,'666'); 
plop.pushEl(9,15,'666'); 
plop.pushEl(9,29,'666'); 
plop.pushEl(5,29,'666'); 
plop.pushEl(1,29,'666');

Nous plaçons donc à différents endroits de la Map, deux catégories d'éléments : 666 et 5.

Le but de notre jeu est de faire survivre notre personnage 5 parmi les « méchants » qui seront les 666. Nous définissons à présent 666 comme ennemi de 5 :

 
Sélectionnez
plop.addBadBoy('5','666');


Une petite variante dans l'objectif du jeu serait que 5 ait pour but de manger les 666. Pour cela, rien de plus simple, on remplacerait :

 
Sélectionnez
plop.addBadBoy('5','666');

par :

 
Sélectionnez
plop.addBadBoy('666','5');

Et pour corser cette variante, on soumettrait 5 à la pesanteur :

 
Sélectionnez
plop.initializeApesanteur('5');

Ce qui lui rendrait la tâche compliquée pour choper les 666. Image non disponible Bref, une variante comme une autre. Image non disponible

Bon, maintenant c'est bien, nous avons établi un lien entre 5 et 666, mais ni l'un ni l'autre ne bougent. Nous allons donner un peu d'automatisme à nos méchants '666' (les déclarer comme bots, ils bougeront tout seul après ça), comme ça pas besoin de s'en occuper par la suite :

 
Sélectionnez
plop.isBot('666');


Puis, de façon à nous donner une interaction avec notre personnage '5', nous allons lui demander d'obéir aux touches directionnelles du clavier. Il sera donc manœuvrable :

 
Sélectionnez
plop.managePerso('5');


Voili voilou, vous venez donc de créer votre premier petit jeu en SantaLib Objs.

Que vous pourrez retrouver ici : http://santalib.fr/Object_santaLib.php.
La bibliothèque se télécharge depuis : http://santalib.fr/.

Voilà, j'espère que l'utilisation de la SantaLib vous plaira aussi. Ne pas confondre la SantaLib Objs et la SantaLib Originale. L'une est une bibliothèque, l'autre permet de concevoir à partir du déjà fait. Image non disponible

XIII. Remerciements

Developpez tient à remercier chaleureusement Mario Gosparini pour l'avoir autorisé à publier son article.
Developpez remercie également ClaudeLELOUP pour sa relecture orthographique attentive.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2012 Mario Gosparini. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.