How to make gunsight that follows the cursor only inside an area, using followCamera?

[DellaFree]

Hi guys, my studying continues I make this playground http://www.babylonjs-playground.com/#28QOAU and I would ask you some questions :

- how can I make the gunsight to remain in front of the object even when it rotates around the y axis (pressing the Q and E keys)? I 've just made it in front of the object only when it moves forward and backwards , even if you use the mouse wheel ( to enable it, I think you should get the zip file);

- I would move the gunsight with my mouse, but only inside an area that  I have drawn around the gunsight; how can I do it?

Again and again, thanks for all your support and patience;

Cheers

[iiceman]

hmm... maybe something like that: http://www.babylonjs-playground.com/#28QOAU#2

 

but somehow I didn't manage to position the gunsight. it worked with the sphere, but didnt work with the gunsight for me. maybe somebody else has a better idea anyway

[JCPalmer]

I would not implement an FPS with gun sight with a single camera.  I would have a free camera that moved around the scene, or one of the others if you have the hardware, gamepad or touch screen for virtual joysticks.

 

Have another orthographic camera with a very high layer mask, e.g. 0x10000000, that just showed the the sight straight on, & never moved. The sight meshes would also have a matching layer mask, so it could only ever be seen from the sight camera.  Use a emissive material to avoid lighting the sight meshes.

 

That high a mask also means it will never see any of the scene meshes.

[iiceman]

Can you show us in a playground?

[JCPalmer]

Done.  I borrowed a little from the playgrounds above.  I did better than make a playground though.  I added an exmaple to my layermask documentation. Just copy & paste into any scene.

 

I made it, but it has just been sitting on my system for months now.  With the dev state of the 2.0 Doc site, I never got my ID working on the old site.

 

I suggested a new table of contents organization that I thought people liked.  The new Documentation repository does not seem to have this.  Do not know where to put it, so to GoogleDrive it goes.  If someone can do better, please post a link.  Googledrive has no viewer for a markup file.

 

enjoy!  https://drive.google.com/file/d/0B6-s6ZjHyEwUcldMaXhaWGQ4eWc/view?usp=sharing

[Wingnut]

Hi guys.  Jc, I hope you don't mind, but I published it.  Do you want your name at the top or bottom, as the author?  Maybe a link to your forum character?  I think it should have that, so people know who to come-to about edits, appends, and questions. 

 

http://babylondoc.azurewebsites.net/page.php?p=25363

 

(in Tutorials - More Advanced Features)

 

BabylonDocs didn't like the '&' so I changed those, and a couple other little tiny tweaks shown to me by the spellchecker... but other than that, I left it alone.  It looks great.  Let me know if you want the title changed (not too long, please)... or if you want edits done.... no problem.

 

This doc looks nice, and is very informative!  Thanks Jc!   Hold onto your copy, though, if you would. 

 

You and everyone on the forum are always welcome to send me on BabylonDocs missions.  That's what curators do, eh? 

 

Sometimes I get scared on the big edits,  but installing your excellent doc... not a problem and completely my pleasure.  Ask for edits and appends at will, always my pleasure.  And, of course, let me know if you DON'T want it published, but count on me to try to convince you otherwise.    Party on!

[JCPalmer]

No, but I have started making adjusting the example to make it more commercial quality.  Switched out CreateCube() first with CreatePlane() to get rid of the never seen faces, & now trying CreateDashedLines() for the outer box.  If and when I'll post here.

 

Did notice a problem with that page.  The example is cut-off.  Is this just me ?  I had all kinds of problems looking at document on an iPad, but this is a desktop.  See

[JCPalmer]

Well, hit the refresh button & the whole thing now displays.  This site can be useless at times.

[Wingnut]

Ok, thanks Jc... yeah, let me or others know if/when edits need to be made.

 

And, yep, we have seen the chopped-document many times before.  I think folks are still studying it.

 

Also, keep in mind that you can build your TOC .mkd doc... and all sub-docs... and we'll put it somewhere in BD.  This gives it a url, and that URL could be bookmarked by many... as THEIR interface to BD.  Again, I would be glad to publish it, and help keep it fresh.

 

But you need to come onboard, Jc.  We need you at BD.  Chisel your way in, if you need-to.

[DellaFree]

Hi guys I apologize for the delay; first thanks to @iiceman , @JCPalmer , @Wingnut for your time and answers; they really helped me. I modify the playground http://www.babylonjs-playground.com/#28QOAU#3 but I have some other questions about it:

- when I move the mouse , the "airplane" follows it (rotates and transaltes), but when I stop moving the mouse or the mouse is in the left/rightmost part of the screen, the ariplane stops following the mouse (as it sould be); so how can I make the airplane to continue the rotation/translation in order the follow the mouse position?And how can I replay the mouse pointer with the cross in the middle of the screen and move it?

 

Thanks again and again guys, everyday, thank to you, I'm learning some new interesting things

Cheers

 

p.s

For better understanding the kind of camera I want to realize (even if i think is out of my skills, but I don't matter, I want to try the same ), may I post a youtube video where it is used (if it's not a problem)?

[DellaFree]

hi guys I modify the playground http://www.babylonjs-playground.com/#28QOAU#4 but I think that this isn't the best way to achieve what I would achieve (I wuold realize a camera similar to the camera of the War Game Aircraft - you can search on youtube "War Game Flight", the first result). So if you have some examples , materials or tips for let me better understand the  arguments needed for realize that (more or less), I will appreciate a lot. I hope I don't bother you with this kind of question (if it's a problem just let me know )

Again thanks for all guys

cheers

[jahow]

Hi DellaFree,

 

So, here is what I came up with, based on your work: http://www.babylonjs-playground.com/#28QOAU#5

 

I removed the cosmetic left/right bobbing, so as not to disturb us from the actual controls.

 

I think your problem was that a part of your plane's control is relative and another part is absolute. Relative control is for example a joystick (put it in one direction and the plane keeps spinning), and absolute control is for example a mouse.

 

Now, your plane has:

- a relative yaw control: if you put your mouse left of the plane, the plane "turns" (yaw) left infinitely

- absolute roll and pitch: if you put your mouse above your plane, it will lift its nose up to a certain point (pitch)

 

I was able to obtain some good result with the use of the rotate() method, and specifying whether the transformation was in local or world space. Also, for absolute movements, I had to keep track of the current input level (the rollLevel and pitchLevel vars) in order to have an absolute control type.

 

I suggest you take a look at JohnK's tutorial on the matter: http://babylondoc.azurewebsites.net/page.php?p=25110

And of course the official documentation: http://babylondoc.azurewebsites.net/page.php?p=22411

 

Didn't look into the crosshair/visor issue (yet)!

 

Nota: for cosmetic effects (plane slightly bobbing etc.) I suggest attaching the plane to an "actual plane position" node, so this node will be only moved by user input and will be used for actual gameplay, where as the plane mesh can be slightly moved/rotated to improve immersion. You could for example have the plane shake more and more as it falls down and pick up speed

[DellaFree]

Hi everybody

Thanks @jahow for your replay ! You centered exacly what I want to make. Before your answer, I try to solve the problem by myselft and I made this playgroud (I do not use mouse but the numpad) http://www.babylonjs-playground.com/#28QOAU#7, that is far for yours XD.I will update with your solution and suggestions (it's simply great!). Also the materials you linked, are really interesting (I had not yet read); now I'm going to make some tests and try to understand better So, after I feel confortable with this argument, the next step is to make the visor, in order to click and pick some mesh on the ground. So have any idea on how to realize it? In your opinion, it better to use the mouse and pick a mesh on click bottom, or use the numpad and set a key for picking a mesh? Any advise will be appreciate (like the other you have just suggested). Thanks again, every day I like this forum more and more.

Cheers

[JCPalmer]

A little busy with Blender right now.  Did update gunsight off latest  http://www.babylonjs-playground.com/#28QOAU#8.  Changed from CreateBox to CreatePlane, to decrease unseen vertices.  Also the material was wrong should be emissive, not ambient.  Corners still not perfect, but that's your problem.

 

Performance wise, you might also want to build a meshes[] for your airplane, get rid of the parenting, merge into one mesh, & assign material to combined mesh, like gun sight.  DO NOT freezeWorldMatrix() it.  You can only do this if position, rotation, & scale will not change anymore.  This will reduce your meshes, draw count, and Mesh selection overhead.

[jahow]

Regarding controls: I think you should be able to have all your control scheme on the mouse: handle plane handling with mouse movement and fire when clicked. You could have a kind of layered crosshair, like in console shooters: http://static.giantbomb.com/uploads/square_small/0/6529/655648-starfox64.gif

 

For the visor, I think a good solution would be to use sprites on top of everything else, in screen space. What I mean is that visor sprites (crosshair etc.) shouldn't need to be in the actual 3D scene. Having a separate camera with a specific projection to render these objects on screen would probably be doable, but I'm not 100% sure (need to do some tests).

 

Once you can render sprites in screenspace, you just need to project the plane's aim into a plane a bit further in front of it, and it will give you the position of the visor. I'm thinking something like this: 

[DellaFree]

Hi everybody Again thanks @jahow and @JCPalmer for your time and advice, I really appreciate them. Yes, I was inspired exactly by that video. Initially I thought it was easy to make your solution , but when I started trying, I realized that I still have some problems . I loaded a sprite , and a second camera ( Freecamera ) , but I don't know, at least, how to center the sprite . If I move the aircraft ( with the W key - I commented on the line 135 , for the translatio to the Z axis , for testing ) , the sprite is not fixed (I think that sprites do not support layermask). why the cross in the middle is fixed , and the sprite not? Here is the playground : http://www.babylonjs-playground.com/#28QOAU#12 I spent all day trying to find a solution, but nothing I also made another playground (horrible) trying to find an alternative (I failed again XD) http://www.babylonjs-playground.com/#28QOAU#13 There are a lot of things that I don't understand very well, I think I'm going too fast. Anyway thanks again for the help really.

Cheers

[jahow]

Hey DellaFree!

 

I made some progress. Woo! This is indeed challenging. Here is the result: http://www.babylonjs-playground.com/#28QOAU#18

 

Okay, first: you thought very well when using the layerMask property for your ortho camera; it was almost perfect, except sprite managers don't handle this feature. I've made the circle sprite into an actual plane mesh. You had that right at 99%. Also there's something off with your mouse position code, but that may related to the PG and disappear on a dedicated page. Please note that the ortho camera's properties would need to be actually computed based on the render viewport, but that can be done later.

 

Now, on displaying the crosshair. This was the tricky part.

 

What we need: the "aim" vector (0, 0, 1) of the plane, expressed in the frame of reference of the camera.

 

But... how do I switch frames of reference? Easy, use Vector3.TransformCoordinates. Documentation is here: http://doc.babylonjs.com/page.php?p=22411

Also, you'll need to obtain the transformation matrix for that frame of reference. In our current example, we only need the rotations.

 

Let's do a sum up of our current frames of reference in the scene:

 

- scene

- plane -> where the aim vector is currently expressed

- camera -> where we need to express the aim vector

 

What I did was:

1. express the aim vector in the scene frame of reference, by using the plane rotation matrix

2. express the resulting vector in the camera frame of reference, by using the camera rotation matrix inverse

 

I realize this may not be 100% clear, doing my best Also maybe the documentation should expose this sort of operation more clearly. Anyway, hope you like the result!

[DellaFree]

Hi @jahow. Officially your are my hero I love your solution. I think this is a very, very , very difficult challenge for me. Again thanks a lot for your tips and suggestions; I think I will spent all the weekend and the nexts weeks trying to understand better the stuff related to the rotation, TransformCoordinates and so on. Regarding your solution, it works fine (I get the zip and tested it and , for make it works fine you shoul change the line 145 and delete the moltiplication by 2). I make anothers test but I encountered another "problem", on which I will work on (and I hope to resolve it) the playground is : http://www.babylonjs-playground.com/#28QOAU#19 . I add some meshes and try to pick with mouse, or better, with the circle, but the mesh that I picked is always the circle (as it should be); so the problem is how to pick the mesh pointed by the circle (the mesh behind the circle)? I haven't spent yet a lot of time on it.

Really thanks for your help and time.

Cheers

[jahow]

http://www.babylonjs-playground.com/#28QOAU#20

 

I used the scene.cameraToUseForPointers property, so that the picking is done with the 3D camera (and not the ortho one). But to be honest you should find a way to shoot bullets from the plane and check for intersections between bullets and other meshes there are plenty of threads regarding mesh intersection on the forum.

 

To be honest this PG is getting more and more fun

[jerome]

the PG power !!!

Someone just submits a programatic problem and we finally get a full game   

[jahow]

That's exactly what's going to happen!!

[Wingnut]

That little green airplane never looked SO GOOD!  Fun!  But now, I, personally, would reverse the Y mouse control. You PULL BACK on airplane controls to make the airplane climb.     154   diff = (mouse.y - player.pitchLevel) * 0.08; 

 

Nice demo. Nice work, guys.

[DellaFree]

Hi guys I'm happy that you are interested in this topic I continue to work on it, and I add some other features but some other still don't work. Here the plyaground : http://www.babylonjs-playground.com/#2FGXFH; for what concern the collision, I think that I solved it : if you fire (I know that it's difficult on that playground), after 3 time you hit a cube, it will disappear. The main thing that doesn't work, is the way in which you fire the bullets from the airplane, in particular the direction that they should follow: I try to look around and I found this topic http://www.html5gamedevs.com/topic/10702-how-to-set-the-direction-for-bullets/ but I try to modify and apply to my scene, but nothing. Also, I try to apply some physic (the line commented), but the problem remain the same: the direction of the force to apply to a bullet. So if you have any idea, I will appreciate (this challange becomes every day harder); feel free to modify the playground. Thanks a lot guys

Cheers

p.s

In your opinion,am I going out of topic? Should I open another topic for this kind of questions (or simply stop to make thousands)?

[GameMonetize]

Excellent!!!

[jahow]

Hey DellaFree,

 

What are you looking for exactly:

- bullets are shot in the direction of the mouse pointer?

- bullets are shot in the direction the plane is in?

- something else?

 

As for being out-of-topic, it may be clearer if you had a topic such as "WIP: plane shooter game" or something like that, in which you post stuff regularly to ask for ideas/help or just show off. Just look at Wingnut's "chronicles" post: there's room for others I think!