Isometric tile outline when mouseover

59 views
Skip to first unread message

Fade

unread,
Dec 5, 2018, 5:41:56 AM12/5/18
to Crafty
Hey there! 

I'm fairly new to Craftyjs and I've been playing around with it.
Trying to make an isometric mmo for the fun seeing how far I can come with it.

Usually I try to figure stuff out myself so this is a first posting to a forum, I hope you guys can help me.

The thing I'm trying to achieve is a tile outline when I hover over the isometric tiles that I render with the tiledmapbuilder plugin.
Would I have to adjust this plugin to render the outline of the tiles when hover over or do I need to create a new entity?

Here an example of what I have so far: https://gyazo.com/0b9a923d22a0cbd4c944c44ef84b43c6

To sum it up, I want to highlight the tile my mouse moves over.

Thanks in advance!

Fade

unread,
Dec 5, 2018, 9:29:45 AM12/5/18
to Crafty
Been playing around and made an jsfiddle. (http://jsfiddle.net/y2rwu0kL/)
Only shows the cursor on the first tile. I'll probably have to work with px2pos or something to get this to work.

Fade

unread,
Dec 5, 2018, 10:10:24 AM12/5/18
to Crafty
Alright, so I've been playing around some more and got to this: http://jsfiddle.net/6zvkt0u1/ it randomly fills in tiles with the cursor.. obviously I'll need a MouseOut.. but yeah it's  not filling the correct tiles when I go over them.


On Wednesday, 5 December 2018 11:41:56 UTC+1, Fade wrote:

Fade

unread,
Dec 7, 2018, 11:11:18 AM12/7/18
to Crafty
Alright, I figured it out. Thanks for the help!


On Wednesday, 5 December 2018 11:41:56 UTC+1, Fade wrote:

starwed

unread,
Dec 8, 2018, 1:07:14 PM12/8/18
to Crafty
Glad you figured something out -- is there anything that could get added to the documentation that would be helpful?

Fade

unread,
Dec 8, 2018, 2:35:16 PM12/8/18
to Crafty
Well, I can show the code, it's based on the tiledmapbuilder plugin and looks something like this: https://pastebin.com/qRXLDN8X
what it does is create a layer upon the actual tiles.

I didn't get much further with actually showing the mouse on the position where the mouse is, since I've been breaking my nuts over how to isometric render my mouse output to where it doesn't overlap the other tiles like this:
https://gyazo.com/a7daf09cc28e2a1c0b545b5f60644f32\

Been reading a lot of things, just can't seem to get it right.

When I figure this out I feel like continuing to optimize this code. However, I'm not even sure whether I'm doing it right.
Reply all
Reply to author
Forward
0 new messages