Awesome Number Counters 💯 | Exciting Scratch Game & How to Tutorials

hello fellow scratchers have you made a great scratch game but felt it was let down by using scratch's built-in variables for the score or timer yeah we've all been there well worry no more because today i will be showing you how we can dispense with those and replace them with something a lot more awesome oh yeah come on the concept is pretty straightforward we need to have the digits 0 through 9 as costumes of our sprite and then we add a little code in to handle the rest and that's what i'm here for so guys without delay let's get scratching we'll begin with a fresh new project and quickly mock up a simple clicker game we just need a score variable for all sprites there it is and then when this sprite is clicked we change score by one wow this is about as basic as it gets right we click our cat and the score increases job done but gosh it would all look so much better without this boring generic variable reporter it's so small and uninspiring i mean we could double-click the score on the stage to change how it looks that's a tad better but it hardly adds to the excitement of me clicking the cat no what we really want is for the score to be large colorful in your face and really funky the only way we can currently do this is by using sprite costumes well alrighty then we'll start by making a new sprite i'm giving mine the name score click to choose a new costume from scratch's library and search for glow now you notice there's a whole costume font already made for us well that's handy choose the zero digit first so that looks pretty cool much more exciting than a variable reporter now we need to import the other nine digits one costume at a time i've copied the word glow into my clipboard so that i can paste it into the search box and save time however don't feel you are stuck using this particular font the tutorial will work just fine if you want to draw your own that would be super fun and would make your project unique to you phew i've imported all 10 costumes 0 through 9. let's center the costume on the stage just move the score variable reporter out of the way first yeah that looks great now we just need to figure out how to make the beautiful new digit display the same number shown in the variable reporter often a problem is not so hard to solve if you can first break it up into smaller problems and then solve these smaller problems one at a time rather than tackling the whole score of 117 then we'll begin by looking at just the first digit the character one come into the code tab of our score sprite let's start by setting up our sprite when green flag clicked go to x y the current position of the score sprite is pre-populated for us great to help explain what we are doing i'll bring in a say block from the looks category and for now simply say the value of the variable score hit the green flag to run the project and we'll see the full score of 117 displayed but for now we only want to deal with the first digit of this longer number luckily we can get the first character using the letter of block this is ever so useful just plug in the score variable and yay out pops the first digit only the one just as we hoped right that was the first hurdle now we need to translate this into a costume the costume for a digit of one look in the costume tab see how all the costume names begin with the word glow and a hyphen and then the single digit the costume represents like a 0 1 2 etc well that makes selecting the right costume super easy all we need to do is join together the word glow with a hyphen with a digit we want so back in the code and pull in a join operator on the left we enter the word glow hyphen ensuring to keep the uppercase g and then on the right drag in the letter one of score do you see what this is doing put it all back into the say block and run the project and now you can see we've managed to construct the full name of the costume glow hyphen one great so instead of saying the costume name toss in a switch costume block and move the join in there the old say block can go awesome let's give it a test yes as long as you match the costume name exactly including the uppercase and lowercase letters you should find that the costume has switched to the correct one it's worth trying it with some other score values just to make perfectly sure it's working as expected and of course i can click on the cat and the score variable goes up but i do still need to click the green flag afterwards before this large digit updates now once the score increases to 10 and above well we come undone because we need to look at the next part of this tutorial increasing the number of digits displayed to accomplish this we will need to make copies of the first digit sprite and for this we shall use clones bring in a repeat block to surround the switch costume now for starters we'll have 4 clones so enter four in the repeat loop after switching costume create clone of myself but before we loop around and continue creating more clones to prevent all the digits being cloned on top of each other we need to move this sprite out of the way to the right change x by ah we don't know how far to move it the size of the numbers will change depending on our costume and also the current size of the sprite a size of 200 will need twice as much room for each digit right then let's experiment try moving right by the size reporter of the sprite itself that would move 100 pixels when we are at the size of 100 right well it's good to see the clones are appearing but these digits are far too spaced out in fact we could fit one digit in between each of these clones that's actually quite a useful measure perhaps we should just half the distance we are traveling change x by half the distance then that is size divided by two give that a test okay yes that's looking much better so depending on the costume you've used in your project you may need to tweak this number two to make the spacing work for you so we have our clones but they all show the same value be it one one one one this is because each clone is still set up to show letter one of score what we need is for each clone to be assigned a different digit position for it to display the first second third letters of score but before we deal with that did you notice that although we have created four clones you're seeing five digits yeah that's because the last digit is not a clone but the original sprite we should deal with that first so it doesn't confuse things drop in a hide block after the green flag is clicked and then when i start as clone show this way only the clones will display right give that a test and there just the four clones are showing ah now we have the when i start as clone hat block we can move this switch costume over to here this puts each clone firmly in control of switching its own costume which i like but as we just noted they are all looking at letter one of score to identify which letter of score each clone should represent we'll make a new variable and name it index make sure to switch it to for this sprite only as each clone need its own value for this to work we begin by setting index to 1 just before our repeat loop and then change index by 1 as the last instruction in our loop we can see this in action by bringing back a say block drop in the index variable and give that a run there see how each clone is reporting its own index starting at one and counting up so that's perfect for pulling out the right letter from our score simply drop the index variable into the letter of score block okay we need to test this baby out set score to 4321 4321 click it to set the value and then run this project oh wow yeah look at this 4321 exactly matching the score variable but in beautiful large vector letters so delete that say block and there we go so cool and if i click the cat to increase the score still not updating the costumes automatically we don't want to have to hit the green flag for this any longer no problem drop in a forever loop around the set costume block and then make sure to restart your project this ensures the new clone forever loops start running and now click that cat yes this is more like it our costumes are now synchronized with the score variable and i am loving it also if we double click the score reporter to change it to a slider and right click to set the slider's range setting a max value of 9999 now we can slide this around and see the score tracks this too everything is working great so are we done here oh no no look what happens when the score is dropped down to zero bummer okay so what has happened here well the first digit is a zero that's correct but the rest that's a mess equally if i increase score to a say a three-digit number the first three digits are good but the last one nope the problem we have is that we don't have any sense of a blank digit what do i mean well look if we use the letter one of block with the number one hundred obviously we get a one back as the first letter and letters two and three are both zeros but what about letter four do you know the answer yeah it's blank the empty value because there is no fourth letter in a three-digit number well knowing this gives us power come into the costume editor see the first leftover blank costume here if you don't have one then don't worry just create a new one the order won't matter either so we start by grabbing the costume name from the other costumes glow hyphen but not the last digit and then we use it as the name of the blank costume that's right just the start of the name with nothing after the hyphen so this costume name will match any blank digits that is any letters past the end of the score shall we test that out there you see we are down to three digits yes the fourth clone is still there of course but it's now using that blank costume so we simply cannot see it we can drag the slider back and forth and clearly see this working a treat good job if you have got this far okay i can reach the number nine nine nine nine but what about ten thousand or one hundred thousand a six digit score well change the slider range so it can go to 999 999 oh boy that is not good four clones gives us a maximum of four digits and after that we are in trouble but not an issue back in the code up the repeat loop from 4 to 6. well that sorted that now we just have the problem of the score trailing off the screen perhaps we'll move it over to the left like to here just enter a negative value into the go to x at the start here i'll try minus 180. that's not so bad it all fits now so as you see we can position and size the score in any way we want i'll just try different size hold on what's up with this scratch is refusing to let me size the score sprite that's confusing hmm let me try using a set size block instead set size to 50. run that no way it's still not working look size is still 100 okay then i've guessed what's up and it's silly look in the costumes tab the selected costume is the empty costume and this has a size of zero by zero pixels and as such scratch is preventing us sizing the sprite down at all if we switch to any other costume before the set size then now i bet you this will work yes oh my word how scratch likes to test us right well at least we know how to solve that one now okay back to positioning the score now that it's so much smaller we could move it over to the right again for it to be more central perhaps set x to minus 80. so that looks okay for the longer six digit score but what bugs me is that when we drop down to a shorter smaller number well then the number looks like it's far off to the left of center and that's not so nice to look at indeed our number is left aligned and although this can be perfect for some layouts i would also love to show you how to make it center aligned as that can look even better when your score is front and center like this one now the way we center align text is to take the text we have generated find its full width and then move all the text left by half of that width and that's it it's centered to code this we are going to have to do a little maths so here are our six clones each with an index variable one through six to position them on the screen remember that the width of each digit for me is given by size divided by two so we could set each clone's x to index multiplied by size divided by 2. that would give us our letter positions as follows but notice that because sprite costumes are centered that the first digit appears offset half its width to the right of center we can fix this first by subtracting half from each index that will move them half a digit to the left and now to center them the length in digits of our number is three so we half three three divided by two is one point five and then we subtract this again from index okay not so hard maybe let's code this up start with the set x block and we need the index variable and a size divided by two these we can multiply together and plug into the set x block to give us an initial positioning if we run that then we get a simple left align position as before be it a little right of center so now for centering we subtract half that is 0.5 from index to allow for the center alignments of the costumes then from this we subtract the length of our score variable ah but we only want half of its length so bring in a divide and we want to divide this length by two there pop that back in and then the whole expression wants to be placed on the left here multiplying everything by size divided by two excellent that's quite a long sequence of blocks but does it work run the project nice the six digit number looks to be centered but we'll only know for sure if we try a shorter score with less digits down to five yes to four oh yeah marvellous this score is centering perfectly now just in case you wondered if you wanted to position this text elsewhere on the screen you can easily insert a change x by after this go to x to offset it elsewhere and the y you can set as normal we can also confirm it still works with larger sprites too yeah great now we are almost done i suggest we speed up the initial cloning to avoid any unnecessary flickering so make a new custom block named setup and we run without screen refresh move the entire green flag script stack under the new define block and then replace them with your new setup block all the digits will appear as soon as the project runs smokin so that's everything that i really needed to cover to ensure you can make some amazing projects with this but before we finish i would really like to also just tag on one extra thing that looks oh so cool a little animation find the when i start as a clone script we'll start by making a new custom block naming it change costume 2 and then add a new text input called costume we want to use this in place of the switch costume block here so move the join into the input of the custom block and the actual switch costume can move down into our define change custom block finally link up the switch costume by using the costume input variable from the define block good so we've re-jigged the script but it does just the same thing as before so far but now within the custom block we are given the new costume name before we actually have switched to that costume this will allow us to check whether the costume needs to change or not so if not costume equals costume name then switch the costume again this does not change anything but it opens the door for us to take another action when the costume does change and what we'll do is set size to 120. if we test that you'll see only the change digits grow bigger but to complete this effect we need to quickly return them to their original sizes afterwards place a change size by after the set x in half revolut stop the project and a nice smooth size change can be given by multiplying with a subtract then place the current size on the right and the target size on the left that gives us the difference in size then multiply this by a fraction like 0.2 to slow down the animation and that's it we are ready to test so firstly drag the slider on the score variable oh man that is cool see how the letters pop out as they change and then sync back to where they belong i like that let's go full screen and try clicking the cat oh yeah this would make a sweet effect for any clicker game don't you think and i wonder what other special effects you could think of that would take your games to the next level and i am finishing now honest almost i just wanted to answer the question that you were just thinking can we extend this number engine to include words letters and symbols too yes yes we can simply go into the costume editor import the characters you are interested in that could be quite a lot of them so be warned and then you just set score perhaps we should use a different variable name at this point set score to a word like bed and then ah 401 okay so that didn't work why not nah simple because costumes are case sensitive we need to use uppercase letters to match the costume name letters try again with b e d all uppercase and there you go we have at the start of a text engine exciting idea for a further tutorial perhaps and okay i've made a scratch studio for this tutorial you'll find a link for it under the video if you manage to make something with this tutorial or use it in one of your own games i'm sure you will then please don't hesitate to submit it to the studio i'd love to see what you've made and with that we are really done if you enjoy this video then smash the like button and don't forget to subscribe to the channel so as not to miss any future episodes if you feel you could support the channel further then please do consider joining the channel membership there are perks for all levels including some awesome custom emoji priority replies to comments early access to videos and for educators and top supporters access to the projects themselves so good well thanks for watching have a great week ahead and scratch on guys [Music] you

Channel: griffpatch

Views: 36,352

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

Id: atMwy3UKc14

Length: 22min 56sec (1376 seconds)

Published: Sat Dec 18 2021