Crazy Simple Raycasting E1 - 🎮 How to make awesome 3d games in Scratch

hello fellow scratchers i'm griff patch and today we are beginning a new mini series perhaps just two episodes on the exciting world of scratch raycasting so raycasting what is all that about well it's about firing a ray from one point in our game outwards across a level until it hits something be that a wall or some other object the simple idea here has many exciting applications from tracing projectiles to creating real-time laser pointers our so-called flashlights oh wow and can even help us to draw 3d first-person worlds like this one wowzers are you as excited by this as me now every project needs a beginning and before we can go on to raycasting or even 3d rendering we first need a level and a robust script for controlling the player after all we want to be able to move around this maze using a first person control scheme and we need to be able to safely handle collisions and any snagging on walls so let's see how far we can get are you ready let's get scratching we begin with a brand new scratch project and before we do any coding we need to draw our level it wants to represent some kind of arena or maze now as such i think these projects look good in the dark so head over to the stage backdrop and after converting the costume to bitmap fill the entire backdrop black spooky i love it next up make a new sprite and name it level no prizes for what this is going to be used for the level we are drawing is top down i'm going to draw it using simple grey rectangles as raycasters tend to work best with flat walls we start by ensuring we draw a full wall around the entire level don't leave any gaps at the corners otherwise your project will bug out later on now just have fun making corridors and interesting rooms to walk around in while i do this i just want to let you know that for this tutorial none of the scripts or costumes in this episode have to be followed exactly as i do them for episode 2 to work now you can recreate the level and the player in any way you like and the raycasting part should work just fine either way watch the video and you may pick up some useful tips and we can ensure you finish with something that will be very successful okay my level is done as you can see it's fully surrounded by walls this looks good but i bet you will make a better one than mine can't wait to see them in the scratch studio when you are done as always there's a link to the studio under this video now it would be a good idea to ensure the level is kept centered on the stage when the project starts running so in the code tab when green flag clicked simply go to zero zero splendid we can now concentrate on the player who is to be walking around our maze we'll reuse the first sprite since it's here so rename it player i'm afraid to say we won't be keeping these scratch cat costumes so delete them and we'll paint a new costume sorry scratchy maybe next time now i'm going to draw a beautiful lemon yellow triangle to represent the player recenter the view and zoom right in to create a perfect triangle we draw a square holding down the shift key while drawing keeps it square then select and delete one corner using the shaping tool now again while holding the shift we can rotate the shape to point right lastly size it as you want this time holding alt the alt key allows the shape to stay centered but if you are not sure it is centered double check by dragging and snapping the shape to the center of the canvas afterwards finally give the costume the name player now for some code we'll start the player centered on the level when flag clicked use a go to xy of zero zero we want the player to be able to rotate around to face different directions so set rotation style to all around to prove the point why not point in direction 45 degrees if we run that you can see that the player is facing diagonally up to the right great now since my level has a nice empty space in the middle this was a good place to start but if your player is touching a wall right now then just drag them to a new position on the stage and update your go to xy to that new position you really don't want to start in a war last thing we'll do to set things up is to ensure we switch to the player costume now we'll concentrate on player movement oh there are so many ways we could do this i'll lead you through one possible way but you are free to do this any way you want it really won't affect the raycaster later on we need a game loop and this will simply run forever next we'll check if the player is holding down the left arrow key if they are we want to turn the player counterclockwise that is to the left i'm going to turn by just 3 degrees this may feel a little slow and you are free to increase this if you'd like to turn right we do likewise duplicate the first if and change it to check for the right arrow key press then just switch the turn for a turn clockwise that is to the right and again by 3 degrees if you test that now we should find that the left and right arrow keys make the player rotate nicely on the spot but how about some real movement forward and back we need two more if statements i duplicate these first two but we can discard the turning scripts the first if needs to check for an up arrow key press and the second one a down arrow key press so when we press the up arrow we simply move two steps forwards to move back we can do the same but move by minus two steps as a negative move will indeed move us backwards here it's testing time and this is now much more fun we can scoot around the level walking forwards and backwards and turning as we go this is a great start to creating all sorts of games but until we fix the fact that we can walk through walls it's not really much use so we'll begin by adding the most basic collision scripts and then we'll work up from there so basically we just want to stop the player walking forwards or backwards into a wall to stop us having to code the same thing twice for walking forward and backwards we'll make a new custom block to handle this name it move and add a numeric input named steps click to run without screen refresh so this is going to replace these two move blocks in our game loop so drag the move two steps block into the new define move script and where it came from drop in our homemade move block like so we set it as before to move by two steps now looking back at the define move script drag the steps input variable into the move two steps block below to link it all up right now we can use these new custom block to replace the backwards movement too but this time again move by negative two steps at this point our code does exactly the same as it did before but we can now add in the collision detection so check whether we have moved into a wall if touching level then so if we have the simplest way to get back out again is to move back to where we came from so again we move and to get a negative value of steps we use zero subtract steps there i think we can give that a try let's walk into a wall bonk that looks promising right testing from different angles and each time the player stops and everything looks good but don't let that fool you for there be dragons not literally obviously but how many of you already know what might be wrong with this simple approach to collisions shall i show you if i turn so i can walk closer to this wall over here i collide and stop and now that i'm really close what happens when i turn the player oh no this can't be good can you see how i can turn the player to overlap the wall yeah and now i am stuck my player can't move forwards or backwards as they're already colliding with the wall either way i think you'll see this problem time and time again in scratch projects we really don't want the player's rotation to affect the collision detection so to get around this problem we will switch to using a simple square hitbox instead this way no matter how we rotate the collision will not change perfect okay no problem enter the costume editor and make a new costume name it hit box you may find it useful to convert to bitmap before we begin as this helps to draw an accurate hitbox shape now zooming in i'm going to draw a four by four filled square it should perfectly fill one of the shaded grid squares of the canvas then once done drag it until it snaps into the center of the canvas coolio and that's our simple hitbox back to the code and we'll update the define move script simply switch to the hitbox costume before we do anything else also we'll ensure the hitbox never rotates by setting the sprite's rotation mode to don't rotate okay so now this touching level check will be using the hitbox costume for collisions as we wanted but once the checks are done we should switch back to the original player costume so duplicate the top two blocks we just added and pop them in at the end of this custom block we switch the costume back to the player costume and reset the rotation style to all around and that should do it shall we give it a test just as before i can run into the wall at a shallow angle and then rotate until i overlap but this time we find we are not getting stuck as although we are overlapping the real level still we can safely back out and continue moving around the level phew thank goodness for hit boxes right so we are really getting somewhere but let me show you one thing about this classic collision code that really bugs me if while running down a passageway we snag up against a wall we'd not expect to pass through the wall but we would expect to continue down the corridor however that does not happen nope instead we instantly stop dead as a dodo this is because our collision code crudely undoes our last movement pushing us right back to where we came from so how can we handle this better the best solution is to break the directional movement apart into its x and y components and then even if one direction is blocked the movement in the other direction can still be completed and the movement continues but to do this is not so straightforward as currently we use a move two steps to move forwards how can we split that into a change x and a change y luckily we have the maths to do the job and here it is move two steps actually does the same job as are you ready for it change x by 2 multiplied by the sine of direction and change y by 2 multiplied by the cosine of direction yep that's how the move block actually works so we can make use of this but before we do we have some coding to do we'll start by making a new custom block that tries to move the player by a value of x and y let's name it try move and add two numeric inputs dx and dy these indicate just how far to move in the x and y directions now in here we first do the movement bring in a change x and a change y block we then simply use the dx and dy input variables as the amounts to move next we check for collisions if touching level then and of course if we collide as before we simply reverse the previous movements with a change x and y by zero subtract dx and zero subtract d y okay so that may seem like it's not going to help us much but just hold on and you'll see what we are up to separate off the old move steps block and its level touching check in its place stuff a nice new try move block and this is where we need that cool maths to translate this move steps block into a try move x and y no problem try move steps multiplied by the sine of direction and for the y-axis we can duplicate that only switch the sign for a cos operator excellent that's the maths so in theory this will end up moving us exactly the same as before we should just test that to be sure and yep that's just the same and therefore we still have the problem of getting snagged on the walls but now we can fix this by first moving the x and then moving the y duplicate the try move block like so then we can remove the second input parameter from the first try move that will now only move in the x direction and then remove the first input from the second try move block that will only try now and move in the y direction stick a zero in the empty inputs if you like now i'm feeling good about this shall we test it out and here we go and yeah can you see how i didn't snag on the wall but instead just slipped across the surface that's perfect great work everyone so we are nearly there the last thing i want to add before calling these movement scripts complete is to include player strafing now what's that it's the common movement in first person games where the player can sidestep very useful for looking around corners it's common convention to use the wasd was keys for strafing and generally walking about the cursor keys are then used for rotations so come back to the green flag game loop script find the if key up arrow pressed and now we need to also support the w key for moving forwards we need an or for that so if key up arrow or key w pressed then we move forwards as before we're going to do the same for the down arrow key with another or add a check for the s key okay now for the side stepping with the a and d keys if a key is pressed then to sidestep to our left we simply turn left by 90 degrees then move by two that moves us now to the left by 90 degrees then after that turn back right by 90 degrees returns us to facing forwards brilliant to sidestep right check if the d key is pressed turn right by 90 degrees move two and then finally turn left by 90 degrees again sorted and here we go strafe away look at me sliding about that is cool and you just wait this will make the next raycasting part of the tutorial series ever so much more enjoyable to play around with but oh my gosh i'm afraid that this is where the episode must end man the next episode though oh it's going to be simply epic i just can't tell you how cool it's going to be but thank goodness we now have these episode 1 scripts in place as it gives us the solid foundations that we needed to build upon so have fun designing your levels and getting your player movement just right and make sure you keep a copy of this project safe all ready to continue next time so if you enjoyed this episode and cannot wait for part two then smash that like button and make sure you've not forgotten to subscribe to the channel you don't want to miss out on that notification when the next episode becomes public of course if you can't wait then there's also the early access channel membership where members get to see the videos as soon as they are made even before everyone else how cool is that but that's it for me today thank you for watching have a great week ahead and scratch on guys [Music] you

Channel: griffpatch

Views: 1,744,073

Keywords: scratch coding, scratch programming, scratch game, scratch 3, griffpatch, Pen, Stamping, Special Effects, Tutorial, Help coding, scratch coding games, scratch, coding for kids, scratch tutorial, scratch tutorials, how to scratch, coding for beginners, scratch 3d, scratch games, scratch 3d games, scratch 3d tutorial, scratch raycasting, how to make 3d game in scratch

Id: M1c5TcdITVs

Length: 18min 32sec (1112 seconds)

Published: Wed Jan 12 2022