 Hello and welcome to my tutorial on making sprites for the Commodore 64. Back in the old days you'd have used a pencil, an eraser and some graph paper, or some paper laid out like so. So what we have here is 21 lines down by 24 lines across. So that, if you mark them together it gives you 504, so 504 bits and if you divide that by 8 you'll see that it's 63, well it's actually 64 as there are the zero, also counts as a bit. So zero to 63, hence 64 bytes per sprite. Now by the magic and wonder of video editing what I'm going to do is create a sprite on paper by shading in individual cells and then I'll show you how we turn that picture, the sprite on paper into a natural sprite on the C64, so here we go, and we're done, hey smiley face. So if I just zoom in a bit closer here what you can see is that the width ways, the grid is split into three columns, each one byte wide if you like, one 8 bit byte wide. So what we have to do here is for each column we'll have a value, we turn it into a decimal value, so you can see on the top here no bits are shaded at all, so on the right over here we've got these three columns, there'll be a zero in all of them because no bits are set. And for the second column, sorry the second row, the first column again has zero bits set, but the middle one has 64, 32, 16, 8, 4 and 2 set, so what we do is we sum those together which gives us 126, zero in the third column again and then we move down and this time we have a 1, just a bit 1 set in the first column, bit 128 and 1 set in the middle column and just bit 128 set in the third column, so we have 1, 1, 2, 9 and 1, 2, 8. I'm going to speed this up a bit so you don't have to watch me complete the whole thing. There we go, row by row, it helps have a calculator handy. Now if like me back in the 80s used to painstakingly type in all these data statements with just random digits after them and wonder where they come from, well now you know. Heading on over to the C64 now, I'm going to write a quick program that allows to enter that sprite data and display it, so familiar to many will be this first command on line 10, print character 1, 4, 7 to clear the screen, then I'm going to set up a loop, the variable sprite and in that I'm going to put the value, the memory location 12,800 to 12,863, so that's 64 bytes, which is how big a sprite is and I'm going to just poke zeros into that throughout the loop to clear that of any garbage data that will be in there and there will be something in there when you first boot up the computer. So the next line 30, I'm just setting the sprite pointer sprite 0 to 12,800 which you might apply 200 by 8, that's what the number you will get, and line 40 I'm setting the X and Y coordinate of the sprite so that it doesn't display off screen and you think there's a problem, then I'm going to set in line 50 sprite 0 to on to being displayed and then here's another loop, again using a variable called sprite, same memory locations, but here you'll see before the poke statement there's an input, so it's going to ask the user for input and it's going to poke that input into the memory locations, starting at 12,800 each line here you'll see is a memory location, a value being stored into a memory location and you can actually see as the sprite is set to on, you can see the sprite being built before your eyes there, I mean what you would do in a programming or in a game is you'd enter all this data, well it'd be data statements anyway you'd have all this pre-written data statements that are read into the memory and then you turn the sprite on and it would instantly appear completely filled, but doing it this way, certainly back in the old days when you had to make a sprite via graph paper, I would be forever making mistakes in my haste to get it finished and doing it this way allows you to build the sprite in real time and if there's any mistakes and there's one there you can see them and you'll know exactly what line it's on on the on the paper and be able to go go back and edit it to get it just right, so what you can see there is the eyebrows are kind of broken on the right-hand side of the face as you look at it and also the eye is only seen through one pixel wide and it should be two, so obviously rushed it, but I'm going to speed this up a little now and you'll see the finished article and I'll talk a bit more about it. So after we've finished inputting the data and we've come to the end of that for loop we are just to return to the ready prompting basic and what I'm going to demonstrate here is that there are other things you can do with the Commodore 64 to manipulate sprites as well as set in the X and Y coordinate, there are also memory locations for each sprite where if you fill them with one you can double the X and the Y width and height of the sprite and that might make it easy just to see where you've gone wrong if there's a mistake it just kind of zooms in a little bit there. There are various other things that you can do which I won't go into now, but what about those data statements? So what I'm going to do here is just write another quick program and if you've not seen it before the question mark there gets transformed by the basic interpreter on the Commodore 64 into a print statement so if I had to list the program now that that question might be replaced with print now as print it's a really common command that you use in basic you know I guess the developers had the foresight to be able to switch it out for a symbol to make typing them a lot quicker. So this program is going to be very similar to the the first one except instead of for loops we're going to use data statements so I still use a for loop here just to read the data in but you can see there's a instead of an input A there's a read a statement there and we're going to poke each addressing you know the end variable which would be a memory location because you're using poke you know it pokes it into that memory location and to fill that with the data that's going to read in from the data statements below so you can see online 10 we clear the screen of text and we go to the suppressing routine starting at line 100 which I'm typing in now and which will be all the data statements that you know just look like unintelligible nonsense really to anyone even the you know even I created the sprite and I wouldn't have a clue what that what the data statements will transform into luckily the Commodore 64 does so if I speed this up a little here what we're going to see is once I've entered all the data into the data statements and run the program is another source of great frustration for all Commodore 64 developers and that is an error in this instance it means I've missed at least one digit and from the data statements because expecting more data than was actually input oh dear so there's an error there's error in 40 so there's you know not enough data being read into there in that for loop I quickly list the program so what the error spoiler alert I can't and of course in the edit it's immediately obvious that there are four bytes of data missing from line 130 just a couple of things I wanted to point out here you can see on line 10 that question mark has been replaced by print there was no space after the question mark so there's no space after the word print now and and that doesn't matter at all to the basic interpreter it's just for human readability we have the spaces in there and the funny little character after the L there's the typing list that's L and then shift an I on the Commodore 64 press enter and that will list the program for you it's just a little shortcut and you can do the same with run type in are and then shift and you present and it'll run the program not much of a saving but there it is so what I'm doing here is I'm copy I've copied and pasted in the sprite data from the UFO game so I've pasted in the sprite data for the actual UFO sprite and the the line for the sprite data in that program starts at 1110 so I've changed the go sub and now I'm just deleting lines 100 to 140 now you can see when running the program there's the UFO sprite being displayed there's the the program listing again there's an error so return with that goes up I don't know why there's a lot to look at that in more detail but the result is what we what we expected a sprite is is you know put on to the screen and if I remove that return statement it runs just fine okay so I've got our sprite on the screen and what I'm going to do now is just type in a few poke statements into the interpreter just to manipulate a sprite a little so here I'm doubling the Y or the height of the sprite and now the width of the sprite and so if you wanted a really big UFO there you go that's an easy way to do it and also just get other poke statements to move it around the screen you can see here that the text just goes behind the sprite it's completely independent nothing you type on the screen will interfere with that sprite at all unless you type a poke statement to turn it off so just changing the X and Y values here we'll also show that you can change the border color here and there you go to black in the background of the page see I've just gone up there and gone over it and changed the voting press enter again rather than type out a whole poke statement you can do that change the text card to Y and let's list the listing just to show the results of that now that's been a lovely walk down memory lane fortunately things have progressed a little in the 30 plus years since we had to painstaking enter data statements line by line sprites mate com and this is it this is what you're presented with when you visit the site so it's like straight into the web application and this makes designing sprites for the Commodore 64 a doddle it really does it eliminates any of the human error in calculating the data statements and in inputting those so what you what you'll get out of this and it can export to binary format if you're for programming in an assembler and hexadecimal as well as well as the basic now what you'll get when you save it as a basic far for the Commodore 64 is code that you can actually copy and paste into an emulator on a real C64 that will run and display the sprites on the screen and when you get to seeing the listing later after I've produced a couple of sprites you'll see those data statements and familiar poke statements and just see how well how familiar it should be to you by now so a quick overview I mean this is if you thought Microsoft Paint was a simple paint program this takes out a level lower so it's even an even shorter learning curve really so you have the tools on left you've got drop-down menus if you prefer but everything on those drop-down menus is displayed in front of you here you've got the toolbar which lets you save and load sprites so you can save them in the sprite mate native format and if you're not finished on them if you've got a sprite set that you're not quite finished with you can create multiple sprites in the C64 last up to eight hardware sprites and so you can create multiple sprites here save them all off reload them to touch them up or edit and change them finish them off that's really good really good feature and so you can have up to eight as I say and they can be individual sprites so player sprites enemy sprites missiles and what have you or you could have multiple frames of one character if you like so they would each be an individual sprite and you can cycle through them and to create sprite animation I won't be covering that in this in this video though so that for another time so but undo and redo which are pretty self-explanatory move just lets you move the whole canvas around so far as to draw something be unhappy with its position I can move around like that erase as you might expect just undoes what you've done and fill flood fills a closed area so do that go to draw now you see there's quite a palette here and but only two colors well one really is available to us however the Commodore 64 does in fact have two sprite modes higher is which is what I've been using so far and that allows just one color and the other one being transparent so far to draw something on here and that be my sprite everything that isn't white would be see-through so the background of whatever is being displayed behind it would show through so you need to be mindful of that okay so do that but as we know the Commodore 64 can display yes a color computer it can display colorful sprites and that the two so there's another sprite mode the multicolor mode or low res mode and you can switch that by clicking here when we do that you'll notice that the the cells horizontally are halved or they're merged so every two cells are merged the reason for that is the way the Commodore 64 handles color and sprites color sprites is that in reality for us drawing we can only yeah this is what we've got left now to play with okay but the reality of what is going on in the Commodore 64 is there are still there are now instead of like one cell per bit there are now two bits per cell or two bytes really so in the left most one so if you imagine it still looks like that in this left motion most one will just be a one or a zero telling the you know the C64 telling the Vic chip whether there's something to display or not and the right most cell will be a value which will denote the color so even in multicolor mode there are still some limitations and each sprite can have an individual color that's individual to that sprite and then there's multicolor one and two which have to be shared amongst all sprites now if I would just to show you a quick sprite here let's draw a crude face that's going to be a gonna be our sprite so a crude smiley face a bit lopsided but there we go now it's pretty not a great example because it's not pretty detailed so we really matter of using low res but if I do change it into low res you can quite clearly see although you still kind of make out that it's a face you've lost a lot of the definition there it'd be much better obviously if we could still have a sprite multicolor sprite in high res mode so there is a way around this developers found quite early on that's if you create two sprites you might see where I'm going with this you pretty work out what I'm about to do let's choose this brown color now if I just jam all this full I can't use fill because it's only a layer showing the other sprite behind it so it would just it would fill the entire entire canvas in the entire square so that I'm pretty sure that in that mode so as you can see as you can see we now have a brown face further with that okay so multicolor mode I can make some changes here so I might want to have pink the lips like blue color the eyes all you can see here will be the actual output you know if we overlay the sprites and on the C64 you can actually have a kind of high-res sprite a detailed sprite but with with color so that's going to do it for now matters when we export it and the clip save we're going to save it basic there we go that's that done and I'm going to go over now to the text editor just to run through the code that's been produced and then we're going to import that I'll paste it into the C64 and play around with it okay so this is the code that sprite mate has just produced for us by serving it as a dot BAS file so it's just open up in a text editor and you can see here's some pretty familiar commands and print character one four seven to clear the screenable text a couple of other print statements and then we set up the sprites as multi-color this one doesn't we're only created the two sprites so we don't need to be displaying all sprites but if you put the max value 255 set in all bits to one in 8-bit byte memory location 53269 all sprites are displayed this is a four statement similar to what we've used you've seen previously so we have got two sprites so 64 times 2 is 128 so including zero up to 127 is 128 bytes so we're going to read in the data statements and here are the two two sprites so it's produced the data statements for us like I say reducing any chance of human error there so it also includes some remark lines as well so you know what we're what we're producing that single color sprite here so this section here will be our high res part and then our colored part and that these poke savages deal with you know the colors and the X and Y positions and the height of the sprites on the screen so let's copy that over and then play around with it play around with it a bit you'll see right away that the Y coordinates are the same but the X's are offset just so you can see both sprites side-by-side you know before we overlay them so you can see that the highest sprite is definitely more detailed than the lowest sprite but this one see-through this one's just all blocky so they're not going to press much on their own if I list the program here's a little tip if if you if the program is too big to fit on the screen that scrolls and you might miss the part that you want you can ask the C64 to start from a line number and go to a line number or you can start with a dash or hyphen and that'll start from the start of the program up to that line number and the other way around as well you can go from line 10 line 100 all the way to the end so I'm going to list from start to 200 so we've got the data statements on the screen and again you notice that text and sprites are completely oblivious to each other they don't affect they don't affect each other that is why we clear the screen see the 10 print character 1 for 7 just to make sure there's nothing in the way really okay so if I change this offsets the X position 44 to 92 so it matches the other sprite we run it tada there you can see now obviously it's very basic and very crude and but you can see there that's how you can kind of create a high-res looking sprite by using two multi high-res multi-color sprite I should say a bit more fun with this so we could double the height and width but if I just do that I believe I'm only doing it for one sprite yep of course it would not okay so all sprites would be double height and width rather than mess about until I got just those two and that wraps up another video if you've enjoyed this video please do leave a like and consider subscribing if you have any questions at all please do leave them in the comments below and I'll come back and reply to each one