all right hello world this is cs50 on
twitch my name is Colton Ogden and today
we're gonna do a little bit of game
development so last week we looked at a
CTF which was a capture the flag thing
with Nick which is super cool we're
actually gonna do a part two event next
week Nick is currently on spring break
right now and then later on this week
we're gonna actually take a dive into
something completely different spark AR
which Connor Doyle one of co DS producer
is going to sort of lead so thanks
everybody who's in the chat right now we
have a ton of people already so shadows
to everybody I've been chatting with
them before break here or before the
wall we had the music sort of coming in
but it feels like it's been a little
while since we've done a game from
scratch I think by myself I might be
misremembering but let me go ahead and
I'm actually gonna switch over to my
laptop over here which is I'm realizing
not plugged in holy crap I didn't even
blink my laptop and whoops well while we
get that set up I want to shout out
actually my dad who suggested that we do
today's stream so I think he was
considering potentially making a slot
machine himself in in JavaScript here we
go my laptop is all setup thanks sir
appreciate it
and so he was like how would you
implement a slot machine you know in raw
JavaScript and then I I'm not as
familiar with JavaScript as I am with
Lua and love 2d and stuff like that but
you know I sort of have the the mental
model as a game programmer what I would
do to get it working in JavaScript and I
think I'd have to find an API or
something to get it working you know I
probably use something like phaser if I
were doing it in JavaScript or maybe
even with raw JavaScript I could figure
out ways to do it with the divs and and
whatnot in images and maybe jQuery which
we're gonna do a stream on actually I
think next week next Friday but we're
going to implement it in love 2d which
is a framework that I am more familiar
with to see how you would use it in the
context of something like a proper 2-d
game development framework
and as Li T who's popped up in the chest
is hello everybody on and this rule
points out that last time we did a game
was actually on my birthday was that
cookie clicker if I'm not mistaken I
think it might have been so I'm going to
pull up a actually let me go ahead and
I'm going to just switch my screen off
your for just a second because I
realized that I need to grab the images
off of my email so give me one second
here so yeah my dad suggested that you
know let's do a slot machine example
because you know he's learning how to do
JavaScript he won't do a slot machine
and actually he was kind enough to put
together the artwork for today's game so
shout outs to my dad for doing that as
well I'm going to pull those up here and
whoops I am just messing up all over the
place here while we get that up and
running how's everyone's day let me know
how what people are doing and what
they're working on and what they're
interested in seeing you know in the
future for for the show binary warrior
says isn't jQuery kind of dying out at
this point and to a to a degree I would
say probably yeah it's definitely not
quite as used as it used to be but the
reality is that it's still used in a lot
of applications is still very much used
in legacy and things like bootstrap
which are very much in use now still use
jQuery underneath the hood and as
they're active as an active layer for
interfacing with the more dynamic
widgets within the library within the
framework so I would say kind of
probably it's dying out especially with
things like react doing a lot of making
taken care of a lot of the things that
jQuery was really useful for in the past
and things like the fetch API which
jQuery was really used for a lot of Ajax
related stuff but it's still very much
used still and probably will be used for
a long time but I think that I think the
transition that I'm sort of feeling is
that people are moving towards a less
jQuery focus certainly at least a less
jQuery focused approach to the front-end
it used to be a major component of
front-end applications and now react a
sort of supplanted that react view
angular
those types of frameworks oh I'm sure
asks what is a slot machine and actually
that's a great point we're going to
bring up exactly what that is and I have
just finished downloading the images let
me I think it's now I can bring my
computer back onto the screen like that
boom and then I'm going to just go ahead
and download so grab my pinks folder
here and drag that over to a new folder
J Harvard Dev streams slot machine so
here I'm just gonna make a new folder
we're gonna bootstrap this application
the way we do with all of our love to
the applications with a new folder and
I'm gonna show you the tools that we're
using here in just a second as well I
just want to make sure all the files are
in the right location slot machine
graphics let's go ahead and bring those
PNG files over here like that and then
now now let's go ahead and talk about
what a slot machine is because that's
actually a valid point so a slot machine
is something like this you might be
familiar if you've seen a casino or if
you've been to Las Vegas if you played
any games that might have a gambling
sort of aspect to them a slot machine is
essentially a box that you put a coin
inside of or so however amount of money
that the machine takes might take chips
might take paper might take coins and I
think traditionally you used a lever
to actually get it to work in this day
and age most slot machines are just
digital so you press it well they're not
purely digital but they're typically
mostly digitized in that you press a
button the button will fire off some bit
of code that will either scroll virtual
wheels or physical wheels these three
things here and actually maybe we can go
maybe we can see like a slot machine
example on YouTube or something there we
go to a slot machine example so
something like this where you have you
press a button and I'm just gonna make
sure I don't know what the audio is
gonna sound like
where do we have the actual gameplay of
it so you have it's hard to tell on this
example you would think that there would
be like a nice really easy like oh
here's what a slot machine is let's see
this work okay so let's get it to go the
the problem is that slot machines these
days are so complicated they have a like
a billionaire there's a perfect example
right there so you press the button you
have all these rows of things that move
you know we're vertically right you have
different rows and if you match any row
in your slot machine and in today's
example we're just using a single row
but if the all these symbols are the
same you'll get a different reward
depending on how like how rare that
symbol is in your pool of symbols for
example you might have a selection of
different types of fruit which is what
we're actually going to be doing today
and maybe you want oranges to be really
rare maybe you only want one orange in
every row of symbols but maybe you want
pineapples to be more common so maybe
you have two pineapples in your row so
maybe a pineapple orange pineapple so
therefore you're twice as likely to get
your wheel to end in a pineapple as it
is to end in an orange and then you
could do the same thing by maybe adding
three apples to your row so you have
apple pineapple apple banana apple
orange or whatever the ratio is so more
apples equals more chance to get apples
which means that you get less reward for
matching a row of apples versus matching
a row of pineapples vs. matching a row
of oranges or whatever you want to
however you want to structure your your
reward system but this is how casinos
typically look with their slot machines
now they're very complicated they have a
lot of rows but the sort of I guess more
iconic illustration of what a slot
machine looks like how I think they
traditionally looked before you know
Vegas blew up and there's a million
different slot machine vendors is
something that looks like this this is
the archetypal archetypal sort of iconic
slot machine
and actually it's very iconic for there
to be sevens as sort of the jackpot
symbol so a jackpot just means you get a
ton of money when you win you match all
three sevens right it's way more than
any of the other rewards that you get
today we're actually going to be using
not seven but more appropriately fifty
that'll be our jackpot number and we may
not have time necessarily to get into
actually implementing it I mean it would
be fairly easy to implement a jackpot
it's a little bit tougher to test
because you it's all luck based and it's
statistic statistical right but the the
code behind actually detecting matches
and choosing you know which what's more
rare versus other things that's all
stuff that we'll have time to cover
today so this is what a slot machine
looks like and this is sort of how we're
going to be going around implementing it
now there was a graphic actually that I
had set up in advance so actually I'm
going to cut my slide up off of sorry
I'm going to get my computer feet off of
there for just a second and grab some
images that I sort of prefabricated in
the meantime I'll answer some chat
questions that McKnight asks is this
based on total probability concept I'm
not entirely sure I have to maybe Reese
or Google what that means slot machines
are based on probability so you have you
know by weighting which symbols are in
each pool and each sort of real on your
machine you do therefore influence the
odds of whether you get you know the
sevens will usually be very rare that
only b17 per row and there will usually
be twenty symbols per slot so you'll
have 20 20 and 20 all vertically
oriented or in a wheel you can sort of
think of and by having one seven versus
having maybe five apples or four oranges
you make the seven very rare to match
especially if you multiply that factor
by three you know going 1 7 out of 20
times 1 7 out of 20 times 1 7 out of 20
and I think that adds up to being what
whatever xx to the 3rd power is which i
think is what would that be 1
over 80,000 something like that or 1
over 8,000 that's your chance of getting
a jackpot I think in that model although
the numbers might be it might be
slightly different because you're
especially when you start getting into
choosing random offsets after you end up
actually slowing down the wheel we'll
see how that all works out
but oh yeah nice as they kindly plugged
a lever based slot machine there in the
chat so I'm just I'm on a separate
account here I'm grabbing all the images
that I put together in advance I'm just
going to grab that go down tier so
apologize just give me one second if
anybody's been working on their own
games definitely no because I'm very
curious if anybody's doing their own
game development like I said I think
it's been two or three weeks three weeks
maybe since we've done game any game
development streams with micro
processors now ubiquitous the computers
inside modern slot machines allow
manufacturers to assign a different
probability to every symbol on every
reel right yeah yeah because you can get
fancy with your algorithm and shift the
influence that such that it'll end up
spinning the wheel in a certain way and
waiting you know where it ends after it
ends up spinning that's certainly
possible to do ours is gonna be a little
bit more of a naive random approach
which I think does go down to what a dto
is saying of an 8000 a 1 in 8,000
probability for the for the three sevens
actually aligning so yeah that's you can
flub the absolutely can flub the numbers
however you want and I wouldn't doubt
that casinos actually end up doing this
in practice quite a bit let me just make
sure that I have this all set in the
right place
one sec just about done here should copy
these over this will save us a little
bit of time on stream rather than rather
than cutting all these images finding
the images etc we can get sort of right
into the coding which I think will save
us save us some time all right
do that I think we're just about ready
just switching canoes one more time oh
and thank you also to Matt Lee three
three three
Haruka Risa and Raleigh oh for the
follows much appreciated we'll get to
some very interesting visual stuff here
in just a second
I recently made a very basic version of
brick breaker in JavaScript says binary
warrior 76 that's awesome the game
course that I teach teaches how to make
brick breaker or a breakout as we as
it's called it's a very good game that
you can really actually take in a lot of
directions in the game course we end up
using procedural generation well sort of
procedure generation randomization of
the game grid for a more interesting
layout to the game so that you don't get
the same grid every single time and I
think you can you can go and get hope to
see it if you're if you're interested it
would be the car show you can go to the
game's core cs50.net exit org slash game
if I plug that here which I might be
able to do that cs50 dot edx.org slash
games go to that games course we teach a
brick breaker as the assignment to zero
wait oh is that yeah zero one two
assignment two and Griffis thank you
very much for the follow all right cool
I think we're all set let me yep let me
just confirm the images are here awesome
cool so I'm gonna switch my computer
back on here so these are the images
that my dad put together they look a
little bit blurry because Mac uses
filtering when you're previewing images
but I went and the essentially the pings
folder here has all these images but at
their native size so 200 by 200 so this
stuff there's slightly it might be hard
to see on your end but there's slightly
higher resolution but for a 720p
demonstration the 200 by 200 has a
large so these are shrunk down to 64 by
64 which is actually a fairly common
size for textures actually especially
when powers of two textures were more
important for OpenGL back in the day not
something that usually have to worry
about too much now but it was an
optimization for the the OpenGL
framework where things had to be a power
of two let me just show you what these
images look like so here's the slot
machine that we're gonna be using so
this is just an image that I found
online actually I might be able to find
it again so if I obscenity to quit
Spotify here if I go over to Google
Images
so let's say images slot machine I think
I did slot machine free did I do that oh
you know what I'm I've done free slot
machine image and shoot offhand now I'm
actually not remembering where I found
it I found it yesterday when I was
exploring let's see yeah I'll try and
find it in the future but it was
essentially a royalty-free slot machine
picture that was just an illustration
but that was the one difference that I
made was that you'll notice here there's
these three sort of holes and this will
be included in the github repo when I
push the github repo but there was there
were these three holes here that were
actually filled in with a static image
they had sevens in them so what I did
was I actually can open this up in a
sprite to illustrate this I opened it
this up and a sprite and then I just cut
these out you can notice that you can
see the background because what we're
gonna do is we're gonna sort of visually
scroll sort of some symbols right but we
want them visible only we don't want to
that for them to be visible outside of
this sort of window of the slot machine
we want a layer we want to sort of have
it look as if they're inside the slot
machine and so you do this by drawing
the the wheels or the steam the slots
and then you draw the slot machine box
sort of over on top of that and so
that's why we needed these to be
transparent so now we can draw whatever
we want
find these and it'll render it and give
us the illusion of it actually being a
slot machine which is pretty cool and
then I resized it appropriately I made
sure that these were all just as large
as they need it to be to be visible
within those individual slots so right
now it's not important for them to be
powers of two no right now most any 2d
game development framework you can have
any arbitrarily sized texture and it'll
work great I think for I think for unity
in certain content contexts having a
power of two texture does give you some
sort of optimization I think this
applies to certain other domains across
frameworks a bit and I think for 3d
engines you get into more of this being
a thing and that's why you'll see a lot
of textures for game divisions are
usually like 4096 by 4096 or 2048 by
2048 because there are territories
domains where this is important
GPU guys says so you'd only need to
render two images per column yeah
effectively or three if I wanted to
render the for example here and we'll
see this sort of if I have this slot
machine here and let's say I have my
image here sort of in the middle right
here I I'm gonna want to also render
slightly the image above it and the
image below it so we're actually
rendering only three images visible
behind it and actually the way we're
structuring everything we're going to
have every single image in our sort of
invisible wheel rendered in a vertical
column and then just scrolling upwards
and that'll give us the illusion of a
slot machines reels being scrolled like
an actual wheel but we can say you know
if the images texture is you know higher
than this point on the y-axis or lower
than this point on the y-axis just don't
render it even though we're sort of
scrolling them invisibly and we're
showing them we can tell it not to
render them and it'll just make it look
as if they're not there right even
though they're rendering even though
they're moving their Y position and
scrolling indefinitely and looping
around which we'll take a look at using
a simple if statement we can just make
it not render what we don't care about
and it's super easy so let's go ahead
and actually start this project and get
coding a little bit making sure that I'm
not missing anything which it doesn't
look like it okay cool so we have our
project here just gonna go and drag it
over to vs code and for those folks who
are unfamiliar with what we're doing
I typically implement 2d games in love
2d so this is where you can get love 2d
which is an awesome 2-d game development
framework it's totally free exports to
all major operating systems exports to
mobile and it has a library that you can
even use to get it to work on the web
but love 2d org get the version for your
operating system here there are other
versions for older versions of it if you
if you want my games course uses for a
zero point ten point two if you're
following along with the games course
and you can get all of the versions for
all of your operating systems here and
love 2d has an awesome set of
documentation you go to the wiki you can
get started here if you go to the
getting started link you'll get some
instructions on how to get it up and
running on your operating system how to
get some very basic a very basic game
implemented some nice handy shortcuts
depending on which operating system
you're using to get your game working
really fast so you don't have to you
know have a very tedious workflow it
looks like my visual studio code updated
so I'm curious to see if the Lua syntax
stuff got fixed from last time which
last time is kind of a pain I use Visual
Studio code because vs code actually has
a really cool extension this pixel byte
Studios love 2d support plug-in if you
get this and you're using vs code if
you're on a Mac you can just hit command
l and that'll actually run your game
immediately if you have a loved 2d
installed in the right location if
you're on Windows it's the same thing
but it's alt L so it just saves a lot of
time it's super handy I don't really
like clicking and dragging to it an exe
or an app I don't like going to my
terminal necessarily and per the
instructions on a little up 2d forms for
example I can go love dot and that will
do the same thing although right now I
don't have a love application I can just
type love for example and that will pull
up this is what love will look like if
you're running it without a game for
example but in the instructions there's
a way for you to alias at the command
line the word love to point to where you
have it installed on a Mac and there's
certain other ways you can get this done
on Linux and Windows actually on Linux
is very similar on Windows it's a little
bit more complicated but I don't like
doing any of that necessarily is if I'm
quickly developing I like to just sit
command L or Alltel it's much easier for
me so if anybody is interested in doing
that super easy to do I highly recommend
that and actually that's what we do for
the games course do for example let's go
ahead now and why can't I create a new
file interesting it's try that one more
time wouldn't actually let me create a
new file in my project here okay
[Music]
interesting let's save that as main or
dot main.lua well let me create a new
file now oh interesting so I just
learned now that if you don't have a
source file in your project when it's
loaded I guess it doesn't recognize that
it's a source repository and won't let
you add new files so if you ever
experienced that just make sure you have
a new file you can get command n to
bring up a new file etc etc so main to
ah is the file that you need in a lo of
2d application in order to get it to
work that's sort of the main entry point
of suggestion or the main entry point of
execution for love the binary if it's
sort of like in C where you have int
main void or in Python if you have
underscore underscore main same kind of
idea love just expects this file to
exist and quick suggestion for later on
if it's possible to change messages to
star star star would it not be better to
disable printing that message on the
screen altogether that way the chat
screen doesn't get clogged with a bunch
of people saying star star star
interesting I'll take a look and see if
the widget lets us do that I'm actually
not familiar with whether that's a
possibility I'm guessing it probably is
I actually didn't know prior to a few
streams back that this the star star
star thing was even a thing to be honest
so it's it's a cool feature I'll take a
look at the widget and see if it's
possible but back to main dot Lua this
is sort of where your entry point is
um found by love 2d and where you can
actually start the application so I'm
gonna write just a few simple functions
here that love to DX pecs to exist in
order to get things running
appropriately so loud
love update and love dot draw and load
just happens once at the start of your
program update happens every frame so
member of basically games are sequence
of frames usually 60 frames a second
just an image that gets displayed one
after the other depending on how fast
your computer is and how intensive the
game is excuse me and then draw it does
the same it runs the same speed as
update it happens every frame but this
is used more for allocating drawing
stuff and it doesn't get this DT passed
into it by lo which is just delta time
how much time has elapsed since the last
frame so actually I'm going to just for
cleanliness I'm gonna say slot machine
game this I do a code or a comment block
in Lua and if you're if you're looking
at this and confused as to the language
the language is Lua so the library is
loved but the language is Lewis so Lou
is a game it's a programming language
used all over the place in the games
industry you you see it typically used
as an interface for compiled C++ game
engine C or C++ game engines but love 2d
it doesn't sort of the same thing it has
itself is written in C++ compiled down
to the program you download onto your
computer and then you write these Lua
files which Belov 2d loads and then runs
those it basically has the functions
implemented in C++ that get called by
your Lua code so it runs really really
fast but it allows you to program in a
dynamic scripting language as opposed to
having the program in C++ or C or
something we have to compile it down
which can be kind of tedious and yeah
not as fast for development love 2d is a
great environment for prototyping and
for programming sort of simpler stuff so
these are your core functions that you
start off with I'm just going to say
love window dot set mode and let's go
ahead and
might create a confidence file I want to
make this file so that I have a
dedicated location for all of the
constants all the variables that
shouldn't change all the pieces of
information that are gonna stay the same
stay constant throughout my application
I'm gonna say window width is going to
be equal to 1280 window height is gonna
be equal to 720 I'm gonna set that in my
constants lua and then up here I can say
require constants dot Lua and now I can
say window width and window height if I
run this whoops require constants not
constants Lua sorry Lua assumes or love
2d / Lua assume that everything that you
require is a Lua file so by saying
constants dot Lua the dot is actually a
folder it actually looks into a folder
so in this case it would look into the
constants folder for a Lua Lua file
which is now we wanted at all so don't
use dots in your required statements use
only the name of the file in this case
Constance gets maps to gets mapped to
this constant Lua file so I'm going to
do that so now we have our window it's
the full width of the screen 720p 1280
by 720 this is gonna work great what I
want to do now just as a sanity check I
want to actually draw the slot-machine
on the screen just the raw slot machine
none of the wheels or anything like that
so I'm gonna do that
and in order to do that what I typically
like to do is I'll create a dependencies
file so I'll say dependencies da lua and
in here I'm just going to create a
textures table I'm gonna create an index
so this is how you do tables in Lua or
in Python you might know them as
dictionaries in JavaScript you might
know them as objects essentially just a
way to associate keys with the values so
in this case I want to associate the
keys slot machine to an image love
graphics new image I'm going to command
B that and this is going to be graphics
/ slot machine PNG and so now I have a
notice that I have this lowercase G I
have a global textures table G textures
it's why I practice
with the G the lowercase G I have this
table that I can access anywhere in my
application and so what I can do there
is now even though this is in my
dependencies lua file in main I can say
require dependencies and I can say in my
draw function remember this is where you
should do all of your rendering all of
your drawing I can say love dog graphics
draw G textures right because now we
have access to G textures its global and
I'll say slot-machine that's the key
into which our value was that new image
object we created right and then we'll
say we'll just let it draw actually at
the regular location so if i if i
refresh this we do indeed now see our
slot-machine getting rendered to the
screen and I in it I sort of a priori
made sure that this would fit well on
720p because I was do a little bit of
experimentation last night I wanted to
make sure we sort of had a road map that
was pretty clear and the default image
for this was really big and it wouldn't
have worked in the default resolution
that it normally used my or it wouldn't
have worked at 720p which is what we
usually stream at or what I use my
laptop at for streaming purposes because
everything's nice and big binary warrior
says have you tried the material theme
for vs code it looks much better than
the default in my opinion I'm not sure
let's try it out actually and thanks
also to drag wash 2003 Katie grow and
dives dive ship Tom or dive so Tom I'm
not sure exactly how to pronounce that
I'm gonna quit this and actually how do
you get I very rarely ever changed my
theme on your parents how do you change
the theme on here because I don't think
I've ever I changed the theme one time
on my main account and after that I
haven't actually changed it how would it
be in appearance this doesn't look like
it does that maybe preferences right
settings Oh color theme color theme
do I have to install material let's see
material this one install it's very
let's say darker like that and then get
rid of this it's one thing that I don't
like is that it's the 720p everything is
so well it's also my amplification it's
a little bit or my magnification
everything is a little bit it gets very
cluttered very quickly if all the
windows start popping up but I think
this is it's pretty good well we'll use
it for today
oh talent pale Knight high contrast is
that a different material theme let's
let's see that if I go back to
preferences color theme pale Knight high
contrast let's try that
oof I'm gonna be honest with the binary
warrior I'm not a huge fan of the blue
I'm not a huge fan of the blue I don't
mind the the the other theme though so
all I'll use the other one so that would
be the material theme darker high
contrast well use this one well use this
one I uh I'm happy to use this one and
yeah Adam it looks a bit dim I agree I'm
not a huge fan of the I'm not he it
wasn't a huge fan of the blue but you
folks like this theme the material high
contrast I'm diggin this one I'm happy
to use this one in the meantime let's go
ahead and actually add the ability to
terminate the application with a key
press cuz I don't like having a command
or press escape or I don't like having
to command Q I would much rather be able
to press escape and quit the game so
this loved key pressed function takes in
a key it gets past the key by Lua bar by
well by Lowell of 2d and this key is
something that you can check for and
then do stuff so I can basically say
by an era where so is everyone as their
own preference yeah everyone does have
their own preference and it's not meant
to be a slide on you for having a
preference for that I think this is a
very subjective thing I personally don't
like the like themes that are a little
bit not contrasting enough and are I
don't typically like non-black
backgrounds but that's just me some
people like lighter themes some people
like blue some people like some people
like brown text-editor themes everyone
has their own preference I think it's
more important for the stream that we
have some that's readable and that's
really the only concern aside from that
I don't think it matters too much but I
I do like this theme so thank you for
suggesting this theme we'll use it for
today's stream um
keep pressed key let's go ahead now and
say if key is equal to escape then oh
nice they fixed the indentation this is
great okay so that that was excellent
last week or two weeks three weeks ago
however long it was the version of YESCO
that I had was messed up with the
indentation so vs codes fixed it so
shout out to vs code for correcting that
but you can see here I'm basically
checking this key that gets passed in
here and so basically what I want to
have happen is if I hit escape I want to
quit the game and I want to have to hit
command Q or click the red X or whatnot
depending on your operating system so
keys equal to escape love dot event dot
quit and you've probably seen this
before if you paid attention to prior
streams but this is just a way of
quitting an application in code using
Lua look using a love to do something
that lets you do it without necessarily
needing to manually quit manually
command Q or go to your alt f4 or
whatnot and this is something that you
can implement in a menu system for
example if you were implementing a menu
in your game and you want the user to go
down to quit game and then have that
quit the game same thing same exact idea
love got event dot quit so now it's cool
if I hit that I can it escape notice
that I'm used to using command l to
bring my application up which is super
nice super convenient I don't have to
click and drag to an exe you don't have
to go to my terminal I can just use a
shortcut in vs code so highly recommend
this ecosystem for Lua and lip 2d
development Andres is hello hi Colton I
everyone good to see you Andre thanks
for joining us
day on our slot machine stream so let's
go ahead now and actually I want to draw
the slot machine right in the center
it's it's kind of shifted off to the
left but I wanted this to be in the
center of the board so what I can do is
I can say let's say local and we'll say
actually the school this would be a
constant right so it will make this a
constant so I'll say slot padding is
equal to virtue or window width the -
and this is actually where we're going
to need this is where we're going to
need to figure out how wide our slot
machine is actually and so now I'm
realizing it doesn't need to be a
constant this should actually be a this
should be a regular variable so we'll
say local slot padding this slot padding
is going to be the amount of padding
that we add to our that we add to our
when we draw the slot machine on the
screen so you can normally right now
what we're doing is we're just drawing
it we're just saying 11 eye graphics I
draw the texture and that'll assume
everything gets drawn by its top left
corner it's zero zero mark every 2d
object has a XY coordinate if you're
familiar with a coordinate system from
geometry everything has to be drawn
somewhere in 2d so it needs an x and a y
value and so if you don't pass in an x
and a y value here it'll just assume
zero zero which is in the 2d coordinate
space the top left we can pass in an x
and a y I can say for example 100 100
and this willips
this will basically now notice that it's
shifted to the right to bottom right a
little bit right this is the effect of
sort of offsetting everything from the
top left going down 200 pixels and then
going right 100 pixels it has that same
effect but I want to essentially
calculate how much we should move it to
the right
based on how wide it is and what we can
do is we can say the padding for that is
gonna be the window width
- and what we'll do is we'll say
textures at slot machine get width every
texture has the this function that you
can call in it with this : called get
width and : is usually how you access an
object's functions as opposed to dot dot
is usually how you would access not like
an individual objects functions but more
like a a class you know something like
that something that doesn't have
something that cannot spawn multiple
children multiple because it basically :
passes in this parameter called self
which allows you use all sort of an
object-oriented programming style with
Lua and that's what you get with the
colon operator you can sort of assume
that : is how you would access an
object's fields or methods sort of how
you would do it in Java and dot would be
how you would access static methods or
static fields in Java or C++ same sort
of idea and then we can divide this by
two and this is essentially what this is
a senator doing is it's saying grata get
the whole window width and then whatever
the difference is between the window
width and the slot machine which will be
however much total padding there is
divide that by two and if we draw this
now at the slot padding and we'll still
assume it at zero for the Y value this
will end up drawing our slot machine
exactly in the middle of the screen
I should go study for my exam tomorrow
see you in the next stream awesome mixed
binary warrior for tuning in
best of luck with whatever you're
studying for sorry this is two off
topics as as Li but what is under the
hood of love event dot quit interesting
I'm not sure so let's say love dot even
it quit let's go over to here and there
is some source code so what I'm guessing
is this probably sets a variable called
quit call an integer underneath the hood
and there's an infinite loop in love 2d
that's basically saying while not quit
right whatever that variable is and as
soon as you said it to false
it'll just terminate your game loop and
then
application just ends but you can visit
the source code so if we were to go to
love 2d source code I think it's on
bitbucket
if I'm not mistaken yeah rude slash love
root is the user under which it exists
and let's see if we go over to source
here yeah I ended up having to look into
the source code for some I forget
exactly what it was I think I was
looking to see why you needed to pass in
the dimensions of a texture to the quad
constructor if I'm not mistaken I don't
remember offhand why the exact reason
was but if we go to let's say go to
modules and what any event and is it an
event dot CPP maybe so is there a quit
function here so quick search for quit
no it's not here okay let's maybe go
over to the header is it in the header
file no let's see wrap events CPP it's
probably this W quit so it looks like it
give it passes in a boolean - I'm not
sure Oh to the Lewis state okay push
boolean true yeah this is this is
dealing with the lua of virtual machine
and essentially pushing a variable to it
from c or c++ and i'm not entirely sure
oh okay so it constructs a new message
called quit okay oh and then it pushes
that quit message onto the stack and i'm
assuming that in the infinite loop that
runs underneath the hood for love 2d
that it's essentially looking in the
state for this quit message so this is
there's a probably a so it's using this
sort of broadcast model where you push
messages onto a stack and then there's
listeners that listen for these messages
and perform functionality and there's
probably a function that's initialized
somewhere
that says on quit so whenever we see the
message quit terminate the infinite loop
that surrounds the game engine and it
might be as simple underneath underneath
all of that there might be a simple
integer or a simple boolean that the
while loop is checking for and if that
boolean gets set to false well then
everything just terminates at that point
the one that while loop that's
responsible for the entire applications
existence just stops running and that
has the effect of everything terminating
and there might be some cleanup
associated with that there might be a
separate sort of cleanup function that
takes place after that while loop is
terminated so after the while loop going
underneath all of that there's another
sort of block of code that says clean up
all memory do all this blah blah blah
and then at the end of that is the
proper sort of exit point for the
application this is how you would more
intelligently engineer something like
this because you don't want to just quit
something immediately and sort of leak
memory right because you have to free
all the memory that you allocate yeah
Andre was saying there must be an event
listener yeah there it sounds like there
is an event listener unity source code
is not publicly available that's correct
they do have licenses where they make it
available to companies that pay a
certain fee for it but it's not it's not
open source event listeners were always
used to trigger events like start music
etc in our project yeah event listeners
are key and actually we're we're not
gonna use event listeners here actually
today we're approaching that territory
with sort of callback functions with
we're we're gonna be using tweens and
timer after time between which we do use
in the games course has the same sort of
effect and thanks to Wayne e95 for
letting he'll for Sonny know about the
tools were using Visual Studio code love
2d also the pixel bite Studios love to
deep lug in super important if you want
to be able to execute your code very
quickly from Visual Studio code super
nice I use it and I love it super
amazing alright so we've covered now
getting the slot machine rendering on
the screen and centered right
everything's good we have images loading
I'm gonna go ahead into my dependencies
I want to be able to start drawing the
slot reels won't actually
have three separate reels of slots that
scroll right they get rendered behind
the slot-machine facade and to do that I
need to have the actual icons right
shouts again to my dad for kindly making
these image files for me because I sure
as hell know that I would not have been
able to a good job of making these from
scratch myself I am NOT an artist so
what we can do is I can say well first
of all local icons is going to be equal
to and we have all of our all of our
icons here sort of in this directory so
I have 50 apple banana
so we'll say 50 apple banana cherry
lemon orange and I also saw pineapple
right I'm making a list of strings which
we're gonna be able to use to
dynamically construct our textures table
so pineapple and then strawberry and I
think that's it actually so I have a
list of strengths here that's all this
is we're using a table as an array here
so you can use tables as dictionaries
slash objects and you can also use them
as a race they function similarly
they're very flexible in that regard
actually very similar to how PHP even
does its own array data structure and so
what I can do now is I can say for every
key in value in the pairs of icons do
and then G textures at value so this
will take each individual string equals
love dot whoops and graphics dot new
image at graphics slash and then a dot
dot for string concatenation this is
Lewis string concatenation operator and
then V for the name of you know whether
it's 50 apple banana etc concatenate
again dot jpg in this case and now I
have a list of TR a table with a
collection of all of our icons and
actually wanna make this global by
saying G icons so now I can reference
these icons this list of strings
anywhere in my application I'm actually
not sure if I need now that I think back
on I started a trial run of this I don't
think you necessarily need it but yeah
answer Adams question yeah my dad made
the images from scratch correct yeah if
he's saying that is great yeah Andre
it's only the top tier yeah
unfortunately unities license for that
is a little bit less than generous but
unity as a platform I think is
incredibly generous so I'm not apt to
criticize them too much for that
practice I think it relatively makes
sense I think if I'm not mistaken unreal
source code is open source don't quote
me on that but somebody when I taught
the games course last year last spring
somebody brought this up and I thought I
remembered researching it and finding
out that it was true that Unreal Engine
does have some sort of open source
license but I don't know okay let's go
ahead and now let's just test let's just
sanity check let's make sure that all of
these images are rendering let's make a
loop here so I'm gonna say for let's say
actually for key value in pairs of G
icons do love graphics draw and then G
textures at V at well actually well K
will be a number in this case will it no
it won't actually yes it will yes it
will be a number because we're using it
as an array this is the nice thing about
using tables in Lua is that if you just
if you just use them as arrays they get
implicitly indexed by a numbers so they
do work like arrays if you don't use
them like dictionaries or objects they
do get that implicit functionality which
is super nice so I'm gonna say since K
will be numeric I'm gonna just draw
these sort of in a line I'm gonna say k
times 64 and 0 so this should work
fingers crossed
nope table expected got nil dependency
is line 8g icons is that not available G
icons in pairs of G icons we're
requiring dependencies GI cause is a
global table oh here this is this is
what the reason is right I forgot to
change this to G icons after I edited it
cool so there are our textures right
super nice and is it the right size are
those the right sizes I think those are
I did all this in advance and I'm pretty
sure everything is pretty appropriately
sized I have all the numbers here I
ended up figuring out the offsets of the
texture just sort of figure out where
exactly things should belong so this
should save us a little bit of time but
that looks like all of the images that
we do care about they're all rendering
they're all they'll look pretty good
they're all different different colors
it's very colorful slot machine and then
here's even r50 which is very
appropriate that'll be a sort of our our
jackpot not 7 but 15 a higher number
higher jackpot so let's go ahead and
make our actual reals now we're not I
don't think gonna make this a super
super engineered application where we
have a bunch of classes all over the
place doing a bunch of stuff I think
we're gonna use mostly just raw tables
for most of what's going on say in this
stream so in here I'm actually just
going to say after slot padding let's go
ahead and make our slot reels so we'll
say slot reels is going to be equal to a
table and these are going to this is
going to be a table of tables right so
this is gonna be basically an array of
three tables these three tables are
gonna store the vertical sort of slot
reels all all of the images in a sort of
fake wheel we don't really have a wheel
because we're in 2d but we can make it
look like a wheel we can have a vertical
sort of scrolling bar of images and then
what we can have happen
is when the images get above a certain
point will just take whatever the top
image is wrap it around to the bottom
and then keep going and just keep doing
this indefinitely right and this will
just give us the illusion of having a
wheel for each of our slot reels just
this infinite is sort of like this
odometer type mechanism and that's
that's essentially what we're gonna have
happen the Godot engine is completely
open source says wainy 955 if you're
going to need access to the source code
you're probably going to be doing things
that the enterprise license is not going
to be that big a share of the
development cost probably true probably
true I know personally I wouldn't mind
little digging in sometimes to find out
how things are done but I think I think
the source code of being open to unity
in the unity ecosystem is probably a
more power user oriented decision so it
doesn't make sense I I do I do
understand and yeah understand reels not
strictly open source available on github
but bound by the license I see got it so
available publicly available not open
source in the typical sense of the word
in the sense of the term like a
mechanical engine says boudin dog yeah
kind of like I could see yeah mechanical
engine where you have the odometer sort
of scrolling so these are our reels
we're gonna store it they're gonna be
just a rays of textures of icons sort of
and let's fill them out let's let's test
this out let's make sure this works so
in my love load I can say for I is equal
to one until three so this is how you do
for loops inside of lua populate each
slot reel with icons right and let's say
I let's figure out the weight that we
want everything to be in so there's
gonna be a weight - everything this is
how slot machines work probabilistically
you don't assign you don't put the same
icon in the same number of times in each
reel or everything as an equal
probability of
of coming up right you make the jackpot
really rare and then you start making
things progressively more and more
common by adding more of those symbols
into the tables so bad X's are you using
material dark theme now for this stream
I don't know if I'll use it indefinitely
but I think it's fun to sort of
experiment with new themes why not I
don't mind it it looks pretty nice I
wasn't a huge fan of the other version
of it which was blue just cuz it wasn't
contrasty enough I don't think it looks
particularly good on camera but I like
this theme I think it's good it's close
to what I like one two three icons in
every row yeah it's gonna be kind of how
it is yeah 1 2 3 icon well it's gonna be
1 2 3 for every row so this is what
happens we go first row second row third
row and then within the row we're
basically gonna say for every key value
inside of pairs of slot icons this is
where we generate entire slot reel for
this column right we can say table dot
insert into slot reels I a table
structure this is basically where we're
gonna represent the idea of an
individual icon and it's gonna get an
icon which is gonna be equal to V and
it's gonna get an X which is gonna be
equal to and this is where I sort of
have hard-coded numbers it looks like I
did slot margin plus 2 18 plus 62 times
I minus 1 and what this does is it gives
me an offset I say slot margin I moved
to move them over to slot margin I then
offset them over depending on which I
were at by 62 pixels so I shift them
over by 62 pixels so they're a little
bit nudged together to fit within the
the real alternatively I could have just
made the images slightly smaller and
then offset it by the image width but in
this case this is what I came up with
and I like to the cleanliness of having
64 by 64 also making them too much
smaller would degrade the image quality
so it's kind of a trade-off at that
point alternatively it could have made
the game larger and then therefore I
wouldn't need to make the images smaller
but it would have looked kind of
challenging on stream but anyway Andre
says I have to go catch up later on
YouTube take care thanks for tuning in
I'm Jay much appreciated and then Buddha
says this name is good for the eyes
I am using it oh good I'm glad that
other folks fund the theme enjoyable so
this is where we're assigning the X for
this particular icon so based on the row
where such as shifting it over by slot
margin +2 18 which this shouldn't be a
constant really this should be some
value called like dinner slot offset and
then I'll go over to constant and I'll
say inner slot offset is equal to 218
right you usually want to avoid magic
numbers and then we can even do it for
here I can say a slot icon offset right
so we'll say slot icon offset is equal
to 62 so this is a more flexible and
clean way of looking at this problem
avoid using hard coded numbers whenever
possible just use use constants because
therefore if you ever want to duplicate
this or change it or want to figure out
where to change the variable and don't
want to grip through your entire source
base you can sort of ascertain that it's
in constant Lua and figure things out
much faster and streamline your
development process and save yourself
headaches and then Y is going to be
equal to
it looks like heighted 238 so this is
another magic number right so 238 is
going to be inner so that is what we're
gonna we're gonna say horizontal slot
offset and vertical slot offset and 238
is the number that I found to work for
this and we'll say vertical slot offset
and this will be horizontal slot offset
so a vertical slot offset and then I
ended up making that also a function of
kay right because these were actually
stacking vertically so this is a this is
depending on this K value which is the
which is gonna be a number there's going
to be one two three four five so here we
can say K minus one and then multiply
that by 64 and then in this case we
actually do care that there's 64 part
because then you can see their borders
adjacent to one another and it looks
more visually interesting the nesting
together of 62 pixels for the slot icon
offset is more for the the fact that the
slot machines a little bit I should have
maybe made the slot machine a larger but
just to avoid I guess yeah I guess
probably should just on that anyway
that'll take too much time so we won't
worry about that 64 I can make that icon
size and bring that over to constants
and I can say icon size is equal to 64
and actually this I can even I can even
do some like this I can say icon size
and then make slot icon offset equal to
icon size minus 2 right so now it's a
function of icon size so we can just
change the icon size and this should I
mean it might not be totally great if we
scale up to a factor that's pretty large
but in this case it's just a little bit
more robust so this is how we can
actually add all of this slot icons to
each real you know we adding we're just
creating three columns right and we're
spacing them apart or at we're creating
this table at each individual index
which just stores its icon as a string
so that we can draw it later we can
reference the right thing to draw and
then we have an X and a Y value so that
we can actually change these values we
can scroll them and then render them in
the right location so these are kind of
like objects think of them as a very
lightweight objects in game development
without needing to go into the weeds and
making a class that represents a slot
icon or a slot reel or a slot machine
we're dealing today with just sort of
raw tables which is a little bit easier
so here in love that draw instead of
doing a loop of just the individual
icons one at a time
I can say for I is equal to one until
three do this I'm going to basically
just draw the slot reels so draw slot
reels and 4kv
in pairs of slot reels
do a slot reels I sorry do love graphics
doc draw at slot reels i k @ r and
that'll be well actually what this will
be is g textures at slot reels
i ki khan because remember we're storing
the icon here right here so this this is
gonna be a string this is gonna be v
this is just gonna be whatever is in
slot icons which i realize we haven't
actually filled out yet so let's do that
let's say apple 50 pineapple banana
orange lemon strawberry and i'm missing
any of them
cherry 1 2 3 4 5 6 7 1 2 3 4 5 6 7 and
then I want you okay so that's all of
them if I'm not mistaken so those are
our slot icons so now those are the V is
going to map to one of the one of these
strings because we're assigning it here
right so kayvyun pairs of slot icons the
V is gonna be whatever is stored here
the cage is gonna be its numerical index
so 1 2 3 4 right and so all we're doing
is we're just adding one of each of
those into each reel and then here we
just draw them so we iterate over our
reels 1 2 3 and then we just iterate
over the actual table the sub table of
the slot machine and then we're gonna
draw the texture at the icon that we're
storing it's gonna it's gonna return a
string remember then we can say slot
reels I
k dot whoops k dot X and slot reels I K
dot y everything is correct which it's
in the hot slot margin is a no value at
line 27 slot margin Oh
slot padding sorry slot padding cool
awesome so this is are those are our
three reels right you can see what they
look like underneath the hood this is
how we're representing what the rails
actually look like but we're clearly not
drawing them correctly but we can
continue with this idea and sort of see
what this looks like how this evolves if
we keep going with it and as the is it
all laid out correctly I think it is
right we might have to futz with the Y
is there there's some weird blue
coloring going on back there not
entirely sure what that's all about
oh wait am i drawing am i drawing
something funky I don't think I am right
no I don't think so
no I think I am but yeah you get a sense
hopefully that illustrates a sense of
you know what the how we're actually
storing the slots and then Adams asking
can we get a casino image for the
background sure why not let's do that
free casino background images some slow
internet here
[Music]
the poker chip backgrounds aren't
appropriate but let's see
something like this I mean this isn't a
casino background that's like a that's
like a skyline
that's super appropriate what's good
here
let me pull up the image that you
referenced the only thing is it just has
to be probably has to be royalty-free
just to avoid having any issues right
this work oh that's cool I like that
image but is it royalty-free
if it is then I can certainly pull it up
it's on assets Adobe assets
I do like I do like that I like the idea
I owe this one here this is cool right
is this a this freeze is royalty free
download free crediting isn't required
but is appreciated in the last
photographers to gain exposure okay cool
well you saw where I got it from
unsplash calm it looks like it's free so
says crediting is not required
so hopefully that means that will be
safe if we use it it's this been OE icon
now what's the resolution of it it is
six thousand by four thousand holy crap
okay let's open that with it open it
with Photoshop and then we'll just
shrink it down to 720p and then we'll
use it
Colton if you have time make a semantic
UI and boostrap web development one with
jQuery tutorials that's a good idea I
think I might I might do something like
that okay it's not looking like that's
working let's open with a sprite okay
sprite sprite sighs just bring the
height down to 7 2008 Sten 80
interesting ok let's make sure the width
isn't at least 1280 that's fine I was
gonna say that looked garbage but now
we're okay okay cool let's save that and
I may rename it to casino let's go back
over to our thing here we're gonna go
over to dependencies again whoops and
I'm gonna just add the casino image in
here so I'll say casino is equal to love
graphics dot new image graphics slash
casino JPEG and let's go ahead now
lastly draw right here love dog graphics
draw gee textures casino
nice it's a little bit a little bit low
so let's actually shift it up a little
bit we'll say zero negative one hundred
cool
it's uh it's a little busy I will say
but you know it works it's it's not bad
right it kind of it kind of almost slots
in right next to the slot machine here
so it's kind of cute it's kind of funny
so thanks to Adam for the suggestion
pretty cool what's the need for local
variable slot icons why not use G icons
the reason so the reason so rule that
we're using a local variable this G
icons right here we're using just to
generate the list of textures and I made
it global just because I was 100% sure
if we would need a set of all the images
later on and remember offhand just yet
but the difference is this slot icons
here directly maps to how we lay out
each individual column of slot icons so
what that means is that instead of
having all these different ones let's
say I wanted to do Apple Apple Apple
Apple 50 now I have a weighted
collection of slot reels and they're not
all a set right I have a very low chance
of getting three 50s in a row and a very
high chance of getting either three
apples in a row or well very high chance
of getting three apples in a row a
slightly lower chance actually Oh quite
a bit lower chance of getting no matches
and then a low chance of getting three
50s in a row that's the reason that we
have a separate local table because that
is gonna be this is where we're going to
set the weights of our sort of the
probabilities for our slot machine by
just putting whatever strings we want in
the right order right and in this case I
always want 50 to be here because 50 is
where we're gonna see the this right at
the slot machines instantiation and so I
want I want the 50s to be visible serve
right away so we're putting 50 number
two and then everything else we wait as
we wish so I want to say pineapple I'm
gonna make these all asset again
we're gonna tweak these odds a little
bit later to make it more representative
of a actual slot machine so say cherry
strawberry one two three four five six
and then what are we missing we are
missing the banana so that's the reason
hopefully that makes sense so we have
our slot reels now let's actually start
scrolling them right this is something
that we should probably do to get the
[Music]
behavior that we're looking for right so
what I can do is I can say basically I
want a list of velocities so I'll say
slot velocities is going to be equal to
a table that's zero zero and zero and
specifically this velocity is a Y
velocity so these slot rails are going
to fo ro Tate are going to move on the y
axis over time this is what's gonna give
it the effect of sort of scrolling oh
yeah I did yeah I did change it back
back because I wanted it to look I
wanted it to look a bit more interesting
visually didn't want a bunch of apples 2
/ 5 ^ 3 times 100 minus the percent of
hitting the jackpot yeah I I I would
have to spend a couple seconds thinking
about that I'm not great at math off the
top of my head if you said to global
what would go wrong in this case is
astley if we set in this case we could
set most of these to global and it
wouldn't matter too much the Lobo is
something that you want to do to avoid
when you have a larger code base with a
bunch of a bunch of different modules
that might have name collisions that's
where Global's get tricky in a single
file it's not as big of a deal right it
can be a big deal if you have a lot of
the same variable in a lot of the same
places and you're not making any of them
local then you can have the sort of the
state of your application can change out
from underneath you at any given time
because you have everything wired all
over the place but local
sort of at the top level local is
effectively making it global so it's
it's kind of up to you it's a habit for
me to make module level variables local
if I'm developing an application just to
avoid this issue so something that you
should do just kind of add a habit kind
of make things global willingly rather
than by default it's how you should
think about it all right so let's make
things makes them make these slot reels
actually move vertically which we can do
pretty easily if I say let's just go
ahead and say in our update this is
where our update function actually comes
into play we'll say 4 1 is equal to I is
equal to 1 till 3 I want to essentially
take whatever the velocity is at index I
in slot velocities and so to multiply
that by DT which will be dependent on my
frame rate and that will scroll the that
will scroll the Y position of our of our
each individual icon so I can say for K
V in pairs of slot reels I do V let's
say how does this invest and done this
will be so V real in that pair actually
no sorry that's not incorrect that's not
correct the icon right and then I say
icon dot X dot y is equal to icon dot y
minus the slot velocities I times Delta
time
so if slot velocities I is equal to 0
this won't have any effect on moving
anything of course and shout out to our
special guest here we have DJ m in the
house
nice to see everyone just wanted to say
hello how's it going good I see some
familiar names in the chat already we do
we do this is a this is what we have
working so far or in Las Vegas today oh
that looks so realistic we're making it
right making a slot machine so this is a
fun fact this is how slot machines
represented underneath the what you see
on the front or at least typically in a
2-d game in a circle though in a circle
yeah so we're about to illustrate how
things move up and how you would
represent things looping around
eventually but to get us started we have
a very little personal touch there yeah
I figured for a jackpot
you know sevens little I feel a little
bit outdated at this point yeah I think
I think we just 50 is also higher number
than seven so I think logically that
makes sense
Oh adamantine nice to see you bail
occurs Babic night like po o da dum bien
and obviously T nice to see you as well
all right well Babic nice already
getting back into the math great to tune
in everyone thank you cool thanks for
clapping appreciate it alright so and I
realized I should about pulling up that
window I forgot to set the name of the
window so let's do that as well loved
window dot set title slot 50 boom so
there we go and that's how if you want
to change the little title bar at the
very top that's how you would do that
you would say love window dot set title
and then a string in this case slot 50
made sense
slot machine 50 cool so this is the sort
of algorithm behind actually scrolling
our slot machine now notice I ran the
application but we didn't actually get
anything scrolling nothing was being
multiplied because our velocity is zero
if we're multiplying if we're -
[Music]
incarcerating forever and this isn't
really ideal behavior right we want
things to we want this to loop in a
wheel we want it to be a forever
movement right and so in order to do
that we need to actually think about how
we can get our table to sort of loop
around it cellphone also virtuoso 7
thank you for joining bat Mackay is very
much a fan of the the formulas and
you've been kindly plugging them into
the chat let's go ahead and figure out
how we might go around implementing sort
of a recursive not recursive a
infinitely looping data structure
represent this now I think what we want
to do oh and also well the coins
eventually move depending on how much is
one those coins are statically drawn so
that probably we won't implement you
could certainly do something like that
though yourself if you had a coin sprite
and you want a certain amount you could
create a loop that spawned a particle or
a coin sprite that kind of moved you can
either create what's called an object
pool and do it but no in this case
that's just a statically drawn that's
just therefore in the texture itself not
animated you could you can do in that or
anything else I just want to find my
chances of winning a jackpot or maybe
how many times I have to hit the wheel
to hit the jackpot and I want to
illustrate also sort of where we're
going with this because if I just do
something like this if I just move the
slot machine down after I draw the the
individual slot icons what happens is
that you can sort of see what the slot
machine looks like right it's just that
our images are getting drawn wherever
they are right there there's no
condition to separate or to like
differentiate where the icons are
getting drawn it's just sort of naively
drawing them to wherever their X Y value
is which is not ideal it's not where we
want to go so we have a few bits and
pieces that we need to figure out but we
can absolutely do this so let's
implement the next part which is the
actual recursion of I keep saying
recursion for some reason the actual
looping around of the texture when it
gets to a certain height right which we
can do so if I say
and let's do this an update so an update
if we say at the end of our loop for I
is equal to 1/3 do if and again so let's
add some comments here so we'll say
scroll all of the reals
right so this will just scroll them up
and then here we can say loop real if
necessary
so for each real we can say if slot
reals I 1 dot y is less then let's say I
have the number here actually let's see
where did I have the number just to save
us too much time like trying to find it
174 was the number that I found okay so
174 and so let's actually again make
this a constant so let's say slot loop
why bring that into constants so slot
loop y is equal to 174 so we do is we
say if it's less than that less than 174
so if the first thing that we're drawing
which is the top is less than 174 I want
to say table dot insert we're going to
insert into that real into slot reals I
the result of calling table dot remove
on slot reals I at index 1 so in one
operation we're removing an object from
our reel and then adding it to the end
we're taking the first thing and
bringing it to the end right and by
doing that we're actually shifting
everything back up to index 1 and so we
get this infinitely looping data
structure so let's actually experiment
with it and see if it works
whoops main 54 comparing thing with nil
if slot reals I won top Y is less than
slot loop y oh I forgot to save my bad
okay
so let's see how if this works doesn't
look like it is hold on a second yeah
that is not okay it's not working so
something I have is messed up here
so if table don't insert into slot reels
I the result of calling table that
remove of slot will slot rails i won
am I going crazy slot rows I won wait
which is the first thing it has a
y-value it's less than slot loop Y right
okay just 174 there's less than 174 down
coming down then we're going to insert
back into that table oh yeah that's the
problem the problem is that we need to
actually change the Y value so this
method sounds like a differential
equations problem I wouldn't go that far
I don't think so I don't even know I do
not know differential equations at all I
know of them but I am NOT mathematically
equipped to provide anything of that
complexity what we're doing is we're
forgetting to set the Y value so of that
new element so what we need to do is we
need to say basically slot reals I at
index in this case it's gonna be index 8
it's gonna be the last or it rather
sorry it's gonna be it's not gonna be 8
because we're gonna make this flexible
it's gonna be whatever the length of
slot icons is so we can say at the
length of slot icons dot y is going to
be equal to whatever slot reals
I at slot icons -1 dot y is plus icon
sighs so this should work if I'm not
mistaken yep
we are scrolling infinitely we did it
and we can't quite see it visually so
I'm actually going to shrink this thing
down by just one so we can maybe see it
popping into place dynamically right so
you see the strawberry boom there's the
Apple and boom there's the 50 and then
boom there's the lemon so you can see
you can see this infinite loop right
we're taking whatever comes at the top
and it just instantly gets teleported to
the end of the table and this is how you
infinitely loop something like this in
the context of 2d game development and
when everything is hidden you actually
don't see this going on so you actually
don't know this is happening this is why
you need to use illusion in order to
make this look infinite right and I
think this sort of same idea applies to
a lot of generation in games is that you
provide an illusion of infinite sort of
spreading by hiding certain things that
make it possible hiding popping texture
pop-in and terrain popping in 3d worlds
this is kind of how like open-world game
streaming works right you're you're
playing a character you're moving around
and the terrain in an open-world can't
all possibly be loaded into memory at
one time especially for large modern
games especially for infinite games like
Minecraft so what happens is everything
gets streamed in at real time your your
it keeps track of where your characters
position is when you reach a certain
border right stuff far away gets
unloaded and then new stuff gets loaded
around you up to a certain radius and
this is what gives you a the feeling of
being in this open massive world but in
reality you're just kind of in this area
that's getting bits and pieces added
onto it to trick you into thinking
you're into an open world right so
that's the same idea same concept isn't
being applied here we're just adding and
moving things around to give us the
illusion of an infinitely scrolling loop
or infinitely scrolling to a slot real
sort of like a wheel in 2d space but
it's just a trick it's just a just a
little illusion just speed 31 1 994 I
apologize for the name below that it
looks like it's Korean or Chinese I'm
not actually sure that looks like it
could be either one I generally can
differentiate alejo gamma
thank you very much hell for sunny Bobby
righto one appreciate the follows thanks
to all of you have ignite saying no just
basic number theory
Paul can help with that I'm not sure
what that's a reference to what are we
removing with slot reels I one says
Ashley what we're doing as ly is we are
essentially saying the first the first
index of our table of our slot rail
right is if it gets up to like it's
gonna be roughly around this spot here
on our slot machine when it reaches that
point we're removing that removing from
slot reels I which is just a table at
index one that's the first icon it's
hidden at that point we're removing it
but we're also including it into a table
dot insert into that same slot reels
so it gets added to the end of the table
and then it gets assigned a new Y value
that's as that's essentially what we're
doing so everything sort of stays
indexed
based on the right order we can keep
track of everything in the same space
and based on its vertical height we can
therefore compare the index at each
individual spot and that'll map to the
same row in our slot machine especially
when we grid align them in a little bit
but yeah it's pretty cool hopefully
hopefully that makes sense Ashley it's
index one of our of our of our list of
icons and we're just removing the first
index and adding it to the same table so
it goes so it goes at the end so number
one gets added to the end instead and
then that all gets shifted such that
number two now becomes number one number
three becomes number two and so on and
so forth
but number one gets made number at
whatever the number of icons is so that
is that is the one that's what the ones
goal in life is yeah this one refers to
index one of the of the table so we're
removing from index one as opposed to
the end by default table dot remove will
remove the last element we don't want to
remove the last element will remove the
first element and bring that to the end
which is what we're doing with this
table dot insert because insert adds to
the end right so we're adding to the end
what we removed from the beginning from
number one cool all right so we have an
infinitely scrolling set of icons now in
order to make this look more convincing
all we have to do is just say if the if
V dot Y actually can we do V dot icon
here I think we can right yeah I think I
can right if I'm not mistaken if V dot Y
is less or if V dot y is greater than
140 and V dot Y is less than 400 we'll
say draw all of it we'll draw this is
that just ballpark I'm not actually on
two percent short but this should result
in our slot machine now looking more or
less normal like it's an infinitely
scrolling slot machine it's not it's no
longer showing what's happening sort of
below the slot machine right it's not
showing behind the scenes what how its
implemented that all still exists those
things are still here they're still
moving they're just not rendering
because the if statement is preventing
them from being from them being drawn in
the draw call and Apple watch gang hey
hey hey
I Kevin says how can I learn if you're
referring to learning love 2d I would
say go to the website download love to D
go through the wiki unless you're
referring to something more general if
you're learning about computer science I
would say probably take cs50 and
yeah as they kindly plugged the cs50 on
EDX and also the streams a lot of the
resources that we have on Sony's YouTube
and Facebook those are all great Apple
watches this is part of cs50 or
something extra this is part of cs50
this is an offshoot of cs50 where we
take a lot of the cs50 staff myself
included and we implement things from
scratch and we cover concepts David
likes to come in here and also sometimes
talk about things we've implemented
concepts that we that are relevant to
what we do here like docker for example
render 50 he did an example of regular
expressions it goes all over the place
but I typically do game development and
we make stuff from scratch on stream so
that's we're doing today we're making a
slot machine and so far we're actually
pretty far along this is I would say a
pretty robust looking at least slot
machine now we do have other stuff that
needs to be addressed for example we
need to be able to actually trigger the
reels going when we press spacebar but
there's more there's more to it than
that but we are served halfway there all
right
all so let's see what it looks like if
we if we bump this up so normally what
this is going to look like when we get
to the end this is going to be 500 this
is a velocity that I realized was pretty
good so this is what the slot machine
will look like when we actually run it I
think
oh wait when we're like when we press
spacebar this is kind of what it's going
to look like we're gonna press spacebar
the slot rails are gonna move like this
quickly and they'll press spacebar again
and they'll slow down but they'll also
speed up from nothing when we hit
spacebar and that sort of process of
speeding up and slowing down the
movement is I think important because
here I'll illustrate what we can do we
can say this gets set to zero and then
we'll say if ki is equal to space in the
key pressed handler then for I is equal
to 1 3 will say set velocity of reals
will say slot velocities
at index I is equal to 500 right so it
starts at nothing and then if I press
spacebar you can see that it kind of
just instantly goes into fast mode right
it's just instantly really fast and then
if I hit let's just say soft velocities
I is equal to 500 and 0 or 500 so now I
can toggle this right but this isn't
really realistic a slot machine
typically has the effect of the the
reels start up and then they slow down
and then they also happen 1 2 3 they
don't happen all at the same time right
otherwise it'd be a pretty easy game to
win right so this also just the way you
do ternary expressions in lua you give
it the condition which is is slot
velocities i equal to 500 if it is
return 0 if not return 500 and that's
get gets assigned to this variable here
this is a ternary expression and are you
gonna do different velocity for
different columns asks Babic we're going
to do different velocities sort of if
they're gonna all start off at different
slightly different times but they're not
going to be different velocities they're
all gonna be the same velocity as they
warm up they're all going to warm up to
500 and slow down to 0 but they're not
going to be they're not gonna be
assigned different velocities now that
would I think wait your odds of winning
a given symbol i think cuz think you
could more maybe you could anticipate
winning in a different way but I'm not
entirely sure it's a it gets a little
bit more complicated at that point but
we're not going to we're not going to
implement that so not necessarily part
of completing the course ask Apple watch
no this isn't strictly related to the
course this is something that you could
use as an ancillary material at least my
streams to some of our spin-off courses
like for example I teach a games course
that cs50 produces you could use this
material for example today's stream as a
sort of a side project - I guess
supplement that and a lot of the other
streams that we do on pi
and on see and other things you could
use to supplement cs50 but the twitch
streams aren't part of the core of
completing the course they're meant just
to sort of introduce you to new topics
and to also let you ask questions and
chime in and make this a bit of a
collaborative process Eastland says hey
beretta hey Eastland and good to see you
as these kindly plug my game stream as
well cool all right
so now we have the ability to start and
stop our slots at a given point using
lucky pressed which is great so this
sort of works it's easy to hit to get
the same thing and notice that they're
all sewn on grid aligned so I can stop
it sort of like halfway like this which
isn't how slope she's usually work
excuse me it's alright any drink a
little coke zero this isn't how slot
machines usually work they usually grid
a line so that the icons will always end
in the exact same spot in the middle of
the screen this is what will be what
will be implementing so that we can
therefore test that core row of icons
and know that it's what the user is
seeing when they get a match I cook
sponsor know I'm not quiet we'd be
pretty rich if we did have a Coke Zero
sponsorship though Alejo asks do you
think Lua is the most efficient language
for making video games the most
efficient language that's a very
subjective question I think I think Lua
is a very nice language for rapid
prototyping and love 2d makes it really
nice I think it's an excellent scripting
layer for modern engines i I don't know
if I necessarily say it's the most
efficient language for making video
games you can make an argument about
unity being probably one of the more
efficient platforms and they use c-sharp
for their scripting but this is the
developer dependent if you're a very
efficient C++ programmer you could very
likely make a game faster than I could
make a game in Lua because you just have
a set of skills that let your brain and
C++ work together well to create a
product and this
the thing about languages they vary
depending on who you are
what you respond to how you think about
solving problems Luud makes a lot of
things nice and convenient I think in
the general case in that you don't have
to manage memory and you get a nice
concise simple language to express a lot
of stuff with and it's pretty
lightweight and really fast so I think
Lua is a contender but I I am
disinclined to make any objective
comments along the lines of whether Lua
is the most efficient language whether
any language is the most efficient
language I would say find what's good
for you I tend to be pretty efficient at
making games in Lua versus other
languages myself but not more so than
other people this is just speaking on my
behalf I like Lua and love 2d and I can
think well in that space but I can also
think fairly well in unity and c-sharp
so it really depends
trucha nice hello good to see you 4:07
thing's pretty amazing every language
references thanks appreciate it
glad you think so alright so let's add
this sort of gradual effect of increase
in the speed of our slots because that's
an important aspect I think of the
feedback of the slots right and we have
another hour and a half hour ish or so
so we can keep adding features to this
to make it work and we the core that I
want to do is slow down and stop the
slots will and be able to swallow stop
the three slots individually and then
and then make sure they get aligned at
the end on the same row and then test
for equality if they're equal we'll have
some feedback - lets us know that we got
a match we can highlight the we can
highlight the individual icons or we can
we can display a different maybe a light
color background or an effect or
something we'll probably just highlight
the icons so let's go ahead now and
think about slowing down and stop and
rather speeding up and slowing down the
slots what we want to do is you
basically want to take that Delta Y
which is our rather our
our velocity our Y velocity and we want
to grew instead of setting it to 500 or
0 instantly back and forth like a switch
I want to interpolate from 0 to 500 over
maybe 2 seconds and I want to
interpolate down from 500 to 0 over the
same amount of time so we can do this
pretty easily with what's called a tween
operation and so what I'm gonna do is
I'm gonna grab a knife library from
another thing that we might have done
let's see is it a minesweeper and I
remember it looks like it is cool so the
knife library is awesome so if you're
unfamiliar with knife it's here let's go
to a knife love to D and it is on it's
on air struck slash knife on github
which is whoops not there I should see
if airstrike has other stuff because
knife is knife is an amazing library so
here here's the library it's called
knife it's on github comma slash air
struck slash knife and there's a lot of
really cool modules we've talked about
this on stream before today I'm worried
about timer timer is an amazing part of
knife that lets you do things over time
it's asynchronous doing this sort of
thing by hand gets pretty tedious
because you usually have to manage a
clock and then you have to do a lot of
if statements and you you get really
cluttered bits of code I want to just
say after 2 seconds do this and then
over 2 seconds change this value to this
value
so let's worry about that also did the
stream disappear no bad Vic is saying
the stream has disappeared is the stream
messed up for other people definitely
let me know it looks like I'm still
streaming ok worried myself a little bit
there for a second well that's happened
before that we've lost the stream so but
it looks like other people are I'm not
seeing any anomalies on my computer and
other people are saying that everything
looks ok ok cool glad everything's
working Babic I'm not sure what's going
on probably can't hear me if he thinks
the stream is gone but I was out would
tell Ballack to refresh
so maybe folks in town to refresh the
stream on his it might be his browser
anyway so knife not timer so grab you
can just grab it here you'll get a bunch
of Lua files I'm gonna go ahead grab
knife I'm just gonna copy that the whole
folder cuz I don't care too much and I'm
gonna bring it over into slot machine
I'm gonna create a lib folder and I'm
gonna paste knife in there with all of
its Luo files you'll see it has in here
base Lua behavior Lua bind Lua all these
different Lua files which is great
that's all we need in dependencies I'm
going to say timer is equal to require
Lib slash knife timer and then in main
Lua I can now use timer as a global
object Adam kindly plug code pin and
jsfiddle to Kesavan 54 was asking for
any websites to practice JavaScript on
Eliza those are both really excellent
code pen is a really cool website I
really like code pen cool
we have knife did now is in our project
so what I can do is I can say when I hit
space maybe instead of having all of
these all of the velocities get set
either to 500 or 0 instantly I can
basically say over the course of two
seconds I want you to influence the
velocity so I can say we'll say timer
dot tween and then we'll say over two
seconds pass it an object which takes in
slot velocities and we'll say at index
zero I'm going to I'm gonna bring that
up to 500 we do the same thing for one
and the same thing for two right so if I
hit space now what it should happen and
one other thing that's really important
you actually have to call timer update
the time in your update function for
this to work I should be able to hit
spacebar whoops time I'm gonna able to
perform arithmetic on local initial a
nil value okay let's see what's going on
here slot velocities is that a thing
yep that's a thing tamra dot tween two
over two seconds we are passing in slot
velocities the table key pressed key
this is strange
oh sorry sorry zero indexed I'm silly
it needs to be one two three Lua is not
zero index and to this day I still
struggle with this issue but now if we
have spacebar notice that instead of
starting off immediately really fast it
interpolated the value in slot
velocities from zero to 500 over two
seconds right pretty cool alright so now
what we can do is I can say basically if
will say slot velocities at index 1 dot
s all bosses 1 is equal to 500 right
will say because well we'll check to see
that that's actually completely finished
ramping up then we'll up sorry if it's
equal to 0 we'll do this else if slot
velocities 1 is equal to 500 then we're
gonna do a different thing we're gonna
say for I is equal to 1 3 do and then
I'm just gonna copy this but instead of
setting 1 to 500 500 500 now we want to
go the opposite direction I want to
actually turbo late it to 0 so I can say
0 0 0
so now when hit spacebar I'm gonna give
it a couple seconds to ramp up to full
speed and I've have spacebar again
notice that it does indeed get brought
down to speed zero so pretty cool we now
have the ability to ramp up and ramp
down and speed pretty great right
cosmic Louise 92 köppen just recently
announced love 2d beta
oh that's really cool okay that's
awesome
I actually could find that pretty useful
for like a maybe another version of the
games course cuz we can make this
web-based and that would be super
helpful for a lot of people
why does Lua not change it do they not
get complaints I suspect they probably
do get a lot of complaints as ly but at
this point it's probably so much legacy
code that it I don't know like tobacco
point backward compatibility can be kind
of a pain so my guess is it relates to
that not 100% sure I think it is pretty
it's so counter to what most programming
languages take as norm it trips people
up even like me and I do this a lot I'm
not not a master but I do it enough to
where I shouldn't be running into this
problem but I still do subconsciously
especially if I'm going between Python
and Lua and like some other language
like C sharp yeah it's Luis specialty
exactly Eva V actress 29s is slow hello
Eva good to see you thanks for joining
us today
so we've ramped up we've ramped down now
let's get it to actually stop each
individual column one at a time right
and also thank you Eva for the follow as
well and pieces of bleep thank you for
following and I think I also said just
breathe 31 910 t4o pieces of UK pieces
of UK I
see it could also be read pieces of
something than it will not say I'm on
camera but code you're gonna love MATLAB
then oh is MATLAB one index as well I
wouldn't be surprised I need to I need
to get better at math I'm honestly
terrible at math really if I'm being
honest I'm I can I can do game math what
I need to do it but like one of my goals
in the near future is to actually dive
into like advanced math and really get a
solid math education because I do not
have anything beyond like high school
algebra and trigonometry like I took
trigonometry in college and never went
into calculus or a DQ just people talked
about earlier in the chat or like linear
algebra I am lazy at math I want to not
be lazy at math I want to get better at
math Paul's online math notes
interesting
Paul's online math notes huh that's cool
I didn't realize this was a I might
check this out that's cool thanks for
the link Adam appreciate it and then
Chrome with toasting for the follow as
well what did you study in college
because you're computer scientist right
I studied programming but generally for
for most programming you don't really
need like calculus or anything like
super advanced you usually just need you
don't need to I mean I didn't even say
discrete math which is another thing
that I want to study I've looked at bits
and pieces of it over time but yeah
calculus is more for when you go into
things like physics or chemistry and
things like that
what kind of slot are you making is it
for csgo no not quite this is just a
game so we're making a slot machine that
looks like this just to illustrate how
you would do this and something like
love to D which is the framework raising
today and currently we're at the point
where we have slots and then we can
start and stop them and they infinitely
scroll which is pretty cool we've made
some pretty fair progress the next goal
that we want to do is we want to be able
to actually
stop each individual column and we want
them to be aligned with the we want them
to be aligned with the center of each
slot reel so that they line up perfectly
when they finished even if we end them
at any arbitrary point in time because
if we see here we can end them but it
has the result of actually stopping
halfway sometimes right it's
non-deterministic when they're actually
stopped or at least it's it's probably
deterministic it's just hard to it's
hard to anticipate when the press space
to get them to stop perfectly so we need
to do that so we need to actually make
sure that we basically bring the
velocity down instead of to zero we need
to bring it down to 30 right something
like this so this is what we're gonna do
we're gonna bring the slots up to 500
and then when we when we press spacebar
we're gonna bring it down to 30 and then
we're going to have a random number of
offsets here where basically the slot
will stop after it loops a certain
number of times right so when it gets to
it'll basically be random for each
column and then we can stop each column
individually so what this will have the
effect of doing is even if we end the
slot machine like sometimes you won't
quite know which one it's going to line
up with and there's a little bit of
randomness there which kind of I don't
know if it actually weighs the
probability in a different way or if
it's still equal outcomes but it makes
it a little bit more interesting this is
how slot machines typically work when
you see them and when you use them in
real life so we'll do that the way that
I ended up wanting to do this is having
a what did I call it I called it stops
yeah so I have I have a set of notes
here I haven't really been using it too
much mostly for those constants that I
that I pulled up earlier but here I have
a stop stable which is going to be a
table that map's to each individual reel
as well
and when I
can say is each stop will have a target
right and a total and what this is gonna
mean is basically every time we stop our
reel it's going to keep track of how
many when it gets to thirty thirty pick
or when it gets to the velocity of 30
pixels per second it's going to
basically check to see what's my target
number of slot icons I want to scroll up
after I hit thirty and then I reach the
target stop there
like stop a looping and that's that's
the final value right so this this is
give us a way to get that last bit of
scrolling and then finalize our choice
and then lock everything to a grid
because we're going to do this based on
loops we're gonna count loops and then
we're gonna cut our velocity in our our
update function where we actually do the
looping so I'll show you that the total
is gonna be equal to zero there so these
map to ours are reals so one two and
three mapped a slot real one two and
three these are the number of basically
loops that we're gonna let happen after
we reach our velocity of 30 instead of
500 so we can do is say well what's
gonna happen there's a few bits and
pieces to this a few flags we also need
to set but in my update I can say if
because we're gonna we're going to do
this in the looping part of our of our
program so I can say if
if stops at index I so this is where for
each wheel we're checking basically see
if it's time to loop our icon down to
the bottom of that reel
so if stops I dot target is equal to
well actually what we do here is we're
gonna say if slot rails i dot target is
greater than zero so we only want to
really check this if only check if we
have a target right because we're not
gonna have a target until we hit
spacebar to slow down our to slow down
our reels and actually the target gets
set here when we actually set the
velocities to when we set the velocities
to thirty once that's finished and
actually the way that we do that is we
say once we've gotten our velocities
down from five hundred to three hundred
and once that's finished by calling this
finish function on the tween we say on
finish basically I want you we give it
an anonymous function we passed an
anonymous function
I say slot velocities rather sorry we
say stops at i dot target is going to be
Oh am I actually doing am I doing this
more times than I need to do it am i
setting this oh you know what I am okay
yeah let's do that this needs to be set
to I is equal to thirty I'm actually
creating an unnecessary number of these
things happening
I'm kidding like a bunch of these tweens
so I want to say I is equal to 500 like
that
there we go yeah that was it worked fine
is kind of like one of those hidden bugs
that doesn't really cause issues but
you're doing more work than you need to
be doing I was I was having basically
multiplying the number of tweens I
actually need by three so we only need
that we don't need that to happen so I
say stops I dot target is gonna be equal
to math dot random three right so it's
gonna be right now from one to three
stops and actually an important thing
that we do every time that we use random
is in load what I want to do is I want
to say after all this stuff math random
seed OS on time just like that and so
now we have a target in each stop each
reel that will have a target from one to
three so that way doesn't take too long
we don't have like ten we don't have it
like we're looping ten times until it
gets to the end we want to avoid that
right so now this is where this at this
point is where we have a target this is
when we're at 30 pixels and we're
waiting to finalize our slot actually
scrolling so I can say if target is
greater than zero then I say slot reals
I dot total equals slot reals I dot
total plus one and what I do after that
is I say if slot reals i target is equal
to slot reals i dot total so this means
that we've reached we've looped the
number of times that we've targeted for
that for that real after we've slowed it
down so once that happens what we can do
is we can say slot velocities at I dot y
it's gonna be equal to zero and then did
I end up actually setting the X or Y
value I don't remember did I actually do
that
offhand I don't completely remember
[Music]
oh it doesn't even take a why also to
begin with but that's not that's not
important it's I think that's it I think
I've done the math such that the numbers
fit perfectly I think I think that's
what I did roughly perfectly I may have
actually missed setting the numbers
perfectly in my example but you know
they don't need to be perfect because
the rows will just the rows will match
based on the way it works with looping
the whatever's at that index will be the
same up above so based on their vertical
position they map even if they're not
completely perfect but they should map
perfectly
if not we can set the number ourselves
manually which is totally fine oh and
also it works because the velocity is so
low actually we're moving up and we're
going past a certain number it and we're
testing for yeah it actually is fine
there's not really a situation in which
we're moving more than one pixel per per
second or per frame rather so because
we're moving 30 pixels a second we're
moving every two frames yeah so actually
we're okay we're perfectly fine
everything will be that's how everything
stays aligned if we're if this were
moving at a velocity that was higher
than 60 we would run into potential
issues there of things getting staggered
but it's unlikely to happen we could run
into an issue of that happening if
you're running at a frame rate lower
than than 30 we don't worry too much
about that that would be something to
think about for a production application
though okay so this is cool so slot
velocities will get set to zero if
that's the case so actually let's test
this let's see if this works
woops main 89 if slot reels
target is greater than zero oh sorry
stops
yeah stops not slot reels wrong variable
okay let's try this let's see if they
let's see if they get grid aligned stop
it it should get a random number two so
they're gonna keep moving a little bit
but eventually they should stop yep
perfect so notice that they stopped
perfectly aligned there in the middle
and the pineapples stopped at the exact
same position serendipitously they both
rolled the random math dot random number
but the cherry went one more because it
actually got presumably a rolled a three
and the pineapples rolled a two or the
cherry will - - and the pineapples
rolled a one but they moved that number
of tiles after stopping after getting
set their velocity to 30 and then
eventually finalized on a location so
that's what that that's what happened
there that's cool we have that working
let's let's test to make sure that the
let's test to verify that the same icon
came up that we can test that missed
three in a row yeah no right Ellen says
rigged yeah essentially yeah it's guys
this is what rigging is by adding these
little things that screw it up and we
can also just have an if condition that
says if match keep scrolling one more
and that would be an example of rigging
- this is rigging in a kind of an
innocent sense and that we're just
introducing more like a randomization of
things but I think ultimately it still
keeps the odds the same I want to that I
want to think I'm calamity x5 thank you
very much for the follow so another
important thing that we wanted to do was
to be able to make the slots
independently move and in order to do
that what I want to do is
I'm gonna have to add basically a I
think I think what I did was I just
added chained if conditions is that what
I did
yeah that's essentially what I did so
rat right here where I'm what I'm
basically doing is I'm setting a I'm
basically kicking off all of the slots
at once and then I'm stopping all the
slots at once but what I want to do is I
want to kick off all the slots staggered
which is that's easy enough to do I can
do that here I can say timer got tween
actually I'm just copy this like that we
replace this and then we'll save one
right so after like just like that so
basically I'm kicking off the two second
thing right I'm saying after two seconds
I want your velocity I want the velocity
of the first reel to be 500 it starts at
zero I wanted to be 500 up for two
seconds interpolate that value what I
can do is I can say timer dot after 0.2
seconds I want to do the exact same
thing for number two right so what I've
done here is I've used a new function of
time where called timer after where I
basically let something happen after a
certain amount of time you pass in an
anonymous function which contains the
body of code that you want to execute
after that sort of like the time in this
case 0.2 seconds and then I'll do the
exact same thing here but after 0.4
seconds for number 3 so now if I run
this I hit spacebar notice that they
start at different times they don't all
kick off at the exact same time there's
a little bit of a delay right and
actually what we can do is we can bring
this down to point 1 and point 2 for a
slightly more subtle effect which looks
a little bit less I think jarring up
front as you do it so that's that's that
part so now we have everything sort of
happening at the same time but it's
staggered so it doesn't look it
everything's not quite following the
exact
same look through the whole time right
and certain slot machines will differ on
this I think I don't think this is
something that's necessarily I don't
think this is something that's
necessarily consistent across casinos
and slot machine implementations so here
what I'm gonna do is now I'm gonna check
for slot machine or slot velocities one
whether that's equal to 500 if that's
equal to 500 then I can say after or
over the course of two seconds bring
slot machine one down to 30 and when it
finishes brings luck bar top one down to
this right and I want this to happen
sequentially so I need this to be need
these to be an else ifs so I can say
then else if slot velocities two is
equal to 500 then do this for number two
and then else if slot velocities three
is equal to 500 do it for number three
and there's probably a more clean way to
do this but given that these need to
happen one after the other and they
shouldn't all fire at the same time in a
loop I think it would require a little
more Engineering to get this to work in
a more robust way so right now we're
just gonna use L tips but you could
certainly think of ways to do it more
well engineered now what should happen
is we let these all go up to 500 and
then I can one at a time stop them so
I'm gonna stop the first one first one
stopped but notice that the second two
are the the second and third one are
still going hit spaced oh and see here's
another problem though we have a
callback function that's expecting the
first item to
that's checking to see or rather whether
something's velocity is zero and if it
is it'll start the first real again we
don't want that to happen so actually
what we need this is where the flags
come in we need to say if slot velocity
is one equals zero and not running right
and so here I need to add a variable
called running which is equal to false
right and so here then I say running is
equal to true and so now it won't check
this condition again when the first real
is stopped and the other two are running
and we press spacebar to stop the second
one it'll it running will still be false
right or it'll still be true we only
want running to be false
after slot velocities three gets set to
zero which we actually do down in our
update function right so we say if slot
or if I is equal to three then running
is equal to false down where are we
actually when we're actually stopping
the reels from 30 to zero from 30
velocity to zero velocity we're checking
to see if I is number three if it is
that means that's the third real if we
stop the third real then we finish our
slot machines finished running so we can
run it again so we'll have that ability
so let's go ahead and do this boom I'm
gonna run it I'm gonna hit spacebar let
the first real finish so we got not a
lemon we've got an orange it looks like
bit space bar so second real coming oh
now we're gonna hit orange for a second
we got the cherry and then lastly we
have the lemon so this is cool we have
all three of these stopping and if I
press spacebar notice that we can kick
off everything once again now there is a
bug here target is not being set to zero
when we so actually so if I hit spacebar
now this first thing should just go
indefinitely because target it'll
probably be set to um I think it's gonna
be set to I forget what it gets set to
that deep that bugs it out it needs to
get set to a oh no it's because target
is greater than it's always gonna be
greater than our total is always gonna
be greater than target because total
never get set back to zero so we need to
set total to zero so we do that here we
say stops I total that's equal to zero
now this should work if we stop all
three of them thank you to our mark for
the fall appreciate it okay now if I
restart this will restart it that is not
the behavior that I wanted that is weird
that's a brand new oh right target needs
to also be set to zero
because it was doing the target checking
for when it was running at full speed as
well which is not what we want we want
target and total to both be zero when we
are running the slot normally okay cool
let's run this again okay we'll do that
and then that and then that and
everything should be working pretty well
looks like it is so this is cool we have
a slot machine that has three
independent reels that are controllable
they speed up they slow down and now we
can just simply check a win so if we say
this is where we check for a win check
for a win and flag slot as finished
running so if I is equal to 3 let's go
ahead and check for a win we can say if
slot reels I at index 2 and index 2 is
always the gonna be what's visible
within the reel where where we can
actually see it so you say if salam is
i2 is equal to well actually i think
this will work no matter what cuz the
slots are all the same right no that's
not the case no because this depends on
what we have the yeah no nevermind
scratchy I said to dot icon is equal to
slot reels I sorry
so we're gonna check slot rails 1 and
index 2 so that's our first real second
icon is equal to the slot rails 2 @ 2 so
our second real second icon and you can
actually you can't do a triple equal
comparison in Lua so I actually have to
say and slot reels at 3 sorry 1 2 is
equal to slot rails at 3 2 and these all
need to be at ICON
so that's checking to see if they have
the same string of 50 or apple or banana
or pineapple if those are all the same
then we have a wind condition so I can
just say when is true right and so I'm
gonna just make a variable for that
called win set to false by default and
then what we can do is I can say let's
highlight then we highlight the three
reals so I'll say we'll say if there's
gonna be at the second one so we'll just
say if when loved our graphics dot
rectangle and this will be a fill rect
this I'm going to set the color to the
graphics offset color at 0.2 0.2 or
sorry 1 1 1 at 0.2 and then I'm going to
go ahead and say fill at slot reals I at
2
I is equal to one till three do this
make sure to set your color back to 1 1
1 the newer love to DS expect you to
enter floating-point values from 0 to 1
so I'm not using RGB values here which
is what you would do in a lot of
contexts 1 1 1 is full white is 0.2
means mostly transparent this fourth
value is the transparency from 0 to 1 1
meaning you can completely see it zero
meaning you can't see it at all and then
set color 1 1 1 1 here and then we're
going to say oh right
starts at X Y so this will be at this
dot X and slot reals
I don't why and then this will be I
think all right sorry at - why
and I think we'll make this 62 by 62
actually you know what I think we might
want to make this + 2 and this I think
will also make +2 I'm not mistaken based
on how I have things drawn out maybe not
the why I think the X we will and then
draw this at 60 - 60 - if not 60 to 64
the column size or the the width of the
columns is a little bit narrower than 64
which is the only reason why I'm drawing
the rectangle a little bit of a weird
way but yeah that's sort of why we're
doing that ok let's also let's let's
make this easy to test oh no and I want
to make sure that we get 50 every time
so I'm just going to or actually I'm
gonna to comment this out and then I'm
going to say local slot icons gonna be
equal to 50 50 50 50 and 50 so it's 5
50s there's no way we can lose this
match
I run this and then let's go ahead and
stop all three let's check for a test
interesting they highlighted even even
after the third one finished so it's a
slight bug it finished sort of
asynchronously so what we need to do is
say hmm it gets slightly this is a
slightly tricky part about doing some of
this asynchronous like that you have a
bunch of things happening at once that
happen at different times and you have
something that relies on all of them
sort of have like all of them finishing
and being completed so I think I think
there's a way to do this in time or
actually if I'm not mistaken I think
there's a timer not all
is that not the case I thought there was
a way to do that in timer nice and
cleanly
I mean what we could do is we could
check we could do a in Finnish what we
could do here's what we could do we
could say in our up here where I
basically have I'll actually know here's
what we need to do here's what we need
to do if we're not checking just I is
equal to three what we need to do is
know yeah this is what we need to do at
all actually I had this all messed up
yeah I is equal to three doesn't
necessarily mean that that's yeah that's
not necessarily accurate
so we can do is we can say here's what
we do we say if slot reals I
one right no here's what we do we say if
slot velocities zero 1 not 0 is equal to
slot velocities 2 and slot velocities 1
is equal to slot velocity is 3 and then
we can do all that stuff right yeah
because this will be checking for a zero
in this case so will this work let's try
it
nice there we go that worked I don't
know if it was very easy to see on
camera but that's our slot machine yeah
it works now after this point you have
the framework to do a lot of stuff you
could to Adams point you could add a
particle system that spawns coin
textures inside the you know coming from
the bottom which is one thing you could
certainly do you could add a graph on
the left with a matching sort of set of
tears of tears of like how the rewards
map to coin values that you get
dispensed from the from the slot machine
right you could have those coins then
give you currency in which you could put
into the slot machine so you could start
with a certain amount of coins in your
wallet and then interact with a slot
machine to try to grow your coins up to
a certain threshold there's a lot of
different avenues you can go to now in
order to finish it off what we'll do is
we'll mix up the numbers a little or
rather the icons a little bit I'm gonna
put in three 50s and three apples and
we'll see if it still works make sure
that things aren't bugged right
okay so we got three 50s and it worked
let's run it again well it is still
bugged actually because I realize we're
not setting windfalls when we when we
rerun it so let's do that we'll set when
to false right there there you go cool
okay so this isn't gonna be a win right
so nope notice that we didn't get the
highlighting so let's try it again
oh stop it my bad okay let's try it
again
this is the tricky part about testing
slot machines is that it takes quite a
long time which is unfortunate ya see it
just take even with this low like level
of like this low number of items it gets
hard to test let's try it come on
ah and this is white slot machines are
dangerous because you can have really
high odds and still not win anything
damn I am just having no luck yeah nope
well clearly we can see that the not
winning is working the not highlighting
on loss
oh come on so close I think it's safe to
say that it is probably working because
it did highlight when we want and it has
a highlight at any time that we've lost
so everything seems good everything
seems pretty good yeah Riggs is epic
night yeah that's pretty accurate let me
go ahead let's create a getting up repo
for this so people can add their own
features as needed just go ahead and
github if anybody has any questions this
is a good time to ask because we'll
probably end up wrapping the stream now
so we got civil over two hours almost
two and a half hours we managed to get
everything working the way that I at
least envisioned the stream to have this
gives you like I said a foundation upon
which you get out of million features so
if we had maybe a bunch of time like six
eight hours we can go pretty crazy with
it but I think I will leave it up to the
audience too and as the I recommend get
be it this is a good exercise for you
get be FXR get some sound effects or
didn't even need to be FXR get a get a
jackpot sound effect or something and
get you know download it and then try to
integrate this into the into this repo
I'm gonna put it up here right now
slot machine stream
okay let's make that public create repo
go ahead and do this let's say CD dev
stream slot machine get an it get it
cool so that should be good
let's refresh this all right cool and
you got my DS tore it and they're just
fantastic I always forget about that you
know get ignore
and then we'll do this will be dot d s
store save that and then get our m dot d
s store dot
okaythat's refresh and then no more DSR
now he's got my kid ignore cool plugs on
the chat belt integrated myself oh yeah
I don't have the chat on this laptop
either it's a I'm not logged into with a
touch account but definitely give it a
try as Li and then let me know in the
next stream or your successes or posting
the Facebook group or whatnot man oh
just got back there working slot machine
yeah it's pretty nice right ding ding
ding upcoming streams ask the truká nice
on Friday this week we'll have Connor
Doyle or one of our producers for the
first time on stream is gonna do spark a
our next Tuesday it's going to be a
stream with Nick we're gonna continue
our CTF stream from last week so this is
the stripe CTF that we did we got a
couple challenges through but this next
time we're gonna try to get through the
whole thing so we'll see how far we can
get and then next Friday and I'm this
will be confirmed by this Friday we're
gonna do I'm gonna host a jQuery stream
so we'll do a sort of continuation of
the web thread that we had established
earlier in the year going from we've
done bootstrap and JavaScript CSS HTML
so next will be jQuery and then not too
far out we might I've actually started
learning react so we might do some more
react oriented stuff and build up a full
react page which should be pretty cool I
think people probably generally are
interested in that sort of thing a bit
of a far cry from the game stuff that
I'm used to but it's all fun it's all
good stuff
Ajax yeah well probably cover some Ajax
and jQuery and maybe with fetch because
fetch is like the more modern way to do
it and the truká nice asks a our
augmented reality yeah exactly
spark AR is an AR sort of development
studio shame daddy didn't join yeah I'm
sure he's gonna be watching this cuz I
know he wanted to see it he might also
be watching just not tuning in to the
chat but yeah shouts again thanks dad
for making the not only suggesting the
stream that we did today which I thought
was a nice 2-d game illustration but
also for making the artwork so super
great turned out awesome
it was a big fan of how it looked in the
end
and also thanks to own Infiniti before
they follow appreciate it I missed that
a few minutes back
so I'll takes any last questions that
people have so that we can end on a
unfun note here and I actually feel
quite good about where we left off I
feel like we oh I shame on me if I have
to plug the actual stream URL probably
should do that right so we'll say
github.com slash colonoscopy slash um
slot machine stream download it add your
own features to it if you do let me know
I'd be curious to see because it's a
good foundation upon which you can make
a whole kinds of cool stuff and then
have a good night thank you for the
stream my pleasure
tell us more about the background of
your nickname my friend Bryan came up
with that nickname when I was in high
school colton osku pee and i think other
people actually have come up with it
online so it's not the only one but it's
pretty funny I I did enjoy it it's
unique enough it's memorable so we'll
stick with it
sir oh oh my pleasure thanks for tuning
in
Babic nice is update the events page
here I think we updated it for this week
so but yeah I think we're next I think
today I'm gonna to scroll it over so
that we see Tuesday this is great thanks
Colton really missed the game stream so
hopefully we won't wait three weeks
friend next one yeah I know we've been
having
yeah fewer streams lately but certainly
we will work on getting more
consistently hopefully and this rule is
a solitaire though yeah I need to dig
into solitaire and sort of in advance
figure out all the pieces I need the the
luxury I had today was that I
implemented this last night and new sort
of where we were going and it was at the
top of my head and for some of the more
complex things I'm realizing that it's
actually better than coming in
completely blind with only having two or
three hours of stream time I think if I
were doing this full-time and I had like
eight hours to stream we could do it all
from scratch smooth like and work it out
work all the kinks out but I think with
two or three hours we end up splicing
things into like two or three parts
losing momentum and not finishing things
quickly enough so it's
kind of an issue so I'll try and I think
do more of the pre baked cakes so to
speak in advance so that because st.
Colin's any more web now that's true I
am definitely play devil's advocate when
you don't plan we see the planning part
too and that's also great yeah I think I
enjoy that I enjoy having this be
bi-directional and having people suggest
things too and having bugs be sort of
like a collaborative process not so much
like a UH like a mano as a
unidirectional lick sort of flow of
information that's part of this
platforms appeal to me do you have a
YouTube channel where we can find all
the past streams yep trucha nice plug
that Yuji complex 15 we have on the home
page we have the cs50 on twitch playlist
it's the number two playlist check out
David's lectures while you're there if
you haven't already checked them out it
was kind of cool to see you working it
out online because that's because how
it's how it is when we code yeah
absolutely
people usually put together videos of
coding but they'll have things like you
know make something in 10 minutes or you
know make snake in 10 15 minutes but
that's all something they've practiced
in advance to get it down to 10 or 15
minutes and I could we could do the same
thing I could memorize how to program
snake in 10 minutes but it's not useful
as much I think to you if you're an
advanced developer I think it makes
sense to get a 10 minute distillation of
something but even I don't want to see
how it's done in 10 minutes because I
understand that that's not how its
realistically implemented I'm more
interested in the full process of
figuring things out or I'll just look at
the source code so but in any case we
are doing a pretty solid job we have a
lot of content on I think I'm excited
for what comes next I'm excited for a
trip into a are actually which is
different way different than what we've
done so far and that's part of the fun
aspect of this channel too it's good
stuff the errors you run into our errors
that everyone else runs into absolutely
and I run into a fair share of errors
it's today was smooth because again I
have everything done in advance I have
notes here I can fall back on if I
struggle to remember
how things are when things are
completely implanted from scratch is
completely bootstrapped and nothing is I
have no crutch it's all you're there
with me you you have as much information
as I have so yeah Babic the scubs needs
to be rotated once and the the calendar
does have some time zone issues but I
don't think I did rotate to the next day
yet today but I will do that as well is
there another series of streams coming
after the exploring digital media
streams I'm not sure that's a course
that cs50 is producing formally and I'm
not sure if we have plans to do any new
courses formally anytime soon I'm sure
in the future we will but I'm not sure I
don't have the sort of lead on that
Thursday for slot machine oh yeah that
is a problem yeah it sucks because they
had such a great widget which have such
an awesome schedule widget that was
reliable and then they for some reason
deleted all their widgets and so now
there's only that one widget which seems
to work really well for the United
States but it doesn't work well for
people that are in other countries are
you gonna do a MongoDB video probably
yeah because I'm getting into web and I
know that part of that naturally is into
like and no sequel I will probably
imagine that we'll do a MongoDB at some
video at some point in the future don't
know when because I'm learning react now
and I'm probably gonna bake some react
apps after we get past jQuery we might
do a semantic UI video because I'm
learning semantic UI as well since we
have time what did you have to code to
get your job I started off not coding
here I started off doing transcription
and other bunch of random stuff I was
actually even getting video production
but over the course of time I've helped
out with a bunch of tools since at cs50
and I do little one-off stuff in the
games course I think was the real
thing that I made that was I was
actually pretty proud of for programming
perspective
having contributed to what cs50 has put
out in terms of content because that
actually required a substantial amount
of work a lot of the repos in the cs50
games course are like thousands of lines
of code and it was an undertaking it was
really good though really fun I enjoyed
the process and it was a very good
opportunity to sort of level up my
abilities as a game programmer
are there any previous streams videos
content made by the producer doing the
spark a our stream offhand I'm not to
freeze contributed a lot of video stuff
but offhand I'm not sure exactly which
things he's played an active part in I
know that he was featured in lecture I
think one year for VR but I'm not a
hundred percent
I'm sure Colton you wrote check fifty
right to correct code without having the
TAS or the professors correct everyone's
individual code I did not write check
fifty who wrote check fifty to check is
check fifty public let me let me confirm
this absolutely not in this repository
and all the github check fifty is public
the contributors to check fifty are
primarily I did not contribute to check
fifty now
chad is the primary contributor
alongside Brian and yella who is from
the Netherlands I believe cream has also
done some small contributions and David
has done some small contributions but
that is largely Chad who did the
functional programming stream and Brian
and yella it looks like Brian who did
the object or industry meola has not
been on stream I thought you were
involved somehow no I fortunately
haven't had been involved with that it's
a cool it's a cool project I've been
involved in bits and pieces of stuff I
did one of our old publish 50 repos I
implemented in Python and that was a
major part of our producers workflow in
terms of automating their like the
transcoding their batch transcoding jobs
and that was a multi-threaded Python
application which was it was a terribly
complex actually but it was
tricky because multi-threaded
applications using the entirety of the
resources of a MacPro
it was kind of a little overwhelming
this was years ago this is when I was
not very not very well versed in
programming principles I mean I had been
programming but then by like six or
seven years so I knew my way around but
not super crazy PDF to HTML o render 50
I did contribute to parts of the old
version of that but David primarily did
the new version I think I did a slight
amount of contributions to that I don't
entirely remember offhand it's been a
while been quite a while are we gonna
have a unity VR stream at some point um
there's nothing planned for that that
would be a bit of work I'd probably have
to use the encoding PC that we're using
now to actually do it you can't use
unity and on Macs with VR you can use
unity on max you can't use VR on Macs
with unity
I think period actually maybe that maybe
there's a way to do it but certainly not
on Mac books but yeah I think if I were
to do a VR stream we would use the same
PC or get a really bulky secondary PC
that was outputting to the capture card
on the side of museum web language
series goes HTML and bootstrap CSS J's
jQuery DB um roughly yeah I would say
that's a pretty natural progression I
would say you can even go beyond that
you could say jQuery into flask which
cream did a video on then into DB then
into like full stack development maybe
with react in a full stack context and
then you can do something like graph QL
which I think like adds a layer on top
of query in your database and like a lot
of other technologies that are in vogue
that I need to get up to speed with web
assembly if you're doing front-end
optimization says Martin absolutely a
lot of a lot of pretty bulky web apps
are done with webassembly
things like unity come gets compiled
down to webassembly the love to DJ a
sport gets compiled down to web assembly
using em script in which is pretty cool
yeah that's good stuff
if anybody has any last questions I
think this is probably well where we
will end today's stream yes wesam please
that would be a stream I don't know much
about what assembly I wouldn't I would
need to dive into that quite a bit and
see how I could make it project with it
but I know that it's very useful in a
lot of contexts trying to squeeze
performance out of the out of the web
my pleasure can ease thanks for joining
appreciate it one more final suggestion
just general design patterns um sure
design patterns are a lot of is
domain-specific a big paradigm now is
functional and functional design goes
along with react especially because
react and redux are based upon a
functional paradigm so when we get into
read into react and redux we might do
discussion on functional programming as
it applies to modern web programming and
how that's a design pattern now and that
applies to a closure enclosure script
which I'm a fan of and I want to get
into closure and closure script and we
can talk about it there to what your
thoughts about node.js for back and
development over something like flask I
don't have terribly strong feelings I
think they can both serve you well know
to use a lot with react because NPM and
react I'll sort of go in the same
ecosystem so I think use whatever you
learn both of them maybe and then use
whichever one you enjoy working with
more but you can use them both you would
use node with Fleck flask for example or
you would use nodes like Express and
that would be the equivalent of using
flask for example algorithms and data
structures yeah if I were going to do
something like that myself I need a lot
of studying up to do but Rodrigo has
expressed the desire to do more of that
so we might see something more from him
in that domain algorithms and data
structures but I myself would like to
see us do more of that as well and then
as Lee says things : have a nice day
thanks same to you I was going for
tuning in and
she ate it as always all right cool
sounds like we are largely set to go for
the day so thanks to everybody who tuned
in for today's slot machine stream we I
say it was pretty successful thanks
again to my dad for the awesome art and
the slot machine idea we will see you
all again on Friday with Connor for
spark AR and then next week for jQuery
and another CTF demonstration so until
then enjoy the rest of your week
this is cs50 on twitch have a wonderful
rest of your day and stay safe