0

我想用 javascript 制作一个类似于 minecraft 的东西，并且我已经有一个纹理图像（一个包含块的所有纹理的图像）。有没有办法在不将其绘制在画布上的情况下获取所述图像的特定像素数据？

我真的不知道如何将文件上传到 stackoverflow 以使图像正常工作，但无论如何我都尝试过。我想我已经使用图像和画布元素完成了它，它的工作时间大约有四分之三：

//size of individual textures
var textureWidth = 16;
var textureHeight = 16;
//get the image
var image = document.getElementById("texturesImage");
console.log(image);

//get the image canvas
//or textures canvas or tcanvas
var tcanvas = document.getElementById("textures");
var tctx = tcanvas.getContext("2d");
tcanvas.width = image.naturalWidth;
tcanvas.height = image.naturalHeight;
var imgWidth = image.naturalWidth;
var imgHeight = image.naturalHeight;
console.log(tcanvas.width);
console.log(tcanvas.height);
tctx.drawImage(image, 0, 0);
//accepts a full integer between 0 and 15
function getTextureData(blockID) {
  if (!Number.isInteger(blockID) || blockID < 0 || blockID > 15) {
    console.log(blockID + " is not a valid ID.");
    return (false);
  }
  //get texture x and y
  var tx = blockID % (imgWidth / textureWidth) * textureWidth;
  var ty = Math.floor(blockID / (imgWidth / textureWidth)) * textureHeight;
  //console.log(tx,ty);
  //return image data
  return (tctx.getImageData(tx, ty, textureWidth, textureHeight));
}


console.log(getTextureData(13));
#textures {
  background-color: orange;
}
Hello world

<canvas id="canvas"></canvas>
<canvas id="textures"></canvas>
<image src="/BlockTextures.png" id="texturesImage"></image>

<!--scripts-->
<script src="engine/1setup.js"></script>
<script src="engine/2getTextures.js"></script>
<script src="script.js"></script>

4

0 回答 0