Quintus小游戏制作之Beta(一)

        Quintus是专门为制作网页游戏而存在的简易JavaScript库（注意是简易引擎），这里介绍我用Quintus库写的一款小游戏Beta，代码不过300行。

        有关Quintus的介绍不多说，想学习用法的可以到Quintus官方网站，话说当初看到官网的界面是非常的喜欢呢。

        咳咳，那么咱们就入正题了。

        设计游戏的主线思路：引入游戏需要的模块 —> 加载外部文件 —> 添加精灵 —> 添加场景 

一.引入游戏需要的模块

        这里，Beta游戏的设计初衷是让玩家控制一块方块跳跃来越过所有的障碍。Quintus允许我们在初始化引擎的时候添加游戏可能用到的模块，比如精灵Sprite、场景Scene、输入Input、碰撞2D、控件UI、声音Audio、点击Touch、动画Anim等。（代码语言：LiveScript）

# initialize Quintus enginee including most of its modules
	Q = Quintus( {  imagePath: "images/Beta/"
			audioPath: "audio/Beta/"
			dataPath:  "data/Beta/"
			development: true } ).include 'Sprites, Scenes, Input, 2D, UI, Audio, Touch, Anim'
	Q.setup { maximize: true } .controls!.enableSound!.touch!
	Q.input.keyboardControls {
		SPACE: 'up'
	}

  代码的作用是将游戏的模块加载到Quintus的一个实例Q里面来。其中在 Quintus(options)里面通过options来自定义游戏图片、声音和数据的文件地址，默认地址分别是根目录下的"images"/"audio"/"data"，但是考虑到网站里面有不止一个游戏（其实还有Alpha），所以需要修改默认的地址，下一步加载的时候Quintus就会在这些地址下找出相应的文件。

        添加游戏的模块只需要在Quintus类后面调用include方法来包含模块的名字，即可以用字符串类型，不同模块中间用逗号隔开，也可以用数组，这里采用了字符串。

当然，引用了这些模块以后还需要对一些模块进行特殊的初始化，在setup里面我设置了游戏的画布大小为整个浏览器窗口{maximize:true}，然后是输入、声音和点击模块的默认初始化。可以看到这些函数的调用是允许串联的。

        最后，我希望利用空格键跳跃，修改Q.input类下的keyboardControls集合，将SPACE键码绑定给Quintus默认的跳跃键值'up'，那么每当空格键被按下时Q.inputs['up'] == true。

二、加载外部文件

        游戏很多时候需要加载外部的图片、声音和数据文件，虽然这些文件在开始写游戏的时候可能并未完全决定好，但是我习惯在代码的开始写好格式，方便以后修改。

# load pictures, sounds and jsons the game needs
	pictures = ['background.png']
	sounds = ['jump.mp3', 'die.mp3', 'win.mp3']
	jsons = ['level.json']
	Q.load pictures ++ sounds ++ jsons, (!-> loadReady!), { progressCallback: (loaded, total)!->progress(loaded, total) }

        Q.load( source, readyCallback, options ) 函数负责将所有source文件加载到游戏中来，这里我使用数组为了方便日后添加和删除文件。Q.load第二个参数readyCallback接收一个函数，它会在所有source加载完成后被调用。Q.load第三个参数options为一个集合，其中可以覆盖progressCallback函数，自定义一个加载动画，这个函数会有两个回调参数loaded和total，分别表示已经加载了的文件数量和总共需要加载的文件数量。progressCallback函数会在加载过程中被反复调用。

	# display the loading status
	progress = (loaded, total) !->
		$ '.progress' .progress { percent: Math.floor(loaded/total*100) + "%" }
		$ '.label' .html Math.floor(loaded/total*100) + "%"

        这里使用了semantic的进度条。

        至此，游戏的大局已经布置好了，等等，那个loadReady函数是什么，哈哈，这个等写完场景Scene之后再来说。现在可以着手给游戏添加精灵和场景了，顺带一提，上面的代码其实在以后写其他Quintus游戏时都可以直接粘贴复用，我就是这么做的= =。 这期完整的代码如下：

function Beta
	# initialize Quintus enginee including most of its modules
	Q = Quintus(
			imagePath: "images/Beta/"
			audioPath: "audio/Beta/"
			dataPath:  "data/Beta/"
			development: true ).include 'Sprites, Scenes, Input, 2D, UI, Audio, Touch, Anim'
	Q.setup { maximize: true } .controls!.enableSound!.touch(Q.SPRITE_ALL)
	Q.input.keyboardControls {
		SPACE: 'up'
	}

	# load pictures, sounds and jsons the game needs
	pictures = ['background.png']
	sounds = ['jump.mp3', 'die.mp3', 'win.mp3']
	jsons = ['level.json']
	Q.load pictures ++ sounds ++ jsons, (!-> loadReady!), { progressCallback: (loaded, total)!->progress(loaded, total) }

	loadReady = !->
		$ '#loading' .hide!
		Q.stageScene 'background', 0
		Q.stageScene 'UI', 2
		loadNextLevel!

	# display the loading status
	progress = (loaded, total) !->
		$ '.progress' .progress { percent: Math.floor(loaded/total*100) + "%" }
		$ '.label' .html Math.floor(loaded/total*100) + "%"

        提示： load加载的文件大小尽量控制在1MB以下，不然加载会占用较多时间。