如何使用Createjs来编写HTML5游戏（五）PreloadJS和SoundJS

CreateJS最后两个部分，PreloadJS用来加载并统一管理你游戏中用到资源，图片，json文件等等，而SoundJS用来播放声音，两者的用法都非常的简单而且固定。

首先是SoundJS，顾名思义播放声音，使用时只需要先

createjs.Sound.registerSound("assets/sound.mp3", "soundname");

使用时调用：

createjs.Sound.play("soundname");

最后是PreloadJS，使用PreloadJS导入文件首先建立一个LoadQueue，然后即可使用它来载入单个文件，或者载入一个文件列表

var queue = new createjs.LoadQueue(false);//本地开发使用false即可
queue.installPlugin(createjs.Sound);//如果载入声音，必须先注册createjs.Sound
queue.on("complete", handleComplete, this);//载入完成后调用
queue.loadFile({id:"sound", src:"sound.mp3"});//载入单个文件
//载入一个文件列表
queue.loadManifest([
{id: "myImage1", src:"Image1.jpg"}，
{id: "myImage2", src:"Image2.jpg"}
{id: "myImage3", src:"Image3.jpg"}
{id: "myImage4", src:"Image4.jpg"}
]);
function handleComplete() {
createjs.Sound.play("sound");
var image = queue.getResult("myImage1");
var bitmap = new createjs.Bitmap(image);
}

你可以把游戏中用到的所有资源，先编辑到一个manifest列表当中，可以是图片，json，css，js等等，最后使用loadManifest（manifest）导入。

=============================================================================================================================

补充部分：

一.使用Createjs直接操作页面DOM

首先在页面上添加一个div,id设置为test

<div id="test" style="..."></div>

然后添加

var rect = new createjs.DOMElement("test");

即可获取到DOM。

二.hitTest碰撞检测

hitTest用来检测某物体是否与某特点发生碰撞，是则返回结果为true

1.全局点坐标判断，例如当前鼠标的位置坐标是否与stage中的一个图形Shape发生碰撞

var stage, circle, loader;
function init(){
stage = new createjs.Stage(document.getElementById('game'));
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(60);

circle = new createjs.Shape();
circle.graphics.beginFill("red").dc(100,100,50);
stage.addChild(circle);

}

function handleTick(event){
circle.alpha = 0.2;
if (circle.hitTest(stage.mouseX, stage.mouseY)) {//直接使用circle的hitTest碰撞检测方法
circle.alpha = 1; }
stage.update();
}

通过测试可以发现，如果鼠标指针在圆形的区域内，则使圆变为不透明状态。

2.把全局坐标转化为本地坐标

var stage, holder;
function init() {
stage = new createjs.Stage("game");
holder = stage.addChild(new createjs.Container());
holder.x = holder.y = 150;

for (var i=0; i<25; i++) {
var shape = new createjs.Shape();
shape.graphics.beginFill(createjs.Graphics.getHSL(Math.random()*360,100,50)).drawCircle(0,0,30);
shape.x = Math.random()*300-150;
shape.y = Math.random()*300-150;
holder.addChild(shape);
}

createjs.Ticker.on("tick", tick);
}

function tick(event) {
holder.rotation += 3;
var l = holder.getNumChildren();
for (var i=0; i<l; i++) {
var child = holder.getChildAt(i);
child.alpha = 0.1;
var pt = child.globalToLocal(stage.mouseX, stage.mouseY);//先使用元素的globalToLocal做坐标的转换
console.log(pt.x, pt.y);
if (stage.mouseInBounds && child.hitTest(pt.x, pt.y)) { child.alpha = 1; }//碰撞判断，使用转换后的本地坐标
}

stage.update(event);
}

3.LocalTOLocal

如果想判断页面中的两个元素是否碰撞呢？在这里只能判断一个元素中的某点，是否与另外一个元素发生碰撞，首先使用LocalToLocal做坐标转换

首先绘制两个图形元素



现在让蓝色球以黑色方形为轴转动，判断蓝色的小球是否与红色圆心发生碰撞

var stage, arm, target;
function init() {
stage = new createjs.Stage("game");
//红色目标
target = stage.addChild(new createjs.Shape());
target.graphics.beginFill("red").drawCircle(0,0,45)
.beginFill("white").drawCircle(0,0,30)
.beginFill("red").drawCircle(0,0,15);
target.x = 100;
target.y = 180;

arm = stage.addChild(new createjs.Shape());
arm.graphics.beginFill("black").drawRect(-2,-2,100,4)//黑色方形
.beginFill("blue").drawCircle(100,0,8);//蓝色球

arm.x = 180;
arm.y = 100;

createjs.Ticker.on("tick", tick);
}

function tick(event) {
arm.rotation += 5;

target.alpha = 0.2;
var pt = arm.localToLocal(100,0,target);//碰撞检测前，先把arm图形中的某点的坐标跟目标target做一个转化，这里是（100，0），也就是蓝球中心
if (target.hitTest(pt.x, pt.y)) { target.alpha = 1; }//使用转化后的坐标进行检测即可判断两个物体是否相交。

stage.update(event);
}