如何使用Createjs来编写HTML5游戏（二）使用EaselJS处理图片 - 博客频道 - CSDN.NET
失业矿工的博客
我是名矿工，曾经是，后来国有变成私有，领导变成老板，老板掏空企业，企业玩完，矿工失业。
分类：Html5/Createjs
如何使用EaselJS载入图片并进行简单的处理
除了使用EaselJS中的Shape()来创建图形，EaselJS中还提供Bitmap可以很方便的载入图片，同Shape一样只需要创建一个Bitmap实例。
var bg = new createjs.Bitmap(&./background.png&);
stage.addChild(bg);
stage.update();
直接创建并导入到Stage中，随后调用stage.update()，一般情况下仅仅做这些是不能正常显示图片，在图片载入后必须要重绘一下stage才能显示出来。所以使用stage的tick事件来创建的基础框架可以正常显示，因为tick事件中，每隔一点时间自动刷下stage，最基本的框架如下。
function init(){
stage = new createjs.Stage(&game&);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
function update(event){
stage.update();
把创建Bitmap并添加到stage的语句添加到init()中，
function init(){
stage = new createjs.Stage(&game&);
var bg = new createjs.Bitmap(&./background.png&);
stage.addChild(bg);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
function update(event){
stage.update();
刷新页面即可显示出图片，同样可以设置Bitmap的x/y，scaleX/scaleY，alpha等属性，添加shadow等处理，不过对于图片，有几个特别的地方。
1.只选取图片的一部分显示在页面
如果只打算显示一部分，而不是全部整张图片，除了用图片编辑软件来直接切图外，在EaslJS中提供了相关的方法。
当然通过设置width和height是不能实现的，而且如果要显示的是图片中间的某个部分，通过设置长短完全不可能实现。
这时可以使用EaselJS内置的Rectangle对象来创建一个选取框，显示图片的某各部分。首先新建一个Rectangle，rect =new createjs.Rectangle(x,y,w,h);确定要选择的区域，开始点坐标xy，选取的长度w和高度h，最后修改Bitmap的sourceRect赋值为创建好的Rectangle。
var rect = new createjs.Rectangle(100,100,100,100);
bg.sourceRect =
把bg添加到舞台stage中后，就可以看到图片只显示从（100，100）点开始的一个100像素正方形区域。使用Rectangle可以很方便的创建一个拼图游戏，选一张大图片，然后分割成为大小相等的12块图形并记录正确的位置，然后随机打乱顺序，给每块图形添加一个点击事件，点击两块后交换位置，在stage的tick事件处理函数中每隔一段时间检查是否全部12块图片都回到了正确的位置，是则游戏结束。在CreateJS的官方示例中，Demo3就是使用Rectangle来把图片划分为几块的一个列子。
2.给图片添加遮罩Mask
比如给图片加上一个圆形的遮罩，只显示图片与圆遮罩相交的部分。
添加遮罩，首先就是创建一个Shape图形，绘制好图形的大小，并确定遮罩区域在图片上的位置，也就是要显示图片的部分，最后修改图片的mask属性赋值为创建的Shape并把Shape添加到stage；
var shape = new createjs.Shape();
shape.graphics.beginFill(&#000&).drawCircle(0,0,100);
shape.x = 200;
shape.y = 100;
stage.addChild(shape);
这样就只会显示出图片与shape相交的一个圆形区域。并且可以让遮罩在图片上动起来，动态的显示图片的不同部分。让图片动起来是一个简单的动画，虽然在CreateJS中提供的TweenJS来创建补间动画，但是也可以在不使用TweenJS的情况下创建一个简单的动画，即在tick事件的处理函数中，每个一段时间改变Shape的x/y坐标，这样每次刷新stage后Shape自然会出现在新的坐标位置。
var stage,shape,
function init(){
stage = new createjs.Stage(&game&);
bg = new createjs.Bitmap(&./background.png&);
//var rect = new createjs.Rectangle(100,100,100,100);
//bg.sourceRect =
shape = new createjs.Shape();
shape.graphics.beginFill(&#000&).drawCircle(0,0,100);//遮罩图形
shape.x = 200;
shape.y = 100;
bg.mask =//给图片bg添加遮罩
stage.addChild(shape);
stage.addChild(bg);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick',update);
function update(event){//tick函数
shape.x += 5;
if (shape.x & bg.getBounds().width){
shape.x = 0;
stage.update();
这样圆形的Shape遮罩就会在图片上来回移动，也可以给Shape添加一个随鼠标拖动的事件相应函数，让遮罩随着鼠标移动。用这个方法可以创建一个X光的小游戏。首先准备两张图片，一张人体和一张骨骼图，叠放在一起添加到stage，同时给骨骼图添加一个随鼠标移动的Shape遮罩，这样页面上只会有人体图和骨骼图的遮罩部分显示出来，从效果上就像X光一样。
3.给图片添加滤镜和图片的cache方法
同Shape对象一样，也可以通过定义图片的shadow来给图片添加一点立体感，不过除了给图片添加阴影Shadow效果外，EaseLJS提供了更多图像处理的方法——添加滤镜filters，在createjs的api中包含几个XXXXXFilter对象，就是用来处理图片，给图片添加不同的效果。
比如，最简单的模糊图像，使用blur = new createjs.BlurFilter(5,5,1);来创建一个对象，并把这个Filter对象添加到图片的filters列表中img.filters = [blur];这里修改图片的filters属性时必须要使用[],哪怕仅有一个Filter。
var blur = new createjs.BlurFilter(5,5,1);
bg.filters = [blur];
做完这些后发现并不能使图像变模糊，这里还有非常重要的一步，调用图像的cache()方法。因为给图片添加Filter后如果stage立刻刷新，则Filter只能保持一帧的效果，而使用图片的cache()方法后，才可以使得无论舞台怎么刷新，都可以保持住Filter的效果，添加cache还有很多作用，可以提高FPS等，在官方提供的示例中，Demo4 caching就是一个使用cache()的例子，在这里想让Filter显示，只需要再加一句：
bg.cache(0,0,bg.image.width,bg.image.height);
在官方的API中可以有所有Filter对象的详细用法和介绍，而且在官方提供的实例中，Demo5和Demo7都是关于Filter的例子，当然你也不用担心因为cache()缘故无法修改图片，只需要再调用一次图片的uncache()方法就可以了。
一个简单的拼图小游戏，只要找一张大小合适的图片即可：
const PUZZLE_COLUMNS =5;
const PUZZLE_ROWS =3;
const PUZZLE_SIZE = 200;
var pieces = [];
var selectedPieces = [];
function init(){
stage = new createjs.Stage(document.getElementById('game'));
buildPuzzle();//导入图片并分割为大小相等的15小块
startGame();
setTimeout(shufflePuzzle, 2000);//设定2秒后打乱图片的顺序
function buildPuzzle() {
var l = PUZZLE_COLUMNS * PUZZLE_ROWS;
var col = 0;
var row = 0;
for (i = 0; i & i++) {
piece = new createjs.Bitmap('mam.png');
piece.sourceRect = new createjs.Rectangle(col * PUZZLE_SIZE, row * PUZZLE_SIZE, PUZZLE_SIZE, PUZZLE_SIZE);
piece.homePoint = {x: col * PUZZLE_SIZE, y: row * PUZZLE_SIZE};
piece.x = piece.homePoint.x;
piece.y = piece.homePoint.y;
stage.addChild(piece);
pieces[i] =
if (col === PUZZLE_COLUMNS) {
}//创建小图片块
function shufflePuzzle(){
var i, piece, randomI
var col = 0;
var row = 0;
p = p.concat(pieces);
var l = p.
for(i=0; i&l; i++){
randomIndex = Math.floor(Math.random()* p.length);
piece = p[randomIndex];
p.splice(randomIndex,1);
createjs.Tween.get(piece).to({x:col*PUZZLE_SIZE, y:row*PUZZLE_SIZE}, 200);
piece.addEventListener('click', onPieceClick);
if (col===PUZZLE_COLUMNS){
}//洗牌，打乱顺序
function onPieceClick(e){
if (selectedPieces===2)
var piece = e.
var matrix = new createjs.ColorMatrix().adjustColor(15,10,100,180);
piece.filters=[new createjs.ColorMatrixFilter(matrix)];
piece.cache(0,0,PUZZLE_SIZE,PUZZLE_SIZE);
selectedPieces.push(piece);
if(selectedPieces.length ===2){
evalSelectedPieces();
}//点击的图片添加到一个数组中，并且给被点击的图片添加一个滤镜效果特别显示
function evalSelectedPieces(){
var piece1 = selectedPieces[0];
var piece2 = selectedPieces[1];
createjs.Tween.get(piece1).wait(300).to({x:piece2.x, y:piece2.y},200);
createjs.Tween.get(piece2).wait(300).to({x:piece1.x, y:piece1.y},200).call(function(){
setTimeout(evalPuzzle, 200);
}//交换图片的位置，这里使用了TweenJS来创建交换的动画效果
function evalPuzzle(){
selectedPieces[0].uncache();
selectedPieces[1].uncache();
for(i=0; i&pieces. i++){
piece = pieces[i];
if(piece.x != piece.homePoint.x || piece.y != piece.homePoint.y){
setTimeout(function(){
alert('YOU DID IT!');
selectedPieces = [];
}//判断一下是不是全部图片都到了正确位置
function startGame(){
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener('tick', function(){
stage.update();
}//tick函数

排名：千里之外
（1）（8）（2）分享给朋友：把视频贴到Blog或BBS&&通用代码: <input id="link4" type="text" class="form_input form_input_s" value="" />复 制flash地址: 复 制html代码: <input type="text" class="form_input form_input_s" id="link3" value="" />复 制分享视频到站外获取收益&&手机扫码分享视频二维码2小时内有效HTML5视频教程-CreateJS TweenJS-CSSPlugin1下载至电脑扫码用手机看用或微信扫码在手机上继续观看二维码2小时内有效HTML5视频教程-CreateJS TweenJS-CSSPlugin1扫码用手机继续看用或微信扫码在手机上继续观看二维码2小时内有效，扫码后可分享给好友没有优酷APP？立即下载请根据您的设备选择下载版本
药品服务许可证(京)-经营-
节目制作经营许可证京字670号
请使用者仔细阅读优酷、、
Copyright(C)2016 优酷
不良信息举报电话: