Textures
In the previous tutorial we learned how to show textures on the walls. In this tutorial we will use file textures images to put the image data in the wall. This is not hard, we will use almost all of implemented things we did previously. Here, more functions will be created to get the image data and load it to memory.
Hint: The image data is an array with the pixel values of some image. In HTML5 canvas image data, the pixels are positioned for each index of the array. For example, if we have a 1x1 image, the data of it would has a size of 4. The array would be [R, G, B, Alpha].
The first thing to do is import the image in the HTML DOM. This will guarantee that the image will be loaded when the page gets opened. The image we will use is the image 16x16 below:
Image: texture.png
Put this image on your project folder and load this with this html:
File: raycasting.html
<!-- ... -->
<body>
<img id="texture" src="texture.png" style="display: none">
</body>
<!-- ... -->Note: We need to hide the image, otherwise every texture we import in out application will appear in the page.
After it, we will define this image in our attributes. The texture session will be used for it too.
// Data
let data = {
// ...
textures: [
// ...
{
width: 16,
height: 16,
id: "texture",
data: null
}
]
}After it, three new function will be created. Check the table below for understand about these functions:
| Function | Description |
|---|---|
loadTextures() |
Iterate all textures defined in the textures attributes, and load the data of every texture |
getTextureData(texture) |
Get the pixel array of the texture. For it we will need to create a canvas in memory |
parseImageData(imageData) |
This function will transform the pixel array with the css color syntax |