0

我想知道是否有办法获取现有图像并“堆叠”它们以在 Javascript 中创建单个资产。

http://imgur.com/a/ajkBh

上面的相册显示了我想做的事情。

基本上，对于我正在制作的游戏，我想通过程序从不同的身体部位中绘制敌人的 NPC 等。每个潜在的身体部位都会附有统计信息和精灵表，所以当角色随机生成时，我想将所有必要的图像堆叠在一起，形成一个我可以使用的资源。

有没有办法做到这一点？

4

2 回答 2

0

Canvas 是一个非常基本的绘图 API，能够绘制一些基本的形状、笔触和填充。除了填充背景颜色和/或清除整个画布之外，仅使用基本画布 API 就无法使用“精灵”或任何完整对象相互叠加来制作场景动画。复制图像是可能的，但是你需要在每一帧中清除它们并替换它们，如果你想让它们动画，这是很多代码开销。

您应该查看http://createjs.com或类似的“屏幕图”类型框架，它位于画布顶部，可让您轻松加载精灵表并移动它们。它为您完成画布的绘制、清除、旋转、动画等（基本上使它有点像 Flash）。

就纯粹在画布上堆叠或绘图而言，是的，您可以使用 context2d.drawImage 方法抓取图像并将其直接复制到画布上，但这可能无法单独达到您想要的效果。

于 2013-11-01T22:22:13.037 回答
0

如果认为主要问题是组织基础艺术作品并完成绘图以使其与另一部分相适应，您可以从现有部分构建动画。

假设：您想要空闲（第 1 行）、步行（第 2 行）、运行（第 3 行），每行都有固定数量的帧，例如 5。

还说你的部分是：腿，身体，手臂，头。

然后你必须自己构建图像，通过堆叠这些图像：

 function buildAnimation(legs, body, arms, head) {
    var resImg = document.createElement('canvas');
    resImg.width = legs.width; resImg.height = legs.height;
    var resCtx = resImg.getContext('2d');
    resCtx.drawImage(legs,0,0);
    resCtx.drawImage(body,0,0);
    resCtx.drawImage(arms,0,0);
    resCtx.drawImage(head,0,0);
    return resImg;
 }

然后您可以使用此图像为您的游戏框架提供信息，该图像将用于动画。

这种方法的缺点是每次都必须在相同的地方绘制所有部分的所有动画。问题：1）例如，对于头部，您可能不想对其进行动画处理。
2）您可能希望不同字符的高度不同。3）这是很多工作！

因此，您可能会决定约定以了解应该在哪里绘制零件，并且在图像中准备的零件更少，但是构建它们的方式更复杂。简短示例：图像部分的文件名以其高度结尾，因此您可以轻松检索它们。(bodyMonster48.png, bodyHead12.png, ...)

Writing everything would be too much work here, but just a short example :

假设我们有 animWidth，animHeight 每个动画的大小，以及 3 个动画中的每个动画的 5 帧。现在我们只有一个头，我们想在任何地方复制：

 function buildAnimation(animWidth, animHeight, legs, body, arms, head) {
    var resImg = document.createElement('canvas');
    resImg.width = legs.width; resImg.height = legs.height;
    var resCtx = resImg.getContext('2d');
    resCtx.drawImage(legs,0,0);
    resCtx.drawImage(body,0,0);
    resCtx.drawImage(arms,0,0);
    // copy the head in all frames of all anims
    for (var animLine=0; animLine<3; animLine++) {  // iterate in idle, walk, run
        for (var animFrame= 0; animFrame<5; animFrame++) { // iterate in images of the animation
            resCtx.drawImage(head, animFrame*animWidth, animLine*animHeight);
        }
    } 
    return resImg;
 }

为了能够构建具有可变高度的任何组合，您必须仔细参数化所有内容，使用文件命名和定位约定，并且您肯定需要一个完整的帮助类，以免迷失在所有组合中。

于 2013-11-02T12:42:02.600 回答