Living World Productions
Video Game Blog

February 08, 2019

Since I'm focused on the Play Window Map, I decided this was something to address. The Engine has the ability to scale the Play Window at start up. Why not add the feature to allow the User to use it as a zoom ability by clicking on a +/- button? So I'm typing out the story board as to how that would work. There's some aspects of the current system that have to be altered slightly to accomodate this feature.

Of course this feature would not be available to all of the games that could be built off of this Engine. And there is also the consideration that Users using small-screened monitors trying to zoom in wouldn't be able to see much more than a few Tiles in the Play Window.

As I am evaluating the changes needed to accomodate this idea...I'm come across a slight problem with the original that does not meet the design requirements. I'm going to put the zoom feature on hold and deal with the bug.

I like to muse while I'm trying to figure out how to do something. So, I will talk some about how Tiles are projected to the screen. Let's start with the simplist one...Square Tiles. Here you see a simple 3 x 3 pattern of Tiles laid out from left to right, top to bottom. These are easy to figure out how to place because they are simply (X-Coordinate * TileWidth), by (Y-Coordinate * TileWidth), and iterated through for the height and width of the Play View.

When the dimensions of the Play View are considered, Square Tiles are also the easiest to work with. It would be great to use Square Tiles for every game...but, they aren't the most appealing for a variety of games. In fact, it's a rare game now that looks good using this pattern. The best view for this is "Top Down".

The next style that most closely resembles the Square Tile pattern is the Square-Isometric pattern. Seen here, they appear to be 'square', but rotated up on their points. I saw 'square' because the width and height of this image is not 32x32 like the squares above. These are 32x31. The reason for this is when they get projected, they overlap each other a little too much to look professional. I avoid this problem by reducing the height by one pixel, but still calculate the drawing at 32x32. It ends up looking good without do all too different math. This view is only slightly more complicated when projecting onto the screen. What is important is that if you look at the arrows, the flow of which Tile is 'above' the other is off set down and right. The array of data that these Tiles are determined by are still in a 'square' pattern. But to give this the grpahics engine just projects them into this pattern. Also, when the Player navigates through the game world, you have to do some weird math to know which Tile they are stepping onto when they move. For instance, if you want to move to the Tile that is 'down and left' of your current position, you would simply add +1 to the Y-Coordinate. If you wanted to go to the Tile directly south of your current Tile, it would be +2 to Y-Coordinate. Going straight to the right would be X-Coordinate +1. It's a bit of a hassle yes...but, once you set up a pattern it can be left to the software to handle it.

Speaking of patterns...here' the next map style, Rhombus-Isometric. Here you see the arrows pointing in the direction of projection. This Tile version has the same problem of overlapping like the Square-Iso does. So, the width and hieight don't match evenly, but still projected with the same math (at 1/2 the height). You can see by the arrows that the projection follows the same rules. Avatar movement also follows the same pattern. So, these two map styles share almost the exact same code for everything...just with the modification of height.

The final map version, the Hexagon-Isometric map is a bit more complicated. From the books I talked about in the previous month, they did a version where the Hexagons were standing on their points. I could have used their version, but I as I mentioned I wanted to have Hexagons that were on their flat sides. Another problem was that to make the Tiles look as close to a Hexagon as possible, the had to be drawn with an irregular pattern. Because of this, the tiles have a tiny ibt of overlay - like four pixel overlap on each facing of the Hexagon.

In these two graphics, you can see how I have a separated view along with the condensed version. You can see how close the images are before setting them closer...The loss of image has to be considered when drawing any images that might need as much of the hexagon as possible to look good.

Again you see the stepping pattern of the tiles. I had to drop the book's version of calculations to figure out where the mouse in pointing at for the Cursor. But, I was able to make it follow the same pattern as for the other versions...which, the strongest aspect about creating software is to make code that is adaptable to a variety of situations.