babylon.js: Drawing a crosshair

[realizer]

Hi guys,

I am developing a html5 shooter with babylon.js. How can I draw a crosshair?

What I tried:

- crosshair via div, but it disappears in full-screen-mode

- drawing it with the nativ canvas function (canvas.getContext("2d"), moveTo, lineTo, ...), but I get some errors, which make sense, because I'm in webGL mode and not in a 2d  context).

 

Do you have any soultions I could try?

 

Thx

[gryff]

Well a couple of options that might work if it is a fps game (making the assumption that there will be a gun and arm(s) as well)

 

Create a plane with a crosshairs graphic ( a.png file with most of it transparent). Parent the plane to the camera. Adjust scale of the plane and distance from camera to your liking.

 

Create a simple piece of geometry(mesh) in blender (or whatever you use to model ) to represent the cross hair, import it with gun/arms, and parent that to the camera

 

cheers, gryff

[Artem]

How about a simple sprite in front of a camera which its parent?

[realizer]

Ok, thanks, that sounds sensible^^ But how can I set sprites or planes in front of the camera?

[Artem]

Sort of this: 

function CrosshairInFrontOfCamera(crosshair, camera, distanceFromCamera, crosshairType) {        crosshair.parent = camera;        crosshair.position = camera.position.add(new BABYLON.Vector3(0, 0, distanceFromCamera)); // distance should be more than 0, of course        crosshair.cellIndex = crosshairType;}CrossHairInFrontOfCamera(YourCrosshairVarNameHere, YourCameraVarNameHere, AnyDistanceYouLikeHere, ChooseYourCrosshairHere);

I didn't tried it, but it should work just fine Good luck, realizer!

Edit:

That's just a thought though, there's always some better ways to do it. Added 'crosshairType' to choose from different crosshairs in a single 'png' file (same way as you use animations for sprites, but pick a single frame of it instead).

[realizer]

Ok, thanks, I'll try it soon

[realizer]

Ok, it works, but it doesn't move, when you move the camera. Are there some simple methods or do i have to code it by myself with the sprite position and the cameraDirection?