Ah I see! Well, the vcam thing was gonna be an issue when you wanted to publish the game at the end so hopefully it’ll still be useful.
As for how to make sure that the vcam doesn’t leave the screen—
I’m going to draw two rectangles. Imagine that the gray rectangle is the project size (background, the “canvas”), and that the red one is the vcam.
Now, you don’t want the vcam to leave the screen. So, this here is the lowest x value you want the vcam to reach:
^ You don’t want the vcam to go any more to the left of this, or else it’ll leave the screen
Now, notice that the x value at the left side of the project is 0. Also, look at the width of the vcam, and it’s x value.
Now, you might look at this and notice “hmmm… the x value of the vcam is equal to half the width…”
And it’s exactly that!
Since x is zero on the left side, if you add to that zero half the width of the vcam, you will get the lowest x value that you want the vcam to be while staying inside of the project!!
Now, let’s find the highest x value that the vcam can be while still being inside of the project…
Let’s also imagine this scenario… here’s how the vcam would look like if it was at the highest x value it could be while still being inside of the project.
Now let’s look at the x value at the right side, which would be the project’s width (project.width), and the x value of the vcam, and it’s width again.
Notice again, the distance from the vcam’s x value to the right side of the project is half of the vcam’s width. In other words, if you add half of the vcam’s width to it’s x value, you would get the project’s width. To put that into an equation, vcam.x + vcam.width/2 = project.width
Of course though we need to find the x value of the vcam, so you can simply solve by subtracting half the vcam’s width from the project’s width.
vcam.x = project.width - vcam.width/2;
And NOW, we have the lowest x value we want the vcam to be at: vcam.width/2
And the highest x value: project.width - vcam.width/2
You can do if statement to see if the vcam is over or under these values if you want, OR you can use another method that I prefer— say if you don’t want the vcam to go lower than the lowest value, then you can do this:
vcam.x = Math.max(vcam.width/2 , vcam.x);
^ The Math.max function will pick the highest value. In other words, if vcam.x is less than vcam.width/2, then it’ll pick vcam.width/2.
Similary, to stop the vcam from going over the highest x value, you can do
vcam.x = Math.min(project.width - vcam.width/2, vcam.x);
You can combine these two lines to stop the vcam from going higher than the highest value and lower than the lowest value like this:
vcam.x = Math.min(project.width - vcam.width/2, Math.max(vcam.width/2 , vcam.x) );
^ This might look a bit more complicated, but that’s why I tried to explain it in smaller steps and I think it’s kinda a cool way to combine multiple if statements into one line. Do let me know if you don’t understand anything though.
Also, you can probably replace all the “x” with “y” and “width” with “height” to deal with the y value of the vcam as well.
vcam.y = Math.min(project.height - vcam.height/2, Math.max(vcam.height/2 , vcam.y) );
Overall, the code should be something like this
vcam.x = Math.min(project.width - vcam.width/2, Math.max(vcam.width/2 , vcam.x) );
vcam.y = Math.min(project.height - vcam.height/2, Math.max(vcam.height/2 , vcam.y) );
