Name: 編碼速成：等距磚 (Coding Quickie: Isometric Tiles)
Uploaded: 2021-01-14T10:13:36.000Z
Duration: 22 min 13 s
Description: 【看影片學英語】數萬部 YouTube 影片，搭配英漢字典即點即查，輕鬆掌握單字發音與用法，長久累積看電影不必再看字幕。

A nice quick video This time let's look att isometric tiles on as usual, a quick demonstration of the application before we get going.

The isometric approach to tile rendering gives it a pseudo three d feel.

So here we can see I'm selecting tiles, but the tiles are no longer axis aligned are aligned with the edges of the screen.

So that's out some complication about working out which tile is currently highlighted on.

You can get appreciable feel of depth by using sprites that a larger than the tile itself.

So here we've got some trees being planted, different type of tree.

There on all of this simple demonstration is going to do is allow us to scroll through a fixed election of tile types.

I really want to keep this one nice and quick and simple.

Working with conventional to detail maps is something we have done many times on the one loan coded channel.

We would assume a world that looks like this on here.

We would have an X axis and here we would have a Y axis which would employ we have an origin of the top left here.

Once we establish that are tiles have a wit on a height in screen space?

A how many pixels of the screen the tile occupies.

We can then quite easily translate the mouse location into the discreet form required to access the array that represents this tile map.

So assuming our mouse cursor is somewhere here, we can take this mouse coordinates.

What we want to work out is what is the coordinates off the cell that the mouse is within.

And this has always been simple because we allow interview division to sort all this out for us.

So we can assume that sell X is equal to the mouse's location.

X interview divided by the tiles width and it's the interview divide.

That's important because that will give us a whole number and discard any remainder is part of the division, so that will always give us a location that represents the cell conveniently weaken.

Do exactly the same for why, but this time we'll do an interview divide by the tile height.

It could be that your tiles are square, but I prefer to program it in a more flexible way.

Sometimes It's also convenient to no word is the mouse lie within that particular cell?

We can take our mouths, coordinate, and we'll take the module ISS with the tile width.

So this will give us a offset in screen pixels of how far the mouse coordinates is into the tile.

And naturally, we have a corresponding for why.

Sometimes it's helpful to normalize this value by dividing as well by tile whipped and tell height to give us a value between zero and one to represent where the mouse is within the cell.

And if we know the overall width of our world, then we can easily take our cells X and Y location and convert that into a one dimensional index into an array that represents this world.

We have done this countless times on the channel.

For regular viewers of the channel, all of this should be very familiar when working with isometric tiles.

The rules aren't quite as simple simply because there is no access alignment anywhere in our world.

So I'm going to make some assumptions that up here is our 00 coordinate.

And along this edge is our X axis on along this edge is R Y axis.

The first problem we have is it a particular tile is no longer square.

And so transforming the mouse coordinates as we did before is no longer really that applicable.

Secondly, if we look at adjacent tiles in this map, we see that they aren't necessarily adjacent in the isometric map.

And so we need to think of things a little differently.

I've created some rudimentary isometric tile graphics on dhe.

It's quite important that to get my approach to work, I'm going to make an assumption that the aspect ratio of my tiles is 2 to 1.

So the tile fundamentally is going to be twice as wide as it is high.

And in this instance, I've chosen tiles which are 40 pixels wide on 20 pixels high, and I've created a selection off them.

So along the top here, I've got a highlighted yellow one which will represent which one?

I've got one filled with grass, and I've got some larger tiles here at the bottom, which are populated with simple objects.

So let's start at first by simply rendering a plane off empty isometric tiles.

As usual, I'm going to use my pixel game engine to do this.

So I've created a class called isometric demo on.

It doesn't have anything in it yet, other than it will clear the screen toe white so we don't load anything on on user create on per frame or were drawing is the background at the window itself is constructed to be 512 pixels wide by, 480 pixels high on each pixel is going to be represented by two screen pixels.

Fortunately for this demonstration, there isn't very much code about 100 lines.

I'm going to start by adding some variables that describe the world.

So here I've added a interject to D vector to describe the size.

It's going to be 14 in the X axis and 10 in the Y Axis has established my isometric tiles.

Principally are going to be 40 pixels wide by 20 pixels high, and I'm going to establish that the origin of my world.

The 00 isometric tiles start to be rendered is going to be at 51 and that means five isometric tiles across on one down from the top left of the screen.

I know I've got some graphic stated to load, so I'm going to create an ol sea Sprite pointer to store that on.

I'm going to create another pointer to store the two D World array in on user create.

The first thing I'll do is load my PNG file that contains my isometric tile data.

It contains all of those spikes on will use the drawer partial sprite to extract regions of it to draw to the screen.

Then I'm going to initialize my wilder ray.

Depending on the size of the world that we've specified earlier on, I'm going to make sure that that defaulted to all zeros, which is going to represent an empty tile for each frame.

The first thing I'm going to do is clear the screen, and I know I'm going to render the entire world for this application.

We're not going to do any clipping, so I'm going to create two nested four loops that iterated through all of the cells in the world.

In this instance, I've chosen to render why first and then X, because I want to rent it from the top of the screen towards the bottom.

And this is because, conceptually, the bottom of the screen is closer to the player than the top of the screen.

So we want objects at the bottom to be drawn last.

We've already established that the world does not exist in the same space is the screen, so we're going to need a transformation function.

I'll call that to screen and populated in a minute, but ultimately that should give us a to D Coordinate of were to draw a particular isometric tile on the screen.

Now we just need to decide which type of tile we should be drawing.

And so here I'll take the Y coordinate on the X coordinate on the width of the whole world to index sleepy world array.

If the value of the rate that location is zero, that's going to be a blank tile.

I'm going to use the pixel game engines, drawer, partial sprites, function pass it to the transformed coordinates of the world.

So it's in screen space on then select the appropriate Sprite out of the Sprite sheet I showed earlier, and for now, that's it.

Because of a feeling I'm going to be using to screen several different places.

I'm going to create a small lambda function to do that transformation for me.

So this will take in an X and A Y in world space and give me the screen coordinates in return.

One is simply there is a transparent pixels or there isn't on with this glowing rectangle.

We've got varying degrees off translucency per pixel.

The pixel game engine can render these differently, and it's more optimal to choose the appropriate method before trying to draw the sprite.

Since most of my graphics have a binary alfa value for the pixel, I'm going to use the masking mode of the pixel game engine to perform the rendering.

This means if there is a pixel with any transparency, it all it grown.

It's important that when you start playing with the pixel modes that at some point you set them back to normal because they're persistent, wants their changed.

Now let's have a look of this transformation to start with.

We know that each isometric tile is in fact a two dimensional Sprite.

And so even though the tiles coordinate exists here in the top center, the Sprite coordinate actually exists here.

And therefore our transform will take this world cornet and generate this screen space coordinate In return, we can deduce this transformation empirically just by looking at the data starting at 00 We know the Sprite needs to be in this location on relative to the world origin.

This is half the sprite width to the left.