Quintus
Un moteur de jeu en HTML5

Les rubriques (actu, forums, tutos) de Développez
Tags
Réseaux sociaux


 Discussion forum

Le , par FirePrawn, Expert Confirmé Sénior
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 avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :


 Poster une réponse

Avatar de Muchos Muchos
http://www.developpez.com
Expert Confirmé
le 17/12/2012 23:13
C'est excellent!
Il y a une démo sur le site du projet \o/
Avatar de acesyde acesyde
http://www.developpez.com
Membre chevronné
le 18/12/2012 13:11
Je viens de tester, la documentation c'est pas encore ça
Avatar de Golgotha Golgotha
http://www.developpez.com
Modérateur
le 18/12/2012 13:18
je vais tester ça
Offres d'emploi IT
Consultant stagiaire CRM H/F
CDI
Avanade - Ile de France - Châtillon (92320)
Parue le 08/10/2014
Développement web
Stage
Adjustem - Picardie - Amiens (80000)
Parue le 20/10/2014
Urgent Aide comptable copropriété (H/F)
CDI
Grey Consulting - Ile de France - Paris - 7ème arrondissement
Parue le 16/10/2014

Voir plus d'offres Voir la carte des offres IT
 
 
 
 
Partenaires

PlanetHoster
Ikoula