Multi-Scene Magic in Scratch! | RPG Tutorial Ep.11 ๐
Key Takeaways
This video teaches how to introduce multi-scene magic to Scratch RPG games with modular scene saving and loading
Full Transcript
[Music] hello fellow scratchers it's been a while but we are back with a brand new episode of the legendary RPG series and gosh is it overdue having just coded the very excellent level saving system in episode 10 now we finally get to create multiple scenes and Link them all together to create a much much larger and exciting game world but how do we keep track of which scenes link together no problem we'll do it by giving them clever names like this one over colon Z colon Z this represents part of our Overworld map combined with a coordinate an X and Y telling our game where the scene is located on the full map so as you can expect that will require some cutting value manipulation but it's all in the day's work for a Griff batch tutorial so are you ready for some RPG coding fun I certainly am so find your projects from where we left off in episode 10 and save them as a fresh new copy for this is scratch RPG episode 11 guys let's get scratching we need to begin in the level store Sprite this is where all our saving and loading code lives hopefully you too have the current scene set to over colon 0 colon 0 and if not then you have the option to set Yours to this now now why not make the C name variable visible on the stage good okay so our level is surrounded on all sides by bushes to get past these to another scene we'll need to clear a path the zero key enters the level editor and the E key picks the empty tile under the mouse and now I can brush with the empty tile to remove the section of the wall and can I walk off no I cannot but we have bigger problems to chew on because when I click the green flag again oh dear my level changes have been lost so before anything else we'd better complete the saving of any level updates the obvious time to save is when the user closes the level editor right I can see we already created a load scene event similarly we now add a when I receive store save scene and don't worry the custom block already exists for this save scene it requires a name to save under and we use the current one from the seen name variable great that will be perfect Oh but before we move on there's something I just wanted to fix in here scroll down to our Define new map script there's a block I want to copy this set gml from gmax there we go I copied it and then return all the blocks back as they were before now find the Define read module grid script this is where we load up a saved grid list and again we are setting gmax but do we set gml no we we don't well that could be very unfortunate if the scene size was to change so paste in the copied blocks now VI you thank you to all the scratchers who pointed that one out to me next up then we can head into the tile Sprite we are looking for the toggling of the level editor so find the when zero key pressed hat block if you're wondering why I have this helpful find bar it's part of the awesome scratch add-ons browser plugin I know many of you are already using it too okay now we need to be careful it probably isn't a good idea to save the scene while the main game Loop is still running so broadcast and wait for the Stop Game Loop event to run great so this top if Branch runs when we are exiting the level editor setting editor back to zero and this is the point we should be saving our scene edits drop in a broadcast and wait once more to the new store save scene event in the level store and look here this is where we hide the editor layer variable it makes sense to also show and hide the scene name here too duplicate the hide and also hide scene name now for the else Branch this is where we open the level editor and rather than saving we'd be wise to also force a fresh load of the scene so broadcast store load scene and wait now why load a scene that's already loaded well there's nothing to say our levels won't get modified in game as the game is played so restoring the level before we edit is probably a safer bet we'll also show the C name variable and finally since we stopped the game Loop right up here we'll need to start it back up again with a broadcast start game Loop now do notice I didn't use the broadcast and wait here that was important as we want this script to end and the game Loop is free to continue on without us brilliant smash that green flag and we can give that a test toggling the editor on and off should show and hide the scene name cool but more importantly if I make a change to the level and then exit the editor I'm expecting a green flag click to no longer reset the level yes this time my change was saved and persisted you just need to remember that to keep the level permanently in your scratch game you also need to save the project too anyhow that is awesome I'll just tidy up my screen by double tapping the SC name reporter to switch it to its more basic form okay saving achieved our next task is to get the player walking from one scene to the next not so fast we've already hit a problem do you see how we are being stopped in our tracks right at the edge of the level and this is a bummer the reason is down to how we store our levels in lists grid lists one row at a time lined up one after the other this means if we try to check what tile is to the left of this one we'll find it's the tile from the opposite side of the scene well pants that's another wall of tiles no wonder we have problems getting off the edge of the screen and we can prove this by rushing over to the other side of the level gosh why did I make this scene so big hold on to that thought now if I redraw the boundary bringing the wall of bushes one tile to the left okay so now there's a gap at the right so dashing back over to the left again and a slightly confused result but this is a success when compared to last time and it is enough for us to trigger a change of scene therefore we are going to add a one tile Gap to the right and top of every scene in our game and yes that that would look bad if we allowed the player to ever see it so we'll be careful to stop our camera ever scrolling it into view okay if you want to keep your existing scene playable then we need to take the time to remove all the tiles from the far right and the top rows it's sent up to you whether you restore the Border bushes or not and now we're safe to proceed on to change the camera fencing the code for this can be found in the player Sprite under the Define move camera script scroll down to the bottom to if conditions the first prevents the camera from moving further than the level width minus half a screen 240 pixels now we want to increase this by one tile so 240 + 32 is 272 the same is true for the top edge of the level 180 + 32 is 212 only we must change it on both these lines 20 22 for each give that a quick test speeding over to that right hand Edge and it's perfect the right hand tile is completely hidden great then we should consider our level generation code next click back into the level store Sprite and find the new map script this creates a fresh new fully bordered scene filled with a random splattering of grass and bushes that's great except except we need to include that one extra tile around the Edge from now on either that or we consider scrapping the Border alt together since we are now free to walk from scene to scene unimpeded well I'll show you how to do both and you can make up your own minds we reduce the body height of the level by one tile that's now gmax minus 3 and add it back as a blank top row add to grid but fill it out with blank tiles now we reduce the body width using gmax minus 3 instead of two and similarly attack one extra blank tile to the far right add blank value to grid oh my I almost made a terrible mistake there the final add to grid that we dropped in at the end was in totally the wrong place it needed to move up to be before this final repeat that is for building up the extra two layers above the first grid and these need to be blank and now a big conundrum you might notice that I opted to set gmax to 100 here that means each scene is a ridiculously huge 100 by 100 tiles that's 30,000 tiles each when you include height but now that we'll be able to split our map across multiple connected scenes I'd much prefer to limit each scene to just 32 by 32 tiles but if you have already created a fantastic RPG scene and you simply couldn't bear to lose it then I'm afraid you're just going to have to stick with gmax as you have it set now for me I prefer to have a fresh start I am setting gmax to 33 one more than 32 to allow for that one tile Gap then while I have the level editor open I can click the new map button and boom my beautiful level is no more but I am now standing in a very nice 32x32 bordered scene which I think you'll find is a far more manageable size to design your game within so how about we look at generating a fully empty scene next well that's even easier instead of all the complex generation scripts after we set GM we just replace them with a single repeat block repeating for G multiplied by three one for each layer of tiles and then we add the blank value to grid inside that Loop yes that's all we need for a fully blank scene click the new map block again and there you go as blank as a blank thing just remember for that new level to save you need to have clicked new map with the level editor open then when we toggle it off with a zero key that causes it to save and now it's time time to code what happens when we walk off the screen green so I'll make sure we can identify our home scene by decorating it with a number one and some pretty flowers and a tree and here we go we can click into the player Sprite let's get our bearings the main game Loop is here broadcasting tick player so find that when I receive tick player script this deals with the player and the camera movement so now we need to test if the player has moved out of bounds make a new custom block for this called check out of bounds and be careful not to check the run without screen refresh I know leave that well alone this is because we may want to add in a transition effect later on and that will certainly require some animation so drop the new Block in right away check out of bounds and now let's flesh out this new custom Block in some free space we'll Begin by checking whether the player has walked off the left edge of the scene if player X is less than zero then that's it we need to change scene so perhaps another custom block is in order name it change scene and follow this with an input named type we can use this to identify the type of transition next add a label Direction followed by two more inputs DX and Dy these are to tell us the direction we are traveling in once again refrain from clicking run without lemons for the same reason as before I do intend to add a transition animation later on so as before make use of the new block to change the scene as we walk off the left edge of the scene fill in the type as Edge and we'll give it a direction of minus one we're walking to the left and zero that's one scene to the left and no change up or down does that make sense good to check if we've walked off the right edge of the scene it's if player X is greater than and the right Edge is calculated as 32 at a tile width multiplied by and then we need gmax minus one to account for the extra blank column plug those together and update the change scene to move positive one scene to the right excellent now for the bottom and top Edge es duplicate both ifs and change all player X's for player y's also the directions need switching to zero and minus one for moving down a scene off the bottom Edge and zero and one for moving upper scene Splendid if you want to test this is working you could drop a stop all script into the change scene block and confirm moving off the edge does indeed stop the project but let's plow on because this is where things get fun we are officially changing scenes now so as we transition we can stop other scripts in Sprite this forces the game Loop to come to a stop also drop in a weight zero block to ensure the loop ends before we now continue if editor is greater than zero then the editor is active so we'd better ensure any changes get saved broadcast and wait for the store save scene to complete fantastic now if the input type is equal to the word Edge then yep we've just walked off the edge of the scene in that case we should check the current scene name it reports as over colon 0 colon 0 so this is where we need some clever code to split the scene name apart from its individual X and Y components well okay then let's make a new custom block naming it split string with an input string a label at and a final input character or Char for short and this time we do check the run without screen refresh so given the input string over colon 0 0 and a split charart of colon this custom block will Loop through each letter building up the individual strings within but splitting them whenever it finds a colon and this should result in a three item list let's create the list first name it strings making it for this Sprite only we'll delete all of the strings to ensure it starts empty and we need another variable the integer I for this Sprite only to keep track of our progress through the string starting at the first letter so set I to one and another new variable string again for this Sprite only we initialize string to the empty value and now we can begin the process repeat for the length of the input string so to store the first letter make a new variable C for this Sprite only setting C to letter I of the input string so is it the splitting character if else checking if C is equal to the input Char that's a colon in our case if it is then we can assume we've found the split point so whatever value is now in our variable string we add that to the strings list add the orange string variable to Strings and then we set string back to the empty value now this will make more sense in a moment as we see what to do for letters that are not colons Splitters that's in the else branch in this case we set string to the join of itself string and the new letter from variable C finally we move on to the next letter in the string by changing I by One just before looping back around to continue the merry string splitting dance when this finally ends and all the letters have been processed we simply add to the string list whatever remains in that string variable we are done want to see that in action it's probably a good idea split string some words separated by spaces and set that splitter to the space character and then click the block and Tada all the words are split out into individual items in our list that's so cool right and how about a string of numbers separated by colons remember to change the splitter to a colon 2 and now again all the numbers are split out isn't that great we can definitely use this to decode this C name variable just drop it in and pow there's our map name and the X and Y position all separated out in our list Perfecto so scroll back over to our Define change scene custom block and we'll finish this baby off if this is an edge transition then split the string scene name at the character colon let's sity check that result if the length of the string list is three then that's as expected a map name followed by an X and Y position so now we can use these strings and the DX and Dy inputs to calculate the scene name we are transitioning to set scene name to item one of strings that's the map name over next up we need the exposition set TMP temp that's reusing an existing variable and we need an addition block summing item two of strings that's the scenes Exposition with the direction DX input variable that'll be minus one for transitioning left and one for transitioning right finally append this to our scene name set SC name to the join of C name and another join block because we first require a colon and then that TMP temp variable that's the exposition updated and restored now we'll do the same for the Y duplicate the last two lines only switching for item three the previous scene's WIP and add to that the Dy input variable nice the next line remains unchanged and our translated C name should be complete don't worry about the else Branch down here for now we'll come back to the other transition types another time think doors holes of the ground stairs goodness knows what else we might need down the road so yay we're close can you feel it broadcast and wait for the store load scene message to complete now what if the requested scene doesn't yet exist well no problem because our load scene script is set up to create a new scene in that case wow how clever of us now wowers we've done a lot of coding we may not quite be done but it's high time we tested our work so smash that green flag we can confirm we begin at scene over colon 0 0 now what we hope is that by walking off the left edge of the scene stupid list in the way that the scene name changes to over negative one0 exactly yeah so pleased to see that result but we didn't see the scene change on screen because the project stopped and that's expected as we never restarted the main game Loop anyhow so if I hit the green flag again now we find ourselves in the new blank scene at minus1 0 so now we can try walking off off the right hand edge of the scene instead that should return us to over 0 0 perfect and of course the project stops so can we just start up the game Loop and all will be well uh no there's one more thing we haven't considered when a player walks off the left edge of one scene we'll be expected them to wrap around appearing on the right edge of the scene once more okay then so if type equals Edge and then we have walked off the edge so which one was it if DX is equal to one then we are walking to the right so we must appear on the far left of the next scene set player X to Zero that one's easy let's duplicate this for DX equal to minus one the Maths for the right edge of the level is 32 multiplied by and we drop in the result of subtracting one from gmax gmax minus one great a simple task of duplicating both cases now and switching the DXs for dys and the player X's for player Wise job done and now we can restart the main game Loop broadcast start game Loop remembering that we mustn't wait for the game Loop that isn't going to end okay wow hide them varable reporters and list they just clog up our beautiful screen for it is testing time baby smash that green flag here we are on scene one over 0 0 I'm walking left and we've transitioned to scene over minus one 0 and the player is indeed now entering from the right edge of the scene that's excellent walking back and here we are again on scene one and we're at the left Edge Let's try moving down oh yeah that is what I'm talking about scene over 0 minus one that's one below the first scene and I can confirm we currently entered from the top of the scene and finally back up to the first scene that works for me tell you what an even better test would be to go back and lay down some rocks and now we can confirm that the new scenes are indeed saving and that we can revisit the same ones consistently I wonder how many scenes we can extend this too quite a few I expect hey wait a minute are you seeing that I'm experiencing a bit of scene flicker as I change scenes it looks like we are seeing a flash of the bottom of the first scene as we enter it and then it reverts to normal it's most likely that we just need to move the camera to the player after switching scene to confirm this simply drop a move camera block right before the broadcast to start the game Loop shall we try this again let's see yeah that was the problem excellent because that means we have reached the end of another episode now I really hope this has helped you scratch RPGs expand the Horizon on your game worlds I'm well aware that there's still Oodles of features to be investigated and code to be written so if you want more you must smash the like button right now share this video with your friends and simply make as much noise about it as possible watch it three times and click on all the ads whatever it takes to get YouTube to notice that we want more also if you don't want to miss any videos that I post then do ensure you subscribe to the channel and tap the Bell icon so you get notified the moment the next video drops I've had a lot of people ask whether I have any merch especially around the holiday season and yes now I do so you two can be a true gri Patcher and own a splendiferous gri patch mug just like mine or a bag t-shirt whatever takes your fancy but on that note this is the end of the video so thank you for watching do have an excellent week ahead and scratch on guys
Original Description
Introduce Multi Scene Magic to your Scratch RPG Games in this epic RPG Tutorial Series for Scratch. Building upon the modular scene saving and loading introduced in the previous episode, we now free ourselves to start to build a whole world from interlinked scenes!
๐ *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
๐ Episodes in the series:
Ep.1 - Craft your dream Scratch Game - https://youtu.be/5lof-Nu1VVE
Ep.2 - Infinite Scrolling & Tiles - https://youtu.be/g8xsQx-XkYE
Ep.3 - I AM SPEED - https://youtu.be/uxIH0W4S6LY
Ep.4 - Build a LEVEL EDITOR in Scratch - https://youtu.be/nvB9chNNl2s
Ep.5 - Split Screen & Multi Tile Assets - https://youtu.be/dgMlWZEaPek
Ep.6 - Layers & Onion Skinning - https://youtu.be/wWjot1vJBf0
Ep.7 - Collisions Pins - https://youtu.be/xSt7aF8MNn8
Ep.8 - Player Collisions - https://youtu.be/ZvQ0Gv4I2Cc
Ep.9 - Animate the World - https://youtu.be/zzAb8w8CRKw
Ep.10a - Data Serialization - https://youtu.be/g-9RcbQIQWE
Ep.10b - Modular Scene Saving - https://youtu.be/BJKQDaCPng8
Ep.11 - Multi-Scene Magic - https://youtu.be/xDp3AypuZtg
๐ฑ Scratch Starter Projects with Assets - Remix this!
https://scratch.mit.edu/projects/725577493/
๐ฑ Scratch Studio for Your projects
https://scratch.mit.edu/studios/32038156/comments
--------------Video Chapters--------------
0:00 Intro
1:08 Saving the Scene
3:10 Save when you close the Editor
5:44 Blocked from walking off Screen
6:49 1 block of grace between scenes
8:07 A blank row / column in a new map
9:33 Do you want to start again?
10:39 Do you want to start Blank?
11:22 Walking Out of Bounds
14:28 A Change of Scene
15:27 Splitting a String into Tokens
18:59 Translating the Scene Name
20:49 And Load the Scene!
22:06 Move Player to the correct edge of the Scene
23:33 Testing Time
25:07 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Burrow Blitz - A game by Griffpatch
griffpatch
Burrow Blitz Level 1 Speed Run!
griffpatch
Scratch Messaging Extension (for chrome & firefox)
griffpatch
Scrolling Platformer Tutorial | Part 1 | Get Scrolling
griffpatch
Scrolling Platformer Tutorial | Part 2 | Gravity
griffpatch
Scrolling Platformer Tutorial | Part 3 | Platform Detection
griffpatch
Scrolling Platformer Tutorial | Part 4 | Off Screen Sprites and Player Death
griffpatch
Scrolling Platformer Tutorial | Part 5 | Collectables
griffpatch
Scrolling Platformer Tutorial | Part 6 | Danger Sprites (Bug fix)
griffpatch
Scrolling Platformer Tutorial | Part 7 | Exit Portal
griffpatch
Scratch 3 | Box2d | Physics Extension
griffpatch
Scrolling Platformer Tutorial | Part 8 | Vertical Scrolling
griffpatch
Zombie Cube | Speedrun challenge
griffpatch
Scratch 3 | Physics Extension | Version 2
griffpatch
Top Down Scroller | E1 - Scrolling | Scratch Tutorial
griffpatch
Top Down Scroller | Part 2 | Enemy AI
griffpatch
Top Down Scroller | Part 3 | Enemy Clones & List
griffpatch
Top Down Scroller | Part 4 | Live Die Repeat (Game Over)
griffpatch
Top Down Scroller | Part 5 | You've Won!
griffpatch
Cloud Game Tutorial | Part 1 | The Basics
griffpatch
Cloud Game Tutorial | Part 2 | Encoding and Decoding
griffpatch
Scratch 3 Dev Tools Browser Extension by griffpatch
griffpatch
Cloud Game Tutorial | Part 3 | Multiplayer
griffpatch
Scrolling Platformer Tutorial | Part 9 | Momentum
griffpatch
Scrolling Platformer Tutorial | Part 10 | Wall Jumping
griffpatch
Cloud Game Tutorial | Part 4 | Auto Game Joining
griffpatch
Game Preview - "Getting Over It" with Griffpatch - A fan recreation in Scratch
griffpatch
Speed Run with Outtakes | Getting Over It | 4 minutes 30 seconds
griffpatch
Griffpatch's Live Stream
griffpatch
MMO Platformer Speedrun Challenge
griffpatch
Appel Platformer | Scratch Game Blog
griffpatch
Cloud Game Tutorial | Part 5 | Smooth Movement
griffpatch
How to Design a Level for Appel
griffpatch
Fastest Appel Speedruns | Jan 2021
griffpatch
Tile Scrolling Platformer (Mario) | 1. Setup
griffpatch
Tile Scrolling Platformer | 2. Grid List
griffpatch
Tile Scrolling Platformer | 3. Tile Collisions
griffpatch
Tile Scrolling Platformer | 4. Platforming Scripts
griffpatch
Tile Scrolling Platformer | 5. The Level Editor
griffpatch
Tile Scrolling Platformer | 6. Level Codes
griffpatch
Tile Scrolling Platformer | 7. Drop Through Platforms
griffpatch
How to make Physics in Scratch | Full Tutorial
griffpatch
Tile Scrolling Platformer | 8. Enemy Clones
griffpatch
Simple Pathfinding Tutorial
griffpatch
Tile Scrolling Platformer | 9. Enemies in Level Editor
griffpatch
Simple Maze Generation | Scratch Tutorial
griffpatch
Tile Scrolling Platformer | 10. Mystery Blocks
griffpatch
Simple Car Steering Simulation | Scratch Tutorial
griffpatch
Simple Background Scrolling Tutorial
griffpatch
Tile Scrolling Platformer | 11. Death, Background & Sound
griffpatch
Mid Week Update & Channel Membership
griffpatch
Simple Grid List Tutorial with Image Scanning
griffpatch
Tile Scrolling Platformer | 12. Auto Arranging Tiles
griffpatch
Code a Fun Space Shooter Game ๐ | 1. Move & Shoot | Scratch Tutorial
griffpatch
Space Shooter 2 - Enemy Collisions
griffpatch
Tile Scrolling Platformer | 13. Level Progression & Editor Improvements
griffpatch
Space Shooter 3 - Camera Shake & FX
griffpatch
Tile Scrolling Platformer | 14. Sloping Tiles
griffpatch
Pathfinding a Maze using Lists
griffpatch
Tile Scrolling Platformer | 15. Crouch & Slide
griffpatch
Related Reads
๐ฐ
๐ฐ
๐ฐ
๐ฐ
Figma to Code in 2026: React, React Native & HTML (The Complete Guide)
Dev.to ยท Balram Kapoor
The Image Accessibility Task Everyone Puts Off
Medium ยท AI
QR Code vs Kode Presensi: Apa yang Kami Pelajari dari A/B Testing dan Usability Testing Prototipeโฆ
Medium ยท UX Design
Meet Crumbie
Medium ยท UX Design
Chapters (16)
Intro
1:08
Saving the Scene
3:10
Save when you close the Editor
5:44
Blocked from walking off Screen
6:49
1 block of grace between scenes
8:07
A blank row / column in a new map
9:33
Do you want to start again?
10:39
Do you want to start Blank?
11:22
Walking Out of Bounds
14:28
A Change of Scene
15:27
Splitting a String into Tokens
18:59
Translating the Scene Name
20:49
And Load the Scene!
22:06
Move Player to the correct edge of the Scene
23:33
Testing Time
25:07
Outro
๐
Tutor Explanation
DeepCamp AI