search

ondras / rot.js

ROguelike Toolkit in JavaScript. Cool dungeon-related stuff, interactive manual, documentation, tests!
https://ondras.github.io/rot.js/hp/
BSD 3-Clause "New" or "Revised" License
2.33k stars 254 forks source link

Canvas element tooltips and opacity? #43

Closed groovy9 closed 9 years ago

groovy9 commented 9 years ago

I'd post this in a forum somewhere, but can't seem to find such a thing, so I'll try here. I'm trying to figure out if rot.js can meet a couple of my project requirements. One is that I want tooltips for map elements. e.g. mouse over a monster and it pops up a tooltip with details about it. This is easy with javascript, css and an html table, but I don't know anything about the canvas. I don't see anything in the rot.js docs.

Second, I need to implement ascii animations for things like explosions that will manipulate the opacity of map elements. Color looks easy, but can I set opacity for individual map cells with rot.js?

ondras commented 9 years ago

Hi,

the canvas is completely opaque and offers no internal structure.

Tooltips are somewhat solvable by listening for "mousemove" events, converting mouse coordinates to cell coords via ROT.Display::eventToPosition and adjusting canvas's "title" property accordingly.

As far as opacity goes, I am not 100% sure I follow your requirements. Are you using ASCII output or graphical tiles? Are you going to animate just the color, or positions as well?

Generally speaking, when you do not overlap multiple things on top of each other (something you normally do not do when drawing chars), the whole "opacity" boils down to picking a correct color - often a mix of normal "opaque" color with the background ("black").

groovy9 commented 9 years ago

Ascii based. Ok, color mixing. Not quite as elegant as set_opacity(0.5), but it should be workable. Basically, I want to take a single map cell and animate color flickering like so (pseudocode):

cell.color(blue); for(1 .. 100) { cell.opacity(rand(0,1)); sleep_milliseconds(25); }

And the cell will flicker. Do that to a 4x4 block of cells and it'll look like a blue explosion.

ondras commented 9 years ago

Nice, understood. Please note JS does not have any sleep function, so you will have to use setInterval or requestAnimationFrame.

Check out http://ondras.github.io/rot.js/manual/#color - there are some functions that can help you with colors, namely ROT.Color.interpolate(blue, black, opacity) might come in handy.

ondras commented 9 years ago

FYI, I already did some experiments related to your mixing in the past, see some of them at http://ondras.zarovi.cz/demos/experimental-roguelike/. It seems to work nicely.

groovy9 commented 9 years ago

Ohhhh... well, there it is. I looked at that page, but overlooked it. Thanks!