这个数据组是由所有象素点组成的，每个象素点都表现为4个实体，红、绿、蓝和alpha通道层，色彩范围是0-255。因此一张宽和高都是512的图像形成的数组就包含1048576个元素，也就是512×512等于262144个象素点再乘上4（每个象素点是4个实体）。

使用这个数据组，这里有一个例子：图像的特殊红色成分增加而红色和蓝色成分减少，因此形成我们的2级怪物——地狱恶魔猫。

function prerender() {
reverseCanvas = document.createElement(‘canvas’);
reverseCanvas.width = img.width;
reverseCanvas.height = img.height;
var rctx = reverseCanvas.getContext(“2d”);
rctx.save();
rctx.translate(img.width, 0);
rctx.scale(-1, 1);
rctx.drawImage(img, 0, 0);
// modify the colors var imageData = rctx.getImageData(0, 0, reverseCanvas.width, reverseCanvas.height);
for (var i=0, il = imageData.data.length;
i < il; i+=4) {
if (imageData.data[i] != 0) imageData.data[i] = imageData.data[i] + 100;
// red
if (imageData.data[i+1] != 0) imageData.data[i+1] = imageData.data[i+1] – 50;
// green
if (imageData.data[i+1] != 0) imageData.data[i+2] = imageData.data[i+2] – 50;
// blue
}
rctx.putImageData(imageData, 0, 0);
rctx.restore();
}

这个for循环有4次，每一次都修改这3个主色。第4个通道，alpha保持不变，但如果你希望可以使用它变化某些象素的透明度。（GDchina注：在下面的例子中，我们给图像数据使用一个dataURL，主要是为了避免直接修改象素产生交叉域名问题。你不必在自己的服务器上做这个。）

因为使用象素组修改图象需要重制所有元素，在这个地狱猫的例子中，超过100万次，你应该尽量提前计算，尽量不要制作变量/对象和跳过象素。

结论

将画布绘制、缩放、旋转、转换和象素修改相结合，再加上预渲染，制作出来的游戏的动态效果非常棒。

我最近在一款2D四方向横版太空射击的游戏《Playcraft》的DEMO中也使用了这些技术。美工只给每种飞船（玩家和敌人）制作一个帧，之后我再根据我们希望飞船转向的角度、流畅程度来旋转和预渲染飞船。我可以在运行时根据飞船类型修改角度——殖家飞船的默认转向角度是36度（非常流畅），而敌人和对手飞船的是16度（比较卡）。我还添加了一个选项，允许电脑性能比较好的玩家把角度提高到72（最流畅）。另外，飞船的徽章和标志会根据你所在的队伍动态地重新着色。这再一次节省了渲染和资源，而且允许飞船颜色根据玩家选择的队伍动态地调整。

未经允许不得转载：ChinaApp手游 » 游戏开发教程：HTML5 Canvas制作子画面动画

分享到：

相关推荐