Question

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

Answer 1

如果你正在谈论创建一个spritesheet，那么不要费心重新发明那个轮子......有几十个sprite packers在线。这是Google上的第一个：https://www.codeandweb.com/texturepacker

如果你正在谈论从精灵表中读取精灵，那么你可以：

使用var mySpritesheet=new Image(); ...
使用context.drawImage的剪辑版本从mySpritesheet剪辑所需的精灵，并根据需要在游戏画布上绘制。

例如：

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>

但要保持简单......

在我的示例中，您并不真正需要内存中的画布。我使用画布以防你需要重新着色精灵或注释精灵。

将spritesheet加载到图像对象中然后使用drawImage的剪切形式剪切spritesheet图像中的每个sprite并将其绘制到游戏画布上会更加简单。

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

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纹理打包器？

1 个答案: