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

| Mario Gosparini | vermine |

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.

Commentez

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

- Auteurs : Mario Gosparini, vermine

- Parution : 2 août 2012

- Licence : 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 et 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.

Sommaire

- I. Prérequis

- II. Préliminaire

- III. Initialisation

- IV. Instanciation

- V. Utilisation du clavier

- VI. Actions

- VII. Les propriétés avancées

- VIII. Les méthodes avancées

- IX. Les cookies

- X. Date et heure

- XI. Animation

- XII. Exemple

- XIII. Remerciements

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. Sur ce, bon tutoriel !

II - Préliminaire

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

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

Où 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) :

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 :

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 :

plop.useKeyBoard();

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

plop.getTouche() ;

et passer les touches en non bloquantes :

this.manageBloquant = false ;

VI - Actions

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

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

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é :

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

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

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 :

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 :

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 :

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 :

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

Les tailles de la Map :

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 :

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 :

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

On peut aussi augmenter la pesanteur ou la diminuer :

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 :

plop.refreshZone(x,y);

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

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 :

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 :

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

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

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 :

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 :

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 :

plop.GetHTML(id)

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

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é :

plop.SetCookie(name,value)

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

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 :

plop.GetTime()

Puis la date :

plop.GetDate()

Alors ?
Pas si dur.

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 :

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 :

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

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

XII - Exemple

<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 :

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

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

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

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

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 :

plop.setHeight(10);

Notre Map fera donc 10 'block' de hauteur.

plop.setWidth(30);

Et 30 'block' de largeur.

plop.loading();

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

plop.setBorder();

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

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 :

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 :

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 :

plop.addBadBoy('5','666');

par :

plop.addBadBoy('666','5');

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

plop.initializeApesanteur('5');

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

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 :

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 :

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.

XIII - Remerciements

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