How do I make a 3D looking flashlight in a room

Hey there!, i always wondered if i could make a skewing effect on a sprite for instance a light sprite and make it look 3d when you hover over a corner of a room so it looks more 3D?

Example:

the example is made in Photoshop.

Thank you for any help you provide!

Mmmm thats a good question...Thanks for asking it

There would be many different ways to achieve this, some ways would be better than others..Im sure there would be a pure code or math based solution

but

Personally, id 'fake' it, if it was really necessary

Seeing as to be honest ..the perspective view you have shown would in reality skew the corner parts uniformly as the projection of the room is mostly straight on

first off I would make the back wall on a separate layer that was behind all of the other layers which each had a side wall object placed in within it

On the back layer the light sprite goes behind all of the other wall sprites and will always stay behind unless its a full view of the light sprite

thats the easy part

The next part would be slightly trickier

it involved using more light sprite objects that are Pre-skewed and aligning them at the correct location and position of the corresponding point on the back wall light sprite

including not being shown when not needed...

and of course...

the floor and ceiling projections would also be handled the same way

and to be honest ..I dont know now if this would work at all....may be better to find a better way...but who knows...maybe its possible...

mmm thats the best I could do for now...but Ill try to whip up a capx demo for you...to see if it works

https://www.dropbox.com/s/q5zssn3xv93y1d9/ROOM%20LIGHT%20TEST%201.0.capx?dl=0

This is not finished..but maybe you can work on this idea,....Ill try to work it up more...

The only way I know how to place perspective on sprites is here

https://github.com/Pseudopode/construct2_plugins_behaviors/tree/master/pode_imagesEffects%26Text

but its only perspective

Not skewing ..which was what you stated.. ..

skewing is not supported in construct 2

which was why i suggest faking it with pre skewed sprites

still needs the side wall objects put in and events ..but maybe it gives you a head start...

cant think of anything else off the top of my head...maybe other people have better ideas

good luck

mystazsea Hey, thank you for trying to solve this.

I modified your Capx and here's what i got;

[attachment=0:ggj88e9g][/attachment:ggj88e9g]

it still needs some improvements like making the ceiling light height the distance between the light sprite and the ceiling so it doesn't appear really short and unrealistic

and also maybe center the light sprites so they don't appear like this:

I'd appreciate improving the Capx if you can :)

If you would like to go really with a 3d effect I would suggest to use canvas and Bezier curve.

You should be able to draw circle using four curves. Red dots represent control points on the right side example.

This could also help http://hansmuller-flex.blogspot.fi/2011/04/approximating-circular-arc-with-cubic.html

Katala Can you make a Capx with the Canvas plugin, i have no absolute idea where to start ;\

Katala's way would be the most accurate, but the math could get a bit hairy looking to calculate the control points.

You can do skewing with my Paster plugin. Which works with webgl on or off so there's no real reason why skewing can't be supported directly in C2.

Anyway you can get an approximate look by pasting the spotlight onto pasters around the edges of the back wall and taking that and stretching it on a quad that covers the wall.

https://dl.dropboxusercontent.com/u/542 ... light.capx

It's not done but it gets the idea down with the left wall and half the bottom one working. Note this isn't a perspective transforms so I split the pasters in half to get it to look better.

Yeah.. well. It was more of an idea I just thought it might work. I post CAPX if I can figure out something.

wow Wisdoms Im impressed..you got further than I did with my own idea

lol..bravo

Really like how you used the Layer blending modes to show the ( left/right/top/floor) lightbase frames..very clever:D

That was a stroke of genius, something I wouldn't have thought of in a million years..

no joke, you just increased my capacity for lateral thought..cheers

um yeah but how to improve upon it mmmmmm

"Non Euclidean Geometry"..is all I can say

I think its a real good effort..just needs more tweaking..ill see if I can improve it..well done though..all ideas are good

Yeah I didnt say it was the best solution ..just perhaps a step in the right direction...either way ..we are learning..and thats good in my book

I agree with you R0J0hound, the math 'is' hairy... why I was trying to avoid it...mmmm

But yes Katala that was the idea I was getting to...just didnt know how to express it..thanks

funny how such a simple problem is more than it looks..

perhaps we are overlooking an even easier solution...worth looking into.

Theres that Paster word again...R0JOhound....did you do it again? "Paster" im confused again

Well done everyone for chipping in...this is a problem ive often thought about myself....

wait having a brain wave...wait..ok...try adjusting the height or width of the wall lightbase frames according to x,y pos of the mouse..if you know what i mean..if mouse is larger than the 'y pos' of the ceiling edge then set the height of the lightbase to increase and vice versa..if its lower than the floor edge (y pos) increase its height..

and of course for the left and right walls you would adjust the width of the light base...get it?

and when you increase the width or height of the lightbase..using "lerping" to make the transition smooth

Ill try to update the capx but maybe youll beat me to it

lolll..arrrgh my brain isnt up to this tonight...haha..heres a teeny weeny update...

Now with Fancy radial Blur Web gl fx !!!

https://www.dropbox.com/s/a0qdu5tygt2gaf4/RoomLight%20update%203.capx?dl=0

still buggy ..for some reason I cant figure out why it works on the ceiling and floor but not the side walls ..can anyone see why? I must of missed something

Its not perfect but it could be a start for improve upon

but also it doesnt fix the problem at all but creates another..youll see what I mean...as the light sphere reaches the edge..you see divergence of the ligjht cone not quite matching up ...mmmm...cmon Katala ..show us your stuff,...i need to go kill some zombies now..my brain is worn out...lol

Ok, I had a go with the math bit. First here's the capx

https://dl.dropboxusercontent.com/u/542 ... rsect.capx

Basically it's projecting 3d points to the screen. The first 8 points are just to visualize the room so I could get the background to match. The rest of the points are found from the intersections of rays from the light source to the walls. The ugliest part was the rotation math to get the spotlight to change direction.

The spotlight can then be drawn as a polygon with the point locations using the canvas plugin.

https://dl.dropboxusercontent.com/u/542 ... light.capx

It's not perfect at the edges of the walls. To fix that additional points would need to be calculated for where the lines intersect from the view of the light, as best I can tell.

5 events!?! R0J0hound you crazy!

crazy awesome!

I think a version of this will probably end up in the game I'm working on..

So thank you!

R0J0hound You really amaze me!, i didn't know dogs in a suit were really good at Construct 2.

Yeah I was thinking about Raycasting as well last night...using raycasting might also give you a way to determine the placement of light glows...

but yeah i tweaked this a little more..but R0j0hound thats awesome..well done!

if you want to see my new Updated Version of my older non math attempt below with WebGL Radial Blur and other tweaks...still not perfect but could be worked on

https://www.dropbox.com/s/a0qdu5tygt2gaf4/RoomLight%20update%203.capx?dl=0

and of course we are still using really basic graphics here Id love to see a fancy version with a full proper light sphere properly alpha blended

and all soft edges with light faded grunge fx..

or maybe just this of course ;P

https://www.dropbox.com/s/2mudv2p4n5pt4w3/The_Lord_of_the_Rings_Online_Shadows_of_Angmar___Eye_of_Sauron.png?dl=0

and Yeah and BOIDS!!! flocking bugs flying infront of it to distract the player from how truly lowbudget this FX is haha

Thats what Id do

next version will have flying moths in front of it I promise

Well I post my attempt anyway even when it's unfinished. If nothing else then just to show one more method. Didn't add any proper 3d projection and the whole thing only currently works on right side.

Katala ...thats awesome

The good thing about 'unfinished' things is that are full of great new ideas and inspiration for new ways to do things

even the world is in a state of perpetual 'unfinished-ness'

thats what makes it so beautiful

R0J0hound

Your example is absolutly great!

But i think, it does not look like an light, more like an huge mouse-controlled waterdrop