Introduction à Slick2D

Qu’est-ce que Slick2D ?

La réponse courte serait : C’est une librairie Java permettant de faire de l’openGL.

Cependant, cette définition est légèrement fausse, il vaudrait mieux parler d’un ensemble d’outils qui permettent d’utiliser les bindings OpenGL fournis par LWJGL afin de développer simplement des jeux ou plus généralement des applications 2D utilisant OpenGL.

En effet, Slick2D, comme son nom l’indique, ne permet pas de faire une application ayant un rendu en 3D, pour cela il vous faudra utiliser directement LWJGL ou une autre librairie.

Pourquoi utiliser cette librairie au lieu d’une autre, pourquoi ne pas utiliser LWJGL directement?

La réponse est simple, cette librairie contient déjà tout un ensemble d’outils qui vont vous permettre de vous lancer plus rapidement dans le développement de la logique de votre application plutôt que de vous faire passer du temps a gérer toute sorte de choses annexes tel que le chargement des images, des polices de caractère, la lecture de son, la gestion des contrôles, etc.

Bien que n’ayant pas été mise a jour depuis quelques temps, cette librairie reste très utilisée. Elle est parfaite pour s’initier au développement de jeux du fait de sa simplicité et peut très bien être utilisée pour des projets de plus grande envergure grâce à sa robustesse.

Comment on s’en sert ?

Création de projet

La première chose à faire est de télécharger la librairie et de l’ajouter à votre projet.

  • Créez un dossier lib/ dans le répertoire de votre projet.
  • Placez-y les fichiers slick.jar, lwjgl.jar et jinput.jar qui se trouvent dans le dossier lib de l’archive que vous avez téléchargée.
  • Dans le dossier lib de votre projet, créez un dossier natives/
  • Placez-y les fichiers *.dll *.so *.dylib et *.jnilib qui se trouvent à la racine de l’archive que vous avez téléchargée.
  • Ajoutez le dossier lib/ au classpath de votre projet.
  • Ajoutez à la JVM l’option “-Djava.library.path=lib/natives” pour le lancement de votre application

Si vous avez des difficultés à ajouter Slick2D à votre projet, des instructions plus détaillées pour Eclipse ou NetBeans sont disponibles.

Rien de plus à faire ici, notre projet est prêt. Passons au code.

Ma première fenêtre

La classe centrale de notre application sera la suivante :

public class MyGame extends BasicGame
{
	private GameContainer gc;

	public Game(){
		super( "GameWindow" );
	}

	@Override
	public void init( GameContainer gc ) throws SlickException{
		this.gc = gc;
	}

	@Override
	public void render( GameContainer gc, Graphics g ) throws SlickException{
	}

	@Override
	public void update( GameContainer gc, int delta ) throws SlickException{
	}
}

Cette classe étends BasicGame et contient les méthodes à overrider pour ajouter la logique de notre jeu :

  • init(…) qui sert charger et initialiser les ressources.
  • render(…) qui sert à dessiner à l’écran.
  • update(…) qui sert à mettre à jour le jeu en fonction des entrées utilisateurs ou autre.

Le GameContainer passé à l’initialisation est gardé de coté pour plus tard. Cet objet contient le contexte dans lequel notre jeu sera exécuté.
La méthode init(…) sera appelée une fois à l’instanciation. Les méthodes render(…) et update(…) seront appelées continuellement, l’une après l’autre, du démarrage à l’arrêt du jeu.

Afin de lancer notre ébauche d’application il nous faut une méthode main que nous allons placer dans une autre classe pour plus de clarté.

public class Main
{
	static private AppGameContainer app;

	public static void main( String[] args ) throws SlickException
	{
		app = new AppGameContainer( new MyGame() );
		app.setDisplayMode( 640, 480, false );
		app.start();
	}
}

Cette classe contient un AppGameContainer, un conteneur qui permet de configurer dans quel contexte va tourner notre jeu et lui dire quand démarrer, s’arrêter, etc.
Cet objet est celui dont on a gardé une référence dans la classe MyGame.
Ce conteneur s’instancie en passant un objet implémentant Game, tel que notre BasicGame, à son constructeur.
Une fois le AppGameContainer instancié, vous pouvez lui spécifier un mode d’affichage à l’aide de la méthode setDisplayMode(…), ici 640*480 sans plein écran.
Le conteneur est paramétré, nous pouvons lui dire de lancer le jeu grâce à un simple appel à start().

Notre application pourrait maintenant être exécutée mais il nous manque un moyen de l’arrêter correctement.
Pour cela nous allons overrider la méthode keyReleased(…) de la classe MyGame

@Override
public void keyReleased(int key, char c) {
	if (Input.KEY_ESCAPE == key) {
		gc.exit();
	}
}

Cette méthode est appelée lors du relâchement d’une touche et l’identification de la touche affectée se fait grâce aux membres statiques de la classe Input.
Il ne nous reste alors qu’à appeler la méthode exit() du GameContainer pour terminer proprement notre application.

Et voila, vous avez créé votre première application utilisant Slick2D. Elle ne fait pas grand chose pour le moment mais nous allons remédier à cela dans un instant.

Afficher quelque chose

Dessiner dans cette nouvelle fenêtre nécessite de savoir à quelles coordonnées correspondent chaque pixel.
Slick2D simplifie ceci puisque les coordonnées de chaque pixel sont sa position par rapport au coin supérieur gauche de la fenêtre, 0;0.
Dans notre exemple le pixel dans le coin inférieur droit est donc aux coordonnées 639;479

Ce système peut être modifié mais nous le laisserons tel quel pour cet exemple.

Voyons quelques exemples simples de de qu’il est possible de faire avec Slick2D.
Pour afficher quelque chose à l’écran il faudra utiliser la méthode render(…) de MyGame.

@Override
public void render( GameContainer gc, Graphics g ) throws SlickException
{
	g.setColor( Color.white );
	g.drawLine( 100, 150, 300, 350);
	g.setColor( new Color( 128, 128, 128 ) );
	g.drawString( "Basic font test", 0, 0);
}

A l’intérieur de cette méthode, l’objet Graphics va nous fournir les méthodes dont nous aurons besoin pour dessiner a l’écran.

  • Couleur

Dans un premier temps nous définissons la couleur à utiliser à l’aide de la méthode setColor(…).
La classe Color contient quelques couleurs prêtes à être utilisées.

Cette couleur sera utilisée jusqu’a ce qu’une autre soit définie. Il n’est donc pas nécessaire d’appeler cette méthode entre l’affichage de plusieurs éléments de la même couleur.

  • Ligne

Ensuite, dessinons une ligne à l’aide de la méthode drawLine(…). Cette méthode prends quatre paramètres : start_x, start_y, end_x, end_y et permet de tracer des lignes entre deux point.

Vous pouvez changer sa taille en appelant la méthode setLineWidth(…) avant de tracer la ligne.

Dessiner une ligne n’est pas vraiment excitant, mais cela nous permet de nous familiariser avec le système de coordonnées et le fonctionnement de l’objet Graphics.
Passons à quelque chose de plus intéressant : écrire du texte.

  • Texte

Nous allons changer de couleur avant de d’écrire à l’écran mais cette fois en passant une nouvelle couleur à la méthode setColor(…)
La méthode à utiliser pour dessiner du texte est drawString(…). Nous lui passons une chaîne de caractères ainsi que les coordonnées x et y auxquelles nous voulons dessiner le texte.

Notez que la position donnée sera le coin supérieur gauche du texte.

Comme vous pouvez le voir, nous n’avons pas spécifié de police à utiliser. Dans ce cas, Slick2D va utiliser une police par défaut. L’utilisation de polices tierces est tout a fait possible mais nous ne l’aborderons pas ici.

Tout cela est intéressant mais il manque encore le plus important…

Les images

Pour pouvoir afficher une image, il va falloir la charger préalablement. Cela va se passer dans la méthode init(…) de MyGame :

private Image image;

@Override
public void init( GameContainer gc ) throws SlickException
{
	this.image = new Image("image.png");
}

Le chargement d’une image est on ne peut plus simple. Tout est géré par la classe Image fournie par Slick2D et l’image a juste à être placée dans le bon dossier, ici à la racine du projet.

L’affichage n’est pas plus compliqué. Toujours dans le même fichier, il suffit d’ajouter la ligne suivante à la méthode render(…) :

g.drawImage( this.image, 50, 100);

L’image sera alors dessinée à la position 50;100 à sa taille réelle. Comme lors de l’affichage d’un texte, les coordonnées correspondent au coin supérieur gauche de l’image.

Cette méthode est très simple a utiliser mais il vous arrivera de vouloir afficher une partie d’une image ou bien dessiner une image à une taille différente de celle du fichier d’origine. Pour cela, il faudra utiliser cette méthode :

drawImage( image, start_x, start_y, end_x, end_y, src_start_x, src_start_y, src_end_x, src_end_y)

Cette méthode demande bien plus de paramètres mais elle aussi est simple à utiliser :

  • image : l’image à afficher
  • start_x, start_y : position a l’écran du coin supérieur gauche de la partie à afficher
  • end_x, end_y : position a l’écran du coin inférieur droit de la partie à afficher
  • src_start_x, src_start_y : position sur l’image du coin supérieur gauche de la partie à afficher
  • src_end_x, src_end_y : position sur l’image du coin inférieur droit de la partie à afficher

La position sur l’image de la partie a afficher est exprimée en pixels, 0;0 étant le coin supérieur gauche de l’image.
Vous pouvez maintenant afficher des images comme bon vous semble.

Graphics contient encore plus de méthodes pour afficher des formes, teinter des images, etc. N’hésitez pas à essayer les méthodes disponibles, vous risquez uniquement de trouver de nouvelles possibilités.

Aller plus loin ?

Au cours de cette petite lecture, vous avez appris à :

  • Créer un projet utilisant Slick2D
  • Créer une fenêtre d’une taille spécifique
  • Vérifier si une touche a été pressée
  • Dessiner des lignes
  • Ecrire du texte
  • Afficher des images ou partie d’images

Comme vous avez pu le voir, l’utilisation de cette librairie n’est pas la chose la plus compliquée du monde. Il est même assez simple, une fois les bases acquises, de se débrouiller uniquement avec la javadoc.

Si vous voulez aller plus loin dans l’utilisation de cette librairie, je vous conseille les liens suivants :
http://slick.ninjacave.com/ : Homepage de la librairie, Javadoc, Wiki avec quelques tutos.
http://www.shionn.org/tutoriels-slick-2d : Bons tutos, couvrant un grand nombre de choses.
http://www.reddit.com/r/Slick2D/ : Subreddit dédié à Slick2D, peu actif mais intéressant.
http://stackoverflow.com/ : Si la solution à un problème existe, elle sera là.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *