js游戏引擎探索指南之Quintus

Quintus是一款易于上手、轻量级、开源的HTML5 JavaScript游戏引擎，包含一个模块化的引擎可轻松开发游戏，并在同一个页面上运行多个实例，支持桌面及移动平台浏览器。Quintus引用面向对象的思想来进行HTML5游戏开发，同时依赖于jQuery来提供事件处理机制和元素选取操作。

官网

一打开官网就有一个demoGame，左边是代码，修改后立即能看效果。下面还有针对这个代码的简单介绍，下面来粗略地说一下

先总体说一下，quintus提供的游戏元素主要有Quintus（引擎）,Stage（舞台）,Scene（场景）,Sprite（精灵）。代码的结构可以这样：加载引擎，创建精灵和场景这些游戏内容，加载资源（资源加载完毕就进入游戏的第一个场景）。

开头的工作：

把库文件导入，本地或cdn获取都行，2000多行的代码。你还可以根据需要导入库模块。

<!-- Pull the engine from the Quintus CDN or load it locally -->
<!-- (use quintus-all.min.js for production) -->
<script src='http://cdn.html5quintus.com/v0.2.0/quintus-all.js'></script>

开始游戏的代码了，这里是引擎的加载。创建引擎的实例，然后加载需要的模块，往html页面中添加canvas元素，添加默认的控制（键盘和按钮），添加触屏。这里还提到一个页面可以创建多个引擎实例，也就是说你一个页面可以运行多个游戏。很酷。

// 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, Touch, UI") // Load any needed modules
.setup()
// Add a canvas element onto the page
.controls()
// Add in default controls (keyboard, buttons)
.touch();
// Add in touch support (for the UI)

quintus混合支持了面向对象，基于事件以及基于组件机制。允许创建一个典型的继承而来的模型同时支持添加可重用的组件。（这是编程模式，面向对象的继承，基于组件各有千秋，quintus让开发者兼得鱼与熊掌）

// You can create a sub-class by extending the Q.Sprite class to create Q.Player（继承引擎的Sprite来创建自定义的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: 410,
// You can also set additional properties that can（在这里设置继承自父类的属性吧）
y: 90
// 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")) {
// Stage the endGame scene above the current stage
Q.stageScene("endGame",1, { label: "You Won!" });
// Remove the player to prevent them from moving
this.destroy();
}
});
}
});
// 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,
// end the game unless the enemy is hit on top
this.on("bump.left,bump.right,bump.bottom",function(collision) {
if(collision.obj.isA("Player")) {
Q.stageScene("endGame",1, { label: "You Died" });
collision.obj.destroy();
}
});
// If the enemy gets hit on the top, destroy it
// and give the user a "hop"
this.on("bump.top",function(collision) {
if(collision.obj.isA("Player")) {
this.destroy();
collision.obj.p.vy = -300;//这里是让玩家向上自动弹跳，马里奥踩乌龟的效果知道吧
}
});
}
});

quintus可以让你轻易创建可重用的场景。通过加载它们到舞台中可以切换场景。在栈结构上来看，舞台在每个场景的顶层。（姑且理解为舞台管理各个场景吧，quintus一个引擎实例默认提供一个舞台实例。有经验的游戏开发者对这方面不难理解，很简单的，在这里还没有说生命周期这些较复杂的东西）

<span style="font-family:Helvetica, Tahoma, Arial, sans-serif;">// 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: 0 }));
// Finally add in the tower goal
stage.insert(new Q.Tower({ x: 180, y: 50 }));
});
// To display a game over / game won popup box,
// create a endGame scene that takes in a `label` option
// to control the displayed message.
Q.scene('endGame',function(stage) {
var container = stage.insert(new Q.UI.Container({
x: Q.width/2, y: Q.height/2, fill: "rgba(0,0,0,0.5)"
}));
var button = container.insert(new Q.UI.Button({ x: 0, y: 0, fill: "#CCCCCC",
label: "Play Again" }))
var label = container.insert(new Q.UI.Text({x:10, y: -10 - button.p.h,
label: stage.options.label }));//stage.options.label是切换该场景时传入的
// When the button is clicked, clear all the stages
// and restart the game.
button.on("click",function() {
Q.clearStages();
Q.stageScene('level1');
});
// Expand the container to visibily fit it's contents（布局的设置，影响面板外围的大小）
container.fit(20);
});</span>

quintus提供了加载资源的简单方式。舞台调用场景以开始游戏的运行。

// Q.load can be called at any time to load additional assets
// assets that are already loaded will be skipped（除了在游戏开始，可以随时调用的Q.load也能加载后期需要的资源，对于加载过的资源会忽///略）
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（compoleSheets是集合了很多图片的，用过texturePacker的自然知道）
Q.compileSheets("sprites.png","sprites.json");
// Finally, call stageScene to run the game
Q.stageScene("level1");
});

最后

以上就是想人陪帽子为你收集整理的js游戏引擎探索指南之Quintus的全部内容，希望文章能够帮你解决js游戏引擎探索指南之Quintus所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。