Unlock 3D Mouse Controls in Scratch! 🤩🐭 - Raycasting E8 Tutorial

Key Takeaways

foreign y Ray scratchers this is episode 8 of our raycasting series and by popular demand we are going to add Mouse control and support for looking up and down yes this is so cool making our game feel so much more immersive but this is going to be hard to code right well luckily for us no no it's not it's ridiculously straightforward looking up and down in a raycaster is just as simple as moving the entire scene up and down the hardest part of that will be catering for the otherwise static backdrop we'll get into that shortly as for the mouse the simplest control scheme is to use the mouse's position to guide our player's rotation the further right or left of the center the mouse moves the faster the player turns with a little practice we can get precise and yet smooth control of our movements but is this the best control scheme well almost I have some more advanced options we can try which I'll reveal later in this video so stay tuned dude for that okay guys are you ready let's get scratching we're gonna begin where we left off in episode seven only make sure to save this as a new copy for this is episode eight now you may have noticed as I record these videos that I'm constantly being rushed by Nanos and franks all very good but they don't half get in the way of what I'm trying to show you so we can temporarily separate off this move Block in the entity Sprite just to stop them running around for now sorry little guys but I assure you it's for the best and we'll need to remember to pop this back in again when we're done right then to work click back into the player Sprite and we'll add basic Mouse control under the player tick script follow that turn right that is clockwise block Mouse X is great as it tells us how far left or right the mouse is but the range from negative 240 to 240 is too large compared to the original turn of just three degrees so we divide it by 60. and then pop that all back together at the top here and that's it smash the green flag awesome that gives us control of the player's turns fast or slow and going for a run this makes for an Uber smooth experience granted it doesn't have the immediacy of dedicated Mouse lock more on what that is later but once you get used to it it works pretty well but once we are able to steer left and right with the mouse you do quickly start missing being able to look up and down too so that will be our next job we'll need a new variable to keep track of where we're looking name it camera Y and make it for all Sprites and we'll simply set it to the value of mouse y the plan is then to scroll the entire view up and down by this amount so click into the pen Sprite where all the drawing is done and find the draw row custom block you can see here this set Y and it's where we calculate the vertical position of each wall strip to scroll it we must offset this that is subtract camera y from the result carefully ensure the whole of this existing expression goes on the left of a new subtract block and subtract from that the new camera y variable great let's give that a run and look at this so cool you can already see it's having the desired effect on the level walls obviously we're not finished because we also need to offset these entities the enemies and stars to keep them in sync with the level the code for them is found under the stamp entity script over here currently the go to XY has left the Y as zero and now we're going to replace that with a subtract block and just drop in canva y into the right hand side that gives us negative camera y there's no need to put a zero on the left if you don't want to and that's better it's working great are we done then no not quite did you notice anything a bit off with this backdrop yeah the gradient backdrop also needs to scroll problem is we drew that on the stage backdrop and unlike pen and Sprite costumes stage backdrops can't be moved around in code well then we'll just have to copy this costume over to a Sprite instead just drag the backdrop costume into the pen Sprite and then we click into the pen Sprite and confirm that the costume is there and ready to use good so since this is no longer a backdrop but a Sprite costume we are going to need to paint or stamp this to the screen and we'll need to do this before drawing anything else as everything else will be layered on top of it so locate the draw custom block this is our entry point previously we began by erasing all to Clear the Stage we'll replace this with our backdrop stamp position it first with a go to XY of zero and the Y needs to be that offset so subtract camera y now pop in a clear graphic effects to ensure it's not tinted by previous brightness effects we may have used switch to that background costume and then set size to 100 so that it fills this screen width finally we stamp this allows our backdrop to still appear behind the raycast level and entity stamps smash that green flag variety oh what have we got here then is this what we hope to see the good news is that the main backdrop can be seen to scroll nicely up and down with the scene but something seriously wrong in the areas above and below are normal view we're getting some color banding the reason of course is that our backdrop costume is only the size of one screen if we move it up and down then we reveal what is behind and that is a mess to fix this we'll need our backdrop to be twice as tall as our screen no problem in the costume editor resize the whole costume to half its size using the canvas middle as a reference then Center it again I find it useful to create a duplicate using the ALT key held before dragging or the copy and paste and now reselect and stretch the middle pair vertically if you hold down the ALT key while you're dragging then it sizes around the middle point useful size up just a little bit larger than the canvas so this middle area is going to be sized up in code to the full screen therefore we want to change the gradient colors to match the original reference Shades to the right there we go that works the same for the floor only for a change I'm going to switch it to a green Hue matching the theme of my maze walls great clean up by removing the reference shapes to the right and all we need to do now is size this up to 200 and we'll do this in code set size to 200 percent sadly it isn't this easy scratch has unhelpfully prevented the size reaching our desired 200 percent as a Sprite would become too large for the screen except for that's what we want so we can work around this of course by switching to the large backdrop costume after sizing to 200 percent and instead switch temporarily to a small costume say a star beforehand let's see oh yes this is far better scratch let's assize a star costume to 200 and once there is happy to switch to the larger backdrop costume as long as we don't then size it again afterwards and we can look up and down and the floor and ceiling look marvelous love that green great job even though as we play we only tend to look up and down a little bit the effect is a whole other level of immersion that brings this 3D to life well I said we'd come back and talk about improving the mouse control to do this it might help us to First add a simple Crosshair create a new Sprite named Crosshair and we can draw it using a centered thick black line with a thin white line centered on top of that then duplicate them and keep them centered by holding the shift as you drag them down select all and then Center them again before duplicating and rotating using shift to snap to 90 degree angles and finally dragged a snap back to the center One Last Time ta-da we are done and it's looking pretty smart script wise when flag is clicked go to X Y of zero zero super easy so this is pretty standard first person shooter stuff but what are your feelings about seeing the Crosshair staying still in the center of the screen while our mouse cursor is still visible moving all over the place it's a little disorientating don't you think well outside of scratch this is overcome by a clever trick called Mouse lock the mouse cursor is hidden and yet Mouse movements still allow for turning Without Limits however in Native scratch we can't pull off this trick yet sadly so instead I prefer to make the Crosshair follow the mouse simply Loop forever and go to Mouse pointer this way the Corsair follows the mouse at all times and we can feel more in control of our aiming while still being able to use the mouse to move around nice okay so one more trick before we finish this episode and that is to fine tune the mouse control Just a Touch what I'd propose is to split the screen into regions and assign each region a different turning sensitivity the idea is that while in a central zone we are not turning much we just want to aim our Crosshair and then in the next Zone we apply a much stronger turn this is the normal turn area so why the outermost Zone that is for SNAP turns where we have to get away really quick to code this will no longer be able to turn by directly Mouse X so drag off the mouse divided by 60. this can be replaced by a new variable we'll name it Mouse turn for this Sprite only and we'll drop it into the left side of this multiply to calculate the value of this variable make a new custom block named get mouse term and this is useful We'll add in an input named ABS Mouse X this will be for the absolute that is the non-negative value of mouse X drop the new Block in above our turn block and as the input variable implied we'll pass in the ABS value of Mouse X and this is useful because now it doesn't matter if we are turning right or left we just have the magnitude or the strength of the turn as a positive number so we set Mouse turn to the ABS Mouse x divided by 60. but because we use the ABS of mouse X you'll find we've lost the ability to turn left no problem if the real Mouse X not the ABS Mouse X the real Mouse X is less than zero then we flip our turn variable set Mouse turn to negative using a subtract Mouse turn okay cool we are back in action let's begin by making the central region less sensitive two turns we'll divide by 100 instead of 60. try that out okay yeah this is good we only get a little movement now for the next band move the last if downwards so that we can place in a new if between if the ABS of mouse X is greater than 50 then we want to turn faster now but we have to be careful not to have a sudden jump in speed of turn we change Mouse turn by and we'll need that divide again but before that a subtract we can subtract the same 50 away from the ABS of mouse X do you see what this does when we get past a value of 50 we subtract 50 from it to bring it back down to zero this we add to the existing turn speed to speed it up to make it turn much faster divide it by 50. cool let's try it out so the middle zone is still less sensitive but move outwards to the right and now we're moving very nice we can have a bit of a run around and it's good but even now I'm having difficulty turning quite fast enough to take all the corners as I'd like and this is why we need a third band duplicate the middle if here and we'll check for an absent Mouse X being greater than 130. this needs balancing by subtracting the same 130 before we divide and that should do it I think finally smash that green flag let's see whoa wow yes that is a lot faster how does it feel on the road yeah this might take a little getting used to now as it turns much quicker if I push it too far yeah I think I'm getting used to it now whoopsie well nearly anyhow we can always tweak those numbers if you prefer to find the best region sizes and speeds that suit you it's pretty straightforward and yeah it's working great now really great and that my friends is where we draw this episode to a close it's been fun coming back to this project and there's plenty more to cover like jumping projectiles yeah if you guys want to see more then please smash that like button now and then comment under the video I need your likes and don't forget subscribe to the channel not to miss any future episodes and fun tutorials oh yeah and if you want to post your finished projects to my scratch Studio then you'll find a link to that in the description under the video so thank you for watching have a great week ahead and scratch on guys foreign