Quiero hacer una especie de Minecraft en javascript, y ya tengo una imagen de texturas (una imagen con todas las texturas del bloque). ¿Hay alguna manera de obtener los datos de píxeles específicos para dicha imagen sin dibujarla en un lienzo?
Realmente no sé cómo cargar archivos en stackoverflow para que las imágenes funcionen, pero lo he intentado de todos modos. Creo que lo he hecho usando una imagen y un elemento de lienzo, funciona alrededor de las tres cuartas partes del tiempo:
//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>