0
\$\begingroup\$

So, when I use

camera.position.x = player.x; 
camera.position.y = player.y;

to set the center of camera to my sprite, the code doesn't work as intended to. It's slightly hard to explain so i made this video(https://youtu.be/afCamx_wB_4) in which I show how it should work and the difference/problem when using camera.position

The code related to this is:

function setup() {
  createCanvas(displayWidth,displayHeight);
  level = new Level;
  player = createSprite(100,100,10,10);
  edge = createEdgeSprites();
  player.speed = 5;
}
function draw() {
  background(255);  
  level.play();
  player.rotation = Math.atan2(mouseY-player.y, mouseX-player.x) * 180/PI;
  drawSprites();
}
player.collide(edge); //this part is from level.play()
var run = mouseX - player.x;
var rise = mouseY - player.y;
var length = sqrt((rise*rise) + (run*run));
var unitX = run / length;
var unitY = rise / length;
player.x += unitX * player.speed;
player.y += unitY * player.speed;

Also if you notice, when using camera.position, the vibration happens at specific distance of the sprite from the mouse, and the patter is that the distance is 0 right at the center of the canvas and keeps increasing as you move away from the center.

\$\endgroup\$
  • 1
    \$\begingroup\$ One of the goals of this site (and Stack Overflow/Exchange as a whole) is to limit each question/thread to one (1) issue/topic per question/thread. You should therefore edit your question, remove the second question (about the vibrating bug) and focus this question/thread on the first question/topic, which is about getting an object to properly follow the mouse pointer. You can then ask a new question regarding the vibrating bug and get answer(s) for it there. \$\endgroup\$ – Daniel_1985 Mar 10 at 16:19
  • \$\begingroup\$ As for the issue regarding the mouse-follow mechanic - it looks like the issue is caused by world space versus screen space. The object that's supposed to move towards the mouse pointer has a world position (relative to the camera) and the mouse pointer has a position relative to the screen, where (0, 0) is usually in the upper left corner of the window and the mouse pointer's max position is (window width, window height). While moving the object towards the mouse pointer, take the camera position into the equation, so (mouse position + camera position) = mouse position in world space. \$\endgroup\$ – Daniel_1985 Mar 10 at 16:26
  • \$\begingroup\$ could you please tell how to implement what you said? i am just using mouseX and mouseY and don't know how to figure out the 2 different mouse position. sorry if this is sounding very easy and so stupid, i'm just a beginner so this is a little confusing, sorry. \$\endgroup\$ – Nirabhra Mar 11 at 13:13
0
\$\begingroup\$

To be able to get an object to properly follow the mouse pointer and at the same time have a game world that's bigger than 1 screen, by having a camera that scroll through the game world, you'll need to include the camera's position/offset when the vector between an object and the mouse position is to be calculated.

To calculate the mouse' X-position in world space (i.e, its X-position in the game world, relative to the camera), you add the mouse' X-position and the camera's X-position together. The same addition is to be made when the mouse' Y-position in world space should be calculated but the mouse' Y-position and the camera's Y-position is added together instead.

I will make the asumption that (0, 0) is in the upper left corner of the window and that the lower right corner of the window is (window width, window height).

Example:

  • If the mouse position is (200, 200) and the camera's position is (0, 0), which means the camera hasn't scrolled anything yet, then the calculated mouse world position will be (200, 200).
  • If the mouse position is (200, 200) and the camera's position is (150, 150), which means the camera has scrolled a bit to the right and a bit down, then the calculated mouse world position will be (350, 350).

I'm not very experienced in javascript so the code example below will be a bit pseudo code, which you probably need to adapt to work in your javascript code.

camera.position.x = player.x;
camera.position.y = player.y;

/*
The mouse position in local/screen space
This is a position between (0, 0) and (window width, window height)
*/
var mouseX = GetMousePosition().x;
var mouseY = GetMousePosition().y;

/*
The mouse position in world space
This is a position between
(0, 0) and (mouseX + camera.position.x, mouseY + camera.position.y)
*/
var mouseXWorld = mouseX + camera.position.x;
var mouseYWorld = mouseY + camera.position.y;

var run     = mouseXWorld - player.x;
var rise    = mouseYWorld - player.y;
var length  = sqrt((rise * rise) + (run * run));
var unitX   = run   / length;
var unitY   = rise  / length;

player.x += unitX * player.speed;
player.y += unitY * player.speed;

By doing the calculations above, the camera will follow the player when the player moves and the player will move towards the mouse pointer.

| improve this answer | |
\$\endgroup\$
  • \$\begingroup\$ there's some problem with the code that as soon as i use mouseYWorld the it starts returning the value of camera.position.y as 100 as the first value and then infinitely starts returning NaN also i had removed the mouseX = getmouseposition().x and same for var mouseY since mouseX and mouseY don't require to be defined and neither is any function such as GetMousePosition() in the libraries i'm using. I am unable to firgure out the cause. It's very surprising since when i'm doing console.log(mouseYWorld) it's working fine but as soon as i uncomment var rise = ... it returns NaN. \$\endgroup\$ – Nirabhra Mar 13 at 6:42
  • \$\begingroup\$ Sadly I'm not very experienced in javascript (like I wrote in my answer) but it is indeed very weird that you get a NaN value from the camera position. Please check the individual values before calculations are being made, check the camera position, the player position, the mouse position etc to make sure they are valid. \$\endgroup\$ – Daniel_1985 Mar 13 at 15:58
  • \$\begingroup\$ yes, i had checked individual values, everything works fine till the time i use any thing related to camera.position.y but no problem for camera.position.x \$\endgroup\$ – Nirabhra Mar 16 at 8:11
  • \$\begingroup\$ nevermind i found the way to fix it! i just had to subtract diplaywidth/2 and display height/2 from both the values. thanks a lot! \$\endgroup\$ – Nirabhra Mar 16 at 8:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.