Scrolling Platformer Tutorial | Part 7 | Exit Portal

griffpatch · Beginner ·🛠️ AI Tools & Apps ·7y ago

Key Takeaways

Building a scrolling platformer game in Scratch, adding an end of level portal, and implementing collectable-based level progression using Scratch tools and programming concepts

Full Transcript

hi thrift patch and welcome back to the next part of my tutorial on how to make a scrolling platformer in scratch today we're gonna be looking at adding in the exit this is the exciting little port at the end of the game where once you've clicked all the collectables it opens up and you jump into it and it whizzes off and it goes on to the next level we're going to see how far that we can do today so where we left off from last week we're now running in scratch 3 we were looking at the death problem that we had and we fix that so now we need to do is add in the end so when we click these they have a little portal at the end let's see so what we can do and we just make this little screen smaller so we have a bit more space okay so let's begin what we need to do is actually add in an exit first so what we're going to do for that is we're going to clone the collectibles sprite while duplicate sorry not clone duplicate right click and duplicate ok and we're gonna call this exit like so it's a little bit different from scratch too so you'll get used to this idea of how are you rename things and things but that's how you did it in the box ok so what have we got to do now first of all I guess we've got to draw the portal so that's going to costumes we're going to do it very similar to how we drew the collectables so what we actually can do probably is just select that and make it bigger if you hold down alt just so you know the Alt key and drag the corner it resizes from the middle rather than from the edge which is quite useful so we can resize it the size we want and I'll make the middle big again it can hold down alt while dragging the corner so something like that and let's change the colors so the outside glow let's go to the drop down the colors here and we're on radial fill already the circular one we want to swap around these two colors we want the transparent to be on the outside like and we on the inside to be around 50 which is right and then 44 saturation drag that down to about 40 yeah and then brightness let's put that right down to 40 so it's just a dull glow at around the edge that's good click onto the middle part and this one is click again on there we want it to be actually no we don't want to raid your fill those we want a solid fill do that this is a closed portal and we want the outline to be one color and the inside to be black so let's just make that out fill black first click on outline and we'll make this the same color as the glow which is color 50 this saturation 40 and the brightness of 40 like that okay maybe make our outline a little bit thicker as well let's make that into four try that so you mean yeah there we are look at our line of four good so that's a closed portal now we need an open portal so if we duplicate this costume that now for the open one what we want to do is change the color of the inside and let's change it to fill and we'll have a linear gradient field which is this one here and the left side we're going to set to again 50 it's the color we like so kind of blue color saturation of 40 and dryness 100 nice and bright like a sky and the bottom color of the fill we want to be white which is brightness 100 and saturation zero that's it that blue to white they're beautiful portal like that very much okay so that's our little portal drawn let's give these costumes names we'll call the open one open and we'll call the closed one closed there we go nice and simple right so what do we do now now we want to be able to position that portal on our level now this is going to be done just the same as we did our little collectibles back in goodness knows which part of our tutorial seems so long ago now but to do that it's this bit of script inside the exit which we have duplicated from the collectibles so it's position so we want to position our portal him and we've still got our little clever m'kay key which hopefully you remember we're just going to tell us where to put something so everyone the project okay we'll go all the way to the end and we want to put our portal just here floating at the end of the level so put the mouse where you want it to be and press m and hopefully everything is still working our little script will have shown where we want to place this so type these numbers into the first clone at so 944 by 22 okay that's in there now we do not want any of these other clones because we want one portal so that will pop that there so we should better give it a little quick check for you run it there we go portal is there closed great right what's our next step let's hide that mouse there because we don't want that anymore so go into availables and get rid of that Mouse good okay so we've reached in the level and the portal is shut we need this to open when we've collected all the collectables but to know whether we've collected them all we need to know how many there were to begin with so we need to have a record of that add it to the game so if we click into the collectibles sprite and we'll add a new variable for all sprites so we'll type this in capital letters again so we know we're going to call it collected max okay so this is the maximum number that you can collect click OK okay now the beginning that's zero but we'll we'll set it to zero as well we'll do it just here under the set collected and we'll set collected max to zero as well okay and now in here we're going to be cloning our new collectibles so if we keep track of every time we clone one by putting a change into here like this change collected max by one so if we were not now collected max it's five and amount collected zero so as we go through the level collective goes up letting max stay the same of course and now collected max and collected at the same so at this point we want this portal to open that stopped the scripts now where are we going to put this this bit of script we're gonna add to the code where here we go in the when received tick this is where we are checking to see if the collectibles touching the player and we're changing the amount of collected by one so in here we can add an if statement just underneath the change collected make sure that deletes underneath if not inside it and we need to compare using an equals operator that collected variable so I is equal to collected max so at the point that you've collected all of the collectibles then we can do something and we'll use an event or broadcast in here like that and we'll book us a new message and they say this is going to be open port or like so okay and that we can receive in the portal sprite so go into the portal sprite and we'll add in the new receiver down here which is going to be open portal and in here we need to switch the costume looks switch costume - guess what open okay so that should open the portal to Reve they go it's quite an exciting change so here I am testing the level collecting all the collectables and I miss this one right the portal is closed and I'm collecting this little collectible it opened the a that's great and now what we need to do is make the script for when we go into the portal that the level will end at present I can collect it because it's just a duplicate of the collectible sprites which is obviously not right so stop this and let's go and fix that so in the exit sprite let's find the bit where we can collect it here we go so in the tick receiver we've got if touching player and then change collected by one and delete the portal which is not what we want so get to that so this is where the scripts are going to go now one important difference here so we don't want this touching to work if the portal is closed so we need to put an operator and we put an end in here now let's replace the touching here with that and put the touching into the second part of the end now on the left side we need to check that the costume if we go down in the looks we'll find a costume here and we need back to the operators we in equals so costume number equals now we can either do costume number equals two because if you're looking in costumes its costume number two is that open one or we can use the name open which is a new scratch to things so we can change the name and put open in there so up to you which you do their costume name or costume number we'll try a name because that makes it a little bit more clear what's going on in the scripts mono number two and when that happens what do we need to do well it's the moment we need to set available exit just like we do when we die but we're going to set it to rather Ming die we're gonna set it to win and at the moment in our scripts that probably won't do anything different to how we die because I think we set it up so that it would anything happens and without ex available it just kills us but let's try it anyway okay let's test this if I rush through this level I'm gonna not collect them all and miss one so that we have a closed portal and I jump through it and I don't go through perfect it was closed if I went through and this time I collect them all and then jump in I die which is exactly what I want because the the moment when I said any thing in the exit available our player sprite or kill us which is what we set here we go when X is anything other than zero blank sorry we died so we need to change this now so that we can do more than just die at the end so let's change this a little bit down here let's add in if-else condition around this die can I even get in my place no I cannot nevermind let's move that out pop that in there like that there we go so what we're gonna do is put the die in the second part of the if in the else part and this condition here is going to check to see whether we've won so put an equals operator in there find the exit available in one side and put win in the right hand side okay so when we finish the game because the exits been set we then check if exit is win and we'll do this and if it's not win we assume we're gonna die now let's create a new custom block for when we win so it's call this game win and we won't run without screen refresh leave that unchecked and drag in your new game win into this side okay so when we exit and when we go into win otherwise to die let's move our game win over here where we can script up a nice new bit of code there we go this is quite an exciting bit and as you saw in the demo at the beginning of this tutorial I had this little animation where the player would we surround the exit and go into it now that's quite a nice little feature so let's have a go implementing that so what we're gonna add in here is a repeat loop for 50 frames of animation that's how long it's going to take us to get into the middle of the portal and then we add in a point towards I'm going to point towards the exit like that then we shall turn our player by 65 degrees okay so what this is doing is we point a little character towards the middle so he's facing towards it so if you move forward here to be straight towards the exit but then we turn him away from the exit by 65 degrees which moves us into kind of this direction and what that means is that we're actually moving kind of around the exit so let's do that and we want to move forwards and now this is a bit more interesting too because as you're on the outside of the portal you move fast as you go in you move slower as you're going in so what we need to do is have an operator put a divide in there and then you want sin which one is it sensing yep distance to and put distance to portal exit sign in there and divide it by two so we're moving forward by half the distance that we're away from the portal and then other things we want to do is change our player size so it looks like we're going into the portal so go to looks again change size by and we'll put minus 1 in there to get smaller by a little bit each time and we'll also make them fade out as he goes into it say we want to change it's not gummy color we want it to be ghost to make him getting more and more invisible and we'll do that like - so that should do a little animation of us whizzing round and round the portal and at the end of this we are going to change level by one to get us onto the next level and add one more thing which is a weight of one second at the end one more thing sorry we also need to hide hide ourselves after we've done I repeat before we do any weight waiting so should we give this a go and see what happens okay so let's get what's the portal jump in nope that most certainly did not work so you can see even I have bugs in my code so the reason for that I already know is that in our exit scripts if we look at our clone at here when we when we are setting up our level we clone a new portal at this position that we wanted to add but the problem is if we're using clones then our scripts in our player which was trying to rotate around the portal don't work because they're looking at the position of the main sprite for the port the exit not a clone so we want to get rid of this to create clone because we don't actually need clones for the portal we just want to use a normal sprite and position it also what we need to do is remove this set X at the bottom of the setup because now we're not using clones so we want our position to be exactly what we set in here that's one nut again well hold on I'm tiny and upside down that's not quite what I was after let's stop that and fix that too now the reason that's happened is I we are little animation did start to run and it's changed us but we haven't got any scripts in the player sprite to make ourselves the right size at the beginning of the game so let's go through to the game on where it shows us and let's set our size to be a hundred percent here we go so set size to 100 there I will also upside down which shouldn't be happening so let's have a look at fixing that what you want to do go into the player direction click on that and let's change it not to be rotating but to be flipping after my instead and that also keep us the right way up so that should be right ok let's have another go run that okay we're back to normal let's collect all of the collectables and jump in yay far better and we are now on level 2 level 2 doesn't look very good does it so we got some work to do there so let's just come back the editor and just for starters let's just add in a little bit of level 2 so we can see that it works so to do that lets go into costumes on platforms and for now let's duplicate our level 1 like so put it at the end and we'll call it level space 2 space 1 so it's level 2 and the first part of it and let's just make it a little bit different so we can tell I'll just make it slightly rounded like that what we also need to do is go into the exit code to avoid having this portal appear in the middle of the level let's just add in a clone portal let's just clone it to the right of the level so that would be about 240 I think now click on the platform sprite okay now what we need to do is add in a level 2 script in the up so just duplicate the if inside the else part I'm going to have a check for level two in here or set level to be level two one get rid of that we don't even need the clone part so it's just setting the costume two to one because that all position in our first part of our level at that position and the same needs to be done in danger of course so duplicate the if into the else check for level two and we're going to set the costume but we haven't got us for a costume for that yet so let's just create a new one blank costume called level two one now we'll set that in here as well good let's give that a whirl now we're getting somewhere so the only thing left is our little character is completely invisible you must be there I can move so why is he not it's because when we added our player fading out we faded him - nothing using ghost but we never set him back so that he was visible so show won't do it you need to set ghosts to zero in there so on game on setting his size setting his ghost to zero and we're showing him and I think that will fixed everything and we'll be in a much better place there we go level - very good give yourself a pat on the back if you got this far that was a little bit of a hairy episode I think so thank you for watching I hope you'll come back next time bye now

Original Description

This is part 7 of this tutorial series where we are building a scrolling platformer game together in Scratch. (Part 1 can be found here: https://youtu.be/sebnyhBsXug). In this episode we add in an end of level portal, make it open when we have collected all the collectables, and proceed on to level 2! Apologies for the length of this one, I went and made a number of mistakes as I was making it, but decided it might still be useful to keep them in so that you could see why they occurred and how they were fixed? 🚀 *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
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from griffpatch · griffpatch · 10 of 60

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
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

In this tutorial, we build a scrolling platformer game in Scratch and add an end of level portal that opens when all collectables are collected, allowing us to progress to the next level. We cover the basics of Scratch programming and game development concepts.

Key Takeaways
  1. Create a new sprite for the end of level portal
  2. Add a script to the portal sprite to make it visible when all collectables are collected
  3. Implement level progression by switching to the next level when the portal is touched
  4. Add collectables to the game and make them disappear when collected
  5. Test and refine the game to ensure smooth level progression
💡 Using Scratch, we can create a functional scrolling platformer game with collectable-based level progression, demonstrating the basics of game development and programming concepts.

Related Reads

📰
I Went Looking for a Fan RPM. I Ended Up Inside My Laptop’s Firmware.
Explore how a simple query about fan RPM led to a deep dive into a laptop's firmware, involving Linux, ACPI, DSDT, and the kernel, with AI assistance
Medium · AI
📰
Otter vs MeetingMinutes: Which AI Meeting Recorder Should You Choose?
Choose the best AI meeting recorder for your needs by comparing Otter and MeetingMinutes beyond transcription capabilities
Dev.to AI
📰
How are you handling AI exhaustion?
Learn how to manage AI exhaustion by automating tasks and prioritizing accountability, and discover strategies for handling the pressure of increased workload with less human oversight.
Dev.to AI
📰
How Can a Beginner Use AI to Start Making Money Online?
Learn how to leverage AI for online income as a beginner, exploring tools and business models for monetization
Medium · AI
Up next
How to Get Your Brand Cited by ChatGPT, Claude and Gemini
Arvow
Watch →