


Tile_images.push(loadImage("./tiles/water.png")) Tile_images.push(loadImage("./tiles/sand.png")) Tile_images.push(loadImage("./tiles/grass.png")) It's incredibly easy to load PNG files with P5js: let tile_images = Some examples are SDL for C, SFML for C++, and PyGame for Python. If you're using something other than JavaScript, here is where you'll need to use a graphics framework to load and render PNG files. Back then, it was all about finding simplifications to reduce the number of clock cycles per game frame. There we go! Just by tilting our angles by a small amount, we end up with a nice 2:1 tile ratio, and that simplifies things a lot. And if you ever saw my lectures on Bit-shifting Operators, you know that older CPUs can achieve super fast multiplication and division by 2 using a single CPU instruction shifting bits right or left. Speaking of older machines, if we choose a 2:1 pixel ratio, many of the computations could be achieved by simply multiplying or dividing things by 2. But if you ever developed games for older CPUs, you know that integers are always preferred over floating-point numbers. Yikes.Īll these details might seem a bit pointless to modern developers, given that now we have powerful anti-aliasing algorithms and processors that can perform extremely fast math. On the other hand, if we are using "true" isometric angles, for every two pixels we moved horizontally, we need to move 1.732 pixels vertically. Using this angle configuration, for every two pixels we move horizontally, we move exactly one pixel vertically. A 2:1 ratio can help us render pixelated lines more precisely. These "pseudo" isometric angles also makes things easier on the machine especially older ones. Isometric projection is, again, a method for visualizing 3D objects in two dimensions, but when we use proper isometric projection we make the angles between the x-axis, y-axis, and z-axis equal 120 degrees. Isometric ProjectionĪll this discussion about different projections is interesting, but what we really want is to discuss isometric projection. Right! So, now that we know what projection means and we briefly mentioned the two most popular types of projections in games, let's talk about isometric projection. Things that are far away appear smaller, and things that are close appear bigger! The smaller the z, the less we divide, and the bigger the resulting x, y is.The bigger the z, the more we divide, and the smaller the resulting x, y is.Does it make sense to you intuitively? The fraction creates an inversely proportional relationship between the projected screen values of x and y with the point's depth. Inversely proportional relationship: Look at the perspective divide formula above.
