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

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

CutJS : concevez des jeux HTML5 avec Canvas pour le Web et les mobiles


Sujet :

JavaScript

  1. #1
    Responsable Jeux-Concours

    Avatar de vermine
    Profil pro
    Inscrit en
    mars 2008
    Messages
    6 485
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : Belgique

    Informations forums :
    Inscription : mars 2008
    Messages : 6 485
    Points : 77 513
    Points
    77 513
    Par défaut CutJS : concevez des jeux HTML5 avec Canvas pour le Web et les mobiles
    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 - Visualiser dans une fenêtre à part
    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 :



    [center]


    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 ?

  2. #2
    Expert confirmé Avatar de Zefling
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2007
    Messages
    1 121
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : avril 2007
    Messages : 1 121
    Points : 4 346
    Points
    4 346
    Par défaut
    Ça a l'air simple comme truc. Il faudrait que je vois si je peux pas porter mon jeu Flash en HTML5 avec ça.

  3. #3
    Membre éprouvé Avatar de Shuty
    Homme Profil pro
    Ingénieur en développement
    Inscrit en
    octobre 2012
    Messages
    630
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Ingénieur en développement
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : octobre 2012
    Messages : 630
    Points : 1 172
    Points
    1 172
    Par défaut
    Le rendu est vraiment surprenant... Pensez vous que la majeur partie des jeux présent sur les store utilise des lib comme celle-ci ?
    Agence web Dim'Solution, créateur de solutions numériques
    Sites internet, ecommerce, logiciels, applications mobiles, référencement (SEO), plugin Prestashop, Magento, WordPress, Joomla!...

    Cours de trading gratuit | Envoyer des sms gratuitement | Envoyer des fax gratuitement | Plateforme de Fax à l'international

  4. #4
    Membre éprouvé
    Homme Profil pro
    Consultant en technologies
    Inscrit en
    juin 2013
    Messages
    262
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Consultant en technologies
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : juin 2013
    Messages : 262
    Points : 915
    Points
    915
    Par défaut
    @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

  5. #5
    Expert confirmé Avatar de Zefling
    Homme Profil pro
    Développeur Web
    Inscrit en
    avril 2007
    Messages
    1 121
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : avril 2007
    Messages : 1 121
    Points : 4 346
    Points
    4 346
    Par défaut
    Pour moi c'était un des avantage de l'AS3, ça évite de ce prendre la tête avec plein de trucs.

Discussions similaires

  1. Lecture/écriture des fichiers typés avec Delphi pour .NET
    Par Nono40 dans le forum Codes sources à télécharger
    Réponses: 0
    Dernier message: 09/02/2013, 13h20
  2. Développement de jeux HTML5 avec Construct2 de Scirra
    Par zzulian dans le forum Jeux web
    Réponses: 0
    Dernier message: 10/03/2011, 15h10
  3. Peut on développer des jeux ps3 avec DirectX ?
    Par Valter dans le forum Développement 2D, 3D et Jeux
    Réponses: 7
    Dernier message: 09/06/2008, 18h27
  4. Réponses: 1
    Dernier message: 31/01/2007, 12h59

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo