Soutenez-nous
Publicité
+ Répondre à la discussion Actualité déjà publiée
Affichage des résultats 1 à 4 sur 4
  1. #1
    Rédacteur/Modérateur

    Avatar de FirePrawn
    Homme Profil pro Sébastien Germez
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 100
    Détails du profil
    Informations personnelles :
    Nom : Homme Sébastien Germez
    Âge : 26
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 100
    Points : 21 904
    Points
    21 904

    Par défaut Quintus : un moteur de jeu en HTML5

    Un jeu de plateforme en quelques lignes de code
    C'est possible grace à ce moteur HTML5

    Vous rêviez de développer des jeux vidéos ? Vous pouvez réaliser ce rêve en seulement 60 lignes de code grâce à ce nouveau moteur de jeu HTML5 !

    Quintus est un moteur de jeu HTML5 amusant à utiliser et facile à prendre en main.
    Il vous permettra de développer des jeux de plateformes pour mobiles, bureau et bien plus encore.

    Pour ce faire, il vous suffit de créer une page HTML dans laquelle vous appelez la bibliothèque Quintus (fichier JavaScript).

    Code :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <html>
      <head>
        <!-- Pull the engine from the Quintus CDN or load it locally -->
        <script src='http://cdn.html5quintus.com/v0.0.1/quintus-all.min.js'></script>
      </head>
       <body>
         <script>
     
          // Now set up your game (most games will load a separate .js file)
          var Q = Quintus()                          // Create a new engine instance
                  .include("Sprites, Scenes, Input, 2D") // Load any needed modules
                  .controls()                        // Add in default controls (keyboard, touch)
                  .setup();                          // Add a canvas element onto the page
     
          /*
            ... Actual game code goes here ... 
          */
       </script>
       </body>
    </html>
    Il vous suffit ensuite de coder votre jeu en JavaScript.
    Vous créer des sprites pour gérer les événements.

    Code javascript :
    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
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    // You can create a sub-class by extending the Q.Sprite class to create Q.Player
    Q.Sprite.extend("Player",{
     
      // the init constructor is called on creation
      init: function(p) {
     
        // You can call the parent's constructor with this._super(..)
        this._super(p, {
          sheet: "player",  // Setting a sprite sheet sets sprite width and height
          x: 390,           // You can also set additional properties that can
          y: 40,            // be overridden on object creation
        });
     
        // Add in pre-made components to get up and running quickly
        this.add('2d, platformerControls');
     
        // Write event handlers to respond hook into behaviors.
        // hit.sprite is called everytime the player collides with a sprite
        this.on("hit.sprite",function(collision) {
     
          // Check the collision, if it's the Tower, you win!
          if(collision.obj.isA("Tower")) {
            alert("You Win!");
            Q.stageScene("level1");
          }
        });
      }
    });
     
    // Sprites can be simple, the Tower sprite just sets a custom sprite sheet
    Q.Sprite.extend("Tower", {
      init: function(p) {
        this._super(p, { sheet: 'tower' });
      }
    });
     
    // Create the Enemy class to add in some baddies
    Q.Sprite.extend("Enemy",{
      init: function(p) {
        this._super(p, { sheet: 'enemy', vx: 100 });
     
        // Enemies use the Bounce AI to change direction 
        // whenver they run into something.
        this.add('2d, aiBounce');
     
        // Listen for a sprite collision, if it's the player,
        // restart the level
        this.on("hit.sprite",function(collision) {
          if(collision.obj.isA("Player")) { 
            Q.stageScene("level1"); 
          }
        });
      }
    });

    Définir la scène de votre jeu.

    Code javascript :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    // Create a new scene called level 1
    Q.scene("level1",function(stage) {
     
      // Add in a tile layer, and make it the collision layer
      stage.collisionLayer(new Q.TileLayer({
                                 dataAsset: 'level.json',
                                 sheet:     'tiles' }));
     
      // Create the player and add him to the stage
      var player = stage.insert(new Q.Player());
     
      // Give the stage a moveable viewport and tell it
      // to follow the player.
      stage.add("viewport").follow(player);
     
      // Add in a couple of enemies
      stage.insert(new Q.Enemy({ x: 700, y: 0 }));
      stage.insert(new Q.Enemy({ x: 800, y: 00 }));
     
      // Finally add in the tower goal
      stage.insert(new Q.Tower({ x: 180, y: 35 }));
    });

    Et bien plus encore

    Il ne reste plus qu'à charger et lancer le jeu !

    Code javascript :
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    // Q.load can be called at any time to load additional assets
    // assets that are already loaded will be skipped
    Q.load("sprites.png, sprites.json, level.json, tiles.png",
      // The callback will be triggered when everything is loaded
      function() {
        // Sprites sheets can be created manually
        Q.sheet("tiles","tiles.png", { tilew: 32, tileh: 32 });
     
        // Or from a .json asset that defines sprite locations
        Q.compileSheets("sprites.png","sprites.json");
     
        // Finally, call stageScene to run the game
        Q.stageScene("level1");
      });

    Télécharger Quintus.

    Source : html5quintus.com

    Et vous ?

    Que pensez-vous de ce moteur de jeu ?
    Vous souhaitez participer à la rubrique (X)HTML/CSS, contactez-moi !
    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Expert Confirmé Avatar de Muchos
    Homme Profil pro Jonathan Renoult
    Étudiant
    Inscrit en
    décembre 2011
    Messages
    1 356
    Détails du profil
    Informations personnelles :
    Nom : Homme Jonathan Renoult
    Âge : 28
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 356
    Points : 2 923
    Points
    2 923

    Par défaut

    C'est excellent!
    Il y a une démo sur le site du projet \o/

    Pensons aux balises [CODE][/CODE] — Team #MrGreen
    ---
    Debug the Web together!

  3. #3
    Membre chevronné

    Homme Profil pro Pierre-Emmanuel Mercier
    Ingénieur développement logiciels
    Inscrit en
    octobre 2006
    Messages
    70
    Détails du profil
    Informations personnelles :
    Nom : Homme Pierre-Emmanuel Mercier
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Ingénieur développement logiciels

    Informations forums :
    Inscription : octobre 2006
    Messages : 70
    Points : 609
    Points
    609

    Par défaut

    Je viens de tester, la documentation c'est pas encore ça

  4. #4
    Modérateur
    Avatar de Golgotha
    Homme Profil pro cédric
    Full-stack Web Developer
    Inscrit en
    août 2007
    Messages
    1 175
    Détails du profil
    Informations personnelles :
    Nom : Homme cédric
    Localisation : France

    Informations professionnelles :
    Activité : Full-stack Web Developer
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : août 2007
    Messages : 1 175
    Points : 2 336
    Points
    2 336

    Par défaut

    je vais tester ça
    modérateur webmasters - développements web & php
    faq jQuery - règles du forum - faqs web


    mon site web : exile-reborn : un mmorpg gratuit en ligne.

Liens sociaux

Règles de messages

  • Vous ne pouvez pas créer de nouvelles discussions
  • Vous ne pouvez pas envoyer des réponses
  • Vous ne pouvez pas envoyer des pièces jointes
  • Vous ne pouvez pas modifier vos messages
  •