[SOLVED] Drawing a raycast on the screen

Help & Support
21

If that’s not correct you also don’t shoot in the right direction. You have to check your to variable of the raycast. I think it has to do with the - 37 that you use.

22

Well, i kinda fixed it

image
image1502×1126 162 KB

23

I really don’t know where to go from now, I’ve tried a lot and nothing really works, i can’t raise the line

24

Where is screen defined in the update function?

image
image2416×104 50.1 KB

25

I guess it’s not, so how would i define it to fix this?

26

Where is the original code that you got this from?

27

@wasd1234’s fps game script, then i modified it

28

Do you have a link to the original FPS game script?

29

Yes, here https://playcanvas.com/editor/project/734947

30

Looks like that their project also has the same issue. screen is not defined in the scope of the function.

So now, you have to go back and think about what values you want to be passing into the screenToWorld function. What does screen.width represent? Where would you find this information via the PlayCanvas API?

Edit: actually, scratch all that. I’m wrong. screen is a property of the window object so the issue is something else JavaScript Window Screen

31

Is there a way to fix the rotation or the direction the raycast goes?

32

If not i can try to use another script i have

33

Do you have a link to the project?

34

which one? the current project of mine or the alternate?

35

The one you are trying to fix

36

OK, https://playcanvas.com/editor/scene/1233246

37

  • You have to set the RaycastEndPoint on the right position, otherwise your camera will go crazy.

    image

  • To get the middle of the screen as end point for your raycast, you can use the code below.

    var to = this.camera.camera.screenToWorld(window.innerWidth / 2, window.innerHeight / 2, this.range);

  • The range for a color is between 0 and 1. The last value is for the opacity. Below some examples that I use in my game.

    var colorWhite = new pc.Color(1, 1, 1, 0.5);
var colorBlack = new pc.Color(0, 0, 0, 0.5);
var colorGrey = new pc.Color(0.5, 0.5, 0.5, 0.5);
var colorGreen = new pc.Color(0.5, 0.8, 0, 0.5);
var colorYellow = new pc.Color(1, 0.9, 0, 0.5);
var colorRed = new pc.Color(1, 0.1, 0, 0.5);
var colorBlue = new pc.Color(0.2, 0.4, 0.6, 0.5);
1 Like
38

What game?

39

It’s a private project, sorry. Please let us know if you have achieved the desired result.

1 Like
40

image
image1138×964 86.8 KB 

var DrawRay = pc.createScript('drawRay');

// initialize code called once per entity
DrawRay.prototype.initialize = function() {
    this.cameraEntity = this.app.root.findByTag('maincamera')[0];
};

// update code called every frame
DrawRay.prototype.postUpdate = function(dt) {
    var start = this.entity.getPosition();
    var target = this.cameraEntity.camera.screenToWorld(this.app.graphicsDevice.width/2, this.app.graphicsDevice.height/2, 30);
    
    this.app.renderLine(start, target, pc.Color.RED);
};

https://playcanvas.com/editor/scene/1240320

The wrong values were used to get the size of the render window in the browser.

Using the API to get the Width and Height instead: https://developer.playcanvas.com/en/api/pc.GraphicsDevice.html#width

1 Like