Taking Geometry Dash to New Heights! - Scratch Tutorial #6

griffpatch · Beginner ·🖌️ UI/UX Design ·2y ago

Key Takeaways

This video teaches how to add vertical scrolling to a Geometry Dash game in Scratch to take the game to new heights

Full Transcript

[Music] hello fellow geometry scratchers and welcome back to episode 6 of how to make Geometry Dash in scratch and I know what you need you need more screen space to work with you need vertical scrolling levels and yes yes you also need jump pads ships and other game modes level selection and go an actual end to each level okay so there's a lot to get excited about but let's focus vertical scrolling the problem is even after we get the scene to scroll up we're still going to run out of space in the costume Editor to extend our levels much further so what are we going to do about that then well don't you think this floor in each costume is a bit of a waste of space are you thinking what I'm thinking if so then drop me a comment right now but hold the phone also in this episode crazy new game mode invented geometry crawl stay on target watch out for that wall stay on target more on that soon enough because it's time to load up our projects from episode 5 and remember to save them as a fresh new copy guys this is episode 6 let's get scratching we jump straight into the level Sprite and we want it to be easy to test this vertical scrolling so I'm going to rearrange these stair climbing costumes bringing them right up to the second and third costume positions for the time being and for added fun I'll pop in yet another stare on scene 4 to really push the limits and yes this is going to fail badly we run out of space and it it's game over so it's going to be hard to get this level to scroll up and down right well let's see we'll temporarily split off the broadcast game on from the reset level script that will prevent the main game scripts running while we're testing and now create a new variable named camera y making sure it's created for all Sprites this will keep track of how far the screen has scrolled if we double click the variable reporter twice then we can change it into a slider this will make testing fun it's good practice to initialize camera y to zero with a set block at the top of the reset level script and now for the scrolling in the forever Loop next to our change X we drop in a set Y block yes set y not a change y but don't just set it to camera y now when the camera moves up the level will move down so we subtract camera y we can test this Theory right away hit that green flag and start the game and don't worry our game scripts are disabled so we have all the time in the world to play with our new camera wise slider and look at that it works see how as the camera is moved up our level does scroll down by negative camera y That's EX excellent a great start but what about the player they need to scroll up and down too we should reattach the broadcast to game on and then click into the player Sprite another way to give us more time to test is to reduce the initial scroll speed from -10 to -1 yeah that should really slow things down oh my gosh just look how slow this is drag the camera up and back down well the ah moving the camera faster produces jittering and worse than that instant death on a plus note I think I just invented a whole new Ultra slow Geometry Dash game mode geometry sneak creep or crawl anyone oh yeah I'm going to make this jump this is my moment baby here goes what no way oh gosh come on guys this is torture stay on target stay On Target and jump yes who is the man except oh gosh how do we even yeah that was never going to happen Okay I apologize this tutorial has gone way off track the player isn't even scrolling with the camera they are just being pushed around by the level when the level moves If It Moves too much then it is game over but unlike with the level we can't just reposition the player at camera y not unless we want them to be stuck in one position for the entire game yeah I don't think so instead we need to keep track of the last camera position and calculate how much the new camera y has moved since last frame then we can move the player up and down by the same amount and Bobs your uncle so let's make a new variable last camera y making it for this Sprite only then right before our main game Loop set last camera y to you guessed it camera y they begin the same now within the forever Loop we need that change Y block this is to shift the player's position up or down and then drop in a subtract see we want the difference between the last camera Y and the current camera y variable nice we're almost there we just need to ensure that the last camera y always remembers the last camera y value so duplicate that previous line and we can drop it in as the last thing done before the forever Loop repeats around again yes we can test smash that green flag and let's see up and down up and down don't be shy give it a fearsome wiggle yes that's what I'm talking about the player is absolutely glued in sync with the camera and the scrolling level that is really great the C I guess it's time to return the scroll speed back to normal -10 was it not oh my gosh this feels Uber fast now and the stairs is upon us oh the camera oh slider yes in theory if I was quick enough I could slide this up and make H perhaps my platform is slightly misaligned but you get the idea but enough of Sliders it's time to get the camera to automatically follow the player as they ascend and deset the level but it's not quite that simple the level does not want to move up and down with every jump if it did we'd soon get very motion zic I know I would he yikes what we need is a compromise now a common technique is to use scrolling regions while within this central zone the player can move and jump without the level scrolling around but as soon as they move into the scrolling region then off we go very cool the best place to about our camera is at the end of the main game Loop in our game on script and we'll make a new custom block naming it camera tracking and run without screen refresh the set last camera block can be moved in there and we replace it with a call to the camera tracking script excellent then in some free space firstly where shall we place the top bound of the scroll Zone um somewhere around the 100 Mark I think it has to be surprisingly High to allow for their jumping so if greater than if the player's y position is greater than 100 then we scroll up change camera y by four that seems logical so let's just give that a shot up the stairs and what do you know it's actually working with each jump the camera is pushed up that little bit higher and what a difference that already makes yeah now we just need to bring it back down again if less than if the Y position is less than around where the player is now that's 40 then we scroll down by changing camera y by negative or this time smashing green flags now up up up and down yes that's pretty neat pretty neat but also a little unresponsive to the player's position we need this to be a lot more Snappy getting the camera back down to the ground level the solution is to scroll things faster when there's a greater distance to scroll over to achieve this we calculate how far over the scroll region region they have traveled by by subtracting from the player's y position the top of the scroll region that's 100 so they are 35 pixels above it then to make the motion smooth we multiply that answer by a fraction say 0.2 that gives a speed of seven and this speed reduces as we move the player closer to the boundary of the scroll region nice but we don't like these fraction results so we can drop it all inside a round block to round it off three brilliant pop that in the first change camera Y block now for the scrolling down duplicate the same expression and replace that 100 with -4 yes that is still ne40 and I'm just going to tweak the smoothing value to 0.15 we can play with these values more later on if we want but right now now let's see what a difference this has [Music] made and yeah the floor returned into view far quicker that's great now before I move on though it might be worth making double Shore that the level is prevented from scrolling down too far below zero just in case if camera Y is less than zero then we set camera y back to zero again simple so are we done not so fast take a look back at our level costumes where the level moves steadily upwards where do we go from here there's no more room to design a level as we've used up all the space already well that is a bummer right I mean if only this huge sway the floor wasn't taking up like a third of each costume wait a moment are you thinking what I'm thinking if we were to remove this floor perhaps into another Sprite then we'd have all this extra room to play with and perhaps that would be all the extra space we need also as an added perk the new floor Sprite could be used to pimp up our title screen too awesome let's do this we begin then by duplicating the entire level Sprite and move it next to the level and then rename it as floor now making sure we are definitely still in the new floor Sprite we ferociously move all but the First costume all we want is the floor so zoom out and if you drew the top and bottom rectangles to allow for offscreen scrolling then you'll probably agree these are going to cause US problems as they now get scrolled into view by a change of camera y well we can safely delete the bottom one at least but the top one H that's another story we still need it to allow the Sprite scroll off screen so instead we're going to make it invisible yeah that's right bring it down into the center of the canvas and with it selected simply change its fill and outline to transparent and it's gone no it's still there and you can select it by clicking its outline or easier still dragging a selection Marquee over it and boom there it is selected once more so it's coding time we're only using a single costume so remove the switch costume block and since the floor wants to be visible now on the title menu we're going to separate the scripts from under the set camera y they will be run on a green flag in a moment oh yes but when we do reset the level also reset y to zero now when green flag clicked since this is only run the once at project startup we don't need to bother deleting clones or even hiding this Sprite so it's these scripts that remain and can be attached under the when flag clicked block oh wait I see another change costume get rid of that one too and remove the broadcast to game on talking of which when I receive game on will bring this floor right to the front of the level where it belongs and to get the floor scrolling even on the title screen we need to set scroll speed to -10 now this is exciting it's time to smash that green flag and well I can't deny that's a little underwhelming it ain't scrolling oh oh I forgot clicking into the menu Sprite because we've left in the fake floor yes there you are isn't that funky a scrolling floor right from the word go so does the floor work in your game too well apparently it might be but it's hard to tell if the floor is showing since our level also has a floor baked into their costumes too guys we' better take a look click back into the level Sprite yes we are still suffering greatly from abundance of floor and we don't need them anymore take a look at costume one and zooming right out so that we can see everything during this process we're going to not only remove the floors but also any of the red bars so for this costume that's literally everything goodbye and because the floor is in a separate Sprite now this works just fine well almost the lack of red rectangles is causing Scene Three to not appear we'll address that soon enough let's move on to costume two though and this is where it gets a little fiddly so pay attention we remove the floor and any red rectangles remember to be zoomed out for that and now we want to move the rest of the level down to sit on the bottom edge of the canvas that will give us lots of delicious space above to play with but before you rush gungho into dragging costumes around remember that it's very important that each costume remains perfectly lined up across the level not something easy to achieve when dragging these individually by hand so instead select everything you can press control a if you like and then make sure you are at the default Zoom just click the equals button there then while holding the shift key tap the down arrow shift and an arrow will move the selected shapes down by exactly 15 pixels as long as you at the default Zoom okay so repeat this 2 3 counting them off until we reach the bottom of the canvas 7 8 it's best if the level ends up right on the bottom Edge or just below now remember that eight or whatever it was you got because then we need to move on to the next costume and repeat that procedure exactly as before delete the red rectangle angles and the floor and then with all the other shapes selected and at the default Zoom hold shift and tap the down arrow the exact same number of times eight for me this will ensure all our costumes remain perfectly lined up as they were before in our game okay here we are the costumes are fully transposed step two then is to recreate these scrolling rectangles to allow these level Sprites to scroll out of view position wise I'll drop it in just above the canvas making sure it's centered and most importantly that it's wider than the main canvas area too and then we make its fill transparent and the outline too and now the fun bit using the selection tool copy that rectangle and then working your way through each costume in the level pasting that rectangle in place it should appear in the same position each time which is really useful brilliant that's the costumes done but we are not quite out of the woods yet with our costumes lowered down they are of course appearing far too low down the screen in our game too behind the floor Sprite in fact not a problem into the level code we go see over here where we are positioning the Y position of the level Sprite we need to add to that the same amount that we shifted the level costumes down by and that was eight down key presses for me and if you recall each press was worth 15 pixels 8 multiplied by 15 is 120 pixels exactly so whatever your total comes to pop that into the left of this set y position block and we can give it a world oh my word the level returns and it's not looking any the worse for all my tinkering and that that really opens things up for us to expand our level design extensively and here is the fruit of my labor my updated costumes for the start of the stereo Madness level if you want them for reference then well here they are and you can see we certainly needed that extra space in these higher up zones even pushing a little further off the canvas top where necessary oh and this you saw that did you yeah I drew that myself and it's pretty good I thought but your guess is as good as mine as to what it's used for I guess it's got something to do with the next episode shall we check this level out in full and the timing is now a lot better and closer to the original I had to move these stairs closer together otherwise you get out of time and yeah that is a problem it turns out my jump height is a bit too high now to compensate I went in and tweaked the physics of the game increasing Gravity from -4 to -4.3 that will pull the player down just a little bit faster and to match the resulting faster jump increase the rotation to 15° it's not a big change but I think it makes all the difference or my updated level design the player is now synchronized perfectly with the jumps and especially the classic Geometry Dash staircase yeah this is the bee's knees don't ever feel scared to play around with things like this until you get the game just right so guys we are all but ready to wrap up this episode but just before I do we have to fix this glaring problem it happens when we restart mid game make sure you are in the player Sprite and then click the green flag and start the actual game but immediately stop it again before we begin to jump that means the player is flush with the ground and that we can now drag a fresh goto XY block from the pallet to under the when flag clicked script and we are guaranteed now to have the player in just that Sweet Spot while we're at it we might as well also point in Direction 90 so that they are always facing up and that is all there is to it it wow haven't we made some excellent progress today with the new camera tracking and the extra level height to work with our games are surely way cooler and way more fun to play so what's next as promised we'll be adding a new game mode the ship form and guys I'm dead excited about that how about you so if you're enjoying this series please do hit that like button it's completely Anonymous and helps promote my videos so there's nothing to lose also if you don't want to miss any future videos do ensure that you've subscribed to this Channel and that you click the Bell icon to be alerted the moment the next video drops I do also offer a channel membership for those who want access to my fun Channel Emoji or early access to videos or even access to the scratch projects themselves yeah so join if you can your support is very very welcome so thank you also just in time for the holiday season I've got some excellent Griff Patcher happy day but guys I'm afraid that is all we've got time for today thank you for watching have a great week ahead and scratch on guys

Original Description

Level Up your game by adding vertical scrolling to take your Geometry Dash to new heights not reachable before! Reclaiming wasted space, and making your game more exciting than ever! Cover "Scroll Regions" that trigger the screen to smooth scroll, and how to keep the level & player in sync. This series on "How to make Geometry Dash in Scratch" is really coming together! #scratch #geometrydash #scrolling #scroll #gd #griffpatch This tutorial is designed to be simple enough coding for beginners, but if you know Scratch, you'll also know that the "sky's the limit" for how far you can take this! - Scratch On guys! 🐱 Scratch Studio - https://scratch.mit.edu/studios/33730571/comments 👀 Playlist for this series - https://www.youtube.com/playlist?list=PLy4zsTUHwGJJnoXPSYlKQ15wedqB39W_E 👀 Episode #1 - https://youtu.be/FYZ1bfB1nho 👀 Episode #2 - https://youtu.be/Zjt01j90crc 👀 Episode #3 - https://youtu.be/t6ou3J2swDU 👀 Episode #4 - https://youtu.be/AWq1ZCONokg 👀 Episode #5 - https://youtu.be/xs24-pSdDb4 👀 Episode #6 - https://youtu.be/usgBdBQkFuQ 👀 Episode #7 - https://youtu.be/avKGtUPinCI 🚀 *Boost Your Creativity with Griffpatch* The Griffpatch Academy will take you from "Gamer to Game Creator" Learn more at 👉 https://griffpatch.academy 👈 😺 Scratch was developed by the Lifelong Kindergarten Group at the MIT Media Lab. See http://scratch.mit.edu --------------Video Chapters-------------- 0:00 Intro 1:09 Vertical Scrolling Level 3:03 Vertical Scrolling Player 6:18 Camera Tracking - Follow Player 10:34 A New Floor Sprite 14:27 Making Better use of Level Costume Height 17:45 Offsetting the Level Sprite 20:10 Fix Player position on Title Screen 20:56 Outro
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from griffpatch · griffpatch · 0 of 60

← Previous Next →
1 Burrow Blitz - A game by Griffpatch
Burrow Blitz - A game by Griffpatch
griffpatch
2 Burrow Blitz Level 1 Speed Run!
Burrow Blitz Level 1 Speed Run!
griffpatch
3 Scratch Messaging Extension (for chrome & firefox)
Scratch Messaging Extension (for chrome & firefox)
griffpatch
4 Scrolling Platformer Tutorial | Part 1 | Get Scrolling
Scrolling Platformer Tutorial | Part 1 | Get Scrolling
griffpatch
5 Scrolling Platformer Tutorial | Part 2 | Gravity
Scrolling Platformer Tutorial | Part 2 | Gravity
griffpatch
6 Scrolling Platformer Tutorial | Part 3 | Platform Detection
Scrolling Platformer Tutorial | Part 3 | Platform Detection
griffpatch
7 Scrolling Platformer Tutorial | Part 4 | Off Screen Sprites and Player Death
Scrolling Platformer Tutorial | Part 4 | Off Screen Sprites and Player Death
griffpatch
8 Scrolling Platformer Tutorial | Part 5 | Collectables
Scrolling Platformer Tutorial | Part 5 | Collectables
griffpatch
9 Scrolling Platformer Tutorial | Part 6 | Danger Sprites (Bug fix)
Scrolling Platformer Tutorial | Part 6 | Danger Sprites (Bug fix)
griffpatch
10 Scrolling Platformer Tutorial | Part 7 | Exit Portal
Scrolling Platformer Tutorial | Part 7 | Exit Portal
griffpatch
11 Scratch 3 | Box2d |  Physics Extension
Scratch 3 | Box2d | Physics Extension
griffpatch
12 Scrolling Platformer Tutorial | Part 8 | Vertical Scrolling
Scrolling Platformer Tutorial | Part 8 | Vertical Scrolling
griffpatch
13 Zombie Cube | Speedrun challenge
Zombie Cube | Speedrun challenge
griffpatch
14 Scratch 3 | Physics Extension | Version 2
Scratch 3 | Physics Extension | Version 2
griffpatch
15 Top Down Scroller | E1 - Scrolling | Scratch Tutorial
Top Down Scroller | E1 - Scrolling | Scratch Tutorial
griffpatch
16 Top Down Scroller | Part 2 | Enemy AI
Top Down Scroller | Part 2 | Enemy AI
griffpatch
17 Top Down Scroller | Part 3 | Enemy Clones & List
Top Down Scroller | Part 3 | Enemy Clones & List
griffpatch
18 Top Down Scroller | Part 4 | Live Die Repeat (Game Over)
Top Down Scroller | Part 4 | Live Die Repeat (Game Over)
griffpatch
19 Top Down Scroller | Part 5 | You've Won!
Top Down Scroller | Part 5 | You've Won!
griffpatch
20 Cloud Game Tutorial | Part 1 | The Basics
Cloud Game Tutorial | Part 1 | The Basics
griffpatch
21 Cloud Game Tutorial | Part 2 | Encoding and Decoding
Cloud Game Tutorial | Part 2 | Encoding and Decoding
griffpatch
22 Scratch 3 Dev Tools Browser Extension by griffpatch
Scratch 3 Dev Tools Browser Extension by griffpatch
griffpatch
23 Cloud Game Tutorial | Part 3 | Multiplayer
Cloud Game Tutorial | Part 3 | Multiplayer
griffpatch
24 Scrolling Platformer Tutorial | Part 9 | Momentum
Scrolling Platformer Tutorial | Part 9 | Momentum
griffpatch
25 Scrolling Platformer Tutorial | Part 10 | Wall Jumping
Scrolling Platformer Tutorial | Part 10 | Wall Jumping
griffpatch
26 Cloud Game Tutorial | Part 4 | Auto Game Joining
Cloud Game Tutorial | Part 4 | Auto Game Joining
griffpatch
27 Game Preview - "Getting Over It" with Griffpatch - A fan recreation in Scratch
Game Preview - "Getting Over It" with Griffpatch - A fan recreation in Scratch
griffpatch
28 Speed Run with Outtakes | Getting Over It | 4 minutes 30 seconds
Speed Run with Outtakes | Getting Over It | 4 minutes 30 seconds
griffpatch
29 Griffpatch's Live Stream
Griffpatch's Live Stream
griffpatch
30 MMO Platformer Speedrun Challenge
MMO Platformer Speedrun Challenge
griffpatch
31 Appel Platformer | Scratch Game Blog
Appel Platformer | Scratch Game Blog
griffpatch
32 Cloud Game Tutorial | Part 5 | Smooth Movement
Cloud Game Tutorial | Part 5 | Smooth Movement
griffpatch
33 How to Design a Level for Appel
How to Design a Level for Appel
griffpatch
34 Fastest Appel Speedruns | Jan 2021
Fastest Appel Speedruns | Jan 2021
griffpatch
35 Tile Scrolling Platformer (Mario) | 1. Setup
Tile Scrolling Platformer (Mario) | 1. Setup
griffpatch
36 Tile Scrolling Platformer | 2. Grid List
Tile Scrolling Platformer | 2. Grid List
griffpatch
37 Tile Scrolling Platformer | 3. Tile Collisions
Tile Scrolling Platformer | 3. Tile Collisions
griffpatch
38 Tile Scrolling Platformer | 4. Platforming Scripts
Tile Scrolling Platformer | 4. Platforming Scripts
griffpatch
39 Tile Scrolling Platformer | 5. The Level Editor
Tile Scrolling Platformer | 5. The Level Editor
griffpatch
40 Tile Scrolling Platformer | 6. Level Codes
Tile Scrolling Platformer | 6. Level Codes
griffpatch
41 Tile Scrolling Platformer | 7. Drop Through Platforms
Tile Scrolling Platformer | 7. Drop Through Platforms
griffpatch
42 How to make Physics in Scratch | Full Tutorial
How to make Physics in Scratch | Full Tutorial
griffpatch
43 Tile Scrolling Platformer | 8. Enemy Clones
Tile Scrolling Platformer | 8. Enemy Clones
griffpatch
44 Simple Pathfinding Tutorial
Simple Pathfinding Tutorial
griffpatch
45 Tile Scrolling Platformer | 9. Enemies in Level Editor
Tile Scrolling Platformer | 9. Enemies in Level Editor
griffpatch
46 Simple Maze Generation | Scratch Tutorial
Simple Maze Generation | Scratch Tutorial
griffpatch
47 Tile Scrolling Platformer | 10. Mystery Blocks
Tile Scrolling Platformer | 10. Mystery Blocks
griffpatch
48 Simple Car Steering Simulation | Scratch Tutorial
Simple Car Steering Simulation | Scratch Tutorial
griffpatch
49 Simple Background Scrolling Tutorial
Simple Background Scrolling Tutorial
griffpatch
50 Tile Scrolling Platformer | 11. Death, Background & Sound
Tile Scrolling Platformer | 11. Death, Background & Sound
griffpatch
51 Mid Week Update & Channel Membership
Mid Week Update & Channel Membership
griffpatch
52 Simple Grid List Tutorial with Image Scanning
Simple Grid List Tutorial with Image Scanning
griffpatch
53 Tile Scrolling Platformer | 12. Auto Arranging Tiles
Tile Scrolling Platformer | 12. Auto Arranging Tiles
griffpatch
54 Code a Fun Space Shooter Game 🚀 | 1. Move & Shoot | Scratch Tutorial
Code a Fun Space Shooter Game 🚀 | 1. Move & Shoot | Scratch Tutorial
griffpatch
55 Space Shooter 2 - Enemy Collisions
Space Shooter 2 - Enemy Collisions
griffpatch
56 Tile Scrolling Platformer | 13. Level Progression & Editor Improvements
Tile Scrolling Platformer | 13. Level Progression & Editor Improvements
griffpatch
57 Space Shooter 3 - Camera Shake & FX
Space Shooter 3 - Camera Shake & FX
griffpatch
58 Tile Scrolling Platformer | 14. Sloping Tiles
Tile Scrolling Platformer | 14. Sloping Tiles
griffpatch
59 Pathfinding a Maze using Lists
Pathfinding a Maze using Lists
griffpatch
60 Tile Scrolling Platformer | 15. Crouch & Slide
Tile Scrolling Platformer | 15. Crouch & Slide
griffpatch

Related Reads

📰
The $1M Mistake: Why Your Website’s “Pretty” Design Might Be Killing Your Sales
A 'pretty' website design might hurt sales if it prioritizes aesthetics over user experience, learn how to optimize your website for conversions
Medium · UX Design
📰
Measuring UX When AI Is Unpredictable: New Metrics
Learn to measure UX when AI is unpredictable using new metrics beyond task completion
Medium · AI
📰
Measuring UX When AI Is Unpredictable: New Metrics
Learn to measure UX in unpredictable AI systems with new metrics beyond traditional task completion rates
Medium · UX Design
📰
Hooked: How to Build Habit-Forming Products — The Psychology Behind Apps You Can’t Stop Using
Learn how to design habit-forming products by understanding the psychology behind apps that keep users engaged
Medium · UX Design

Chapters (9)

Intro
1:09 Vertical Scrolling Level
3:03 Vertical Scrolling Player
6:18 Camera Tracking - Follow Player
10:34 A New Floor Sprite
14:27 Making Better use of Level Costume Height
17:45 Offsetting the Level Sprite
20:10 Fix Player position on Title Screen
20:56 Outro
Up next
How to Export Lovable Design to Figma | Step-by-Step (UPDATED)
Tutorial Stack
Watch →