如何使用普通 javascript 的纹理打包器？

Question

我正在制作一个 canvas 游戏，我想使用一个带有 json 文件的 spritesheet。我已经在 pixi.js 应用程序中看到过它，但是我想在普通的 js 应用程序中起诉它。有什么想法吗？

Answer 1

如果您正在谈论创建 spritesheet，那么就不必费心重新发明那个轮子了……网上有许多 sprite 包装器。这是 Google 上的第一个：https://www.codeandweb.com/texturepacker

如果您正在谈论从 spritesheet 读取 sprite，那么您可以：

使用var mySpritesheet=new Image(); ...
使用context.drawImage的裁剪版本从mySpritesheet中裁剪出想要的精灵，并根据需要在游戏canvas上绘制。

例如：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var sCols=5;
var sRows=2;
var sWidth=206/sCols;
var sHeight=111/sRows;

var spritesheet=document.createElement('canvas');
var sctx=spritesheet.getContext('2d');

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/avatars1.jpg";
function start(){
  spritesheet.width=img.width;
  spritesheet.height=img.height;
  sctx.drawImage(img,0,0);

  for(var y=0;y<sRows;y++){
    for(var x=0;x<sCols;x++){
      ctx.drawImage(spritesheet,
                    x*sWidth,y*sHeight,sWidth,sHeight,
                    Math.random()*cw,Math.random()*ch,sWidth,sHeight
                   );
    }}

}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=400 height=400></canvas>

但为了让它更简单...

您并不像我的示例那样真正需要内存中的 canvas。我使用 canvas 以防万一您需要为精灵重新着色或注释精灵。

将 spritesheet 加载到图像对象中，然后使用 drawImage 的裁剪形式从 spritesheet 图像中裁剪每个 sprite 并将其绘制到您的游戏中要简单得多 canvas。

这是另一个使用简单的 spritesheet 图像而不是内存中图像的示例 canvas:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var sCols=5;
var sRows=2;
var sWidth=206/sCols;
var sHeight=111/sRows;

var spritesheet=document.createElement('canvas');
var sctx=spritesheet.getContext('2d');

var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/avatars1.jpg";
function start(){  
  for(var y=0;y<sRows;y++){
    for(var x=0;x<sCols;x++){
      ctx.drawImage(img,
                    x*sWidth,y*sHeight,sWidth,sHeight,
                    Math.random()*cw,Math.random()*ch,sWidth,sHeight
                   );
    }}

}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=500 height=500></canvas>

如何使用普通 javascript 的纹理打包器？

How to use texture packer with plain javascript?

javascript

html5-canvas