What you should probably do instead is devise an alpha channel instead of this overlay thing, but I can't currently think of a good way to get it to work. I'm not too sure how to cover that in an efficient way, especially if you plan for two light-sources to intersect. So you're using a single gradient brush to draw the whole thing.īut it gets a bit trickier than that if there's more than one light-source. The thing you're taking advantage of here is the fact that any intersection of a path on canvas is always only unioned and never compounded. It's an option, but not a good one for a game engine.Īnother way would be to think of the ambient light and the light-source as if they were one path. One trivial way would be to use imageData but that would be painfully slow. Thanks very much, any answer would be great :) Is there a way to do this differently or better? Using clipping maybe, or drawing the rect over everything first?Īlso, I modified the Mozila Dev Centre's example on composting to replicate what I need to do and none of the composite modes seemed to work, check that out if it would help. I think this is because when I draw the rectangle with the source-out composite operation it affects the colours of the gradient itself because they are semi-transparent. However instead of getting what I wan't out of the engine (left) I get a kind of reversed gradient (right). G.addColorStop(0, 'rgba(0,0,0,' + () + ')') ĬxLighting.arc(p.x, p.y, radius, 0, Math.PI*2, true) ĬxLighting.globalCompositeOperation = 'source-out' ĬxLighting.fillRect(0, 0, f.width, f.height) ĬxLighting.globalCompositeOperation = 'source-over' Var g = cxLighting.createRadialGradient(p.x, p.y, 0, p.x, p.y, radius) Var e = f.entities, p = f.toScreenPoint(e.position.x, e.position.y), radius = e.light.radius My code for this stuff is: var amb = 'rgba(0,0,0,' + (1-f.ambientLight) + ')' This is where it goes wrong :/ I need to fill the whole canvas with black with and alpha of 1-ambient light value and at the moment I do this by setting the context.globalCompositeOperation to source-out then fillRecting the whole canvas.The gradient is given two stops: the center is black with an alpha of 1-intensity of the light and the end/edge is black with alpha of 1-ambient light value. For each light source, a radial gradient is drawn at that position with the same radius as the light source.The process of lighting is done on a separate canvas above the main canvas: There's also an ambient light value that is used to light everything else in the world that isn't near a light source (0-1, eg 0.1 would be moonlight). Each light source has a radius value and an intensity value (0-1, eg 1 would be very bright). I'm writing a simple 2D game engine using the HTML5 canvas.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |