Forums » Code » Lighting/ Shadow Casting Class

Hey Snooze, first and foremost, outstanding work!

I'm in love with your lighting plugin and really want to be able to use it in production versions of the game I'm building. There are a few things holding me back though:

- the FPS drops in firefox/chrome (I don't care about IE hehe)

- I get a weird bug in FF/chrome where when a light is spawned the whole darkness layer disappears until the light is killed (This could easily be me doing something wrong, but it's probably the funkiness you talked about with compatibility in FF/chrome since the bug doesn't happen in safari)

- The most annoying bug is that I can't attach a light to my player entity but I can attach lights to any other entity. WTF?! I'm assuming this is an issue on my end and was hoping maybe you could help me out. I'd be happy to send you the code.

Here's the error I get:

ig.game.lightManager.addLight is not a function
http://localhost/~arcrutus/mmo/game/lib/game/entities/player.js
Line 61

Why would it throw that error for the player but not for anything else? I have lights setup elsewhere in player.js and they all work fine.

Other than that I'm a huge fan of the plugin and would love to see you develop it further. Also I think you should setup a donation link for the project. It's definitely the type of thing I'd donate 10$ to a dev for :)

-Nico

Hi there,

first: thanks for all your feedback. I'm sure - without your feedback - I'd have hacked some code for my own game together, without any further investigation into the issues.

I going to update the repository and documentation in a few hours.

The main differences to any older version are:

* no usage of globalCompositeOperation anymore. I'm drawing black/ white to the shadow canvas and then convert (using pixel per pixel iteration) the white/grey areas into the appropriate alpha value

* no check-each-visible-block-and-draw-lines-based-on-screen-distances anymore.
* it's now a 2d map based raycaster. after calculating the accurate distances within the map I convert all distances to screen pixel values. this is much faster and more accurate.

todo:
* I didn't have time yet, to implement fadeouts or gradients, but now it should be much easier to implement this.

@Nico: send me an email: snooze82@gmail.com :) -- and: I'm going think about donation stuff, didn't thought of this before. thanks :)

I'm sorry, the update has to wait till tomorrow :/

morning :)

I updated the repository a few minutes ago.
https://github.com/fourty2/ShadowImpact/

Demo is now available at: http://coldspace.henklein.com/plugin_demo/

have fun!

It was unplayably slow on FF 4, but on the latest version it runs smooth. Nice job.

just found a complete library for js/html5 2d shadow casting with vector objects.
it uses a different approach than my raycasting system, but it looks really nice.

http://blog.greweb.fr/2012/05/illuminated-js-2d-lights-and-shadows-rendering-engine-for-html5-applications/

I am having trouble with testing on iOS.
I load the lights in and it works fine on the debug browser, however, when I upload it to the cloud and "Test Anywhere", the game does not load, but the main screen (start screen) will.
What causes this? How can I get around it?
Is it just because It's not an 'app' but being loaded through a cloud?

Seriously nice work there :)

Wow!!! This is just GREAT. This is one of the best Impact plugins I've ever come across ever since I started on Impact. Thanks snooze!

Is it not possible to have the non-light-affected areas be totally black? I'm banging my head against the code and can't get anywhere no matter what RGBA values I set for the various colors.

Not sure if there was mention of iOSImpact compatibility issues?

Have I missed something from the below implementation?

I'm getting the following error if I use the inject code below:

2012-09-03 14:17:39.044 MyGame[1055:707] TypeError: 'undefined' is not a function (evaluating 'this.lightManager.update()') at line 343 in lib/plugins/lights.js

..and the following if I use the original instructions without the inject:

2012-09-03 14:40:38.950 MyGame[1153:707] TypeError: 'undefined' is not a function (evaluating 'this.lightCtx.createRadialGradient(l.position.x, l.position.y, 5, l.position.x, l.position.y, l.radius)') at line 130 in lib/plugins/lights.js

I'm using the following inject:

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();
    }
});

});

main.js:

lightManager: '',
init: function() {
    // Light source.
    this.lightManager = new ig.LightManager();
}

player.js

init: function(x, y, settings) {
    this.light = ig.game.lightManager.addLight(this, {
        angle: 5,   
        angleSpread: 125,   
        radius: 80,         
        color:'rgba(255,255,255,0.1)',  // there is an extra shadowColor option
        useGradients: true, // false will use color/ shadowColor
        shadowGradientStart: 'rgba(0,0,0,0.1)',         // 2-stop radial gradient at 0.0 and 1.0
        shadowGradientStop: 'rgba(0,0,0,0.1)',
        lightGradientStart: 'rgba(255,255,100,0.1)',    // 2-stop radial gradient at 0.0 and 1.0
        lightGradientStop: 'rgba(0,0,0,0.6)',
        pulseFactor: 5,
        lightOffset: {x:0,y:0}      // lightsource offset from the middle of the entity
    });
}

What would be the best way of having the lightmanager toggleable per-level? Have an entity with some settings (eg overlay opacity)? I don't want all my levels to be dark, but I would really like to lead my player down into a dark cellar...

this plugin runs horrendous on Firefox 17...4 fps. Better in chrome though...21fps.

Awesome plugin but needs work on the performance side.

Hi there,
after about 9 months of procrastination & abstinence, I'm kinda back.

Aaand I uploaded a new tech demo of our WIP platformer COLDSPACE :)

http://www.youtube.com/watch?v=UnmJoHBC9Mo

It's basically a standard platformer with a modified version of the shadow casting plugin.
Runs really smooth on Chrome, iPad 3 and iPhone 5 (both Safari).

And yeah, I'm going to update the github repository some day ^^

Nice! Can't wait to get my hands on the updated plugin :)

Thats awesome!
Would love to get a hold of the updated repo!

I have been playing around with the plugin and I have a question. How can I get rid of the outline of the light so it won't show in the layers below. Here is my code

player.js:

init: function(x, y, settings) {		
		
		// Add a light source
		
		this.light = ig.game.lightManager.addLight(this,{
			angle: 0,
			angleSpread: 70,
			radius: 150,
			color:'rgba(255,255,255,0.1)',  // there is an extra shadowColor option
            useGradients: true, // false will use color/ shadowColor
            shadowGradientStart: 'rgba(0,0,0,0.1)',         // 2-stop radial gradient at 0.0 and 1.0
            shadowGradientStop: 'rgba(0,0,0,0.1)',
            lightGradientStart: 'rgba(255,242,0,0.1)',    // 2-stop radial gradient at 0.0 and 1.0
            lightGradientStop: 'rgba(0,0,0,0.6)',
            pulseFactor: 1,
            lightOffset: {x:0,y:0}      // offset from the middle of the entity
		});
		
		this.parent(x, y, settings);
	}

Any help?

I like this plugin, but when i try to use...the game fps come down to 10. When i use this: this.lightManager.drawShadowMap(); all fps come down :/.

I follow that instructions: http://www.pointofimpactjs.com/plugins/view/22/dynamic-lighting-shadow-casting

Any idea why this game have so slow FPS? :/

In case anyone is looking for lighting and shadows, Impact++ library has real-time lights with shadows with a huge amount of options for all kinds of situations. It can also automatically convert your collision map into shapes that cast shadows for lighting environments: http://collinhover.github.io/impactplusplus/

Hope this helps!

Hi Guys

Anyone had any luck using this with Ejecta?

Its works great in Chrome but the game wont load a level with the light plugin running in Ejecta.

Hey people and Snooze!

this plugin is really great! i love it for it's easy implementation and smooth running on Chrome:D IE has real performance issues but thats not my problem atm. im havin a issue with the gradiant effect:

my 361 radius light sphere looks good and the shadow gradient falls in nicely and smoothly, but at the end of the fading light effect i have a full light border of 1 pixel, fully around my sphere. how can i solve this?

have tried looking in the code but could not get any whiser:(

Really great demo! I am new to impact but am working on a game. I am a C/C++ dev with experience in many script languages including vba, vbs, some jscript, etc.

I need to create an entity that has a changeable field of view (kind of like the light ray in the demo and earlier comments) that will allow a detected collision; So I can detect if another entity is 'seen' by the player versus an actual collision with the entity.

do I need Impact++ or can I do this with some feature of ImpactJS like linking two entities.

Not really sure why, but I get about 2fps on my title screen with no lights added. Looks like the plugin is iterating through every pixel? Thats crazy.. I wonder what the difference is between my game and the demo? Its the drawShadowMap() function.

weltmeister error

TypeError: ig.game.lightManager is undefined

this.light = ig.game.lightManager.addLight(this, {
player.js (line 45)

how to add light plugin to weltmeister ?

I can't get it to work properly if I make the screen follow the player in the main update function. The light attached to the player is incorrectly positioned and is proportionally offset to the instantaneous this.screen.y.

If I comment out this.screen.y it works great!

I can't understand why it doesn't work because the demos clearly show camera following the player and the light correctly following. My question is: do you calculate this.screen.y in the same way?


MyGame = ig.Game.extend({
...
update: function() {
...
//this.screen.x = player.pos.x - ig.system.width/2;
this.screen.y = player.pos.y - ig.system.height/2;
}
...
});

Page 2 of 2