[Mouse Pointer Lock] Hello fellow Scratchers…
and what do you know about mouse-pointer-lock? And why is it something we should care about?
After all, a mouse is a mouse, and we can happily click buttons, draw pictures, and play games!
But… all these mouse movements are restricted to the size of our application window.
So, along comes “Mouse Pointer-Lock”. As the name suggests, in this control scheme,
the pointer is locked in place on the screen, and then it’s up to us
to choose what the mouse now does. Often we’d choose it to pan the background,
like this. The benefit is that we are completely free of any limitation on window size since the
pointer is no longer moving, and we can simply continue dragging… forever!
This can be especially useful for maps, drawing apps, and… to control 3d games!
You see, with Pointer-Lock enabled, we can finally keep our crosshair central,
and freely rotate our view with the mouse without ever hitting the boundaries of the screen.
The sad news then… Scratch doesn’t support this mode! At least, not the
vanilla Scratch that we all know and love. But, I’m sure many of you have already
heard of GarboMuffin, and his super impressive Scratch Mod named TurboWarp?
[TurboWarp – Pointer Lock Experiment] Yes, in TurboWarp, we can load up our favourite
Scratch Projects, and run them so, so much faster that in vanilla Scratch… Gosh, it’s just a joy.
But, it doesn’t stop there, GarboMuffin also provides a special version specifically setup
with Pointer Lock enabled!! Woohoo 😊 To try this out for yourself,
I’ve provided a link in the description under this video. The site is found at
https://experiments.turbowarp.org/pointerlock/ - A bit of a mouthful!
So this looks like Scratch right? But, right away you’ll find the mouse in the
running projects behaves very differently. To test it out, make a forever loop that sends
the sprite to the mouse pointer, and click to make the mouse x & y visible on the screen.
So after clicking the green flag, we have to click again on the stage to activate the mouse.
First thing to note is the mouse pointer has disappeared! And that’s fair enough,
we’re replacing it with a crosshair in the game anyhow. To bring back the mouse cursor,
we just need to remember to hit the escape key. If we move the mouse slowly to the left… ooh it
jiggles a lot. And to the right. Interesting! We don’t get very far, and as soon as we stop moving
it snaps back to the centre. [Mouse Speed x & Speed y]
So, rather than mouse x & y representing the position of the mouse, they are now
reporting the distance that the mouse has moved since the last screen refresh.
We can test this theory by changing the position of the sprite by mouse x & mouse y. Note we
are changing, not setting the position. And look at this! Now it moves around just
like a normal mouse would, but see that the mouse x & y is still reporting the movement,
not a position. The important thing to note here is that we have the best of both worlds,
we can pick and choose how we make use of mouse now – I mean, wow, I have a Dango mouse cursor!
How cool is that… [Raycaster]
Well then, shall we try this out with our awesome 3d raycaster? To load your projects
into TurboWarp, they either need to be shared on Scratch, or we have to
Save the project as a file on our computer. Then, in TurboWarp, we can use File / “Load
from your computer”. Select our file, and we are ready to go.
In fact the game, sort of works already, only left and right movement is super sluggish, and up and
down is just glitchy. And this is to be expected. [Pointer Lock Detector]
Also, do notice the crosshair is jumping around all over the place! So, lets start there.
Click into the Crosshair sprite. We want to fix this in place, but ONLY if we know we are
running the project with POINTER LOCK enabled. Luckily we can detect this.
Make a new variable “POINTER LOCK, for all sprites”,
and set it to. And we check whether mouse x AND mouse y both equal 0. That means POINTER LOCK will
be true only if the mouse is perfectly centred on the screen, when the green flag is clicked.
So, to fix the crosshair in place, we just want to stop it following
the mouse. Surround the forever loop with an IF pointer lock = 0. That’s no pointer lock.
We can test that out and confirm that Pointer Lock is true. And consequently, the crosshair no longer
moves around with our mouse. That is looking good. So let’s take a look at the player rotation.
[Player Rotation] Click back in the player
sprite, find our “player tick” script. We are going to have two modes of control,
so surround the Get Mouse Turn with an IF ELSE block like this.
The default, original control scheme is used when POINTER LOCK is again 0.
But now, when pointer lock is enabled, we instead set turn directly to, Now remember,
when the pointer is locked, mouse x returns how far the mouse has moved… which is exactly
what we want to turn by, only we divide by 4 as otherwise it’s a little too fast.
So I’m expecting this to be pretty awesome… Except what?!? Well, something gone very
wrong here. We’re always turning left! I can’t understand why that would be… unless… Oh man,
A turn by block has suspiciously appeared at the bottom of my script… I bet it just accidentally
attached itself – That’s the danger of leaving blocks floating around on your Scripting Area.
Oh well… here we go! Yes! I can move left and right, and the turn
is perfectly synched to my mouse movements without any weird glidey after effect. And,
we can turn right… and keep turning, and keep turning without ever hitting the edge of the
screen. It’s awesome 😊 [Panning Up and Down]
Well then, guess we should also modify the up and down movements in the same vein.
We’ll need to reposition this set CAMERA Y block, so it only works like this when POINTER LOCK = 0.
But, when POINTER LOCK is enabled, we need to change CAMERA Y by mouse y instead.
I find a good speed of movement can be got by multiplying is by “1.5”. But we shouldn’t also
forget to multiply the value by delta. This was our frame rate smoothing value so if the game
runs slower or faster, we allow for that here. Great – Run the project and see what you think.
And I’ve got to tell you, this is the bees knees! It’s exactly what
we want our game controls to feel like. So responsive and immediate in all directions.
The only gripe I have is that we now need to ensure we limit how far we turn up and
down. This was one place our previously mouse limits actually helped us out.
[Limiting Up and Down panning] It’s a quick job.
IF the camera Y becomes greater than 180 (that’s the previous maximum mouse y).
Then set CAMERA Y back to 180. Else, IF camera Y is less than
-180. Do the same, setting CAMERA Y back to -180. Wonderful. Assuming we didn’t do anything wrong,
then we can give that a full test out. It’s really quite something when you remember that
this is even running in Scratch. And because this is TurboWarp, you’ll find it also runs super well
at better RES levels without breaking a sweat. [Outro]
So a huge shoutout to GarboMuffin for making this all possible. If you want to bring your
edited project back into Scratch, just save it here, and in Scratch,
use the File / Load from your computer. Once your project is officially shared,
it will work in both Scratch and TurboWarp, with, or without ‘mouse lock’ enabled. Of course,
we can always hope that one day Scratch will officially support this awesome feature,
but until then, TurboWarp is the place to go! And on that note, that is the end of this
little video – Please don’t forget to smash that like button if you found this useful,
and want more exciting Scratch topics like this covering. It’s been fun venturing a
little further outside our normal realm. Do subscribe to the channel so as not to miss my
next exciting video the moment it comes out – Toggle the bell icon to make absolutely sure!
With that I wish you all the best for the week ahead, and Scratch on Guys!