How to add zoom in on a First Person Shooter game

Help & Support
,
1

https://playcanvas.com/editor/code/964222?tabs=95655154
I’m making a first-person shooter game and I want to have the player be able to zoom in with right-click, and upon zooming in, the crosshair changes as well. I want to know what the most efficient way for me to achieve this is and would appreciate it if I could get help.

2

Zoom:
-The easiest way to achieve zoom is to change the camera FoV according to your needs. If you want to make it ‘realistic’ you could decrease FoV slowly, every X milliseconds, in SetInterval method until it reaches your needed value. Also, you could move camera a little bit forward but that depends on you.

Crosshair:
-There are different ways to do this… If the size of the crosshair is equal or less than 128px:128px you could just change the cursor style (if it is on pc’s, don’t think that works on touch). Other way is to make a image element and assign crosshair to it and it would move based on mouse position (this one is much harder to achieve since you need to do some math). Other way is to make crosshair in the middle of the screen on 2d element and it would move with the camera movement (this one is the easiest, imagine Counter Strike).

3 Likes
3

Do you know how to access the FoV in the code? I haven’t found anyway to do it yet and it’s the main reason I’m stuck. Thank you.

4

Hi @Glast! I think that’s something like below.

cameraEntity.camera.fov = 10;
2 Likes
5

What Albertos* said.

Remember that you need to find the camera entity if your script is not located inside the camera entity. There are multible ways.

Easiest - if you changed camera name…write how you have named it.

this.app.root.findByName('Camera').camera.fov

Easy - assign a tag ‘camera’ to camera object

this.app.root.findByTag('camera')[0].camera.fov

There are… many, many, many more ways but figure them as you learn. :grin:

2 Likes
6

Thank you both, I’ll try these out and get back to you regarding my success or lack thereof.

7

What did Leonidas say?

8

Of, sorry, I meant what you said. Really sorry @Albertos. Fixed it

9

Haha no problem, I like to tease. :smiling_imp:

1 Like
10

Hehe, I can just imagine other moderators “Albertos…for the last time, stop teasing people” and you going “That was the last time, I swear :smiling_imp:”.

:stuck_out_tongue:

1 Like
11

Haha yes, I’m afraid something like that can happen! :innocent:

2 Likes
12

It worked, thanks for your help. I’d like to also get help with how to change the crosshair upon zooming in if possible.

13

Well, that depends on how you want it to behave. I am assuming that crosshair will just be fixed in the middle of the screen since it’s a 3d game.

Just make a 2d screen entity, inside create a new Image Element and put a texture to image element.

14

https://playcanvas.com/editor/scene/1487878
PlayCanvas | HTML5 Game Engine (line 150 - 162)
So this is what I have so far regarding changing the crosshair upon zooming in, but it isn’t working. I keep getting an error. Do you know what the issue is or how to fix it? Thank you for your help.

15

Wait sorry for the bother, I’ve figured it out! xD

2 Likes