Jump to content

Drawing an isometric tile


Melomancheto
 Share

Recommended Posts

I'm learning how to make grids and understand the principe of the tiles. I will leave this video to the future me (this guy explains it perfect).

There is one thing that I can't get right and I don't know where I'm getting it wrong.

 

const drawTile = function (x, y, color = 0xf5FFFF) {
	const tileWidth = 32;
	const tileHeight = 16;

	const rectangle = new Graphics()
	rectangle.lineStyle(1, 0xf5ffff, 1);
	rectangle.position.x = x * tileWidth / 2;
	rectangle.position.y = (y + x) * tileHeight / 2;
	rectangle.moveTo(0, 0)
	rectangle.lineTo(tileWidth / 2, tileHeight / 2);
	rectangle.lineTo(0, tileHeight);
	rectangle.lineTo(-tileWidth / 2, tileHeight / 2);
	rectangle.lineTo(tileWidth / 2, -tileHeight / 2);

	return rectangle;
}

I have this function for drwaing the rectangle. the problem is that I'm getting a half line on the X axis and I don't know why the path is not closing. 

SNBaOFr.png

Link to comment
Share on other sites

5 hours ago, ivan.popelyshev said:

if you dont closePath(), line wont be closed. Same in canvas2d, same in Flash.

Good to know, thanks

 

const drawTile = function (x, y, color = 0xf5FFFF) {
	const tileWidth = 32;
	const tileHeight = 16;

	const rectangle = new Graphics()
	rectangle.lineStyle(1, 0xf5ffff, 1);
	rectangle.position.x = x * tileWidth / 2;
	rectangle.position.y = (y + x) * tileHeight / 2;
	rectangle.moveTo(0, 0)
	rectangle.lineTo(tileWidth / 2, tileHeight / 2);
	rectangle.lineTo(0, tileHeight);
	rectangle.lineTo(-tileWidth / 2, tileHeight / 2);
	rectangle.lineTo(0, 0);
	rectangle.closePath();

	return rectangle;
}

This is the end result if someone needs it

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...