0 Favourites

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

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • R0J0hound

    Your example is absolutly great!

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

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)