[HTML 5] Quintus : un moteur de jeu en HTML5

FirePrawn · 17/12/2012, 10h43

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 :

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
<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 :

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
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 :

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
// 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

Muchos · 17/12/2012, 23h13

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

acesyde · 18/12/2012, 13h11

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

Golgotha · 18/12/2012, 13h18

je vais tester ça

17/12/2012, 23h13	#2
Muchos Membre Expert Jonathan Renoult Étudiant Inscription : décembre 2011 Messages : 888 Détails du profil Informations personnelles : Nom : Jonathan Renoult Âge : 27 Localisation : France, Calvados (Basse Normandie) Informations professionnelles : Activité : Étudiant Secteur : Arts - Culture Informations forums : Inscription : décembre 2011 Messages : 888 Points : 1 879 Points : 1 879	C'est excellent! Il y a une démo sur le site du projet \o/ __________________ Pour être aidé, donnez vos codes source svp ! ( balise # ) - - - Debug the Web together!
	00

18/12/2012, 13h18	#4
Golgotha Modérateur cédric Artiste développeur Inscription : août 2007 Messages : 1 047 Détails du profil Informations personnelles : Nom : cédric Localisation : France Informations professionnelles : Activité : Artiste développeur Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : août 2007 Messages : 1 047 Points : 2 084 Points : 2 084	je vais tester ça __________________ modérateur webmasters - développements web & php faq jQuery - règles du forum - faqs web mon espace perso Suivez mon blog
	00

18/12/2012, 13h11	#3
acesyde Membre chevronné Pierre-Emmanuel Mercier Ingénieur développement logiciels Inscription : octobre 2006 Messages : 70 Détails du profil Informations personnelles : Nom : Pierre-Emmanuel Mercier Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Ingénieur développement logiciels Informations forums : Inscription : octobre 2006 Messages : 70 Points : 671 Points : 671	Je viens de tester, la documentation c'est pas encore ça
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email