Unearthly Ichor (7DRL entry)

[sanojian]

I tried my first 7DRL (7 day rouge-like) competition and finished a game.

 

Unearthly Ichor

 

 

 

I didn't get everything in that I wanted to but its somewhat complete.

[user123456789]

Looks cool so far. Nice work. 

 

And btw, how did you make tiles around your character to display with different lightning? At first look I assume that you are using divs with different opacity instead of canvas? Is there some sort of known formula for sphere lightning? 

[sanojian]

Thanks for the comment.  I use a collision box for each light source. Then set the opacity of the colliding tiles based on the distance to the lightsource.  It is quick and dirty lighting if you are in a hurry but it doesn't look great.

 

I am interested in lighting of 2D settings.  Check out my more advanced lighting demo for a project that is currently on hold.

[user123456789]

Yea, thnx for the reply. I must say that I do like the feeling of a bit "dirty" tile per tile lightning aka rogue-like - as in your game but that lightning demo also looked superb. Nice work in both cases! Would be cool to experiment this from performance point of view. For example, did you check or do you know - does drawing images ("sprites") with varying opacities over canvas stress CPU more than just drawing them normally?

[sanojian]

did you check or do you know - does drawing images ("sprites") with varying opacities over canvas stress CPU more than just drawing them normally?

 

I am sure that it has a hit to performance but since it is not a very resource-demanding game to start with I never noticed a slowdown even with 5 or 6 light sources at once.  

 

One thing is, I don't set the opacity every frame.  It is only every 11 frames that I check the collision again and reset opacity.  You will notice that the lighting lingers briefly behind the player when you move.  Lighting blinks out after 13 frames if it hasn't been refreshed.  I think it gives the lighting a more organic look, but that wasn't intended.  Its just a side effect.  In case you are interested, here is my lighting component (written using Crafty).  Its competition code so I am sure it needs a little cleanup.

Crafty.c('LightSource', {	LightSource: function(cx, cy, d, intensity) {		if (!cy) {			var parentEl = cx;			var cx = parentEl.x + parentEl.w/2;			var cy = parentEl.y + parentEl.h/2;			var d = TILE_WIDTH*6;		}		this.requires('2D, ' + RENDERING_MODE + ', Collision')			.attr( { x: cx - d/2, y: cy - d/2, w: d, h: d } )			.collision()			.bind('EnterFrame', function(frameObj) {				if (frameObj.frame % 11 == 0) {					this.lightUp(frameObj.frame);				}			});		this.radius = d;		this.intensity = intensity || 1;		return this;	},	lightUp: function(frame) {		var d = this.radius;		var flicker = Math.random();		//d = d - d/3 + flicker*2*d/3;		var flicker = this.intensity;		if (true) {//flicker != 1) {			flicker = Math.min(1, this.intensity - this.intensity/4 + Math.random()*2*this.intensity/4);		}		var litObjs = this.hit('LitObject');		for (var i=0;i<litObjs.length;i++) {			var dist = Math.sqrt(Math.pow(this.x + d/2 - litObjs[i].obj.x - TILE_WIDTH/2, 2)				+ Math.pow(this.y + d/2 - litObjs[i].obj.y - TILE_HEIGHT/2, 2));			litObjs[i].obj.light(flicker*(0.2 + ((d/2) - dist)/(d/2)), frame);		}	}});Crafty.c('LitObject', {	LitObject: function() {		this.requires('Collision')			.collision()			.bind('EnterFrame', function(frameObj) {				if (frameObj.frame % 13 == 0) {					if (this.unlit) {						this.alpha = 0.0;					}					this.unlit = true;				}			})		this.alpha = 0.0;		this.currentLightingFrame = 0;		return this;	},	light: function(amt, frame) {		if (this.currentLightingFrame == frame) {			this.alpha += amt;		}		else {			this.alpha = amt;			this.currentLightingFrame = frame;		}		this.unlit = false;	}});

[user123456789]

Okey, thnx it makes sense. And yes, competition codes might get "interesting" - so to speak..