all right hello world this is cs50 on
twitch my name is Colton Ogden and today
we are going to take a break away from
solitaire which we've been spending to
streams on so far and we're going to
dive into a much simpler game but a game
that's fairly new and a game that some
of you might have played a very famous
web-based game called cookie clicker and
I'll pull up a screen shot here in just
a second but thanks so much everybody in
the chat who wished me happy birthday
before the stream started so as I
started it off and then started a a
trend here so thanks as Lisa Mar Babic
whip streak and all who wish me a happy
birthday sir osseous oton Jovi omedetou
gozaimasu
Colton sandwiches I believe that means
happy birthday i know i'm edito means
congratulations
O'Town Jovi I do believe is birthday and
Bella cares thank you all so much
appreciate it thank you very much for
the birthday wishes 28 today two two
years away from the magical three zero
I'm gonna pull over to my screen here
and I want to show everybody what cookie
clicker looks like before we actually
get into implementing it and I to be
fair I actually didn't test to see
whether we could play this but it looks
like we can this is cookie clicker so if
I click this sort of cookie you do see
that I get a sort of a plus one I get a
cookie animation and I can I have a sort
of a counter there saying that I have 24
cookies thus far so your goal is to
accumulate cookies and I think there's a
more macro level goal I think you're
trying to take over the world or prevent
like a candy invasion or something so if
I keep clicking you'll see that cookies
do get increased over here on the right
side and this is where the gameplay you
know you see you only think you know
this is kind of a very simple boring
game why even why even have this game
exists I'm just clicking cookies you
know for the sake of clicking
essentially on the screen right but
there's a bit of a larger scale almost
business aspect of the game almost a
tycoon aspect to the game whereby you
can purchase these things in the store
on the right hand side yar so I can buy
a cursor and what that will do and you
it's kind of hard to see but it's
actually rotating around the cookie
on the top side right here but what that
cursor is doing is now it's actually
clicking for me or at least it should be
it's looking like it's very slow 0.10 it
might be oh yeah see there it is yeah it
just added one
what's the rate on these by the way
every 10 seconds so every 10 seconds
I'll get one more cookie that I don't
have to click myself so you can see that
it went to 37 and then to 38 by itself
it should in a second here go up to 39
go not mistaken 39 cookies so the goal
of the game isn't so much to click the
cookies you know indefinitely and sort
of waste your time as a human doing this
but rather well arguably but your goal
is to amass sort of this Empire of
cookie generating structures things like
cursors things like grandma's which is
the next tier of things that will bake
cookies for you
things like factories and mines and much
more I did a little bit of research into
the game I just bought two more cursors
so now I'll get a few more cookies per
for a second here but you can see that
you have a per second rate of cookies
which is 0.3 so now I've increased my
rated generation but quite a bit by
clicking I can keep my more stuff up my
rate of generation that's ultimately
rolled up you're a degeneration get
billions of cookies and take over the
world with your cookie Empire so we'll
be doing a version similar to this today
our own version it's not going to be
web-based it's going to be in love 2d in
Lua which we've been doing in the past
we could implement this as a web-based
game certainly and that's the the
version that the actual game itself is
written in but we're going to ourselves
do the do the framework that we've been
using more recently so I'm just gonna
read the chat here Ellen one was saying
take the day off I enjoy doing these
streams I wouldn't want to take the day
off and to be honest I don't do too much
for my birthdays I actually kind of just
take it easy and and reflect on having
grown a year older I guess and Babic was
saying that he hadn't been here for
quite a well actually I do remember I
don't think I saw you in the last stream
so yeah it has felt like it's been quite
a while
send for exes hello nanomachine our
happy birthday thank you very much
Andrey sing every birthday true candies
thank you so much
lady topaz I'm law says that / Shana
appreciate it all's good that some good
let's talk says Hans moon i99 don't
Kezia not a machine er I'm gonna talk as
I am us and some more gaming happy
birthday ASMR gaming interesting is that
is that the the sound like the like the
sensitive sound or whatever that you
hear with this special microphone or III
don't remember all pant that's ASMR
something is something else but hello
Ledo happy birthday thank you so much
ASMR gaming oh no Facebook cookies me
throughout my entire browser usage
everywhere yeah that's true that usually
and this is a joke that I made and I
think when I posted on Twitter was that
usually in cs50 we talked about cookies
in a different context her cooking being
a sort of little file that websites can
store in your browser to keep track of
some you know information to preserve a
session or something for a website but
we're actually today talking literally
about cookies that you would bake in an
oven or whatnot so it's a bit of an
ironic and different change of pace um
Kloppenburg good to see you
let's appreciate how dedicated colton is
I mean this is I mean this we're just
making a fun game today this is this is
this is no sort of exercise in in
difficulty here am Kloppenburg saying
actually I don't know what language that
is I I apologize and then hard-to-get
Phyllis Ted Colton I'm gonna assume that
probably says happy birthday but if you
can if let me know what language that
actually is that'd be great
love all the emojis and whatnot as they
says no you have to enjoy your birthday
don't reflect on becoming older I think
that's kind of unavoidable girls faces
hola happy birthday thank you very much
Lynn sello are these games the same
games that you make in your game dev of
course says Ellen one no it is not well
typically not we for a lab we did
something similar to hangman and the
typing game that we did in a prior
stream but that's not public online that
was for like a summer version of the
games course that I teach this cookie
clicker game is not actually a game that
we've implemented neither was solitaire
neither was snake
or tic-tac-toe even a lot of the games
that were programming on streamer games
that I have never made myself but know
how to make conceptually I understand
what needs to go on and you know there's
only enough time in the day you can't
necessarily have expected to implement
every possible game but you know doing
these are fun exercises for me and there
are fun teaching moment I think for
other folks and Dutch got it
Oh Ashley I did catch your message on it
you were the first person actually to
spur the happy birthday messages so
thank you very much for doing that I
appreciate it
Babic saying internet problems fibre
cable broke I popped in Friday chat to
wish but it got repaired today afternoon
ooh that's rough I'm sorry to hear that
hopefully that's all solid now and the
fiber cable won't break again in a
different location but I can't imagine
what it would be like to lose my
internet access I would feel lost and
confused
so cookie clicker let's go ahead and set
up a project so if you're brand new to
the stream if you've never watched a
stream before on Twitch or if you never
watch to see it's 50 stream on Twitch
I'm sure you've probably watched a
twitch stream at some point but if you
haven't watched a cs50 on twitch video
typically my videos on here are game
development projects that we develop
from scratch typically what I like to
use is love to D although we have used
unity as well in the past but the
framework that I liked for using that I
like using for teaching game development
particularly 2d game development mostly
out of necessity love 2d is not a three
framework and therefore we can't use it
for 3d development but the framework
that I'll enjoy using is love 2d you can
go to love to the org and download it
for your operating system it's an
excellent lightweight 2d game
development framework that uses Lua as
its programming language which if you're
not familiar with Lua Lua is a very sort
of popular and ubiquitous programming
language used in the context of games
used for game engines all across all
across the board but yeah it's good
stuff I'm a big fan of it I use it in my
game too of course and I use it on
stream here it's very easy to get a
project up and going quickly and to
iterate on it it feels low level it
feels like excuse me feels you have a
lot of control even though there is a
lot of abstraction for you in Lua itself
as a language is fairly simple and
lightweight and very flexible as
Felisa aniversario says let's put a guar
in for cheese thank you very much I
appreciate it I don't know how to say I
think it's open igano which is portugal
right thank you in portuguese correct me
if I'm mistaken thank you all so much
for the very kind words I appreciate it
so if you have loved to need installed
the next step is going to be actually
creating a project folder that is going
to hold your games files your source
code files and your graphics and your
sounds etc etc and the version to be
clear the version of cookie clicker that
we're gonna be making today isn't gonna
be as robust as cookie clicker because
we only have a few hours but we're going
to implement the core loop of being able
to click the cookie generate cookies and
then buy things that will let you
generate cookies over time and talk
about how we actually get you know
cookies per second implemented and
things like that and allow you to use
your cookies as currency to buy stuff
from the store so well we'll take a look
at all that stuff and see what we can
accomplish in just a few hours because
hopefully we don't want to make this a
two or three part stream like solitaire
we have enough of that going on already
and solitaire will probably resume
either next week or the week after that
so I'm gonna go to my streams folder
here which I've set up for all of the
streams you've done so far I'm gonna
create a folder called cookie clicker
and then this is just gonna be my Lua
folder I can click and drag it over to
vs code visual studio code if you're not
using a text editor a modern text editor
like vs code or atom or sublime text I
highly recommend it you can technically
program in a lot of different
environments that aren't normally
recommended like Microsoft Word or
WordPad or TextEdit and there are other
smaller applications like notepad plus
plus and text wrangler and certain many
other programs you can use vim you can
use Emacs I'm a fan of vs code it's one
of the newer ones it's got a lot of
great plugins including one that lets
you actually run your loved 2d games
from the vs code environment itself
using a shortcut which is super handy so
highly recommend vs code but you can use
atom you can use sublime you can use
many other different programming
environments so in every love to the
application and many folks have seen
this already if they've been tuning in
but if you're brand new you need to make
a main dot Lua which if you're familiar
with cs50 or programming and other
languages main is the sort of starting
point of your application in here I'm
just gonna create a
I block at the very top with this
particular syntax I'm gonna say cookie
clicker you know the the typical stuff
we do in every stream just because it
feels you know it feels official right
even though this isn't super meaningful
but if people decide to clone this repo
and this will go on github you at least
have my email address so let's go ahead
and write a few functions that are super
important love dot load love update love
dog draw these are all functions that
love to dia expects to exist in main
dalawa and you have to define them
yourself you have to actually tell Lua
love 2d what to do when it sees these
functions for now I'm just going to say
love dot graphics top prints hello or
rather cookie clicker and then in love
load I'm gonna say love dot window dot
set title to cookie clicker and scent
title what that does is it just sets the
title bar at the very top of the program
and loved our graphic stop print we'll
just draw some text to my what will be a
black window that we see very shortly if
I had command L on my Mac which is the
shortcut for actually running if you're
using vs code if you're using the pixel
bytes Studios love to deep plug in which
I recommend then you'll see that it does
indeed say cookie clicker in text it's
all sort of small at this point because
just at native resolution I'm at 720p
but it does indeed work we have a very
beginning sort of bootstrapped
2d okay it's not much of a game there's
not much going on but where we have
gotten started
blue Booker says have you ever gotten a
love 2d game working on the web yes
actually using a M scripting library
called love Jas you can take a look at
that if you look it up on github it
actually works pretty well there are
some there are some problems that we
encountered with it initially but to my
experimentation much of the
functionality that you would get does
work it doesn't work I believe with the
version 11 onwards it's only zero point
ten point two so if you are expecting it
to work you're gonna have to make sure
that you're using zero point ten point
two is your Lua version your love 2d
version rather and then that will be M
script and compiled able okay Lua is
also a wonderful pun for those
who don't know pork moon in Portuguese
instead of Sol which means Sun yes
indeed says Ashley yeah Lua that's one
of the first points I think I even bring
up in the games course is that it's
Portuguese for moon and it's fitting
that list was even speaking Portuguese
just found out the median midterm for
124 was a 50% but medians grade was a -
last year so I'm feeling pretty cheery
this morning cs50 is amazing by the way
perhaps the best you inch our us class
in the world
interesting ASMR are you are you taking
124 at Harvard actually I apologize if
we if we talked about this before I
don't 100% remember
is there a Colton wiki like David cs50
RCS to Harvard edu slash Malin that says
what asks Nate know at the moment there
is not I have not I don't have a CV so I
don't have one to put up on CS
harvard.edu like David does and David is
also officially faculty at Harvard and I
am not officially faculty he is a
professor intellisense in cs50
[Music]
intellisense in cs50 best interest see
sorry iOS autocorrect are you referring
to vs code as some are if you could
elaborate on that I appreciate that and
Ellen one asks can you talk about the
use cases of Lua absolutely so there's
this game framework love 2d which is
excellent you whether you're prototyping
or even releasing commercial games
there's a famous game called what does
it call it's called move or die I
believe this game is written in love 2d
at least per my yeah it is engine is is
is love as you can see here this is a
pretty famous game it's on Steam you can
download it on Steam and I think other
platforms this is a game that is
officially that is officially released
on or sorry that is officially developed
in love 2d completely left 2d therefore
I imagine it probably is pretty easy to
mod because Lua just by the way that it
works and loved 2d it's pretty easy just
add modules Lua modules and change the
source code and even a see the source
code this is probably pretty model but
you can absolutely release commercial
games using love you can release you can
prototype your game in love if you're
for example
developing something that you know
you're gonna have to maybe use Godot or
a unity 2d or some other framework to
create a game in 2d and then release
officially you can prototype it in love
2d because it's very easy to get up and
running I would say it's you know love
2d is a pretty fast binary it's a C++
binary that just uses Lua as a scripting
layer so it's pretty efficient I don't
even necessarily know if I if you're
gonna prototype a full game and release
it somewhere else I would say maybe half
the time you probably don't even need to
release it and some other framework you
probably just release it in love 2d but
separate from love to deal OA is used in
industry a lot for in in C++ compiled
game engines as the scripting layer it
was used for many years until unity came
around because unity now was kind of low
what I think I don't know what the
numbers would be offhand but I'm
inclined to say probably 40% at least of
Studios now are using unity and a
smaller number are using unreal and then
a smaller number are using an in-house
stack and even in unity you can still
use Lua using something called moon
sharp so it's possible to script in Lua
with unity but unity uses C sharp as a
scripting language so it's a little bit
of different environment but Lua is a
originally designed to be sort of a
language that you use to prevent
recompilation of a binary essentially
allow you to interact with a engine or
program and to just rapidly change
things on you in a recompile at least
that was its original intended use case
that ends up making it very suitable for
games where recompilation can be
expensive especially back in the day
where it was big C++ C code bases that
could take many minutes to recompile and
so now it's used a lot for lightweight
engines like this it's used for modern
C++ or C or other game engines for
example recently I saw it used in the
context of the game don't starve
together I believe that was written in
Lua or a rather scripted in Lua has a
C++ I imagine back-end Starbound is
another game that I know personally used
Lua as its scripting layer so it's all
over the place you'll see it all over
the place
and ASMR says I was just saying oh just
found out you guys are streaming on
Twitch awesome was saying that cs50 is
probably the best intro CS class in the
world professor Malin and a staff are
amazing I was just looking about how
intellisense might both help and confuse
completely new programmers so thanks
ASMR gaming for tuning in appreciate it
it's cool that you're actually taking
courses here on Harvard campus and
tuning in
intellisense can be I think - it may be
a beginning programmer it can be kind of
tricky the nice thing about intellisense
in vs code is it's not too intrusive and
it's nice if you have the right plugins
it'll actually help you out quite a bit
I know that for example I can say
functional love dot and it'll actually
tell me all of the namespaces and stuff
like that that are present in love 2d
without me having typed than before
until us since a lot of the time we'll
just kind of refer back to things you'd
already typed in your program over I've
heard of variables that you've already
seen but the nice thing about having vs
code and having certain extensions
installed is that you can actually see
just by typing something you know the
arguments that go into a function if
you're in Python this can be very
helpful or JavaScript you can auto
compile things in C which is great if
you want that sort of behavior and not
have to recompile you can see error
messages you get an experience that's
very akin to a dynamically typed
experience like Python but it's great
yeah intellisense can be a bit of a
hurdle but I think it probably does more
harm than good are more good than harm
especially for folks getting started in
a more dynamic environment and then cs50
for lawyers I think that is in the
process of being produced but yeah we
did shoot that earlier this year awesome
so let's go ahead now and get back into
the actual flow of implementing the game
currently we just have this black window
it's a bit on the dull side we've seen
this a million times already
but it's you know it's a fun cool
process seeing the game implemented you
know from this black box and then
getting all this functionality what I'm
doing here is I'm actually defining a
function called love key press which
takes a key and what this is what this
is is a function that love to D actually
calls for you every single frame
whenever you press any key on your
keyboard so it'll actually call this
function now it's empty by default so it
doesn't do anything it's up to you to
actually define what should go
in the function into you know tell love
to do when I press W I want my my
character to move forward if I press
escape I want to quit the game which is
actually what I'm gonna do here I'm
gonna say if ki is equal to escape and
once again I still haven't updated my
love to D to be the right or my I have
an updated vs code since the last update
where it messed up the Lua Auto
formatting so that's a bit of a problem
but we'll get by it I'm actually getting
used to it at this point but if ki is
equal to escape what I want to do is I
want to quit the game so I could say
love dot even thought quit and then now
if I run the game and I hit escape I
don't have to press command Q and I have
to click the red circle anymore I can
just hit command Q so I can just hit
escape and it quits the game so pretty
nice saves me a little bit of effort I
guess it adds a little bit to the UI
this lets me sanity check that input is
working so we can actually start doing
other inputs I will need for this game a
function called love mousepressed which
takes an X or Y and a button as you can
imagine mice typically have more than
one button they have multiple they have
a left click they have a right click a
middle click that might have side clicks
if you're using a fancy gaming mouse so
I care about whether we know which
button I click on the mouse I want
whether I want it to be a left click or
right click I might also care about
whether the where the X and the y
position of the mouse arm I want to
check to see if I'm inside a box
somewhere I might want to see for
example whether I'm clicking on the
cookie so this will we will actually use
here in just a little bit ASMR says I
love how 50 starts with C only yoga
confused by high level languages that
way that have way too much functionality
or implemented in lower-level languages
such as C learning C first is absolutely
perfect for obtaining a solid
fundamental understanding of how
computers work yeah I think I would
agree I think David would definitely
agree to I think that's a huge part of
the courses motivation definitely sort
of lay this foundational layer upon
which you can build the knowledge you
need to understand dynamic languages and
to jump in wherever you feel like you
want to whatever domain you want to
explore I can see how C also can be a
bit of a hump for a lot of beginners
because of pointers and because of
memory management and a lot of very
subtle bugs that are easier to handle in
languages like java or c para or Python
or JavaScript a sort of management
muri for you in garbage collection but
definitely having that lower level
understanding can be very helpful and C
and C++ are all obviously very important
even in the world of dynamic programming
languages because you need to have your
sort of more efficient things built in
those languages like love for example is
built in C++ but it allows us to
interact with the functionality we've
defined using Lua so that we provide a
good programming experience but we still
get as much efficiency as we need let's
go ahead and think about what the first
thing we want to see is and that is
probably a cookie maybe right here in
the center so if I look online I could
probably find a nice big image of a
cookie so that might be what I want to
do another thing that I want to do
probably is make it more lower
resolution but maybe we'll worry about
that I don't know at the time we'll just
say I want a larger cookie imported into
my game or a large cookie image imported
into my game so that I can click on it
and have you know some something more
than just text right so what I like to
do is I like to go to open game art org
and I briefly looked on here earlier
just to see if there were any cookie
sprites there was one which we might be
able to use and it's a little bit odd
just because this one I can't tell if it
has a background or not and it's not
completely flush with the edges which
might cause a slight issue but we can
certainly use this I think so I'm
actually gonna try it out it's open game
art / content / cookie - zero it's under
a public domain license so it's free to
use so it's awesome so the great thing
about open game art everything is very
generously sort of made available to the
public for free I'm gonna download this
I'm gonna go ahead and click it it's
gonna download into my wherever my
default downloads folder is let's go
ahead and figure out where that is
should be in here cookie PNG right
excellent
so it's 800 by 600 pixels I'm not
entirely sure whether it's flush with
the edges I don't think it might be so
might need to actually edit this so I'm
gonna bring it up into a sprite which is
my sort of sprite editing program and it
is indeed not quite flush with the edges
which if we were just to use the domain
of the sprite of this cookie as being
our where where we want to check for the
X&Y you can imagine that we did bring
the cursor out here for example and it
would still trigger a a click on the
cookie which we don't want necessarily
and we could all we will also get a
little bit of this area even if we do
use it as a box which will cause issues
with our X Y and we could probably write
a function that checks to see whether a
point is inside a circle I'd have to
google that to find the exact algorithm
because I'm not sure but we'll for
simplicity just use the bounding box of
the cookie but we'll tighten the
bounding box we're actually gonna crop
this cookie image such that it is right
on the edge now where it see the edge
looks like it's right about here and
here I think yep so that's perfect
I'm just go ahead and do that bring it
right to the edge there and now I can go
up to I should be able just go to sprite
crop and then save and then now
everything is very tight that sprite
image its boundary box is completely
touching the cookie so it'll be roughly
approximate to you know if we if we
check the bounding box of the cookie for
whether we've clicked on it it'll be
very close yet we'll be able to sort of
click on the on these edges and that
won't be entirely accurate but it'll be
good enough to at least get us started
if we wanted to we could look up on
Google we could say how do I get a point
inside of a circle point inside circle
algorithm and yeah
so you what you could do is get the
distance I believe this is a square root
of like x2 minus x1 o + X y2 minus y1 or
something like that
I don't remember offhand but it there is
a formula for it that you can check to
see whether the point exists and
actually if we look in here we might
even see it X minus center x squared
plus y minus center y squared less than
the radius square there is an easier way
I thought it was the all right because
that's the distance formula and you
check to see whether the distance
formula equates to
the weather the distance of your XY is
less than the distance of radius square
radius times two why is it great it's
not radius squared is its radius isn't
just radius times two
it looks like its radius squared but
anyway we won't get too concerned about
the math for right now we can we can
worry about that another time what I'm
going to do is I'm going to take this
cookie sprite I'm actually gonna put it
in the right location so now we have a
very tight condensed cookie sprite I'm
gonna copy this over to where I have my
repo dev streams cookie clicker and what
I'm gonna do is I'm gonna create a
graphics folder which this is
conventional you put it in your project
you're gonna want to file for all of
your source code files you want a
project for our folder for your graphics
for your sounds and for your libraries
all kinds of things I'm gonna go ahead
and just do this I'm gonna rename it to
lowercase cookie just because the
capital letter kind of bothers me a
little bit I'm gonna quit a sprite
because I don't need it anymore so now
we have an image that we can just draw
in our scene so if I go over to back to
my main Lua
and let's say I want to say cookie
texture is equal to love dot graphics
dot new image and then we'll say
graphics slash cookie dot PNG now I have
a graphics image a new image that I can
draw somewhere in my in my program right
I've loaded it into this variable called
cookie texture which is an object that's
going to store that texture information
and if I go down here to love dog draw
instead of love dog graphics top print
I'm just gonna say love doc graphics
draw that cookie texture and if I run it
you do indeed see that I have this
cookie in the middle of my screen now
it's a little large actually I don't
know if I wanted to be quite that large
so I'm actually gonna do and this is
more preferable to how I personally like
to do things I'm gonna load up this
cookie again into a sprite and I'm gonna
just shrink the sprite size down by two
is 478 I'm gonna make it I would make it
to 40 right it's gonna it's gonna filter
it I'm gonna save it and now if I go
ahead and I do this again you do indeed
see that we have a smaller cookie
texture that will be I think a little
bit more appropriate we don't want to be
quite as massive
and I also want to change the resolution
of the window to because it's kind of
square at this point and that's not what
you usually are gonna draw your game at
but we're making our way there and that
McKnight says x squared plus y squared
less than radius squared yeah it's a
great editor but as a new program or
definitely stick with one OS first I
tried to do Mac OS Ubuntu and Windows in
parallel and failed miserably yeah it
can be overwhelming different operating
systems have different programming
environments the nice thing about Mac OS
and at least Linux is that they're kind
of similar to both unix-based operating
systems so you do get a very similar
experience at the terminal at the
command prompt using things like LS and
cat and using command line text editors
and whatnot if you decide to do that and
the compilation process is generally
consistent using Windows is different
because all of the shortcuts are changed
and there are a lot of idiosyncrasies
with Windows the next thing is Windows
now has the ability to actually
integrate Linux using windows subsystem
for Linux so you can actually install
Ubuntu and whatnot on your Windows
machine as sort of a subsystem and then
use that so you get a native sort of
Linux environment at least feeling like
a Linux native environment while you're
on your Windows machine so it's quite
nice whip streak says Python greater
than JavaScript grade that are greater
than Lua never study see interesting
yeah I don't know if I agree with that
whoops trick I think it's important to
understand see because it's very very
close to the hardware of your machine
see is just kind of a light layer on top
of assembly which itself is a light
layer on top of your CPUs instruction
set and understanding of what CPU works
understanding how C and assembly work I
think are pretty valuable you don't
necessarily need to know how it works I
think to do modern development but I
think having that edge certainly puts
you at an advantage could you not use an
overlay or a stencil as some sort of
hitbox for a bit more accuracy says M
Cloppenburg I'm not entirely sure that
love 2d supports the idea of just in
click is plugging in an X Y to a stencil
on having that record a collision value
I guess you could do it in some sort of
way like that
but I think that's a bit over engineered
at this point I would probably choose
the distance formula the x squared plus
X wide less than radius squared and use
that I think that's probably better and
easier and probably faster than honestly
then using a stencil we use stencils in
the games course for a graphical effect
when we had when we had doorways in the
Legend of Zelda pset we ended up needing
to use a stencil so that you could walk
in between different rooms different and
then walk through a doorway and have
part of that be visible and part of it
be invisible stenciling I usually think
of in that kind of context but yeah I
guess you could think of you could also
use stenciling like this as a stencil
buffer in that sort of way and check for
one and zero and whatnot I don't
necessarily think I do it in this
context ww feeling I just joined how far
along are we in the project not very far
at all we've done so far this much code
we have our basic bootstrap up we're
importing our cookie texture which is
basically just a cookie image I grabbed
online stored in our graphics folder I
have a load function just as the title a
key handler for escape which just says
if we press escape quit the game and
then we're just drawing love the
graphics draw that cookie texture which
just draws it by default at zero zero
the top left corner still don't like see
so many semicolons yeah I don't like the
syntax I think I don't like developing
too much in C but I think understanding
how it works is valuable
na de visite na are not a vision says
Waialua not really into this just
curious Lua is a pretty popular
scripting language in game development
it's also very lightweight it's fast
especially amongst the dynamic languages
and we're using it in the context of
love 2d which is a very nice lightweight
low-level
feeling but still very powerful and fast
2d game development framework which
makes it very easy to prototype games
because you have a lot of control but
everything is very accessible you can
use polar coordinates for circle but
again we are in similar to Cartesian
coordinate system at that point I would
need a refresher on my on my
trigonometry Babic but you you might
have a lower you might have a better
understanding of that than I do it
point that Chris's hello Python has
literally translated to see at each
implementation step and then compiled
using a C compiler into machine code I
wouldn't go so far as I say it's
translated to see at each implementation
step I would say that it is translated
to Python bytecode which is run in a
virtual machine that is written in C and
then those get translated to machine
that gets translated to to your
processors machine code by via the the
virtual machine you know the virtual
machine Maps lets bytecode instructions
to your physical CPUs instructions but
translating it to see I don't think is
necessarily accurate but you can
definitely use C plugins but those are
compiled down to machine code
I love semicolons because of JavaScript
understanding is crucial yes so we have
a cookie being drawn here on our screen
let's take care of a couple of other
steps let's go ahead and say love window
dot set mode to 1280 by 720 because I
don't like the resolution that we were
running at before it's by default a 800
by 800 or 600 600 or something not
terribly not terribly great at least for
my eye I'm used to seeing 16 by 9
resolution I'm not such a fan of square
resolution and let's go ahead and draw
our cookie at a slightly different
position because it's kind of up to the
top left but I want it to be centered
more or less and what we can do is we
can say so we know that we want to draw
it at 1280 by 720 so what I can say is
let's go ahead and implement some
constants a window width is gonna be
1280 let's say window heights is gonna
be 720 and let's set these to the proper
constants and let's say that I want to
draw the cookie texture right in the
middle of the screen I can say draw it
at you know a given X Y right here so
the X Y is gonna be window width divided
by 2 and window height divided by 2 for
example as a starting point and now if I
if I do that we can see that it gets
kind of shifted to the to the lower
right a little bit that's because
everything does get drawn relative to
its top left corner not relative to its
center
at least with regard to textures right
circles actually get drawn relative to
the center which we could have
implemented this using a circle object
or circle graphic with love graphics dot
circle not quite what we're going for
here so in order to sort of compensate
for this fact this shift we actually
need to subtract some value from our X&Y
that we're drawing the cook yet which
we're gonna subtract half the width and
half the height of the cookie so that it
gets sort of drawn right at its center
so I can just subtract cookie texture
get width divide it by two and same
thing here I can subtract cookie texture
get height divided by two and if I if
I'm not mistaken which it looks like I'm
not we do indeed have our cookie drawn
right in the middle of the screen I'm
actually gonna draw the cookie a little
higher to I don't necessarily like
exactly how low it's been getting drawn
so I just shifted it up maybe a little
bit more maybe minus 64 on the Y yeah
that looks about right so things are
moving along we now have a cookie in the
middle of our screen it doesn't really
do a whole lot and for that we're going
to need to figure out how to draw how to
click our cookie to generate some output
some textual output that at least shows
us that we are indeed clicking our
cookie hence cookie clicker and doing
some work is this game going to be
completed in this live stream says not a
vision completed in as far as we will
have cookies that we can click and
cookies generating over time we're not
going to implement the entirety of the
cookie clicker game that you see in the
web browser because that's a very large
project with a lot of polish or we only
have three hours but we're gonna get as
far as we can in that direction and by
the end of the stream I suspect that
we'll have a fairly completed game or at
least a fairly completed prototype for a
game he's almost certainly right he's
one of the reasons why C is really so
great I'm googling to learn more about
what he's just taught me now this is
ASMR gaming I appreciate that thanks for
the thanks for the kind words if anybody
has any questions go ahead and let me
know
Adam fighter are we going to add a
crunch sound effect we absolutely could
we could definitely do that Adam asks
did you finish solitaire not yet that's
still ongoing we're taking a break away
from that just
so to cover this game and to sort of
have a change of scenery implement
something from start to finish but
solitaire will resume either next week
or the week after that details to come
can a game still be played if cookies
are disabled sorry I'm with that I had
to do it I'll see myself out now
excellent joke says from tux man 29
everybody let's give a virtual round of
applause get some kappas in the chat for
tux man love it love the joke let's go
ahead now and say because remember love
dot mousepressed we can test to see
whether we're actually getting a the
press to work in and of itself the first
thing that I want to do to get in that
direction I'm actually going to do love
dog graphics top prints cookies : and
then we want to keep track of how many
cookies we've actually generated how
many we've clicked to obtain and so I
can do this by saying dot dot two string
cookies and we haven't implemented we
have an added cookies yet to our to our
game and dot dot you might not be
familiar with dot dot just means add two
strings together it's the concatenation
operator in Lua
you can't use plus like you could in
Java for example in Lua you do need to
use dot dot to tell it that I'm adding
strings together add them one to the
back and JavaScript let's use plus for
example there's all kinds of bugs that
come out of that but you specifically
need to use dot dot in this case I'm
going to go ahead and actually add that
variable cookies equals zero and better
practice is going to be to actually make
all of these local variables right so if
you have top-level variables in your Lua
banjul and let's say you have other bits
of code other files and you don't want
these variables accessible from within
those other files you're gonna want to
make sure these are set to local make
sure they are local variables local
window with local window height they're
still accessible in the same way that
we've just been using them but now if we
have other Lua files in our code base
they won't be visible by default if we
don't specify local they will be visible
from other files and we don't
necessarily want that that can cause a
lot of headaches I'm going to go ahead
now and let's just specify that this
should be actually not printed but I'm
gonna say print F for a formatted print
and now what this is gonna do is I can
specify a few different things I can say
start relative on the let's just say
zero zero let's say I'm going to start
relative to the top-left corner like
before I'm what I'm gonna want to do is
I'm actually gonna want to Center this
text on the screen and to do that I'm
going to specify after the X Y I'm gonna
specify how much padding in which to
Center it makes it what's my column size
between how much size should i Center
this text right and I wanna I want it to
center across the entire screen so I'm
actually gonna specify that is window
width and then I'm gonna say Center I'm
gonna make sure that that gets centered
and you can specify left you'd also
specify right and if I rerun this you do
indeed see very tiny at the top cookies
: 0 but the unfortunate thing about that
is that now we're using such a tiny font
it's kind of hard to see I want to make
this a little bit larger what I can do
is I can say local large font is equal
to love diagraph fix a new font and I
should be able to just specify 32 and
what this will do is they'll just use my
default font which i think is Ariel and
create a new font that's larger than the
default which i think is 12 pixels
possibly and so now if I go down in my
love load and I just say love dock
graphics dot set default set for outer
two large font if I'm not mistaken this
should work indeed it does now cookies
is set to zero but it's large I can
actually see it without having to squint
my eyes super tiny so I've made a bit of
progress and actually I don't
necessarily like how high that is how
close that is to the edge I'm actually
gonna specify that should be 16 pixels
from the top and now it's just a little
bit of padding which is nice
can you show what extensions you're
using for viewer vs code asks nips Asst
so I don't use a whole lot of extensions
but the one that I am using for for love
2d is called love 2d support by pixel
bytes studios and if I go over here you
can see that I do indeed have love 2d
support by pixel bite studios it's
pretty easy to search for in vs code
it's got sixteen thousand downloads very
highly reviewed although you can't see
it should be five still roughly five
stars this allows you if you're on a Mac
to just press command L and
that you have loved installed in your
Applications folder you can just a
command L and this will sort of just
pull up love for you without you needing
to click and drag to a folder or need to
a leus love and your terminal and then
run it like I usually do super nice if
you're on Windows you can just use alt L
and you will need to specify the path
potentially depending on your setup but
as soon as su mning that you have
specified the path for your your love to
the executable it'll just pull it up and
sort of act as if it's clicking and
dragging your folder over to that
executable for you so super nice quality
of life improvement if you're developing
and loved to be using vs code and
everybody enjoyed tux man's tux man's
awesome cookies joke keep keep those
coming for sure so now I have 0 cookies
let's test to make sure that I can
actually increment my cookies and
actually generate more than just 0 right
in my love dot mouse press I can say if
button is equal to 1 then cookies equals
cookies plus 1 and by default Lua uses
one as your left click and 2 as your
right click and if you have multiple
mice multiple mouse buttons on your on
your mouse they could potentially be
more than two three four five six
depending on the opinion on the specific
mouse that you have I have a gaming
mouse at home that's got probably seven
or eight buttons on it some of which I
didn't even know existed prior to doing
a little bit of research on it
ken love to d be used for mobile games
can it be use for mobile games I think
it can I actually haven't tested this
myself but on the love 2d wiki they do
claim at least for what I saw before
that you can compile it to Android you
can compile it to iOS so I would do a
little bit of research and see maybe if
we go to the wiki maybe there's a little
bit more information game distribution
let's see
iOS basically surgeons for iOS without
fusing or available at getting started
cohash iOS so it does indeed look like
there is some information on how to get
it to work based on what I can see here
it does indeed seem the case that you
can I haven't tested it myself I don't
do a lot of mobile development but this
is cool if you're looking to get into
mobile development with love 2d
looks like it's definitely doable and
lines' vowing that you thought you that
you can indeed do so so now if I run the
game and I click notice that every time
I click my cookie amount is increasing
so we now do have a way you know this is
the core game loop of cookie clicker we
have officially sort of implemented the
core mechanic of the game which is the
click to get cookie so I mean at this
point we can just wipe our hands and say
cookie clicker implemented right
everything's all set and done we don't
have much farther to go but as we
covered earlier there are indeed
multiple other facets of the game that
make it more interesting than just
merely clicking on a cookie the whole
time to generate cookies right we could
do much more than this Nick the way he
says is it your birthday day Colton yes
it is indeed my birthday 28 years old
today
it's a starting to sink in a little bit
so oh and also for iOS games you still
have to transfer your loved 2d project
to Xcode on Mac OS interesting I did not
realize that that is a consideration
although it was my belief or
understanding that you could
theoretically still do this on a Windows
or Linux machine with the right modules
I'm not 100% sure because I haven't done
it myself but you know we'll see not a
vision nicked away and MacKinnon - 2 -
thank you very much for the birthday
wishes I much appreciate it
everybody is so so kind so the first
thing if we want to evolve this beyond
just merely clicking our cookie clicking
our screen to get cookies well we could
do a couple of things we could first
detect whether we are indeed within the
box of our cookie whether our mouse is
there by well normally there's an effect
that we get there's a sort of a
graphical effect when you hover over the
cookie it sort of expands a little bit
and we could certainly do that too
so if I say and love that update if love
dot Mouse dot get position or rather
what I need to do is say local X Y is
love that Mouse not get position and
then if X is less than or equal to or
rather if X is greater than or equal to
and we should probably cash this you
want to cash this information I can say
window width divided by two or rather
let's do this let's say local left and
top right bottom well we can do it'll
get to to bloat it if we do that we'll
say local left is equal to window width
divided by 2 - how did I do it
cookie texture get width so that would
be the left side of our cookie so we're
basically saying window width divided by
2 minus quickie texture get width and
actually we can calculate all this
information up top and not need to worry
about it and that I think is actually
gonna be much better so let's do that
let's say a local left up at the very
top is going to be window width divided
by 2 month cookie texture get with let's
do that the reason that I don't want to
calculate this every time an update is
because love dot update is actually
running 60 times a second so if I'm
calculating this 60 times every second
it's gonna get a bit well let's just say
it'll it'll run but it'll be subpar in
terms of efficiency if I can just
calculate this information if it doesn't
change I don't need to calculate it
every frame I can just set it up here
right I can say local left is equal to
window width / 2 - cookie texture get
width right here and local right is
equal to window width / 2 - cookie
texture get width oh and actually this
should be divided by 2 plus cookie
texture yeah with so what this is going
to do is it's actually going to get that
left edge actually what we do is we'll
just say left plus cookie texture get
width and now we have our left and right
edges of the cookie so we can start
testing for collision this way but we
can also use this left value now to draw
the cookie instead of needing to
calculate this down in the render
function which will save us even more if
see not that it's tremendous but little
things like this do add up I'll say
local up is gonna be equal to window
width divide our window height divided
by two or rather this should be top
local top is gonna be a window width
height divided by two plus and how do we
have it set it down here before we had
it set to - cookie texture get height so
- cookie texture get height divided by
it divided by 2 and then I think we - 64
yep so - 64 and then bottom as you can
imagine is just top plus cookie texture
get height and now we've calculated
these four values we don't ever have to
calculate them again I can come down
here to where we did calculate it and I
can just say I want to draw my cookie at
let's say left and top right and so now
then expected in your n which is on 46
which I need to get rid of this because
they had it was incomplete and then now
everything still gets rendered but now
we're just saying draw the cookie at
left top we're not calculating you know
this offset of the of the cookies width
and height anymore in the in the draw
function and the draw function just like
update also takes place 60 frames a
second so whatever calculation we can
get out of draw out of update we
actually save ourselves quite a few
cycles now I can say in here this is
where I can actually perform the logic
for checking for whether the cookies in
sight or whether the cursors inside the
cookie I can say if X is greater than or
equal to left and X is less than or
equal to right and Y is greater than or
equal to top and Y is less than or equal
to bottom then I can say and this is
this should sort short-circuit so if any
of these become false I'll just exit
that if statement which saves time as
well if X is a if that's the case what I
want to do is say
I want to have this global so I want to
actually have a scale variable so I want
to say scale is true or rather I should
say make cookie bigger is equal to true
equal false and then I can make cookie
bigger equal to true I can say make
cookie bigger is equal to true else make
cookie bigger is equal to false and what
I could also do is I could say make
cookie bigger is equal to this whole
expression and that will work just as
well I can get rid of all of that right
I've essentially said make cookie bigger
is equal to the truth or false value
that this whole condition sorting
evaluates to whether X is greater than
equal to left and X is less than or
equal to right which means basically
just making sure it's within the bounds
of our square and then so down here the
nice thing I can do now that I know
whether my cookie should be drawn bigger
or not is I can pass in an extra value
to the draw function I can say draw the
cookie texture at left top don't rotate
it zero rotation but I can pass now a
scale value into the the next two
parameters I can say let's let's say
maybe I want it to be 1.2 times larger
so I'll say one point or one or rather
cookie texture make cookie bigger and
one or and 1.2 or one same thing here
and I'll explain this in a second if
you're confused make cookie bigger and
one point two or one let me just make
sure this is working before I before I
sort of test it but you can indeed see
that we are scaling the cookie as soon
as we hover over it now the unfortunate
thing is that it's scaling relative to
its top left corner you can see that
it's book sort of blowing up well other
way relative to his top left corner but
it's it is indeed scaling we hover our
mouse over that box so we're checking
the XY of our
for whether we're inside the box and if
we are we're setting some value to true
if that value is true we're just
increasing the scale value of our cookie
so what we're doing is we're basically
saying is make cookie bigger equal to
true if it is insert 1.2 here if not
just insert one a scale factor of 1 if
we're just scaling something times 1
it's just times its it's just an
identity scale it just means that we
just need to make sure that it's the
same size that it should be but if one
point to scale factor means it should be
20% larger right and so that gives the
effect of being 20% larger so this
and/or syntax is just the ternary syntax
that you get in something like C or
JavaScript
it just means essentially this : this
question : right it just means do this
thing if it's true do whatever is after
the question mark if it's false do
whatever is after the : in Lua it's if
it's true do whatever's after the and if
it's false do what's after the or and
that's just the way that Lua does it's
ternary expressions it doesn't have a
question mark : like other languages
like C or JavaScript it has the and or
am I the only one playing cookie clicker
while watching this is not a vision I'm
glad that you're getting into the
atmosphere of the game and certainly I
think it adds motivation if you can see
all of the features that the actual game
ends up adding to it SL CH 0 0 0
unlimited framerate I'm not sure what
you're referring to but oh if you're
saying don't if you're not framerate
capping but yeah that's if we have a
powerful enough machine maybe you know
just Center it SLC e says and that's
actually the next goal so the next goal
is actually going to be basically we
just need to copy this what we have here
because what love 2d does or what do the
draw function does in addition to giving
us this sort of scale factor this X Y
that we can scale by after the texture
the X and the y this the rotation amount
which we don't want a rotation value
which is why we're saying 0 then the XY
scale factor we also have an X Y origin
amount and so this X Y origin amount is
actually going to be where we want to
scale the image by and actually
draw the image by and so what we're
gonna do here is same a cookie bigger
and cookie texture get width divided by
two or I guess that'd be zero
and then the same thing here make cookie
bigger and cookie texture get height or
divided by two or zero if I'm not
mistaken this should end up this should
end up actually oh whoa that's not
exactly what I wanted it to do
interesting that might be a blunder oh I
think it's because we're not we're still
not drawing it correctly sin if we're
drawing it car rendering it so this is
this is the other problem we run into so
when you're when we decide that we want
to and you can see that the Drude the
draw function itself is getting quite
large and complicated and this is part
of the problem with dealing with scaling
and rotation and origin offsetting this
function is very powerful very flexible
allows us to do a bunch of different
things but it can be a little bit
unwieldy and sometimes a little bit
easier to separate all of the parameters
on different lines if we run into this
issue if we are drawing the if we're if
we know that we want to offset our
origin we need to account for the origin
offset for the when we're down here
because when we're drawing when we're
basically when we're saying the origin
to a different location it draws the
cookie at a different location it's what
it's basically doing is every time we're
not we're shifting the origin when we
are when we are hovering our mouse over
the cookie and it's expanding the origin
is getting sent to the center that's
what we're doing here we're basically
these last two arguments are where the
new origin of the cookie is where it
should scale from or whether where it
should draw from and so if we make that
the center it'll scale from the center
but it'll also draw from the center
and what that means is that that XY
we're passing it it's now it's now
drawing the cookie at from the center
point and so that's why it's looking
like it's shifting up that XY normally
is where the corner should get drawn not
where the center should get drawn and so
that's why it's flickering back and
forth we can just do something similar
here we can say make cookie bigger and a
rather left plus so this is what we need
to do we need to basically add the we
need to add half of the width and half
of the height to the XY if we're
offsetting the origin to the center of
the cookie
so what we can do is we can say left +
make cookie bigger and cookie texture
get width divided by 2 or 0 + make
cookie bigger and cookie texture get
height divided by 2 or 0 and what this
should do oh whoops um put that into a
some parentheses here and now you can
indeed see that we hover our mouse over
the cookie not only does it scale but it
stays inside the center where we are
drawing it we are essentially taking
into consideration that offset adding it
back to the X Y because when it gets
drawn relative to the center point
versus the top left that's gonna put it
in different locations obviously or at
least make it look like it's in
different locations we need to account
for this when we're scaling or cookie
and shifting its origin and this just
has to deal with us dealing with the
fact that everything in love 2d and in
most environments is relative to the top
left as opposed to being relative to the
center if this were an engine where all
operations scaling and drawing were
relative to the center point well this
would be a little bit easier to deal
with but in this case it's not quite the
same way si LCH ooo says you said it
draws at 65
per second wondering if this is a limit
or not I think technically you can
override love to DS framerate and
there's a love dot run function let me
see
actually I haven't looked this up in too
much detail let me see
[Music]
I had read somewhere that the default is
60 frames but I do think that there is a
way for you to change it yourself but
you have to kind of get into I think a
little bit more of the nitty-gritty and
actually mess with the love got run
function so love dot run is a function
that sort of gets run for you underneath
the hood where this is your main loop
essentially that's what this is right
here and in here actually you might be
able to see if they do the 60 frame per
second cap
hmm it may not be the case that they
actually enforce 60 frames per second
I had thought so I might have to do more
research in NC but this is the function
that sort of manages your update and
your draw and your load and all that
stuff and based on what I can see it
might be actually in the love timer
function the love timer dot step that
might be a part of where they do the
actual 60 frames per second limitation
but from my understanding it with 60
frames it could not it could be
unrestrained as far as I'm aware I'd
have to take a look and see not a vision
saying surprised how readable this
syntax is for someone who's never used
Lua it's got very nice syntax very
similar to C and that's kind of the
reason that I think it's a great
language to learn after learn taking
cs50 and in the game dev course because
there's a lot here that is familiar and
there is a lot that actually looks
similar to JavaScript - for example this
function here and the fact that
functions are first class citizens in
love and Lua which just means that you
can pass them around like data like you
can do in Python and JavaScript it's
pretty great adamantine says cold what
is the sprite maker you usually use I
usually use a sprite I like it a lot but
you can use you can use Photoshop
you can use paint.net you could use some
Microsoft Paint there's a whole bunch of
different things as long as they all
serve the same purpose as outputting a
PNG and you have the ability to edit
pixels usually that's all you need
bihari is saying a warlike situation
between India and Pakistan hope for
betterment indeed sorry to hear that
there is that going on I briefly heard
some of the information that's going on
wish you all the safety if you happen to
be in either of those areas at the
moment a dementing says I want to start
working on my own game as well yeah no
great I definitely do so you can get
started with I would say maybe try
out look for free sprite editors
use open game arts art resources if
you're not necessarily a fantastic
artist like my like for example I myself
I'm not a great artist so I typically
use open game or resources do whatever
you know do whatever makes sense for you
to be most productive and actually
implementing your own game
okay so let's go ahead now now that we
have sort of centering and offsetting
and if curious I'm gonna pull up the
documentation here for love 2d graphics
draw and this is the function that we've
just been using that has a lot of as you
can see it has a lot of these parameters
that we've been using so far so we have
the drawable the texture which you can
use multiple different things as
drawables the X the Y the rotation
amount the scale on the x and the y the
origin on the X&Y and then the shear
factor which I'm not super excuse-me
super familiar with using myself and
games I've seen it but haven't actually
used it but we used every single one of
these up until the shear factor with the
exception of rotation we included that
because we have two because of the
position we didn't actually end up
rotating it by a certain amount but this
is the draw function you get passed in
just one parameter you can pass in three
you can pass in four six or eight and
they do differ it they'll do different
things to sort your different use cases
now thankfully we have our cookie that
we've centered and I can click and drag
this but unfortunately I can still click
and generate cookies outside of the
cookie so we need to solve that problem
next and the way that we can do that is
by saying if a rather in love dot
mousepressed
if button is equal to one and make
cookie bigger well now we can certainly
click this as much as we want but in
anytime I try to click the cookie
outside of that well I can't do it right
so pretty nice right we have a the
ability to make our cookie larger
onmouseover and additionally we have the
ability to ensure that the mouse clicks
the cookie or the mouse is clickable on
the cookie whenever it's or we have the
ability to enforce that we can only
click to generate cookies when our mouse
is over the hitbox of the cookie and
he's just on how to use an iPad pro with
pencil for game dev oof I'm not sure
actually iPad pro pencil
oh is that the stylist thing I would say
probably because there aren't a
tremendous amount of iPad pros our
development software for games on the
iPad and I haven't done any research in
this area actually so I could be
completely wrong but I would assume that
there's probably not very great IDE
support for doing game development on an
iPad if there is then by all means give
it a shot but I would imagine using your
iPad is more suitable for something
especially viewing a pencil for like
sprite development for example and also
I've neglected to shout out all of our
followers so rule CS who was the MVP in
the last solitaire stream shop this rule
they give her the follow pan sock mc2
Wan ROM Bay and have a look thank you
all very much for follows and there's an
app called cotija which is a game
creating framework based on Lua is that
an AED or an IDE on the iPad actually
tux meant I'm not sure I'm familiar with
that have passed your pencil against
your iPads is atom fighter 100 101
that's money hey I think it's really
cool if you can get an IDE working on
the iPad I just never have done any
research to see and then shut it to
David who's in the chat says thanks for
tuning in everybody which is awesome
Karl say I'm talking about graphics and
music maybe yeah for music I know that
certainly there are nowadays more music
plugins and software packages for iPad
than there used to be and for graphics
there's a ton of applications that you
can use to draw so I think that
definitely for the art side of things
you can definitely use an iPad less so I
think for the code I think that's
something that's more still suited for
doing it on a laptop or a desktop or
whatnot cool so we've made a lot of
progress pretty fast we have our cookie
we can click so you know that's basic in
the game right we're all done at this
point right but no there are other
things that cookie clicker lets us do
that sort of make the game interesting
and primarily it's this idea of
generating cookies passively over time
and that'll be the next I think major
step and actually coding this and
another thing we could do if we wanted
to get fancy we can have little cookie
graphics that come down the screen and
things David who said today is today's
Colton's birthday thankfully so many
people have already found out and of
messaged in the chat already so thanks
to everybody again who who who said that
I much appreciate it
but do I want to do the do we want to do
the graphic thing I think we should
worry well maybe we'll have that be a
last sort of sparkle sprinkles that we
layer on top of our our game but for now
I think what we'll do instead is we'll
worry about having different things that
we can add to our game that'll generate
cookies passively for us sort of take
our fingers away from the cookies and
implement a shop and let the game sort
of work on our behalf just ultimately
the goal I think and hard approach thank
you very much for the for the wish and a
big nice saying we know already wished
about Cody a fully-fledged code editor
with built-in libraries the projects are
then transferable to Xcode on Mac OS to
make it an actual app oh so it is an
iPad IDE that's really cool it's good to
hear that there are ideas being made for
that environment so we know that the
this cookie value this is effectively
gonna be our currency we're gonna use
this basically all we're gonna do is a
subtraction right we're gonna say do we
have enough cookies to buy this thing
and if we do subtract the cookies add to
some generation rate of cookies over
time and then we can just rinse and
repeat this process or an ad infinitum
the first thing that we're probably
gonna want to do and we'll make this
sort of simple for now I think well
we'll have little icons at the bottom
sort of representing the different
things we can buy so normally you get
cursors right that'll that'll add over
time so we can do that we'll say well
actually the first thing that we'll do
we'll say here love doc graphics love
dog graphics dot print F cookies per
second or rather well just say see
CPS for short right now you know which
is you know everybody knows I'm sure
happy birthday Colton bye thanks Sam
sure I appreciate it
goal is microtransactions exactly your
mind is in the right place we're gonna
monetize the crap out of this game
become rich and you're all gonna come
become rich with me we dot and Oswald
Jones thank you very much for the
follows we're gonna say CPS we're gonna
to string a CPS variable that does not
exist yet and then we're going to say
0:32
rather forty-eight window width and
center-right because we are gonna draw
this 48 pixels down on the screen we're
gonna Center it within the window with
starting it at the left side at 0 and
then we're going to Center it which is
the string here now we don't have a CPS
variable yet so what I'm gonna do is I'm
gonna say local CPS is equal to 0 we
don't have a cookies per second if I run
the game we do get a CPS variable now
those that's being drawn in a perfect
place or below cookies just like the
actual game
if I click nothing happens because we're
actually calculating this variable this
value at all while we're playing the
game and it ain't a thank you very much
for the birthday which is much
appreciated
CPS is gonna be equal to zero so what we
should do now is every second
effectively we need to keep track of how
many cookies we generated we're gonna
look at the last second and then we're
going to compare the number of cookies
that were generated last second and then
we're going to sort of see what our rate
is right hi Colton happy birthday have a
great one thinks in any what your pre
she already saw that sorry I was gonna
look LP Dodgers one thank you very much
for the follow so let's figure out how
we can better do this so or how we can
best do this I'm going to say local last
frame is going to be equal to and there
are different ways you can calculate
this sort of per second value you can
store the last five seconds calculate
them sort of an interpolated number of
seconds you can somewhere to the last
five or 10 seconds you can sum just you
can take just the last second compared
to this second and then keep doing this
over and over again we'll start with the
last second and then maybe work our way
up to the last five seconds so let's see
we'll say the last will say cookies last
frame we'll say cookies last frame is
gonna be equal to zero
right and we'll say local cookies this
frame is equal to zero and we'll say
local frame timer is equal to zero and
what this is going to do is we'll say in
our update basically if frame timer plus
DT is greater than or equal to one and
if you're unfamiliar with DT what DT is
is Delta time and Delta time is the
number in seconds that have elapsed
since the last frame and usually this is
point zero one three or something of
that nature and what this will let us do
therefore is keep adding this rather
what we should do is frame timer is
equal to frame timer plus DT if we do it
just this way it'll just add it and then
not apply the actual change so then we
can say it's greater than equal to one
so if the Fussel will first add to the
timer and then we'll say if the frame
timer is greater than equal to one which
means a second has elapsed we'll say a
frame timer is equal to Frank equal to
zero or rather mmm frame timer mod one
and if I'm not mistaken Lua does support
fractional modulo so we can modulo a
floating point value and get whatever
the remainder is or it might actually
not do that I don't think it does
actually I take that back
so we'll do is what it's a frame timer
minus one and what this will do is this
will give us whatever the fractional
amount is if we hand it ended up going
slightly over one second
let's say one point zero one two seconds
this will actually bring us instead of
bringing us back to zero and losing some
time information or adding extra time
information to our calculation this will
sort of roll us over into the next
second by point
whatever that amount is right and so now
in the mousepressed
I can say cookies this frame should be
equal to cookies this frame plus one and
this will end up actually so this will
be keeping check of just what the
cookies are this frame which means that
we need to also reset that to zero when
we get to the next when we get to no
sorry not frame frame is the wrong
terminology should be seconds cookies
this second and then this should be
second timer that was a blunder on my
part cookies last second so we're not
we're not doing frame by frame cookie
calculation we're doing second by second
calc you cookie calculation so cookies
last second cookies this second last
rather second timer all of that
terminology is more accurate so when we
win the second time it rolls over to one
when a second has elapsed we need to
make sure that we set cookies this
second equal to zero right because this
is we haven't actually generated any
cookies this second but before we do
that we need to say cookies last second
is equal to cookies this second so we're
bringing in the while bringing the
cookies from this second back over so we
have a reference to the last set of
cookies and what we can do is we can say
we need to do is also say this the
calculate the the CPS actually so what
we'll do is we'll say CPS is equal to
cookies last second plus cookies this
second
and then we'll divide that by two and
now you can see how if we are keeping
track of maybe five seconds worth of
cookies we'll have a more accurate frame
count because we could generate 20
cookies this second and then one cookie
on the next second and that means we're
effectively generating ten cookies a
second even though we only clicked one
time on this this this last second so
it's it's all based on how modular you
want to get or how granular you want to
get your time calculations in this case
for simplicity we'll just use two
seconds worth of data and then we could
easily just add more timers more
variables that keep track of maybe in a
table or of arbitrary size that keep
track of the various last seconds in our
game and therefore have a more accurate
granular number so what we can do now is
say oh actually so here's the problem
though this will this will be volatile
pretty fast I mean when we're clicking
it'll be volatile but when we actually
have things generating cookies per
second this will be a little bit more
accurate and more meaningful so
I think this might be okay for now well
we'll use this for the time being and
let's say let's see if this works so if
I click on this notice that we are
indeed getting a pretty high number
right we're at eight seven point five
see how fast I can click this save it
goes down to three then to zero
so if I click this is really really fast
see about how fast I can type it back
and click on this it look like it's
pretty hard to go above eight but it's
looking it's looking pretty pretty
pretty accurate right and then ceiling
maybe we could have used ceiling well we
don't necessarily care about ceiling
Babic because we actually want the
fractional value so we'll use that we're
gonna use that in this we want this
exact number per second because if you
play the original game you'll see that
it does indeed say like 0.3 cookies per
second point 2 cookies per second etc
now once we start getting into things
that maybe add cookies every 10 seconds
we run into an issue where we're not
actually keeping track of the last 10
seconds we're only keeping track of the
last second in the current second so
when we get a cookie we're only gonna
see that we got one cookie per second
the last second but we're not actually
gonna see that in fact we're generating
point 1 cookies per second which is the
more accurate metric again
the more granular we get with our time
calculations the more accurate this is
gonna be for right now we'll worry about
that maybe later if we have time so we
have now the ability to see okay
I'm clicking I can see that I'm actually
getting 6 cookies per second which is
pretty good 7 cookies per second at 7.5
I would say that I hover around 7.5
pretty accurately maybe seven if I'm if
I'm being pretty bad if I go really fast
here I can go up to 10 maybe 11 11.5 so
that's okay but at this the this current
implementation I'm generating all these
cookies and I'm only ever capping at
around 11 cookies per second this
doesn't feel great this doesn't have any
progression I don't really get much out
of this beyond just you know being here
and seeing oh I can if I click really
fast I can generate
a good amount of cookies so let's
actually implement generating cookies
over time passively which is the I would
say the main goal of the game not
necessarily just the clicking of the
game and to do that let's go ahead and
grab a cursor graphic because the cursor
is sort of the first thing that you get
in in cookie clicker right which is this
here 3 dot PNG it looks like I'm just
again on open game art looking for
it's got Creative Commons license public
domain very generous I'm gonna go over
to my downloads it's called three PNG so
I can drag it right over here it's 23 by
23 by 26 pixel which is fine
I'm gonna rename it to cursor PNG now
let's go ahead and draw this on the
screen I'm gonna make a little area
where I can click and maybe have a
little shop area at the bottom of the
window which just says here's a cursor
and have a little thing below it where I
can click that just says if you want to
buy a cookie it's gonna our cursor it's
gonna cost you 20 cookies right and
maybe this value will go up over time
but it will be where we can start
actually generating cookies passively
for us and here's where I'm gonna say
cursors is gonna be equal to an empty
table I'm gonna start with no cursors
that do any updates it's just gonna be
the cursor as it is or it's just gonna
be empty until I add a cursor rather to
the table let's go ahead now and down
here and draw below the cookie texture
I'm gonna say love dog graphics well
first of all what I need to do is they'd
actually create a new texture because we
have a new graphics file right so I can
say local cursor texture equals love
graphics new image graphics slash cursor
dot PNG go down to cursor texture right
down here or grunt go down to draw and
using my texture cursor I can say love
dog graphics draw cursor texture at
let's say let's say 32 from the X and
window height minus 120 let's say that's
where I feel like I want to draw the
cursor go do that and now I can indeed
see a little cursor down here at the
bottom left a little bit hard to see
arguably let's go ahead and bring it
over to the right just a little bit more
say it's 64 just like that
and maybe I want a some text below that
that says love dog graphics dot print
and here I want to say love graphics dot
set default font which I believe that
will just set the default font back to
its a 32 pixel or a 16 pixel or 12
pixels size whatever the default is and
then loved our graphics dot print I'm
gonna say
cursor and then that will be at 72 no no
that'll be at and that'll be at 64 no
that'll be at 50 and then window height
minus 90 alright let's see how does that
work okay so I guess you can't do it
with a default font here you can't just
pass in no value it doesn't take that
into consideration I thought it did but
that's my mistake all instead create a
small font here called small font and
then we'll say new font of size 16
rather than any to actually pass that in
here set default font oh I'm calling the
wrong function it should just be called
set phone I'll set default phone in any
case did not save oh right set font now
oh and actually centered pretty nicely
now I can see that I have this cursor
available here I can um I can't click on
it just yet but what I can do is now
sieve is visually that I have a UI for
buying stuff I should probably add a
cost to it as well so let me just go
ahead and copy this and we'll just say
cost
we'll say this is me a cost of 10 let's
say that will be 10 cookies right or 10
cookies to make to buy a courser and
we'll set this to minus 75 does that
work
yep cost 10 it looks kind of bad so I'm
gonna set this over to 40s 44 I'm just
quickly doing ballpark numbers magic
number is not not good practice but just
for the sake of speed now if I click on
this nothing happens but I do have an
inventory say a UI now for work and
maybe start to buy the cookies or buy
the cursors that will add to my passive
cookie generation my cps which we've
coined full-fledged computer still have
a place but i agree their days are
numbered
interesting the tux man little known
fact that app swift playgrounds on ipad
contains the whole Swift library Oh
fascinating
I myself wouldn't mind a Macbook that
has a touchscreen I think most of us
here at cs50 have the same sort of
wishes because it's such a nice quality
of life improvement to be able to just
click around on the screen with your
finger and do all that but you know
Blackbeard 0:01 can you eat this cookie
unfortunately no yeah we do not have
that ability to do to do that although I
do find myself wanting right now some
cookies I'm gonna have to see if the
office ends up ends up having that some
of those around I'm broke dudes at
Blackbird 0 0 0 1 I think we can change
that though right because if we click 10
cookies what I want to have happen is
the ability to be able to click on this
cursor and then add a cursor you know
showing that I want to somewhere on the
screen to show me that I have 1 2 3 4
cursors in my inventory so to speak my
passive my infrastructure for which I'm
going to generate passive cookies we'll
see what we can do
tux man I'll speak to Tim Cook first
thing on Monday
awesome you do that you tell him what
cs50 looking for
okay so we have this UI element here but
we can't actually add cursors to our
inventory so what we need to do is make
that a possibility over in love dot
mousepressed I can say if button is
equal to one and let's say let's say
hovering over cursor let's see how let's
say I want to write a function that does
that right then I can say cursors equals
let's say if cookies is greater than or
equal to 10 then this is where the shop
sort of transactional logic comes into
play because remember we're gonna make
the cursors worth 10 cookies so I need
to make sure that I have at least 10
cookies so if cookies is greater than
equal to 10 then cookies is equal to
cookies minus 10 and then we're going to
say cursors will rather will say table
dot insert you know we don't even need a
store we don't even need to store
cursors as a table we're just gonna make
this a number so we're gonna say cursors
is going to be equal to cursors plus 1
right so we're not even storing we're
not gonna have complicated objects or
anything we're just gonna have flat
numbers at this point this is gonna be a
very numerical representation of cookie
clicker we could get fancier with the
graphics well we're going to cut kind of
more to the chase and just do just use
numbers to represent that we have one
cursor two cursors three cursors and so
on so let's go ahead and implement the
hovering over cursor function so that
doesn't exist we're gonna do that
ourselves
so hovering over cursor and what we're
gonna do is essentially just say return
that rather we're gonna say local XY is
equal to love that Mouse get position
I'm gonna say X rather return whether X
is less
or equal to and then where are we
drawing the cursor so we have we're
getting into drugs looks like at 50 so
if it's less than or equal to 50 plus
cursor texture get width and X is
[Music]
greater than or equal to 50 and Y is
less than or equal to and what do we set
it to we set it to window height minus
90s that we did Oh rather nope sorry
there should be 64 and X is less less
than or equal to window height minus 120
and Y is greater than or equal to window
height minus 120 plus oh wait rather
less than or equal to that plus cursor
texture get height so a bit of a long
boolean expression here but that should
end up working now what I want to do is
add some UI I want to say love graphics
top print at the very top left we're
gonna say cursors to string cursors and
we'll just make that at 0 0 for now and
we'll see if this works so let's first
of all let's try to click on the cursors
notice that I can't do it right because
I'm presuming because I don't have 10
cookies yet but let's get 10 cookies and
let's trying to add it oh okay
interesting so I do indeed have 1 cursor
now and my cookie count went back down
to 0 so now I have the ability to buy
cookies or buy sort of infrastructure to
generate cookies with using cookies as
currency so this is great this is a step
in the right direction
the only problem is that these this
infrastructure is not actually doing any
work for us we need to actually update
this these cookies over time
cookie total so we can do is will say
and love that update let's see where are
we at so looks like it takes place in
here normally the cookie total gets
updated within our mousepressed
because that's where we're actually
clicking on the cookie to generate more
cookies but if we have things that are
doing things over time for us we
probably want to just update it over
time so what I can do is I can say I'm
weird be the best place to do this we'll
do it in here I guess we'll say we'll
say update cursors and they'll pass it
in Delta time so cursors we're gonna
sort of make sure that we don't add too
much logic into I love that update
function and instead we're going to
create a subroutine called update
cursors we're gonna delegate that to a
different part of our code we still want
the DT though so we're gonna pass that
in to we're gonna pass that into the
update cursors function so what I'm
going to do is I'm going to update
update cursors here and now what we're
actually gonna need to do which this is
interesting
we're actually gonna add whatever that
cookie per or the cookie per second rate
of the cursor is to our cookie total but
we'll see how this is a problem so let's
go ahead now let's assume that cursors
are cursors generate one cookie every 10
seconds right so every 10 seconds we
should expect every cursor to add one
cookie to our total so we're gonna do is
we're gonna say for I is equal to 1
until cursors right this is just from
one to the number of cursors we have do
this I'm going to cookies is equal to
cookies plus
DT times and then we want this to be
however many cookies per second and so
this is going to be 0.1 cookies per
second right because we want one cookie
every 10 seconds so 0.1 cookies per
second so if we do this now let's go
ahead and run the application I'm going
to get 10 cookies want to add a cursor
and then notice that we don't exactly
get the value that we want I mean
granted it's working so once we get
after 10 seconds you can see that we do
have now one cookie that we had no part
in we did not generate this cookie
ourselves but the output is clearly not
the way that we want it to look so the
way to solve this very easily is where
we actually render our cookie total I'm
going to just say two string math the
floor of cookies and then now if I buy a
cursor I have one cursor cookies is
staying at zero but if we let ten
seconds pass by we will indeed see that
our cookie total was up to 1 by itself
and any second now we do indeed have one
cookie and completely based on just the
cursor that we bought with our 10 cookie
total so things are improving a lot what
math dot floor does is essentially takes
a floating point value and we'll just
cut off the floating point value and
just give you the lowest integer closest
to it the ceiling is the opposite will
actually give you the highest one we
don't want to give the ceiling though
because we want to only render that we
have a cookie when we've completely
generated that cookie there are certain
situations where you want to render a an
integer value that's rounded for example
I can't think of an example offhand
that's super obvious I use floor a lot
but there are situations where you do
want to render a more rounded number and
for that you can just add point 5 to a
value and do math dot floor and that
will give you the closest value to it
that's effectively the same thing as
just calling me
around and some are gaming says just
built a feature that links this game to
an Amazon fresh API for cookies delivery
if you want to eat them those are those
are the real ideas that's that's some
real thinking going on right there I
really want some cookies right now this
is a problem when I was actually
watching jacksepticeye and was doing
some research I don't watch to accept
acai but I watched it I was doing some
research on cookie clicker last night
just before I went into it so I wasn't
completely blind watching him play it
and he was echoing the same exact
sentiment he was very hungry for cookies
while he was playing and I can
sympathize I can empathize with that
feeling now I am starving for some
cookies so we have an infrastructure in
place now for cookie development right
for cookie generation this is great this
is awesome the next step and to keep it
in in line with the actual cookie
clicker game is you can actually
purchase grandmothers to bake you
cookies for you over time so let's let's
see if there's a grandmother sprite here
grandma spray something not not terribly
this has got a this one has a walker I'm
not sure if I that's completely what I'm
going for here let's say listen let's
actually use Google Images we'll say
grandma sprite this is okay and it
actually has a rolling pin so this is
appropriate is this a is this an alpha
sprite no it's not shoot okay well yeah
yeah it's gonna be a problem
if it doesn't have alpha transparency
it's gonna look a little bit sub ideal
this is the actual cookie clicker sprite
itself it looks like that looks like a
mermaid grandma I'm not sure I'm not
sure what's going on with that is this
one here we go this one has oh this is
actually a jiff oh these are upgradeable
grandma's I forgot so this is another
aspect of the game you can actually
upgrade your grandma's to be they go to
farmers and they go to engineers then
minors then aliens then aliens again and
then crazy aliens and then I'm not sure
what that is there's a lot of there's a
lot of steps here
is there just a single sprite that we
can get that is just the grandma I'm
hoping nothing super inappropriate comes
up here either you would not think that
it would but let's is this the oh here
we go this is a jiff again that's fine
we'll use oh this is the right one oh
yeah
this is perfect okay save image as we're
gonna shrink this down because it's not
the right size so J Harvard dev into
cookie clicker rather sorry streams
cookie clicker and then graphics and
then grandma PNG perfect so this would
be the next part this would be the next
important part this dream is going to go
for about 1.5 hours more yes as the
truká knees probably not this one this
one we might actually end at 3 today
might make it a two-hour stream because
this one's a bit of a simpler game and
we could obviously keep going on and on
with it but the core gameplay loop I
think we have kind of going on here
pretty solidly and just because we also
haven't had a very nice concise finished
game stream in a while so this one going
for 2 hours I think is more appropriate
bit of a faster pace today let's go
ahead and first first things first very
importantly let's shrink this sprite
down so it's 134 by 208 now we want I'm
gonna go ahead and bring it into a
sprite let's go ahead and first I'm
gonna crop it just so that it's
completely edge to edge I'm going to go
to sprite crop and then let's go ahead
and make this smaller so I'm actually
gonna make the size let's shrink it down
by a factor of 4 so 134 divided by 4 if
that's even a okay so that's not a thing
so it's 134 divided by 6 nope that's not
a thing either let's just do it let's do
it by 2 I guess so I'll actually make
this 60
we'll make this 66 let's see what that
looks like looks great looks fine
let's assume in a little bit that's
recrop we can afford to zoom in one more
time it looks like so let's zoom in at
30 let's zoom this in at 32
so that looks great let's crop it let's
save it let's go ahead and import it
into our game love graphics that new
image graphics / Grandma PNG and then
let's go ahead and draw it just for the
sake of drawing foreseeing that the UI
looks appropriate and in fact this we
could probably delegate to a subroutine
called draw draw cursor UI draw
grandma UI et cetera we could do all of
that I'm actually gonna copy and paste
this and then I'm going to and this is
not typically what you want to do you
typically want to do this more
programmatically but just to illustrate
everything this is what we'll get at
what we're going to do we're going to
draw this at 128 and we'll say grandma
cost and a cost for our grandma is gonna
be a hundred cookies and what this is
gonna do is one grandma will let you
generate one cookie per second so let's
go ahead and this is going to be at
let's say this is at 116 and then 108
and then a cost for that so wait a
hundred and then we need grandma's and
then this was actually we're gonna
actually need to draw this at zero 32 or
33 and then now let's also
okay let's try that okay it needs to be
shifted over a bit more and the sprite
is actually a little too tall so I need
to make that higher so let's shift that
over a bit more so I'm actually gonna
bring this over to 148 130 to 120 and
let's bring the grandma texture up to
negative 132 let's try that okay looks
pretty good let's shift the cost over
just a little bit because that looks
like it needs to be like maybe 130 let's
do it 132 okay so that looks great let's
go ahead now we need to actually
hovering over Grandma we need another
function and you know you would ideally
implement you would you would engineer
this in a more robust way where you
would have click handlers on the
individual images you would have objects
represent them UI elements and so on and
so forth but just to get us you know up
and running this is I think a little bit
easier so if X is less than or equal to
and then we decided that was 148 plus
Grandma texture get width and X is
greater than equal to 148 and then this
is window height minus 132 Chris Rex and
then this would be Grandma texture get
height and then minus 132 and then
additionally up here in our update we
can say if button is equal to one and
hovering over Grandma
then if cookies over a hundred cookies
is equal to cookies minus 100 and
grandmas is capable to grandmas plus one
so this is good where where we're
working our way up let's say grandma's
generate one cookie every second so 10
times more effective than
and the than the cursor and also ten
times more expensive so everything kind
of linearly maps in that case local
grandmas he looked zero so do I have
grandma's equal to grandmas I do so we
can test that this works oh we need
update grandma's as well so we can do
that we'll just duplicate this update
grandma's well say for one until
grandma's do grant cookies is equal to
cookies plus Delta time now it's not
point one it's just one because we do
one every second we call that Delta time
gives us some time in fractions since
seconds so that we can get sort of how
much how much of one cookie we've
generated Maps evenly two Delta time
because we are getting a delta time as a
fraction of one second so by scaling at
times one that's exactly how many one
one's cookie per second cookies we've
generated effectively so we can go over
here to let's make sure that we're
actually calling update grandma's run
the run this bit of code let's click
let's actually be smart about this let's
generate some cursors help us get our
rate up a little bit
Oh interesting so cursors and grandmas
are both incrementing which is not ideal
and actually the it looks like cookies
are getting generated a little slowly oh
wait no that's actually accurate those
are our weight no that's not the case is
it yeah no it's no it's that's that's
accurate grandma's for some reason is
getting oh you know why cuz we copied
and pasted the UI code that's my that's
my fault what we need to do is we need
to say grandmas to string grandma's here
so the the cursors were generating
appropriately okay this is by a cursor
now that's appropriate okay let's go
ahead and do that now let's go ahead and
let's just get a crap-ton of cookies and
buy one grandma and see how much faster
our rate goes and again the cookies the
cursor and grandma rates not being
applied for CPS we can add that here
just a second so everything gets tied
together I'm gonna buy a grandma and now
notice that we are indeed getting one
cookie every second and a little more
because we have two cursors so we're
actually getting sort of one point two
cookies per second in this particular in
this particular situation cool let's go
ahead and if we're going to make our CPS
accurate what we need to do is we need
to say cookies this second equals
cookies this second or rather this kind
of gets a little complicated actually
oh is this actually not even is this
does this work already because cookies
oh you know what cookies this second is
not we're gonna work because cookies the
second only gets applied when we
physically click the when we physically
click the mouse that's actually cause
the cookie to anchor and increment so
[Music]
hmm
let's see how best to do this so we
could just do a flat
oh you know what we could do this
actually simplifies it quite a bit this
is this is this is quite a bit simpler
in in
[Music]
okay so what we do is we say passive we
have we have to have a passive cookies
per second thing and this actually an
efficiency thing that we can take into
consideration so I can say local passive
cookies is equal to zero this will be
our rate of generation for all of our
passive cookies and actually I just
realized that by using the passive
cookie Jen we can pre calculate our
passive cookie Jen and then just apply
it an update and not actually need all
these separate subroutines so this is
actually quite a bit easier Blackbeard
zero zero one happy birthday man if this
is your birthday and my birthday nobody
calls me even my mom everybody forgets
me I'm sorry black Granite's that's very
sorry I'm sad to hear that well happy
birthday happy belated birthday to you
and thank you for wishing me a happy
birthday I appreciate it
another vision I love that emoji the
cookie the did bite out of the kappa
face that's amazing
can you what was it
where's my mouse there it is can you
collaborate with toby eye-tracking if
you blink an eye that grandma gonna put
poison in the cookie and game over i'm
sure you probably could but i'm not 100%
sure if if you'd want to do something
like that told you you can't trust
grandma that's fun that's funny
Babic thank you for the for the for the
assistance there yeah copy pasting is
generally bad for that exact reason um
you copy and paste bugs as a result just
on YouTube that is episode 42 meaning
the universe for Colton's birthday off
hitting yes exactly it's all it all sort
of comes around and and shows its true
nature doesn't it I'm gonna forget about
them when I become a billionaire this is
my true that's a good way to look at it
I respect it okay so what we can do is
passive cookies equals zero every frame
basically we can figure out our passive
cookie Jen and
I'm gonna go to will say
is an update probably right if the
second timer is greater than or equal to
one where we set cookies where is that
our CPS what I'm going to do is I'm
actually going to add
I'm gonna add passive cookies plus the
cookies last second plus cookies this
second divided by two and what this is
going to end up doing is we'll still
manually keep track of our clicks but
the passive cookie generation is going
to be the passive cookie generation is
going to be where we store all of the
cursors and Grandma's lot stuff so we
don't even need to worry about figuring
that out frame by frame we can just
simply add that every time we buy a
grandma or a courser all we need to do
is just set passive cookies plus equals
passive cookies plus zero point one for
the cursor and then passive cookies
equals passive cookies plus one for when
we help everyone when we when we click
on a grandma so this is sort of like not
doing a frame-by-frame calculation of
stuff it's a little more efficient we're
actually just doing it up front so this
actually saved this work and I saw a
rocket swing five Blackbeard thank you
all very much for the follows appreciate
it I might have gotten Blackbeard if I
didn't I apologize but thank you very
much and so the CPS now is going to be a
little more accurate because cookies
this second we can actually well cookies
the second still needs to get updated so
that we can figure out is that the case
though actually
what we can do here is we can just say
function update passive cookies and
we'll just say cookies equals cookies
plus cookie plus passive cookies times
Delta time so now instead of needing to
go through all the cursors all the
grandmas etc we just have this constant
value that were multiplying times Delta
time to give us our our cookies so some
more efficient actually now the issue is
that we need to keep track of how many
cookies were generated this frame so
cookies this frame is equal to a rather
we'll say local cookies last frame is
equal to cookies and then we'll say
local cookies after frame is going to be
equal to cookies and then we'll say
we'll say local new cookies equals math
dot floor of cookies after frame - the
math dot floor of the cookies last frame
and this means that if we've gone from
like 10 cookies to 11 cookies there'll
be a one cookie difference and what we
can do is we can just say cookies equals
cookies plus a week rather we can say
cookies this frame second rather equals
cookies this second plus new cookies so
this is cool so this is how we can
actually calculate our CPS a little bit
more a little more dynamically
so that should be that should be
accurate so now whoops update cursors
made through a main 82 we no longer have
update cursor some big grandmas we have
update passive cookie which takes in
Delta time so we've refactored that all
to something I'm gonna go ahead and just
do that that's by a cursor I by a
grandma as well just so we can see our
CPS update appropriately even if we
aren't clicking on anything so in it by
a grandma nice so we are indeed getting
one cookie per second and occasionally
we'll get two I think yeah so 1.5 -
roughly so we have about one it's
getting it's getting calculated
dynamically in this case we could pre
calculate all of this with the passive
cookie generation and then use that
value and that would be a little bit
more efficient possibly that way
wouldn't have to recalculate this every
frame and then just only calculate the
difference in when we click cookies
maybe add that to the passive Jen of
some kind but you can see that we have a
cps value that gets updated
appropriately i'm gonna buy another
grandma
[Applause]
so now
now we have about two cookies per frame
cookies per second I should say and you
can keep extending this this idea
outwards more and more you could buy a
by nine more cursors sure I'll buy name
our cursors
cool so now we have approximately three
cookies per second we are we have
exactly we should have exactly three
cookies per second so this is cool right
we have the ability now to this
framework this exact framework is all
you need in order to essentially
implement cursors grandma's mines
factories farms whatever the the actual
game ends up giving you the ability to
do and you'll have this CPS value here
all you essentially need for every
individual machine that you that you add
to your game whether it's a farm whether
it's a mine or whatever is just have the
number of cookies per second which is
this constant value that you just
multiplied by Delta time every frame you
just add it to a total or the constant
total and then just multiply that by DT
because the DT is a sort of a fractional
amount of time in second so by playing
it to this after a second you'll have
generated that much that many cookies
right so after point one second so I'll
generated after one second you'll have
generated point one cookies with the
cursor after a second alternate one
cookie with a grandma and this word this
value were 10 then you could generate 10
cookies per second it's all calculated
frame by frame so you do get a
continuous increasing number it's not
like you get ten flat cookies after ten
seconds
it's a value that's increasing it's a
rate of change rather than a discrete
sort of chunk allocation of cookies and
our Kuhn Barry says hey hello reckon
very good to have you in methodology did
by the name of cursors just for you that
I mean I think that honestly does it for
cookie clicker this will be a shorter
stream today I think just because we
it's been a little while it feels like
since we've had a game start to finish
that we've sort of implemented and
gotten working the solitaire game is
still in progress and that we're gonna
implement next to week that will be well
probably the week after next to be
honest we have other streams going on
next week more details to come on those
I'm just ended up finishing talking with
Nick who I think can do a stream on
Monday it's been a while since we've
seen Nick right
then let's say yeah so next Monday I
just got the word from him that we're
set for a Monday stream so we're gonna
publish all publicize all of that today
let's go ahead and publish this to
github actually which we should do I'm
gonna go ahead and create a terminal
let's go ahead CD dev streams let's see
this is going to be cookie clicker and
I'm going to just do the infamous git
add dot rather get in it and then get ad
get commit everything
final final stream status whoops it
actually create the repo let's do that
first
oh yeah trucha nice
I stopped to figure out why the schedule
is weird for certain people it's a
widget and twitch that might have a bug
but we'll see what we can do about that
I apologize that that's rendering
weirdly for some people abroad I think
for us folks it seems to be okay but for
people that are international I think
it's having some issues if you have any
questions by the way on what we did so
far definitely let me know as we getting
this github repo up and running and as
we close off the last sort of five to
ten minutes here typically my streams
don't go for might they go for three
hours they went for two hours so sizable
but still not as long as usual today we
did a simpler game but it was cool
thanks mate nice dream this was my first
time watching cs50 it's so fun to watch
and inspiring thank you awesome
Blackbird appreciate it thanks so much
for tuning in
glad you enjoyed I like the flow of
today's stream it felt like we
accomplished a lot in a short period of
time especially after solitaire where
it's a bit more hands-on more
engineering considerations more
complicated algorithms that's a bit it's
nice to sort of take a step back and do
the simpler stuff right we have a text
adventure stream coming up in the next
few weeks that will be pretty cool maybe
have Brian or data Brian David O'Brien
code review your code hate to be fair I
am NOT going
for good code style and this exact
example if we were going for four well
engineered code we would we would
probably be taking our time with a lot
more and modularizing things but yeah
yeah that'd be a funny stream in any
case oh shoot interesting as it says
that in any Andre and Bella have a
surprise present for me
collaborate on a game interesting the
labyrinth of coltan oh we're gonna have
to do it on we're gonna have to do that
on stream now so we'll see weird with
Godot if so is it worth it
I have not worth it personally I tried
installing it I think once and briefly
looked at the documentation haven't
haven't done much with it concretely so
let me go ahead and get this on github
for everybody pub the link and then
we'll explore the labyrinth of coltan
together on stream hopefully it's a
hopefully it's pg-13 at least fingers
crossed we'll see we'll see how things
are I have no idea what to expect
cookie clicker stream on twitch on TV TV
TV make it public right repo let's go
ahead get this URL go over here let's
get remote at origin to that origin
let's get push upstream origin master
and let's refresh to make sure it's up
which it is I have my DF store in there
I'm not even gonna bother with the get
ignore so let's go ahead I'm gonna copy
I'm gonna write this in the chat so
folks can download it if they feel like
it quote nos copy whoops that is nice
bail that Colten oscar p / cookie
clicker stream that's right adamantine
check the game colton not-safe-for-work
go and do check it they work very hard
can we confirm whether it's actually not
safe for work or is Adam trolling
oh boy is it actually not safe for work
oh I can I can I can bring my hair I'll
look at it on this other computer where
there's not I kind of want my first
impressions on camera though I don't
want to click on it on another on
another stream okay
so Adam is kidding okay cool I
appreciate that I appreciate the joke
you know he is trolling okay
so we'll pull it up I'm gonna pull it up
on on my computer here but I need a link
to it that is a long URL okay so that is
it a nay Andre as Li Bella dot itch dot
io / the labyrinth of Colton it's
correct laundry Ozzy bellowed I also
have Colton
all right here we go we're gonna run
this game we get rid of this it's a
little bit small here let me do it let
me do us all a favor briefly I'm gonna
set my display settings a little bit
differently I'm gonna go to displays
1080p
let's give it just a second it's gonna
blow up let me go back to my editor here
let me shrink this down just a touch
just a touch
okay zoom that and just like that all
right we have a community game themed
around apparently me that we're going to
test on stream right now let's see how
this looks it's extremely safe so
today's chat was really fun cicero
awesome glad that you think so oh why
everything looks so tiny now compared to
compared to how it was before let's go
ahead and run our game let's see what
this looks like me zoom in actually once
twice I don't see are there instructions
no run the game oh its unity here we go
okay nice so a little fun a little game
programming and now a little fun to end
the stream see how this looks
birthday project is the name of it nice
unity WebGL appreciate it cool made with
unity here we go oh man here we go okay
so we're using the we're using the third
person controller I see in in unity okay
so actually runs pretty smoothly wow
look at that that's nice okay let's uh
let's go ahead and don't walk okay so we
are limited to walking there's no it
looks like there's no running per se oh
you can run a shift okay
let's collect the gems here we go it's
an interesting sort of like
gravity-defying effect there okay so is
my goal to collect all the gems then I'm
guessing I do like the particle effects
that uh that we've implemented here okay
so let's go forward okay now there are
the unfortunate thing is I'm using a
trackpad to actually maneuver around
this it's a little a little bit iffy
with the camera but that's not anyone's
fault but me for not having a not having
a mouse okay oh here we go some more
gems I think I missed this before this
is where I came from
let's get these well trackpads are so
hard to use with with for a third person
and first person we're just with camera
controls period trackpads are pretty
terrible okay not not your guys's fault
obviously this is this is just a
function of how trackpads are
just really not meant for gaming okay so
we have a statue here it's uh what the
co statue is it looks like it's just
pointing so obviously go this direction
okay got a bunch of bunch of gem so I'm
gonna be rich here let's get all of
these I want to get my cursor back to
the right side here okay I feel like
such a noob playing with the trackpad
and just struggling to use my camera but
no this runs very nicely I like the I
like the maze layout I'm proud of you
guys for putting together a unity
project let's say okay so go this way it
slip to the left okay
make sure I got all the gems I'm a very
completionist sort of player so I don't
like missing any gems or any anything in
the game at all period so if I if I miss
something I have kind of an OCD about it
alright let's go over here oh man
trackpads are so rough okay here we go
getting all the gems there might be a
ton of Secrets in here that I'm just
missing so I apologize I like that I
like this or layered gems here okay nice
you know this isn't a very difficult
labyrinth to solve if you're pointing in
the direction for me to go I will say
but I do appreciate it oh there we go
two at a time that's what I'm talking
about there we go okay
let's get that boom boom let's come over
this way I I because you're not pointing
in this direction I want to go over and
see what's in here because I feel like
this is where there's probably some
secrets or something so let's see what
we got over here more gems of course now
do I have a gem counter that I can see
or is there any is it just kind of a
hidden value Oh is there a sound
shoot okay I didn't rise there was sound
okay let's try that can you all hear
sound confirm confirm that you can hear
sound it's looking like it might be a
little loud is that right how's the
volume is that too loud too quiet
I actually can't hear it in house here
because we don't have a monitor but
that's actually a good thing because if
I had a monitor playing the sound back
to you and you were hearing it through
my microphone you'd probably get it we'd
probably get some feedback so let's
avoid doing that actually oh shoot I
think I know now is where I want to see
some of those statues I think I got lost
okay let's go over here okay this looks
like we're in the right spot okay this
is the right spot all right I'm gonna go
in here and follow the statue that's so
cool that's so cool I didn't even hear
that before it's a there's aa do I'm
gonna be so upset if that was meant to
be like a song and I have I've just
missed the song this whole time was that
miss that meant to be a song or is that
meant to be or is that meant to be a
just kind of like a set of random nice
tones oh boy here we go
okay oh I can't oh and you disabled
running here this is cool
[Music]
that was that was amazing that was
beautiful wow I'm so glad that you told
me too that you told me to turn the
sound on at the end there oh shoot
what's this wow this is so cool oh man
this is this is this is too much you
guys are too much
wow I love it I like the the nice
lighting too I will say the night the
lighting on the ground there is very
nice really cells that were in a sort of
a like a laminated floor board type deal
click on the switch
ok let's click on the switch is this a
switch right here let's see click on the
switch
[Music]
Wow you guys went all out
[Music]
holy crap
[Music]
a little bit long for the words to be
honest this is so amazing
what's over there in the distance is
that
University
[Music]
it looks like Marvin
Wow
[Music]
you guys you guys went above and beyond
it overdid yourselves on this one this
is amazing thank you all so much for
putting this together that was very
touching honestly this isn't this is
great and it's bits it looks really nice
- oh he's particles back foot during
great the lighting looks good and runs
super nicely
[Music]
too early
how do we do that decision
[Music]
Wow
[Music]
thank you all so much for putting this
together really appreciate it really
appreciated a
in Siena
[Music]
the audio
[Music]
ya know
[Music]
that that birthday
was
right
an interactive photo happy birthday on
you
[Music]
even we shoot around
in the web browser
two years ago Andre says the notes were
all done around the happy birthday to
you by the way but the rest are played
or hand em Li got it so that's that's
probably a good thing or a yeah I guess
a good thing because I was kind of in
the wrong place
[Music]
slowly in order to get all of that
birthday note that played them at the
right speed
apologies about it - laughs okay I can
meet the tab but what I was saying was
that the like the design decision the UI
decision to enforce that the user walks
you know sort of slowly to play the song
I thought that was great very well
orchestrated there was a great build up
you know navigating a maze that of
having the statues point I didn't see it
coming it was beautiful honestly it was
a beautiful beautiful project and even
though it doesn't look necessarily like
- whose point was that Andres point that
the graphics were much better in Windows
and Mac the builds I mean even still the
fact that it's running in the web
browser and still runs of like 60 frames
per second it was great it was fantastic
but oh this was this is amazing I really
really enjoyed this project and seeing
it and very proud of all of you for
putting it together you all have been
tuning into this stream for a long time
where this is the 42nd episode that
we've produced right and we've covered a
bit of unity and game programming and I
know that many folks tuning into the
stream don't have a ton of experience
but by doing things like this
periodically consistently this is how
you can achieve really amazing things
with the technology that we have and
it's very nice to see concrete
implementations of that and you know you
folks went above and beyond for this
that was great thank you so much I
really do appreciate this very much an
amazing end to an amazingly satisfying
stream as well great note to end on
really really liked it and yeah this is
the 42nd yep sort of the meaning of life
stream as it were to quote Hitchhiker's
Guide to the galaxy which I haven't read
yet but David has told me I should read
it at some point yeah this is great it
was a little bit lost that Britain that
Brit the birthday corridor and then
going into here and then having this
the soundtrack to the stream that we
hear all the time on Twitch really
really cool really meaningful stuff
really well put together project that I
will remember this for a long time so
thank you all very much for being so
thoughtful and putting this together and
I'm glad so glad that we had the
opportunity to share it on stream and do
it blind and lies so that everybody
could sort of see the reaction so this
is amazing and here's to many more
streams in the future right this is
number 42 but we have another one on
Friday right on Friday we're going to
have a JavaScript stream so tune in for
that soundtrack was as idea it was an
excellent idea really really hit home at
that point and the happy birthday thing
was I'm still still amazing like like
you know goose bump inducing right yeah
Friday where we're taking a break away
from from games again we're doing web so
we've done CSS and HTML and even
bootstrap on on Friday we'll do some
basic JavaScript will do will cover the
syntax we have our arrays and objects
and functions and all that stuff make
some simple code talk about the console
using the chrome developer tools
integrated into a webpage or some basic
stuff we'll use the do Dom manipulation
a using document and window
so basically Ang's like alert then we
even look at bootstrap and see how we
can import bootstrap and get some
dynamic bootstrap behavior that way so
that would be a lot of fun I'm also
looking very much forward to it but in
the meantime tomorrow there's no stream
so take a break tomorrow take the time
to work on your own projects perhaps or
do whatever makes you happy
but Friday JavaScript and then next week
I just got the word from Nick now during
the stream that on Monday we'll have a
our official cryptocurrency stream so we
had a technical difficulty stream and we
were supposed to have a crypto straight
on Monday we're gonna actually do our
proper crypto stream or proper two hours
of talking about Bitcoin and blockchain
and all kinds of other fun stuff it's
gonna be good it's gonna be a good time
and that will be that I think sort of
tie that knot and then we can do more
streams with Nick in the weeks to follow
that Bella curses glad you enjoyed it
thank you for all the amazing streams
have a wonderful happy birthday thanks
so much Bella for tuning in so
religiously and for putting together
such an amazing project I really do
appreciate it looking forward to many
more to come
and Adam says hi for the JAF stream but
his own projects are not safe for work
I'll have to keep that in mind if you
ever decide to share some of your
projects with me going ahead and make
sure not to look at them live on stream
where Khun Barry asks are any prior
JavaScript knowledge needed for Friday I
would say no I would say we're gonna
start from pretty much the ground up and
we'll talk about the basics of
JavaScript I would say it helps if you
have prior programming experience in
Python or C or Java whatever because we
will be not going like you know granular
by like here is a curly bracket or
whatnot
well we'll sort of cover things assuming
that you have a little bit of
programming experience but you don't
necessarily need to have any JavaScript
knowledge per se and it any thank you
very much thank you for the brilliant
strains and lots of fun thank you for
tuning in so much have any inference
imminent Anette project all of you did
such an awesome job and all of you who
tuned in on a regular basis make this
fun so we'll do a lot more in the future
I'm gonna transition away sort of
grudgingly from the Happy Birthday
Colton's screen because I do like it I
do like to see that over here to the to
the large shot so I think that it says
I'm NSFW NS @w will make sure not to not
to show any of your content on stream
than Adam but something but thank you
for the heads up I appreciate it now
what I'm sure you're probably kidding
bat boxes think you have a great danger
the day see you on Friday indeed thank
you very much see you on Friday and
Andre thank you very much
always I'm doing a lot of fun with the
streams so glad you enjoyed this ya know
it was tremendous thank you all thank
you all so much for it really was
beautiful
I think this is will be where we
conclude clicker so we implemented the
whole thing right all set to go now if
you wanted to make this like the actual
game there's a lot of other graphical
bits and pieces but you can obviously do
this yourself you can extend what we've
done you can make it look prettier we
didn't make our game look terribly
pretty but you could certainly do this
and I would say take the code base that
we looked at today extend it add your
own cookie generation facilities maybe
add a different UI for your different
infrastructure that you've created make
a web-based version now you know how it
works you can certainly add a web-based
version which which is how the original
cookie clicker is itself implemented
right and you can even do something with
databases where you store our users
cookies amount and the different
infrastructure being built up so they
can reload or you could store it as a
session or something or start it in
local storage there's a lot different
ways you can do it so and thank you all
- who have just followed recently I know
that it looks like anesthesia one was
the name all tunisia sorry all tunisia
all Saatchi rockets wing thank you very
much for the follow as much appreciated
yeah thank you all so much again this
was cs50 on twitch cookie clicker and an
amazing happy birthday unity project
which they plugged in the chat go visit
that if you yourself want to play it
thanks again so much to all who
contributed to that I really do
appreciate it I will see all of you on
Friday until then have a great Wednesday
have a great Thursday and see you on
Friday for some JavaScript bye bye