CutJS : concevez des jeux HTML5 / Canvas pour le Web et les mobiles
La bibliothèque modélise les données comme un arbre DOM

Le , par vermine, Responsable JavaScript & AJAX
CutJS : concevez des jeux HTML5 avec Canvas pour le Web et les mobiles
Cette bibliothèque JavaScript modélise les données comme un arbre DOM


CutJS est une bibliothèque graphiques pour développer des jeux. Elle est légère et rapide. C'est un moteur 2D / HTML5 open source et multi-plateforme qui peut être utilisé pour faire des jeux pour le Web, iOS, Android, Win8, Facebook, Chrome Web Store, etc.

CutJS est une bibliothèque orientée Canvas et inspirée par DOM et jQuery avec un nouveau concept appelé pinning pour la mise en forme.


L'auteur estime que Canvas est le composant graphique du développement de jeux HTML5, mais il a uniquement une API de dessin et aucun modèle de données comme DOM pour composer une application. Vous devez dessinez votre application manuellement et gérer le rafraichissement de l'affichage. De plus, les événements souris ne sont disponibles qu'au niveau du Canvas et ils doivent également être traités manuellement.

C'est pourquoi CutJS fournit un modèle arborescent semblable au DOM. Il vous permet de gérer les affichages et distribue les événements souris aux nœuds ciblées.

Conceptuellement, une application se compose d'une arborescence de nœuds. Chaque nœud est « pinned » (épinglé) et transformé selon son parent. Chacun a zéro, une ou plusieurs propriétés d'image. Le rafraichissement consiste à dessiner l'arbre. Les noeuds se mettent alors à jours suivant leur définition et transmettent les nouvelles valeurs / données aux noeuds enfants.

On crée une application en appelant Cut avec une fonction, et puis les textures (propriétés) peuvent être ajoutées et utilisées par des événements et des animations de type tween :

Code javascript : Sélectionner tout
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// Create new app 
Cut(function(root, container) { 
  // Subscribe to Cut.Mouse 
  Cut.Mouse(root, container); 
  
  // Set view box 
  root.viewbox(500, 300); 
  
  // Create an image node 
  Cut.image('base:box').appendTo(root) 
    // on mouse click on this node 
    .on(Cut.Mouse.CLICK, function(ev, point) { 
      // Tween scale values of this node 
      this.tween().clear().pin({ 
        scaleX: Math.random() + 0.5, 
        scaleY: Math.random() + 0.5 
      }); 
      return true; 
    }); 
}); 
  
// Register an image texture 
Cut.addTexture({ 
  name: 'base', 
  imagePath: 'base.png', 
  cutouts: [ 
    { name: 'box', x: 0, y: 0, width: 30, height: 30 } 
  ] 
});

Il existe plusieurs exemples :






Le site officiel avec les exemples, l'API et les explications.
Les sources sur GitHub.
D'après un article publié sur DailyJS.

Et vous ?

Concevez-vous des applications graphiques ou des petits jeux de ce genre ?

Quels outils utilisez-vous et pourquoi ?


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Zefling Zefling - Membre émérite https://www.developpez.com
le 30/04/2014 à 14:43
Ça a l'air simple comme truc. Il faudrait que je vois si je peux pas porter mon jeu Flash en HTML5 avec ça.
Avatar de Shuty Shuty - Membre éprouvé https://www.developpez.com
le 30/04/2014 à 14:47
Le rendu est vraiment surprenant... Pensez vous que la majeur partie des jeux présent sur les store utilise des lib comme celle-ci ?
Avatar de earhater earhater - Membre confirmé https://www.developpez.com
le 30/04/2014 à 15:46
@shuty:

Pas obligatoirement, ce n'est pas forcément complexe à mettre en oeuvre (une bonne gestion des collisions par partitionnement ou quadtree avec callback). néanmoins, cela accélère dratiquement le temps de développement du moteur de jeu cela dépend des préférences de chacun
Avatar de Zefling Zefling - Membre émérite https://www.developpez.com
le 30/04/2014 à 16:23
Pour moi c'était un des avantage de l'AS3, ça évite de ce prendre la tête avec plein de trucs.
Offres d'emploi IT
Développeur Web FULL-STACK
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
RESPONSABLE WEB ANALYTICS F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)
Développeur WEB PHP F/H
VACALIANS GROUP - Languedoc Roussillon - SETE (34)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique JavaScript : Xavier Lecomte -