Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by snooze

Hi there,

for a game I'm working on, I built a little shadow casting engine.
I'd appreciate your feedback :)

Proof of concept demo (using the jumpnrun code):
http://coldspace.henklein.com

Download:
https://github.com/fourty2/ShadowImpact

I already put it on PointOfImpactJS, but its not visible there, yet.

1 decade ago by Hareesun

Holy shit.

1 decade ago by stahlmanDesign

This is excellent.

1 decade ago by quidmonkey

Very nice.

Tell me what I'm doing wrong here:
LightDemo = ig.Game.extend({
	
	bg: new ig.Image( 'media/coffee.png' ),
	light: null,
	ltx: null,
	radius: 20,
	shadow: null,
	stx: null,
	
	init: function() {
		ig.input.initMouse();
		
		this.radius *= ig.system.scale;
		
		//light
		this.light = ig.$new('canvas');
		this.light.width = ig.system.canvas.width;
		this.light.height = ig.system.canvas.height;
		this.ltx = this.light.getContext('2d');
		
		//shadow
		this.shadow = ig.$new('canvas');
		this.shadow.width = ig.system.canvas.width;
		this.shadow.height = ig.system.canvas.height;
		this.stx = this.shadow.getContext('2d');
	},
	
	draw: function() {
		ig.system.clear( this.clearColor );
		this.ltx.clearRect( 0, 0, this.light.width, this.light.height );
		this.stx.clearRect( 0, 0, this.shadow.width, this.shadow.height );
		
		this.stx.fillStyle = 'rgba( 0, 0, 0, 0.6 )';
		this.stx.fillRect( 0, 0, this.shadow.width, this.shadow.height );
		this.stx.globalCompositeOperation = 'source-out';
		
		this.ltx.fillStyle = 'rgba( 255, 255, 255, 0.1 )';
		this.ltx.beginPath();
		this.ltx.arc( ig.system.getDrawPos( ig.input.mouse.x ),
					ig.system.getDrawPos( ig.input.mouse.y ),
					this.radius,
					0,
					Math.PI * 2 );
		this.ltx.fill();
		
		this.stx.fillStyle = 'rgba( 255, 255, 255, 0.1 )';
		this.stx.beginPath();
		this.stx.arc( ig.system.getDrawPos( ig.input.mouse.x ),
					ig.system.getDrawPos( ig.input.mouse.y ),
					this.radius,
					0,
					Math.PI * 2 );
		this.stx.fill();
		
		ig.system.context.drawImage( this.light, 0, 0, this.light.width, this.light.height );
		this.bg.draw( 0, 0 );
		ig.system.context.drawImage( this.shadow, 0, 0, this.shadow.width, this.shadow.height );
	}
	
});

This is the draw() in main.js. this.bg is a .png that covers the entire canvas. You'll notice that I'm drawing the light layer prior to the bg image, followed by the shadow layer (as noted in your instructions), but I can't reproduce your results.

1 decade ago by stahlmanDesign

I got it working. Very interesting plugin. And very clear instructions for installing it.

/><br /> <br /> <img src=

1 decade ago by snooze

thanks :)
you can adjust your y-offset out of the box:
the 7th parameter on addLight is the offset:
{x:0, y:-10}

so, for example:

this.light = ig.game.lightManager.addLight(this, // entity
5, // starting angle
125, // angle spread
80, // radius
'rgba(255,255,255,0.1)', //color
5 , // pulse factor
{x:0,y:-10}, // offset
);

I will work on precalculating the sin/cos tables and faster checking routines -- this should give some FPS back :)

1 decade ago by snooze

@quidmonkey: do you have a complete example? mail me: snooze82@gmail.com ( from about 9am to 5pm gmt+1 I'm also on freenode )

1 decade ago by stahlmanDesign

If the player dies, the light remains:

/><br /> <br /> but if I add this.light.kill() in my player.kill()<br /> <br /> it doesn't work because light is not an entity, but rather an extension of class. How to resolve this? </div> </div> <div class=

1 decade ago by snooze

@stahlmanDesign I just updated the repository and added a removeLight and a removeLightByIndex method.

1 decade ago by snooze

I worked out some improvements (not yet in the repo), but I wanted to show it anyways :)

/> </div> </div> <div class=

1 decade ago by stahlmanDesign

This is looking better and better. Especially around the edges where it hits a platform.

Is it possible to made the red part gradually increase its alpha channel to opaque, so it would look like the light is fading?

Also, can you make the background darkness a parameter, so the dark could be completely black, as if you were in a pitch-black cave?

Keep up the good work, and let us know when you update the repository.

1 decade ago by Tharuin

The outline&fill version looks really nice! I tried to do this myself because I didn't like the "single strokes"-look, so I changed the code a bit. Besides some smaller changes like decreasing the line width and increasing the number of iteration I added this:
				var res = ig.game.collisionMap.trace(light.position.x, light.position.y, Math.cos(rads) * light.radius, Math.sin(rads) * light.radius, 1, 1);

				if(res.collision.x || res.collision.y)
				{  
					end.x = res.pos.x;
					end.y = res.pos.y;
				}
				else
				{
					end.x = light.position.x + Math.cos(rads) * light.radius;
					end.y = light.position.y + Math.sin(rads) * light.radius;
				}

instead of your tile iteration. Unfortunally this doesn't work well, because I get some wrong collision ( see the image at the bottom )

Do you plan to release your code for the filled version so I can see your solution? :)

/><br /> <img src=

1 decade ago by MrOwl

Go Snooze! this is awesome work man. Looking forward to the new package on github.

1 decade ago by Jerczu

Beautiful just beautiful this is what I was braking my head over writing it... Now I don't have to

1 decade ago by Jerczu

Don't want to be a ballache but this doesn't really work on Mac. While the lightmap is rendered ok the shadowmap isn't rendered at all if I remove the light source later in the code the shadowmap is rendered ok. -

Same happens in the jump'n'run demo provided.

this.shadowCtx.globalCompositeOperation = 'source-out'; <- when I change it to anything else they are being drawn together only masking seem not to work.

Update it seem not to work only in FFox on Mac.

1 decade ago by snooze

tomorrow, when I'm back from my easter weekend, I'll update the repo :)

@stahlmanDesign: LightManager.baseColor is the rgba value for the default darkening-color - you can give this color as a parameter on the initial instantiation of LightManager. Also I'm working on this smooth fade out :)

@Tharuin I'll take a look at it tomorrow, too

@Jerczu I'm developing on a Mac (OSX Lion) and on an iPad (JS debugging is bad, and Weltmeister wont work properly, but anything else is good enough :)) -- which browser do you use? Could you provide some screenshots?

1 decade ago by Jerczu

Yeah its only on ffox that it is not working for me. Others work ok. Check it here. I just uploaded what I have. http://ultra.cdgn.co.uk

Also is there a way to set up the z indexes on the light/shadow layer I have a foreground layer on some of the maps and it looks weird. that darkness is underneath.

1 decade ago by snooze

hi there,
I updated the repo:
https://github.com/fourty2/ShadowImpact

and PoI:
http://www.pointofimpactjs.com/plugins/view/22/dynamic-lighting-shadow-casting

it's now a plugin and supports gradients and the improved canvas drawing.

@Jerczu: I can reproduce your result, but I don't have a clue :(
@Tharuin: I didn't check the collisionMap.trace() approach, yet
@stahlmanDesign: the smooth fadeout is now part of the example in the repo.

screenshot:
/> </div> </div> <div class=

1 decade ago by stahlmanDesign

The smooth fadeout looks perfect. I'll check it out. Thanks

1 decade ago by paulh

You sir are a legend!

1 decade ago by snooze

@stahlmanDesign I recognized some problems if you use overlapping lights using a smooth gradient fadeout. I'm going to dive into this the next couple of days.

it works properly only with single color lights:
/> </div> </div> <div class=

1 decade ago by Hareesun

I'm having the same problem as Jerczu. Except im running Chrome 18. That source-out line seems to be the issue for me. :)

1 decade ago by guywithknife

This is really really cool, thanks for posting!

1 decade ago by hurik

nice plugin.

with this little addition you only have to add the lightmanager int the init function of the game.

ig.module(
	'plugins.lights'
)
.requires(
	'impact.impact',
	'impact.entity',
	'impact.game'
)
.defines(function() {

ig.LightManager = ig.Class.extend({
	...
});

ig.Game.inject({
    lightManager: null,

    update: function() {
        this.parent();

        this.lightManager.update();
    },

    drawEntities: function() {
        this.lightManager.drawLightMap();

        this.parent();

        this.lightManager.drawShadowMap();
    }
});

});

1 decade ago by Jerczu

You sir are a legend!!!!!!!!!! RESPECT

1 decade ago by Hareesun

Any word on an update to this to work in Chrome? :)

1 decade ago by Jerczu

Hareesun I would think its either you missed something in the code or the implementation of the global composite operations is bollocked in the browser.

All this plugin does positions darkened layer on top and the cone of light and then using the composition (source-out) removes the cone from the darkened layer. I think ffox has it f*ked up that's why it doesn't work properly as I tried with plain canvas and two circles and it didn't work as well.

Check ultra.cdgn.co.uk - its not the smooth one yet but it works in Chrome.

1 decade ago by snooze

Hi there :)

sorry, have been busy the last week.

In general, the problem is, that Webkit-Browsers (Safari, Chrome) have a different behavior regarding 'source-out' - which is the reason why it works with Safari/ iOS/ Chrome.

There is a comparison sheet here:
http://www.rekim.com/2011/02/11/html5-canvas-globalcompositeoperation-browser-handling/

I'm going to use another compositeoperation - or to manipulate the pixels on the main canvas directly.
My challenge this week :D

By the way: Thanks for your feedback - I love it! :)

1 decade ago by Hareesun

It's crazy how something with standards and an obvious 'this is how it should be' can be screwed up in all the different browsers. Do they even test their product?! :P I guess they're all free, but that's only because of the market.

Looking forward to your updates. :)

1 decade ago by Jerczu

I tested few of them source in/out destinationin/out lighter xor all have a pretty much messed up support. Though you can argue html5 is still in development and not a standard really. So messed up <audio> or <canvas> don't surprise me too much.
Page 1 of 2
« first « previous next › last »