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

Get help using Construct 2

Post » Tue Oct 14, 2014 6:26 pm

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:

Image

the example is made in Photoshop.

Thank you for any help you provide!
B
21
S
6
Posts: 244
Reputation: 2,665

Post » Wed Oct 15, 2014 1:26 pm

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
When in doubt..or you are lost in a Zombie apocalypse or someone is giving you a hard time..Remember one thing..... Read the Construct 2 Manual..it will save your life.:)
B
35
S
13
G
8
Posts: 318
Reputation: 7,685

Post » Wed Oct 15, 2014 4:03 pm

@mystazsea Hey, thank you for trying to solve this.

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

RoomLight.capx



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:

Image


I'd appreciate improving the Capx if you can :)
You do not have the required permissions to view the files attached to this post.
B
21
S
6
Posts: 244
Reputation: 2,665

Post » Wed Oct 15, 2014 4:37 pm

If you would like to go really with a 3d effect I would suggest to use canvas and Bezier curve.
Image
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
B
34
S
9
G
3
Posts: 517
Reputation: 5,226

Post » Wed Oct 15, 2014 5:21 pm

@Katala Can you make a Capx with the Canvas plugin, i have no absolute idea where to start ;\
B
21
S
6
Posts: 244
Reputation: 2,665

Post » Wed Oct 15, 2014 6:19 pm

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.
B
92
S
32
G
106
Posts: 5,273
Reputation: 69,457

Post » Wed Oct 15, 2014 9:06 pm

Yeah.. well. It was more of an idea :D I just thought it might work. I post CAPX if I can figure out something.
B
34
S
9
G
3
Posts: 517
Reputation: 5,226

Post » Thu Oct 16, 2014 9:45 am

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 :D
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....:D


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
Last edited by mystazsea on Thu Oct 16, 2014 8:44 pm, edited 1 time in total.
When in doubt..or you are lost in a Zombie apocalypse or someone is giving you a hard time..Remember one thing..... Read the Construct 2 Manual..it will save your life.:)
B
35
S
13
G
8
Posts: 318
Reputation: 7,685

Post » Thu Oct 16, 2014 6:23 pm

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.
B
92
S
32
G
106
Posts: 5,273
Reputation: 69,457

Post » Thu Oct 16, 2014 6:35 pm

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!
B
86
S
43
G
71
Posts: 601
Reputation: 43,619

Next

Return to How do I....?

Who is online

Users browsing this forum: Lancifer, nahima and 16 guests