Graphismes pour le jeu en caml

image en cc-by-sa réalisée par Daniel Cook

, par Pierre

Quelques indications pour trouver des graphismes agréables et libres de droits et pour les intégrer à vos programmes en caml.

Pour améliorer le graphisme de vos programmes vous pouvez utiliser des images trouvées sur internet. Il vous faudra commencer par trouver des images libres de droits, vous donnant la possibilité de les utiliser comme vous l’entendez. N’oubliez pas de citer le nom des auteurs de ces images, au moins dans votre code source.

trouver des images

Parmi les licences libres les plus connues il y a les licences creative commons. Le site http://search.creativecommons.org/?... procure un (meta)moteur de recherche pour trouver des ressources sous licence libre.

L’image en tête de cet article a été trouvée sur le site http://www.lostgarden.com, elle est le fruit du travail de Daniel Cook et il est important que vous le mentionniez en tant qu’auteur si vous utilisez son travail.

Vous pouvez aussi vous tourner vers des sites spécialisés dans les graphismes pour jeux libres tel que http://opengameart.org ou bien effectuer des recherches à partir des mots clés open sprite sheets. Si vous voulez vous lancer dans un jeu isométrique (ce sera plus difficile), Kenney fournit un ensemble de tuiles à partir desquelles vous pourrez construire des terrains complexes. Vous pouvez aussi tenter l’expérience d’un jeu hexagonal.

traitement de l’image

Une fois que vous avez une image intéressante, vous pouvez la redimensionner et éventuellement effectuer quelques autres traitements. Les dimensions seront donnés en pixels. Il n’y a pas de question à se poser sur la résolution ou une taille physique de l’image. Les images de votre programme ne sont pas destinées à être imprimées ou affichées sur un écran haute définition.

Pour redimensionner une image vous pouvez utiliser la commande convert de ImageMagick (sous linux / mac os).

  1. $ convert beetleship.png -resize 40x bettleship40.png

Préférez un format final en png avec transparence, pour un beau rendu …et surtout pour pouvoir passer à la dernière étape.

Intégration dans votre programme

Il reste à intégrer l’image à votre programme. Le module Graphics de ocaml ne fournit pas de fonction permettant de lire un fichier image pour l’intégrer à la fenêtre de rendu. Nous devons pour cela utiliser le module lablgtk2, qui ne sera pas forcément installé sur votre ordinateur.

Une fois compilé, le programme suivant lit une image en png fournie en argument et affiche sur sa sortie standard un tableau de tableau de paires, aux dimensions de l’image, où chaque paire représente un pixel par le code de sa couleur (au sens du module Graphics) et sa valeur de transparence.

  1. (*
  2. ocamlfind ocamlc -package lablgtk2 graphics -I . -c imagefromfile.ml
  3. ocamlfind ocamlc graphics.cma -package lablgtk2 -linkpkg -w s imgfromfile.ml -o imgfromfile
  4. #require "graphics";;
  5. #require "lablgtk2";;
  6. *)
  7.  
  8.  
  9. open Gpointer;;
  10.  
  11. let locale = GtkMain.Main.init ();;
  12.  
  13. let image_from_file string name =
  14.   let  pixb = GdkPixbuf.from_file string in
  15.   let gp = GdkPixbuf.get_pixels pixb in
  16.   let nthpixel gp n =
  17.     let x = 4 * n in
  18.     let f = Gpointer.get_byte gp in
  19.     Graphics.rgb (f x) (f (x + 1)) (f (x + 2)), f ( x + 3)
  20.   in
  21.   let w = GdkPixbuf.get_width pixb in
  22.   let h = GdkPixbuf.get_height pixb in
  23.   print_string ("let "^name^" = [|\n");
  24.   for y = 0 to  h - 1 do
  25.     print_string "[|";
  26.     for x = 0 to w - 1 do
  27.       let c, t = nthpixel gp (y * w + x) in
  28.       print_int c;
  29.       print_string ",";
  30.       print_int t;
  31.       print_string ";"
  32.     done;
  33.     print_string "|];\n";
  34.   done;
  35.   print_string "|];;\n\n";
  36. ;;
  37.  
  38. let () = image_from_file Sys.argv.(1) Sys.argv.(2);;

Télécharger

Compiler ce fichier est un peu compliqué, le plus simple étant d’utiliser opam pour gérer les paquets ocaml nécessaires. Mais on y gagne beaucoup en confort, notamment avec utop. Cela fera l’objet d’un autre article.

En attendant vous pouvez utiliser le fichier images.ml joint à ce article, il contient déjà un certain nombre d’images de Daniel Cook qui vous permettront de faire vos essais.

Version pour OCaml d’illustrations créées par Daniel Cook http://www.lostgarden.com

À compiler (comme module) à l’aide de la commande :

  1. $ ocamlc images.ml

puis à charger dans l’interprète

  1. # #load "images.cmo";;

Les images ont alors des noms préfixés par le nom de module (Images) qui a été créé à partir du nom de fichier.

  1. # Images.ship ;;
  2. - : (int * int) array array =
  3. [|[|(0, 0); (0, 0); (0, 0); (0, 0); (0, 0); (0, 0); (0, 0); (0, 0); (0, 0);
  4.     (0, 0); (0, 0); (0, 0); (0, 0); (0, 0); (0, 0); (0, 0); (0, 0); (0, 0);
  5.     (0, 0); (0, 0); (0, 0); (0, 0); (0, ...); ...|];
  6.   ...|]

Télécharger

Un grep sur le fichier source vous renseignera sur les images présentes dans le fichier.

  1. $ grep let images.ml
  2. let ship =

Télécharger

Par contre c’est à vous de trouver comment afficher ces images avec ocaml (et exploiter la transparence) !

Mise à jour

Les tuiles isométriques de Kenney Vleugels sont fournies ici avec un fichier .ml construit sur le même principe que le fichier images.ml. Attention, les noms des fichiers png ont été repris à l’identique pour construire les noms en ml et ils sont parfois un peu inconsistant (inversion des coins).

RoadTiles + roadTiles.ml
RoadTiles de Kenney.nl avec version .ml
Bluehats & UnivMobile , Présentation de la démarche design employée pour UnivMobile faite à la rencontre bluehats du 11 décembre 2019. [pdf, jpg]
Mon université en 2030, Texte d'une intervention que j'ai faite dans le cadre d'une soirée Cap 2030, organisée par le EdFab à Cap Digital le 27 février (...)
Revenu et logement, Je livre ici quelques éléments de comparaison concernant mon niveau de vie, pour couper court à quelques idées reçues, et un condensé de nombreuses (...)
Revenu et travail d’un enseignant-chercheur, Cet article complète l'article Revenu et logement, en détaillant un peu le budget de mon ménage, mon parcours d'enseignant-chercheur en terme de (...)
Cybersyn (el systemo synco), Au café, mardi 5 avril 2011, j'ai bien vu que, mis à part Antoine Allombert, personne ne connaissait l'histoire de l'extraordinaire projet chilien (...) [jpg, jpg, png]