Question

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

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

基本上，对于我正在制作的游戏，我想从程序上生成敌人的NPC等，从不同身体部位的游泳池中抽取。每个潜在的身体部位都会有统计数据和附加的spritesheet，所以当角色随机生成时，我想将所有必要的图像叠加到一个我可以使用的资产中。

有没有办法做到这一点？

Answer 1

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

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

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

Answer 2

如果认为主要问题是组织基础艺术作品并完成绘图以适应彼此的效果，则可以使用现有部件构建动画。

让我们说：你想要一个空闲（第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;
 }

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

此方法的缺点是您必须绘制所有部分的所有动画每次都在同一个地方。问题：例如，对于头部，您可能不想为它设置动画 2）你可能想要不同的角色不同的高度。 3）这是很多工作!!

因此，您可以决定约定，以了解应该绘制零件的位置，并且具有在图像中准备较少的部分，但是构建它们的方式更复杂。简短示例：图像部件的文件名以其高度结束，因此您可以检索它们容易。（bodyMonster48.png，bodyHead12.png，...）

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

说我们有animWidth，animHeight每个动画的大小，每个动画五个帧 3个动画。现在我们只想拥有一个我们想在任何地方复制的头：

 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;
 }

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

Javascript / Canvas - 从已有的图像创建新图像？

2 个答案: