Jump to content

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


Recommended Posts

Hi jahow, thanks again! I think that the bullets should be shot in the direction of the plane is in, so in the direction of the cross (for now don't take in consideration the cirle). I would represent the behaviour of a plane (like in the video). I think that the bullets should be shot in the direction of the plane is in, but if you think that the bullets should be shot in another direction to better represent the behaviour on the video, please tell me (maybe I'm wrong):)

Instead for what concern the being out of topic, is a problem if I open a new topic like you suggested?

Thanks a lot for all,


Link to comment
Share on other sites

Okay, easy then: http://www.babylonjs-playground.com/#2FGXFH#1


What I did:


1/ Transformed the (0,0,1) vector (i.e. the "front" direction) in the plane's frame of reference, with this:

var direction = BABYLON.Vector3.TransformNormal(new BABYLON.Vector3(0, 0, 1), player.getWorldMatrix());

2/ Gave the bullet the same rotation values than the plane, with this:

bullet.rotationQuaternion = player.rotationQuaternion;

3/ Adjusted the bullet appearance (stretched sphere with emissive color) & sped up the bullets a bit because I though it would look cool (I hope you're OK with it)


I think shooting in the true direction of the plane is nice, and easier to code. What may be even better though is another smaller, "further" crosshair to help the player guess where his bullets are going to fly.

Link to comment
Share on other sites

Hi guys! Hi jahow :D You are my hero. That's exacly what I need !  Now I'm going to understand how to solve the last issue (the crosshair to help the player guess where his bullets are going to fly). The ideal, is that the bullets go where exactly is the crosshair but I think that is difficult to understand what I mean (and also more more difficult to realize XD); for better understand what I mean try this (if you want :D) : http://www.babylonjs-playground.com/#2FGXFH#2 when the playground is load (I changed the airspeed to 0), try to shot at one of the cube on the middle and you will see that the bullets go too hight respect the crosshair (I think that the bullets should arrive where the crosshair is).I don't know if it's a problem related to the camera or something else. I try to make some tests, and after this problem is solved, probably I open a new topic (so in this way there is something that work at the beginning:D ). Again thanks for your time,


Link to comment
Share on other sites



Okay, I've thought this through, and our first method for placing the crosshair on the screen was not right. The crosshair should be where the bullets will end up if they go very far in the distance. As such, I've changed the computation of the crosshair position: http://www.babylonjs-playground.com/#2FGXFH#6


What I did was project an arbitrary "far away" vector (0, 0, 10) with the current camera projection matrix, which in turn gives me this point's position on screen. Easy :) Now the crosshair makes it easier to shoot at stuff.


But you'll notice that now, the plane does not react very well to mouse movement. Sometimes it is rotated so much that the crosshair isn't in the screen anymore. So we need to rewrite the code that moves the plan according to mouse position...!


Ideally, the crosshair should try to place itself in the mouse "circle" cursor (but this is just a suggestion). I'll let you have a shot at this first ;) (to be honest I'm not sure how to do it so I'm kinda playing for time).

Link to comment
Share on other sites

hi !

Yeah your solution it's amazing :D I try to follow your suggestion but I think I don't have enough skills for now; so I make some changes (I deleted the other camera) and choose another solution, that is the easier, the fastest and maybe not the best (isn't it? ) on my opinion ( I tried to reproduce something similar to that video https://www.youtube.com/watch?v=pdSbGuxC2x4).

So here is what I've done : http://www.babylonjs-playground.com/#1IP9RN#1 . I know that it's very different to your suggestion, but I think that is enough for me now (but if you have also the solution I will appreciate a lot :D ). Based on what I've done,  the "main" problem is that when you get closer to the box, or the ground, the crosshair will be hidden or go behind the mesh (as it should be). For what concern the crosshair that should try to place itselft in the circle, I'm still working on it.

Again, thanks a lot jahow for your time.


Link to comment
Share on other sites

Hey DellaFree,


Your solution works well! I like it, simple and precise. You can simply put the crosshair mesh in another rendering group, to make sure that it is always drawn after the environment, like so:

circle.renderingGroupId = 1;crosshair.renderingGroupId = 1;


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...