Placeholder Image

Subtitles section Play video

  • Hello, world.

  • This is CS 50 on Twitch.

  • My name is Colton Ogden.

  • And today we're going to journey back into game development.

  • These last few streams have been sort of catered towards web.

  • And actually, David and I did one on the CSU the sandbox after day.

  • So if you're looking for a quick way to spend a coding environment in the Web browser, go to sandbox dot CS 50 dot io super awesome website that we talked about yesterday.

  • So today we're going to go back into game developed The last game that we did actually was mine sweeper, I think, which was, I think over a week ago might have been two weeks ago.

  • Actually been doing a whole bunch of different stuff, actually, a lot of Web development, but indeed, we're going to go back into games today.

  • So I'm gonna switch over to my computer here.

  • We're gonna be using love to decide you're not familiar with love.

  • It's an awesome to D game development framework.

  • You can go to love to be dot or ge and download it for your operating system.

  • They have quite nice availability for on Windows.

  • Efron.

  • Mac, if you're on Lennox and some other operating systems.

  • We've done a lot of streams on this in the past, so definitely check out our prior playlist.

  • On other games, Mind Sweeper was the last one.

  • We did that in love today as well.

  • Today we're going to be doing a card game.

  • Gonna be taking a look at solitaire.

  • And I thought I would pull it up here.

  • Just we could see what it looks like.

  • It looks something similar to this where you're essentially given a deck of cards.

  • Standard 52 card deck.

  • You have normally seven piles here, which are I don't think the technical term is tableau.

  • I think tableaux are first to the portion of cards that you have actually revealed and set on a given row or a given.

  • Call him in this case, and then you have the four.

  • Um, what are these called?

  • I forget what the exact name of these is called.

  • Do you happen to know in what the what?

  • The name of these is called?

  • Four sections.

  • We're joined today by in the back who's kindly helping us get everything set on all of our platforms.

  • But the goal is to basically fill these four sections of the top of the board with all of the cards.

  • Ace to King of the different suit so you can see there's hearts, spades, diamonds and clubs.

  • And if you're unfamiliar with sort of how cards are laid out, you start with a CE 23456789 10 and then Jack, Queen and King.

  • And that's the sequence of cards, and all the cards are also given a suit, so you get all of those secrets of cards.

  • In addition, they have a suit of hearts, spades, diamonds and clubs and essentially, you.

  • Your goal is to get all the cards there in order, but Nor to do that.

  • You can lay them out here in reverse order.

  • You know, starting with the top card, the king card going down to ace.

  • And you know, once you have all your cards that have laid out in this way, it's very easy to take those cards that sort of lay them out in that sort of ascending order at these top level here, for example, this four I could easily just bring over if I if I had the three of hearts here.

  • I could bring that four parts more easily to the top than if it were in sort of descending order.

  • Or rather, a sending order laying from the king down.

  • Richard from the ace upwards.

  • So, thanks to everybody who has been in the chat here, have the dialogue here.

  • Open jeans.

  • 02 to sing big up guys doing nice work.

  • Keep it up.

  • Very much appreciated.

  • Um, Andres here in the chat, Bella cures crazy Flock.

  • Sharlene, I presume this is a lu love to de stream.

  • Are you using any love to de libraries like love frame or is it just going to be done from scratch?

  • Excuse me, and I just realized I apologize.

  • I had the chat visible on the, um, screen there, but the we're not going to be using any library.

  • Well, that's not true.

  • We will be using Some libraries will be using the class library from helper utilities for maximum productivity, which is an unfortunate acronym.

  • I brought this up in multiple streams.

  • You can look that up.

  • So if we go to class helper utilities Lua love helper utilities for massive progression.

  • Sorry.

  • Massive progression on and they have a class dot lua here so you can visit this girl.

  • If curious, I can actually plug it here in the chat, unfortunately named.

  • But that's just part of the loo ecosystem.

  • It's a very good set of libraries.

  • I highly recommend using it will be using that for object oriented programming and lua when we've used this on prior streams.

  • But if you're unfamiliar, object oriented programming basically lets us instead of using raw numbers and tables and those sorts of variables, we can actually model things like cards and decks and all sorts of other, more complicated objects that we wouldn't traditionally be able to get with the language sort of as it comes.

  • Standard language.

  • Shalini saying Gotta love all the love to t library names.

  • Yes, indeed.

  • Some very funny names.

  • Libraries.

  • Um, awesome.

  • So thanks so much.

  • Everybody who's here already.

  • I'm gonna go ahead and just shift this Which over here their shift.

  • The chat Over here.

  • Um, let's get started.

  • So we know the rules sort of.

  • At a glance, we can see that we're gonna be using cards, so we're gonna need some way to sort of have cards that are visible in our game.

  • Um, so for this, we're probably gonna need some sprites so we can go to something like open game mark dot org's.

  • For instance, I'm gonna go here.

  • Open game are dot org's an awesome website that I use in the games class that I teach s.

  • So this is, uh, CS 50 dot except orc slash games, which will allow you to go and learn game development from the beginning so you can learn pong.

  • We go up to Flappy Bird, match three Super Mario brothers all the way up to unity stuff, actually.

  • And in that course, we end up using a lot of open game art dot org's stuff.

  • Um, excuse me for just one second.

  • Let me make sure everything is okay.

  • Um, I apologise.

  • Let me just make sure my mike is good on battery, but I just want to make sure that it's 100% okay for the rest of the stream because this one's going to run a little long, so give me just a second.

  • You might hear me cut out my audio.

  • All right.

  • We should be back up with a fresh battery.

  • So awesome.

  • I want to make sure we don't die suddenly on street when everyone's wondering why I'm completely gone.

  • Quiet.

  • Um, awesome.

  • So David's in the chat.

  • Everybody shut up David David Jamil into the stream yesterday on the sand box.

  • Seats for the Sandbox, which sandbox?

  • ASU's 50 dot io, if you're curious, allows you to spend up a temporary programming environment from scratch, which has a lot of awesome preinstalled languages and environments and libraries and stuff.

  • So definitely check that out.

  • If you didn't want yesterday's stream.

  • And if you have a Marchesa extreme, definitely do so so that you could get a sense of just how it works and the things that you can do with it.

  • So open game are dot org's, as I was saying earlier is a platform, a website that has a bunch of completely free gamer game programming, artwork, sprites and three D models and also things like audio, which can be kind of important to if you're not a sound designer and maybe you want some free audio assets, you could definitely check that out.

  • Um, but what we want to d'oh is I don't want to make a bunch of cards from scratch because when we didn't mind sweeper, I ended up doing a bunch of sort of making minds from scratch, and that was okay.

  • It was a pretty simple set of sprites to develop, but cards a little more complicated, and they all have suits, and I don't really want to be bothered with actually making, and I kind of want to make it look nice to begin with.

  • So I know that there is a pack of nice looking cards that we can use here.

  • So if I go over to Simon Type Casino, I ended up looking at this in advance just to, um, sort of pre curate the kinds of art packages that we might want to use.

  • There's a nice package called Board Game packed by Kenny.

  • And actually, Kenny is a artist that I use a lot in the Games course who kindly makes a lot of his artwork available here for free.

  • I'm clicking on the board game pack, and this, I think, is actually a fairly high resolution piece of artwork.

  • Yeah, they're 68 playing cards.

  • They don't necessarily specify the resolution here, but I'm just gonna download it there's a link right here.

  • Most of the artwork, as I said on this Web pages, very kindly made available.

  • In this case, you can see right here the license is public domain, which is really cool and answer great beram question.

  • What's the topic today?

  • We're going to be implementing the game solitaire so you can see here if I go back to this page.

  • The game Solitary is kind of, Ah, classic card game that was popularized in the Gold Rush age in a sort of in Canada and America Mech in the late 18 hundreds.

  • But essentially, it revolves around you getting a deck of cards.

  • You lay out a bunch of cards sequentially, Um, starting with one cards, two cards, three cards, four cards, most of which is actually unrevealed at the start of the game.

  • And your goal is to get essentially what's that was an accident.

  • Your goal is to get, um, all of the cards in the deck from Ace to King up here on these four sections, and they're all suited to so you get you get your heart's cards, your spades card, your diamond cards and your club cards.

  • Another important thing to actually is as you're laying cards out in these stacks here where you're trying to lay them out, sort of in descending order where you start with King and go all the way down to ace, You want to make sure that they're all in black Red order.

  • So notice here in this particular area, you can see that it goes black, red, black, red, black, red.

  • So King Queen Jack 10 98 So not only do they have to be in descending order proper order, but they also have to be cross colored.

  • Have to be in a pattern, that sort of pattern.

  • And you have seven sort of sketch areas.

  • I guess you could think of it as in order to lay things out and then call the tableau is the term I believe for the set of cards that you've laid out in any one of those given stacks.

  • All right, so let's go ahead and check on that pack.

  • Let's see what we have to work with.

  • So we're gonna download this.

  • These assets were gonna get a bunch of folders here, so I'm gonna look in the probably in the P and G folder for the cards, and the nice thing is, they actually give it to us.

  • They give us card backings as well, which is nice, because we will need to show some of the cards as hidden.

  • We'll see.

  • Let me see if I can actually pull up an example of what the solitaire deck looks like when you first start out the Salter Salter's starting layout.

  • So this is great.

  • So this is exactly what it looks like when you first start out.

  • And this is actually playing a version where you lay three cards out at a time from the deck and we're just gonna be doing one card at a time, which is more of the Windows version of how it's implemented on and also a little bit easier to win.

  • I think you have a 90 something percent chance to win, as opposed to a 75% chance to win.

  • But these are the four decks where you're supposed to lay out your cards from a sticking in the different suits.

  • These are you're sort of starting staging areas, and this is all completely randomized, all drawn from the deck.

  • You start off with one card face up.

  • Then you start with two cards.

  • The top of witches face up on the bottom, the rest of which are faced down.

  • The same thing happens here.

  • Then here, then here, then here.

  • Then here you only get one card, face up all the rest of the cards, get face down, and then here's your deck.

  • And then here's the one card that you get to draw from the deck at a time to place down either on any one of your staging areas or if you happen to get an ace, or if you've laid an ace down and maybe have laid down some other cards in your four deck areas, you can place the card there, and we'll sort of see how the rules work out and mess around with it.

  • But this is the starting lee out.

  • This what's gonna look like?

  • Ondas.

  • You can see my Prior note was, we are gonna want to display cards that air face down.

  • So not only are we gonna want to show face up cards but also have a card backing so that we know we're drawing a card or we don't know what the card is yet so kind of an important consideration.

  • Um, let me go ahead and check back on that.

  • So we go over here, I can see we have all the cards, the individual cards, which is great.

  • So it will want that we can see that they're numbered are labeled in a pretty consistent way.

  • So we see card clubs 2345 down to Ace Jack King Queen.

  • It is the same thing for diamonds and hearts and spades, so that's great.

  • The resolution of these is it's not showing because my finder window's too small.

  • So 1 40 by 1 90 which might be actually a little bit too big.

  • Um, especially for running it in 7 20 p.

  • We might wantto end up downscaling a lot of these.

  • Excuse me.

  • And actually does we get Are we giving a spreadsheet?

  • We are giving a spreadsheet.

  • Let me see.

  • Do we have the cards laid out playing cards that P and G, which we do have a spreadsheet.

  • Here.

  • It's 10 24 by 2048.

  • So if I load up the spreadsheet, this is an important thing you want to consider?

  • Um, first of all using spreadsheets is generally more performance than loading individual textures because your graphics card only needs to reference one file instead of multiple files, multiple locations and memory.

  • Um, this is also a lot easier if you want to, For example, downsize this.

  • So maybe I want this to be smaller.

  • Um, rather than scaling in Hardware Aiken instead, just pre downscale everything on and make a smaller texture, So we can definitely do that.

  • And I think that's probably what I'm gonna end up doing.

  • So this is 10 24 by 2048.

  • It looks like what it can do is load this up into Well, first of all, let's set up our project and we can worry about all of that.

  • I'm going to create a new finder window going to set up my project with a J.

  • Harvard.

  • Devin, this case over to streams.

  • I'm going to make solitaire.

  • I'm gonna load this in the V s code and let's make sure this is blown up.

  • So it looks nice.

  • I'm going to create a new folder.

  • So this is my project folder and love to D.

  • What you typically want to do is have a project folder within which there is a single main Louie file.

  • This is the entry point of your program.

  • Much like it is in, for example, See where you have it.

  • Main void in Luis.

  • You have a main dot Louis, So I'm gonna create a main dot but this is a folder.

  • First, I'm gonna create graphics.

  • Then I'm going to create outside of graphics a new file called Main da Lua, which later will fill with our source code in advance.

  • I know this is going to be a relatively, um, not super complex code base, but it's gonna have multiple modules.

  • I'm gonna create a source folder which is gonna contain all of my Louis files in the future and within graphics.

  • This is the folder that actually care about right now.

  • I want to copy and paste from here playing cards that P and G gonna bring it over to my graphics pace that right in there and I'm gonna open this in a sea sprite, which is a graphic editor that I like to use, which has pretty good Sprite artwork, support.

  • And now what I'm gonna do and I just shrink a little bit.

  • I don't mind how it looks here.

  • Actually, you can see that kind of, um, zoomed out and gave it a more pixelated look.

  • And so this is kind of a preview of what it will look like when we actually down sample everything, and it looks okay.

  • Honestly, it doesn't look bad at all, so I'm not sure what the resolution is.

  • At this point.

  • I think I, um, subtracted it, or I shrunk it down by half twice.

  • So if I were to, um let's say sprite size lock the ratio.

  • Let's let's shrink it down by half.

  • Right.

  • Okay.

  • Neighbors nearest neighbor filtering.

  • And so this is actually what it looks like a native size, So it looks okay.

  • It's not too bad you might be able to make something work with this now, each individual sprite.

  • So we're at 5 12 We have a total of not quite.

  • It isn't quite.

  • Divide evenly into 5 12 So 123456 So if I actually maybe I crop it, don't crop it.

  • No, Maybe not.

  • I think we'll end up doing instead is just because I think I think if we just use the algorithm we've used in prior streams where we sort of go throughout the spreadsheet, figuring out the size of the cards we want.

  • And maybe actually, don't even go through the entire spreadsheet, just extract the cards themselves and sort of forget that there's white space.

  • It won't even matter too much.

  • So in this case, we only really need to worry about how big each individual card is.

  • We'll see this in code here in a little bit, but let's go back to the actual cards themselves.

  • Figure out how large they are, the individual cards themselves.

  • Oh, also another thing that I'm realizing here.

  • It doesn't include the card backing in the spreadsheet, so we're gonna have to load that texture separately.

  • That's fine.

  • It's not a big deal.

  • That's only one individual sprite.

  • Let's see, the cards themselves were 1 40 by 1 90 We shrunk it down by half, so they're actually 70 by 95 now, which is the one consideration we need toe To be conscious about is the fact that when we end up stacking things, we could have, theoretically, a deck that starts with a that has 123456 blank cards and then from King down to Ace.

  • That would be a total of that's, what, 13 cards, 13 cars plus six cards.

  • So 19 cards times that by well, actually, we're only revealing a certain small amount of the card.

  • This is probably, what, 10 pixels, 20 pixels?

  • I think we'll probably all be okay.

  • Make sure I'm keeping up with the chat here, do you?

  • Did you create this card sprites to says L'm one?

  • No, I did not create the card sprites, so we actually got.

  • If you goto open game art dot or GE and then go Type and Casino, for example, it's called the Board Game Pack.

  • It's actually if you go to the open game art dot org's sash content slash board game pack here, you'll find it, but it's a card pack or a casino pack, generally speaking by an artist named Kenny who actually really enjoyed the artwork of and I use a lot of my games class, but he has a lot of different themed art packs in this particular one.

  • He happens to have a bunch of cards just like this, and I like the aesthetic they don't sample nicely into more pixelated artwork.

  • So using that.

  • And right now, we're sort of figuring out how much weaken down, sample that artwork so that we can use it in a smaller, pixelated game and have all of the cards visible on screen, no matter what the deck size or the tableau size, which will look at.

  • So we're just doing a little bit of preliminary investigation here, but I think we'll try this.

  • We can always re sample this, so I'm gonna save this.

  • So now we've shrunk it down by half effectively, and I'm gonna go back into here, and we can see that now instead of 10.

  • 24 by 2048 it should be 5 12 by 10.

  • 24 which you can see right here.

  • That should be a good size.

  • And then well, in a chopping this up into bits and pieces in main dot Little rather in a you till that low, which will implement again from scratch, recognizes around 45 17 95 0 the aspect ratio.

  • Yeah, yeah, um, on the cards.

  • Is that transparency going on with the checkers background?

  • The checkered background?

  • Um, where are we referring?

  • Thio Figure back to a sprite.

  • Oh, the checkered background.

  • Yes, yes, yes, yes, this is transparency.

  • So anything that gets some if we were to import this in our love to d game and render this just like completely flat, it would not render anything here, just the cards themselves.

  • And I actually think that there might be a line of transparency, but, um, actually can't tell just by looking at it here.

  • Well, we might end up seeing it once we end up loading it into our game.

  • But yes, if you're in most to D Sprite or artwork programs Photoshopped, gimp, a Sprite.

  • In this case, you typically see checkered background when you load in an image, and that just means it's completely transparent.

  • If you were to draw that in your game, it won't draw anything.

  • Oscar M says Howdy.

  • Hello, Oscar him on.

  • And then the true true Kenny's Kindly plug the link to the spread artwork.

  • Cool.

  • So let's go ahead and get a little bit of code up and running here.

  • So I'm gonna do just a little bit of the typical stuff as we're loading up a love to the applications, we could get up and running.

  • We're gonna call this solitaire.

  • I am the author and flooding my email address in here.

  • This is relevant for when I end up publishing this to get out which will do so eventually.

  • This will be downloadable.

  • You can download this and test on your own computer.

  • I'm gonna go ahead and do a few preliminary functions.

  • We've seen these before, but if you're unfamiliar, these are functions that the love framework expects youto have when you start your game.

  • So loved out load triggers at the very beginning.

  • Love, that update triggers.

  • Every frame gets the amount of time that's passed since the last frame so that you can sort of calculate different frame rates are a different speed.

  • Computers the same speed.

  • You can have things happening at the same progress, despite what someone's frame rate might be on the machine, which is very handy if you want this to be to perform consistently across hardware and then draw does also operate per frame like update, but it doesn't accept any frame rate.

  • This is just meant for just pure drawing.

  • No changes necessarily to be calculated therein.

  • I'm going to preemptively sort of get everything structured in a structured in a fairly robust away.

  • So I'm going to say, um, require source slash dependencies, and this is important.

  • I'm going to go over to my source directory here at a new file called dependencies dot Lou.

  • Uh, this is where I typically like to have all of my libraries and also all of my textures.

  • So we'll do a little bit of testing here, just a sanity check.

  • Make sure everything's up and running.

  • I'm going to go ahead and say G textures equals a table g, meaning that this is a global variable actually be able to access it from anywhere.

  • This is a sort of a convention.

  • I'm gonna give it a name of cards and I'm going to set it to loved a graphics, not new image Graphics slash And what is it called?

  • Playing cards dot p and G.

  • So now this is available anywhere in my application.

  • Typically, I like to do this.

  • I like to have all of my textures, all of my sound files, everything all in my dependencies that Lou, this is just a way of modular rising your code sort of.

  • I forget what the exact term is.

  • But Alice not allocation of interests, it's there's someone in the chat might know what it's called, but it's basically just making sure that all of the things that are within one domain get isolated into one area so that you don't have to go grabbing for your entire source code depository to figure things out.

  • So I'm going Thio.

  • Go ahead in love dot load.

  • I'm going to say love dot window dot set title to solitaire just for quality of life.

  • I'm gonna actually implement another function here called love dot keep press, which takes in a key.

  • And again, this is another function called by love, and it will call this and it will pass you the key.

  • But it's up to you to define what you should do with those keys.

  • Separation of concerns light of how one that's what it is.

  • Thank you very much.

  • Loved upkeep.

  • Rest takes in a key, and it love will actually pass the key for you, depending on when you actually press a key on your keyboard.

  • It's taking care of all that for you behind the scenes, but it's up to you to say what you want to do with the key.

  • So I can just say if key is equal to escape Call a function called love dot event dot Quit.

  • And I think I actually forgot to press tab.

  • And so we got confused with the, um, spacing there.

  • Also, thank you very much to the couple of folks that just followed.

  • I didn't have the list here, but I do now.

  • Thank you very much to explore Siraj graphs, knockers 22 Jerry Blee.

  • If I'm pronouncing that correctly, hopefully I am, um awesome.

  • So that's how we end up quitting our application.

  • I think I should be able to just test this now if I run my project, which I just did with command L I'm using V s code with the pixel bite studios plug in for love to d.

  • So download that and you can't suppress all tell or command l on your machine and it will very nicely inconveniently let you run love without needing to go to your command line or to drag and drop it to your executable.

  • That's super convenient on.

  • And also thank you to Echo's 2165 for the follow.

  • So we can see here at the top of our window.

  • I do indeed see the words solitaire.

  • And if I press escape, it does indeed quit the application.

  • So everything is working as expected.

  • I'm going to do another sanity check.

  • I'm going to say love dot graphic stock draw.

  • I'm gonna reference that G textures table that I created earlier, and I'm going to reference the cards Sprite that we were storing in that table.

  • If you're unfamiliar, tables air just essentially hash tables or dictionaries or objects from Java script, they function identically to those with a couple of other caveats.

  • But this is Louis way of storing sort of a raise or hash tables.

  • They function in a multi purpose sort of way.

  • So now if I press command l we do indeed see all of the cards that were in that texture.

  • Everything is rendering just as one block.

  • Obviously, we don't want to draw the textures as they are in this one block.

  • We wantto be able to say, I want to just draw the king of spades or the six of hearts and given point.

  • So we need to do a couple of things before this is possible, but I haven't written this function from scratch in a little while, so we'll see how effectively we can do this.

  • I typically like to go into you till that.

  • Lou, I like to make a util module for utility functions and say, I want a utility function that will take a texture, a spreadsheet, as it's called, and chop it up and store it as a group of separate sub textures.

  • In this case, they're called quads in Lewis and Love, rather in love to D.

  • This is the object the way that they sort of idiomatic Lee reference them.

  • But you might see it referred to as sprites.

  • Um, try to think of what other words one might use to describe it.

  • Texture area text area will not text area, but texture area.

  • You might see it referenced as texture blocked.

  • Text direct those types of things.

  • Um, it has a lot of different connotations.

  • But in you till dot Lou, uh, I'm going to probably first right utility functions and then maybe a function called I typically like to say generate quads and have it take a texture and a whip and a height, and in this case is a little bit different because usually I assume that the texture fits the dimensions of the well.

  • Actually, no we can do is we can just say texture with and texture height.

  • And so now, in this case, I can say, um basically, G coir G frames will say Gee, quads, just to keep the sort of language consistent, I'll ultimately create a table called G quads and I'll say cards I wanted to map effectively to my other texture.

  • I wanna be able to reference my texture, and I want to be able to reference the quads that generate from the texture all the separate sub textures, the individual cards, in this case So I can say generate quads, G textures cards.

  • And we've saw earlier that they were What was it?

  • Um, we figured it out.

  • It was seven.

  • Was it was it 70 70 by, um, 95 right?

  • 70 by 95?

  • And actually using these hard coded numbers is a bad design decision, so I'm Instead I'm going to go to source to create a new file called constance dot Lula and This is typically what you should do.

  • You shouldn't have magic Number's sort of all over the place instead of in here.

  • Say card height gets, um 95 and card, Or rather, typically with was first card with equals 70 and notice that I'm capitalizing and underscoring these variables.

  • This is sort of idiomatic for defining a constant so something that you shouldn't change.

  • Now Lou is dynamically type, meaning that I don't have to say const card with our card high or into card height.

  • Rather, it determines what the value is, depending dynamically on what it gets assigned to or whether what value gets assigned to that variable.

  • In this case, it's getting the number 95 so it just knows at runtime that's a number and knows what to do with it, what it can do with it.

  • We'll give you an error if you try to do certain things with it, for example, adding a string to it.

  • It will give you an error.

  • Crash your program, but there is no typing like you might see in C or Java, so there isn't really a way to enforce that will use these variables as Constance but by capitalizing them and using an underscore.

  • This is a programmer convention.

  • This illustrates to the programmer that we should indeed not change these variables at any given point in time.

  • So if you see that, typically don't mess with the variable naming.

  • I could absolutely do that.

  • It would just sort of break the, um, sort of implicit handshake that I'm making with myself, which would not be good.

  • But now I can say, instead of 70 and 95 card with and cart height and things are a lot more readable.

  • Now I can tell that I want to spice this texture, this card texture on my card with and card height and not some random value called 70 and 95 which had no real meaning prior to this point.

  • Um, so now I actually need to implement the function.

  • Currently, it's an empty function, so I'm gonna end up needing to return a table of quads.

  • I know that, and we can go to the love to the documentation, actually, and see what a quad is.

  • So love to D quad.

  • This is important.

  • Basically a quality just a rectangle in this case, a quadrilateral a polygon with four sides and four corners with texture.

  • Coordinate information and you know you could define it as a square.

  • You could define it as a rectangle of you no longer width and height or longer height than wit.

  • And that's what we're doing.

  • In this case, we're actually defining quads that are sort of longer, tall, taller than they are wide because that's how cards are laid out.

  • So we care about where we want to define the corners of our quad, right?

  • We wantto make sure that we say give it the X Y position, but also make sure we say how tall the quiet needs to be and also how white it needs to be.

  • And we need to offset that row by row in our spreadsheet and by generating these rectangles sort of one by one.

  • If you look at the spreadsheet one by one here, right by going into this and sort of creating a rectangle here and erecting will hear and erecting will hear sort of invisible rectangle weaken, tell love to D when we draw.

  • Given that quad just the area defined by that quad, which is really nice, and this is how you get sprites from a compounded spreadsheet.

  • A more complicated, um, drawing that you made me want to put everything inside of instead of having separate individual sprites, which we very couldn't, which we could have very easily done here.

  • We could have easily just drawn these individually.

  • You know, the 456 of hearts, et cetera.

  • The problem is, if you want to downscale all of these now we have to individually go in and, you know, maybe import these into a sprites divide by 23 save it gets kind of bulky.

  • We could automate this with the script, but it's typically more idiomatic in game development, more more common to use a spread sheet.

  • So back to our code, I can say in generate quads.

  • I know I'm gonna want a table to return, right.

  • So I can say local quad table gets an empty table.

  • I'm gonna return quad table at the end.

  • And, uh, local just means this is a variable that exists in this function.

  • Don't make it globally accessible.

  • If I make it, if I just say quad table the way that Lou it works this quad table variable actually be available anywhere in our application, which is not generally good.

  • Engineering wise.

  • Um, very easily could you clutter your name, space, your global name, space, Basically all of the symbols that your program is referencing all the variable names.

  • You could very easily make this very large and very hard to track where each variable is coming from by not using local where you need to, so definitely use local where it's appropriate.

  • In this case, we only want quad table accessible within the context of this function.

  • So we're only going to reference squad table by using local.

  • So let's figure out.

  • So we need to generate a quad, which is an X and A Y in a high Inuit throughout our spreadsheet.

  • So I can say local X is equal to zero.

  • And why maybe, is equal to zero as well.

  • This is where we're gonna start.

  • This is the pixel sort of, right, you know, right here at the top left.

  • That's where we're gonna start our function, displaced the spreadsheet.

  • So I'm going to say, um, four block, Um I guess for oh, actually, what I can do is safe or Y is equal to zero until and how many cars we have?

  • 123456789 10.

  • So we have 10 cards.

  • So that's up until, um, it's not gonna quite be why Times it's not going to quite be 10 times, uh, 95 is actually gonna be 10 times 95 9 times 95.

  • So we can say is in our spreadsheet.

  • Want to say card our card she tall gets 10 card sheet wide gets Oh, and actually, I'm realizing an issue here.

  • The issue is that we don't actually have a consistent sprite sheet.

  • We have five notes that we have five rows here, but we have, um I'm sorry.

  • Five columns here, but four columns after, um after row three, starting in row before we actually have only five columns.

  • So I think it actually makes more sense to start top, go down and work our way vertically through the spreadsheet and stop when we get here.

  • I think that makes a lot more sense.

  • And actually are things laid out in a consistent way?

  • Things are things are laid out.

  • Wait, Are they?

  • No, they're not actually laid out consistently.

  • Oh, that's pretty funny, actually.

  • So we started Queen King Jack Ace in spades.

  • And it does go down sequentially, Um, and then the Joker and then the queen down here.

  • But notice that instead of the two of hearts here, or actually getting the two of clubs so they actually made the spreadsheet inconsistent.

  • Um, that's funny.

  • And it's gonna screw up our algorithm a little bit.

  • So I hate to spend too much time on this, but And also, another interesting thing is, Okay, they only need one joker action.

  • That's fair.

  • I was gonna say they only have one joker.

  • Typical deck has I think, two jokers or four jokers.

  • But I should fix this.

  • The reason that actually fix this is because if you want the algorithm to generate all the cars in a sequence and I want all of those cards Thio, I could do this in code.

  • Is it really worth it?

  • Yeah, it's good design.

  • I probably should do it so well, I need to Dio is going to hear and, um, not do that, but take a marquee tool kind of bringing this over here, which I think this is correct and something like that.

  • And then if I come in C this time, let's move this around.

  • I can't.

  • Oh, perfect.

  • I just move this.

  • So I'm moving over here.

  • Take this.

  • Zoom in all the way over here.

  • Is that too much?

  • Maybe too much.

  • No, I don't wanna I don't wanna actually shrink it.

  • Let's go ahead and to this.

  • Is this correct?

  • I think that's correct.

  • And so now if I move this over to where we have our now our space, it's moving down over here right over here.

  • Okay.

  • Perfect.

  • And then now, if I bring this also, Kenny, if you're watching, maybe fix your fix the ordering of your spreadsheet, love the artwork, but I'm not sure why it's out of order.

  • Um, still didn't do this.

  • Bring this up here.

  • Mabel P says hello And Hardy Price.

  • You can see the size when you select the cars in the bottom status bar.

  • Uh, good point, actually.

  • Didn't think about that.

  • This looks like it should be good.

  • This should work hygiene.

  • They give you much for the follow.

  • I think that's right.

  • Yes.

  • And pay me now.

  • Thank you very much for the follow.

  • Okay, so we did that.

  • I'm gonna save it now.

  • We should have, I think, a consistent deck of cards.

  • So what I was trying to say before, before I realized that the Sprite sheet was actually slightly messed up is that instead of going horizontal rows, you know, going row by row will actually go vertically.

  • So we'll start here, work our way down, go here, work our way down, And this way in our table, all of the quads, like, should be in order starting from you know, what?

  • I just realized the Queens are actually before the Kings to Why?

  • Why is this out of order?

  • Okay, um, that's not that's not worth shoot.

  • Because if we were going to represent the cards based on their number, I could just I could do it in code.

  • It's not a big deal.

  • Um, but at least now everything is everything is consistent, so we can use that consistency to do something else.

  • Rip San, Thank you very much for the follow.

  • Okay, so we'll worry about the fact that the Queen they're coming for the kings and the Jack is coming before the ace will do all of that in code will read, sort everything.

  • It's important in solitary that Ace actually comes after two.

  • So we're gonna do it that way instead of having the ace actually come above Queen, which often times you can think of a CE being more valuable than sorry, not Queen King.

  • Rather, we'll worry about the fact that that's all out of order and doesn't match.

  • But everything is now in a consistent state.

  • I think you can quit case right now.

  • And I'm going to basically have my algorithm go top to bottom left to right.

  • And then when it gets to the two here, well, actually doesn't need to really worry too much about whether it gets the two, but it will have up until this to 12345 So it's 10 plus three.

  • So it'll have 43 cards that we care about.

  • 123456789 10.

  • Sorry.

  • 53 cards, not 43 cars.

  • I don't know how to count 53 cards minus the Joker.

  • We don't care about the Joker.

  • And I just realized that that actually screws it up, too.

  • So it's it's great.

  • Was is the fun part of dealing with Sprite sheets.

  • Programmatically is you do run into sort of cases like this where you have toe restructure your data to fit the problem we're trying to solve and or write an algorithm that considers the fact that your spreadsheet is messed up and sort of in code sorts everything out.

  • Can we have a four by 13 or 13 by four Sprite?

  • She Absolutely.

  • You could do that.

  • Um, but you want to In that case, that's on you to sort of manually figure out in your text or in your graphical editor.

  • And so there's a bit of work that goes on you to do that.

  • Now, if you're working with an artist, you can tell the artist Hey, I want to think about my problem like this.

  • So please lay out the sprites four by 13 right, which I would actually want that to be the case.

  • My ideal, the way I like to think about it, is having everything in a row.

  • And so having a CE to King going horizontally, that makes sense to me.

  • I can easily parts through that programmatically generate the tables that I need and get everything working and Lindsay's Point.

  • Yeah, worry about it afterwards.

  • Just make a lookup table that's fair to We can easily do that and write everything in code.

  • There is a merit to simplifying your code by making sure your data is nicely laid out.

  • But we're already spending a good amount of time on that already.

  • So we can We can make the lookup table and re sort everything.

  • So the card sheet wide we're not actually going Thio worry.

  • Well, we don't need to worry about it too much, but we'll say it's six wide.

  • And so we're gonna end up parsing her spreadsheet left to right, six cards wide and 10 cards tall.

  • Now, um, actually, no, not a consideration.

  • There's extra white space at the bottom.

  • But that's not gonna matter for our algorithm, because we're going to calculate it based on the number of cards, not the size of the spreadsheet, which would cause an issue if we were doing it just that way.

  • So back to you till dot Lua I'm gonna say four y gets zero.

  • Well, actually, for X, get zero because we're gonna do this, we're going to parse it.

  • Um column by column At the top level of our loop, the inner loop is going to go card by card vertically, and so that needs to be the inner loop.

  • So I can say for X is equal to zero, and then X is equal.

  • X is less than card's wide or what was the name of a card with times a card sheet wide minus one Do Why is my My text editor is being funky with indentation.

  • So we're basically saying, Here is a mess started X is equal to 00 and I want to also make sure my step is card with.

  • So basically, this is a four loop interesting started exit zero go up until X is less than the card wit times the number of cards wide, so minus one.

  • So card sheet wide money It's gonna times that bike Archie White minus one.

  • So it'll take into consideration all of these cards minus one because you don't care about going past this offset here.

  • We only worry about going up until the left edge of this card because we're going to calculate the width of the height.

  • We're gonna add the width of the height to that.

  • So Pim analysis.

  • Hello, everyone.

  • Thank you for the content to make it a little bit complicated.

  • You can add some sort of image recognition for the unordinary.

  • For this, a Nordstrom, right?

  • That would be fancy.

  • I don't even know if I'm qualified to do that.

  • But that would be very fascinating.

  • On the three of the club and the heart are swapped, says Babak Night three of the club and the heart.

  • Oh, yes, yes.

  • I think that was the prior point that you were talking about.

  • Yes, Correct.

  • Onda also thank you to who just followed.

  • I completely missed that.

  • I apologize That Waas did I catch riffs on and cosine So apologies if I didn't but also make g was taken.

  • Thank you very much for the follow.

  • Um so we're going sort of up until the left edge of the last sprite that we care about.

  • So we're starting at X equals zero up until the card's wide minus one.

  • And then we're going.

  • We're also in our interlude.

  • We're gonna start.

  • Why is zero and then cards tall, minus one times card height.

  • So we can say for why is equal to zero.

  • Why is less than card Height times card sheet tall, minus one step of card height.

  • D'oh!

  • Why is my editor doing that today?

  • That's so weird.

  • Um and then I might need to restart my editor.

  • Honestly.

  • Oh, you know what I did start my editor in Java script mode.

  • I wonder if that's causing funkiness anyway, started with jobs.

  • Good project.

  • I'm not sure if that ends up screwing V s caught up in this case, but hopefully not.

  • Um, here's where we actually generate a quad in our spreadsheet.

  • So I can say, um, table dot insert quad table.

  • So we're going to insert into quad table in New Quad.

  • We're gonna call it, loved a graphics dot new quad, and it takes in.

  • This is a nice thing about V s code.

  • Is it has this intel a sense sort of thing for us, which tells us the arguments that new quad takes.

  • So what?

  • X and A Y, which is gonna be X y and then a width and a height, so x y and then our wit is going to be a card with and the height is gonna be card height and then that should just work here as we need it.

  • Thio, I think.

  • Oh, and I think the last thing it needs actually is texture.

  • Get dimensions.

  • For some reason.

  • Underneath the hood, when you generate a quad, it needs a reference back to its source image, specifically the dimensions.

  • I don't remember the exact reason why I looked at the C code for why this is, But you can look at the quote the codes open source for left today so you can look and see if you're curious.

  • I don't remember off hand exactly why that is the case.

  • Um, and this is a little bit too much room, so we can just do that now.

  • This should work.

  • If I go over to main dot lewis, for example, and I passed in tow.

  • Love, doc traffic stop.

  • Draw a quad.

  • So if I say G cards quads zero Rather one.

  • Because remember love tables.

  • Air one Index.

  • It's very weird thing about Luis, but normally in languages, a raise and other data structures of zero index in lieu.

  • Uh, everything is one indexed just by default.

  • You can zero index explicitly, but it's not idiomatic to do that.

  • It's more idiomatic just to stick with the one indexing paradigm.

  • So, you know something to get used to as you're venturing into Louis territory.

  • But now let's see if everything is correct.

  • My fingers are crossed That I got this right.

  • Um oh, I forgot to reference my util class.

  • So in dependencies, Because remember, we're requiring dependencies in maine dot Louis.

  • So anything with independence ease that we require will therefore by transitive ity get required.

  • So I can say require source slash you till and, uh, card and also constants.

  • Let's make sure thio require that as well require source slash Constance.

  • And that isn't what just happened.

  • Okay.

  • Why is it OK?

  • Must have hit it.

  • A shortcut that flips it vert flips in the horizontal.

  • I'm not sure how that happened, but we won't worry about that too much.

  • I'm not running.

  • 11 might know.

  • So if I run this attempts to compare nil with a number, you tell Lou, uh eight.

  • Okay, let's see where we screwed up our algorithm.

  • Online.

  • Eight.

  • Um, no.

  • With a number.

  • Okay.

  • Card.

  • She wide card sheet tall.

  • I have that right card with card height, is it?

  • Bite each.

  • Everything

Hello, world.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it