Simple Background Scrolling Tutorial

[Music] hello fellow scratchers do you want to know how to create scrolling backgrounds in your scratch projects i'm griffpatch and i can't wait to share with you how i would go about creating this cool effect now there are simpler ways to create side scrolling games in scratch but these don't adapt as well to projects that require more control over their scrolling like those that typically use a camera x and y or scroll x and y variables if you've ever followed any of my scrolling project tutorials then you'll know all about these but if you don't don't worry all be revealed so jump right in make a new sprite naming it background i'll choose a fill color of green with an outline of transparent or none we can draw a large rectangle filling the lower half of the drawing canvas make sure to slightly overlap the left right and bottom edges of the screen area switch to the reshape tool now and click on the top line to add a new drawing node these points default to a curve point so just click and drag them to begin shaping some nice mountains from this rectangle we can repeat this for the entire shape it will be useful to try and keep the left and right most points the same height you'll see why later now jump back to the code tab and make a new variable named camera x for all sprites with it still visible on the stage right click the camera x variable reporter and switch to the slider mode right click it again a second time and choose slider range changing the maximum value to be 2 000 i'm now able to slide the camera x value all the way up to 2 000 cool we'll use this to pan the camera across our scene so when green flag clicked we'll enter a forever loop setting the x position of the background sprite to zero subtract camera x so why the zero minus well as we move the camera to the right the background wants to move to the left so we need to invert the number to get the desired scrolling effect we'll also set the y position to zero okay run that i can now use the camera x to scroll the background nicely around but do you see how the costume is getting stuck on the edge and not scrolling off screen well there's a fix for that right away open the costume editor and select the brush tool and now because we are never going to scroll down below the bottom of the costume we can take the liberty of painting a small dot diagonally down from the bottom left and another diagonally down from the bottom right like so this will extend the distance the background can scroll off the screen give it a test nice it goes right off the screen now now we want to add another sprite to the right of the first so that the scene scrolls for longer before that we'd best do a little housekeeping in preparation for the use of clones separate off this forever loop and broadcast a new message of begin we'll bring in a matching when i receive begin to kick off the forever loop do you want to just grab and drag scratch cat on the stage to bring him in front of the background that's better okay make sure we are still in the background sprite scripts now to allow us to keep track of two different positioned backgrounds make a new variable naming it simply x and make sure to make it for this sprite only that's important this time to ensure that each clone does indeed have its own position set x to zero and then replace the zero in the set x position over here with the x variable this will offset each sprite by its own value of x so to add the new clone further to the right drop in a create clone block and right away change the x variable by 480. that's one entire screen width and run the project ah great the scene has apparently doubled in length this being due to the new clone and i could scroll back and forward with them both in view can you see the seam where the two sprites meet here we can improve the join now to make it look even better with the project still running and the costume join visible open the costume editor and with the reshape tool select the leftmost point now using the up and down arrow keys on your keyboard you can shift the position of this point up and down watching the scene between the two costumes in the project window until they line up perfectly there beautiful of course now we can no longer tell where one sprite ends and another sprite starts so duplicate the first costume and for the time being change the costume's color to make it a little darker we'll use the two costumes now for the two sprites by dropping in a next costume block after the first clone is made and oh yes we should also set the costume to costume one right at the top here to ensure we know which costume we are starting on give that a run yeah now we can easily see where the two sprite clones start end okay this is where things get a little more interesting we now want to create a loop in our scrolling background so that as one moves off the screen it reappears on the opposite side of the screen a cycle if you will we could do this with a number of if conditions and some bound checks but for us keen coders there is a better way let's ask scratchcat for some help at explaining this one in the scratchcat sprite add a when green flag clicked then a forever loop and get them to say camera x okay no problem there we already know the value of camera x so bring in a mod or modulo operator and apply it to camera x on the right we'll use the stage width of 480. now run the project and see what effect this has on the camera x nothing initially but as soon as camera x gets to 480 the camera x mod 480 forces the number back down to zero again this process repeats as we keep increasing camera x cycling round and around again this is wonderfully useful operator to use in our projects as it represents exactly what we are trying to do with the exposition of our background sprites with the looping around and around however since we have two sprites of 480 we need to loop for 480 multiplied by two now this loops all the way up to 960 before resetting back down to zero perfect that will cover two screens let's make use of this in our background sprite housekeeping time first make a new variable named screen x and set it to x minus camera x from here then set the x position to screen x below and now we can use that mod on screen x and on the right 480 multiplied by 2. but if we run the project we can see we are not quite there yet the position of the sprites are all off appearing far too much to the right and never getting past the halfway point to scrolling further left to be on the left they would need a negative x position but the mod operator never returns negative numbers instead it moves the sprites further off to the right we need to compensate for this by subtracting 480 from the result and oh yeah finally this is looking really good the sprites are cycling around perfectly so we could stop there but why stop now we can take this further and add in layers we'll start with the sky switch to the stage sprite and we'll add a blue sky rectangle and the yellow sun i'm holding down shift while drawing the sun to make it a perfect circle if we run this you can see that the sun does not move with the mountains this is just as i wanted it's called a parallax effect the things that are further away from the camera move slower than those that are closer to the camera in this case the sun is so far away that it apparently doesn't move at all which is fine this can be a really nice effect and we can go further with it by creating more layers of parallax each at a different distance from the camera we'll do this by adding a new variable named scroll speed for this sprite only set it to 0.25 after the when green flag clicked we want the mountains to scroll at a quarter of the speed of the camera as they are far off so multiplying not the x but just the camera x by scroll speed if you run the project now we find that the mountains do not scroll anywhere near as fast or far as they did before this change now for the fun bit duplicate the background sprite and name the duplicated sprite as foreground in the costume editor delete the second costume completely and then in the first costume i'm carefully removing the costume shapes but leaving in the two small dots we added for the off-screen scrolling next create a lighter green rectangle covering the lower third of the canvas to represent grass for scratch cat to walk on now running the project does not show up the foreground sprite at all my guess is it must be behind all these other sprites so stop the project now and then we can drag them about on the stage the last one moved always becomes the front most sprite so once i can see them all move the foreground sprite and then lastly the cat sprite and there now they should be in the correct order so run the project again yeah better we can see the grass before i continue i'll just delete the scripts in the cat sprite and hide all the variable reporters all except that is the camera x slider there okay let's add something more discernible to the foreground costume i'll make some cute little mushroom stone things with a nice highlight and an awesome little shadow to make them pop that's just the grass color but made a little darker then duplicate the entire costume and we'll create another page of the scene this time i'll make a nice tree but what color mushroom pink green i guess pink i'll run the project again yeah this is cool but as yet it's not got that neat parallax effect because the foreground and background mountains are moving at the same speed so we'll just change the scroll speed back up from 0.25 to 1 for this foreground sprite and now run the project again oh yeah what a transformation the parallax effect makes the whole scene just really pop it really feels like it has some depth now that always gets me really excited now you might have been looking at this project and wondering what if we want more than two costumes making up our scrolling scene that way they can be longer and more interesting well of course you might and there are two approaches to this depending on your project but i'll show you the quick and easy one for today first create your third costume then we change the 480 times 2 to be times you guessed it three for three costumes finally we need to clone the extra third sprite we just duplicate these three blocks the crate clone next costume and change x by 480 we might even consider putting all these in a repeat loop if we were to want even more costumes running that now and all three costumes are now in use in our scene super i know some people will have noticed so i'll bring it up now that the first costume you see when camera x is zero is actually the second costume not the first this may not be an issue or bother you but if it does then take a quick look at the maths we used here to position the background sprite we are subtracting 480 from the final position of the sprite to allow it to scroll off screen to the left but this is also scrolling our first costume off-screen right away so if you really want the first costume to appear first then simply compensate by adding 480 to screen x within the mod there and now the foreground is now showing the first correct costume right away so we can do the same in the background sprite too if you desire but otherwise that step can be skipped altogether so you may already have a project in mind to use with this scrolling background but to let you see it in action let's just add a better scratch cat sprite i've included a link under the video to a project that includes a sprite with the costumes for the new scratch cat where i created a full 16 frame run cycle for him you are absolutely free to backpack him and use them in your own scratch games i'm taking the third sprite the one without the rucksack drag the sprite into our new scrolling background project and we can get rid of the old scratch cat okay these scripts can be deleted and i'll set up a forever loop under a green flag block simply switching to the next costume so that looks really quite odd it's happening because there are more than just walking costumes in this sprite the walking ones start at costume seven and run until the end so if her costume number is less than seven then set the costume to run zero one that is the seventh costume much better that looks excellent so we can make the level automatically scroll along with scratch cat's run cycle by adding a change camera x by 16 to the loop yeah look at him go awesome perhaps i drew my costumes all a little too low down let me just tweak them up a bit there and so with this you should be able to add scrolling backgrounds to your own games for example here is the same scrolling background code used in my tile scrolling platformer tutorial you can look forward to seeing this very soon looking really good right you may notice that we also have a bit of up and down scrolling here too well this is not hard to script if we just look back at our scripts again we need to add in the camera y variable for all sprites then where we are setting the y position to 0 we now set them to 0 minus camera y multiplied by scroll speed we do the same in the foreground sprite and we can make the camera y into a slider too then if you are following my example project here with scratch cat we should make a quick change to scratch cat's script to prevent him looking like he's flying off set their y position to negative 80 subtract camera y now run that and it's actually a little hard to see the effect while scratchcat is hurtling sideways so fast hold on let me remove the change camera x so you can see better there now i can scroll up and down and you can see the parallax effects working much clearer so that's great and it can look even better when you have a game that already has a good scrolling script this is especially true for the vertical scrolling as seen in the clip of my mario game this technique will work in most projects though and can even be adapted to be used as the base for scrolling game levels themselves well i do hope that helped and i will be showing you exactly how i use this in my tile scrolling project very shortly in the meantime get this into your projects of your own and i hope you will create some fantastic some weird and wacky but all awesome landscapes for me to check out so if you enjoyed this video smash the like button and don't forget to subscribe to the channel to avoid missing my next exciting video thank you for watching and scratch on guys

Channel: griffpatch

Views: 292,656

Keywords: moving, moving background, camera, scroll, moving scene, programming

Id: 5hbqZOL5rYw

Length: 18min 8sec (1088 seconds)

Published: Mon May 31 2021