LA Ruby Conf 2014 - Writing Games with Ruby by Mike Moore

the thank you can be
I they workshop last two days
and my voice is starting to go so I apologize for that
on not think I'm my presentation is
writing games in Ruby I'm if we have time
we can go that for you guys you of all along you can
gem install go through which is the library that all these
a all these examples are gonna go through
are built upon and you can even go to get her
I my repo here and get have if you want to follow along
with the with the examples so on
are I have a confession I
my confession is is that writing games
is fun you may not have known that
right
on which is awesome
place even more fun because I why
why is it so much fun because really ruby is super fun
writing games is fun you put together and its
fun squared so I I'm
this is my little ribbing I says my claims the fam
I'm but I love this because this is
how I feel about Ruby right adventurous an awesome array to tackle
so I would like to see more fun
a you know a wide like to see us have more fun with Ruby
and games are a great way to do it so let's talk about go through
go this is a fantastic game library again show of hands
I who is familiar with game programming
a course of me like a a feather the room
are her through her with go through our as her to go through before
pretty much the same audience okay this is great so this is new stuff
and that's exciting because you get to learn new things the conference's
so I if you've got internet which you should because it's great appearance
horrible downstairs
German so go through and it will try to compile
and move on cut you can also go to
legacy .org and look at the documentation and will
aceptar someone this documentation in this presentation
I so what
can you do with go through courses are
I'm mistress talk about what goes through his
an RN talk a little bit about what you can do with it
so here's the website live go sooner or
I'm has a bunch information go through
is a C-plus poss library and so all
it's a a a low-level I'm game library
principles pasta has first-class Ruby bindings
which means that all the concepts that if you want to use go through with the
post plus
map directly to Ruby so it just means that's really fantastic re library
as well as a C pas plus labor K
I'm let's take a look at we can do and go see so
I'm gonna check out my go see library
I just that cutesiness
yeah
I'm wondering what my resolutions here
as a are
so if you check out the goes to get repo you can
change into the examples directory
this is just go this is so if you go to
I'll let go through here what is my resolution or resolutions
crazy big on city go here you'll
get to the they get have reporter for grocers this is just
if you check out to go to the grocery for longer have on
there'll be an examples directory I need to switch to my guess is Jim sir
and a once you have go through
on installed as a gem you can go to the
the repo and there's a file called captain Ruby
which is a pretty fun americana I'm gonna change my display is here
get a little bit bigger area
alright
so I this is a little game that comes with go through
shows you I'll how do you play go through
and it's just a lil platformer game
and its super hard I'm
at this one does not have sound
also some other ones I do oca
I'll try not to talk we have sound them
%ah it's horrible I can ever get that
upper right hand corner because you going all the way back down
yeah at the time a whole
good like another reviewer I'm I so that's
that's possible on the co 2 all this is
is available and go through labor
so it is 224 lines long
for the entire thing which is not too bad thank lose
the other code to do the to build the map I'm in all the input to move around
so
in less than 250 lines occurred you've got a cam
the lower
weather graphics yep that's already cut
right the all that logic to play again is
is already cut so here's another example
on so I've got some more kids right there a littler
a couple years ago and I had a a I had an old
netbook like the really small nine-inch and they always want to set my lap
unlike
you know be like dad and work on a computer and
on I need to move them off and focused on something else
and I had this little computer that look just the right size for them
so II created this little
this Malacca little brat is israel's frustrated when they gone from me
and so I just typed Little Rock and you are
here we're having found her curly group
kuvin at for
so they will play that for hours it was awesome
by I'm
another one there are so I don't write data on
captain review by did right there said I wrote this in 2010
a given earlier a version of this talk in 2010
and a crew another jam this user uses go through florida and recalls
begin on and so this is a
very 2010 think big and injures right
and the whole point sale begin
is to try and get to the access
she you win
and begin keep doing it here adding more snakes
K you win
begin parents I am K huge when
crack so and I was me as well
on there is a a gaming a contest for you
get weekend forty-eight hours called a love them they're
to build again completely on your own as a single person I wanna see how
far you can get and forty-eight hours to build your own game
all the all the hard assets all the code needs to be done in the 24 hours
and this library is a fantastic will
library to to compete in the bottom here
problem there contest
iraq so
lots are possible we saw lots of different types of games
we saw captain review which is moreover classical platformer
and we had my little brat which is a cue smasher for lil kids
on an escape to reek of which is more an arcade can have
style game so there's lots of things that we can do
with ruby with gaming on
and so sure hands who would like to write games and Ruby
are a good almost laughably good so
what we're talking about here's the thing it's super easy to do
it's not complex right on
and it's actually really fun as well so here's how we're gonna do it
here's the first thing there that there's only a handful concepts we need
understanding our trade games
the first is we need to understand this thing called
the game loop right I and so if you've done any kind of our windows
or are you I programming you're familiar with how the event
model where the your application will
Razvan si have to respond to it that's the exact same thing we have within a
game where
your game is going to have a game we hope that loop is going to
to sleep over and over and over and over again
the game loop is Ron and by go through well by the go through window object
and what is going to do is is going to run over and over
and a sixty times a second is going to call the update method
and then it's gonna call the Draw method and then every time you
Press Rd press a button Ill call the button down
and the button method right not basically a
thats all there is to it kick over here
on on live go through will see here is the
yup here's there are document a our doc documentation for go through
for window and down here
and these call backs will see that there's an update nothin
and there's a draw nothin a bun up method in a button-down method
right as that's all it is you're gonna create a new instance and this goes thru
window
and then we're going to find what we want to do within those methods
as basically a K so let's
let's do that let's begin as it were
K on so
Kansas star so I'm gonna do is I'm gonna open up
my editor I'm gonna create district recalled hello world
and in this hello world is a very very simple
refile I'm gonna create a new class
called hello world game that is going to inherit from go through a window
my initializes gonna take three Prometheus which is going to be
a with a height and whether or not this game is going to be running in full
screen
I'm I call super because go through is intending to
have that initialize called if I didn't want to pass that an
I could just come put like
1024 by 768 here
and false or true and super and then I would have to have it
the final minissha wiser but I like to have those default values
my nationalize our time
and some it read a whole world out so
we're gonna print out hello world in the caption and that's all it is we've got
our methods the fine for updating drawl so we can put stuff in there
I make sense members phone so to call it is freezing
well we're gonna city to the hello world directory
cameras can call really hello world Darby
and there it is hello world and it doesn't do anything
palestinian about 600 window and that caption
at the top says hello world 10
I'm if I had escaped her space is not going to do anything
because we haven't told to do anything so it's hard to do something
the first thing I'm gonna do is I'm gonna find that button down
method and sending a pass and ID
and I'm gonna call close if
I D E is the same as go soo
keyboard escape right
and this is the first thing I do in pretty much every go through game
his eyes find a way to escape pics I don't have to train click that little
a little red dot and rerun at
I had escaped and it closes so we see this working
we got this call backs happening on
now there's more that we could do I like actually
see a bigger hello world not in the title bar wendover exerc
or something real on others couple ways I could do that 1i could create an image
it says hello world
and just put that into that screen
or we can use goes to do that for us so that's what I'm gonna do here
in my initializer I'm gonna create a new I object called image
and I'm going to call an ass go through to create this image for me
because I wanna go for shopping film image so
well as go soo image
to some create a new image from taxed
can so let's kick over to the documentation
look here this is the Wonder documentation here's image
we know that this image object is going to heighten where
I'm but there's also this class methods from text
low tiles and then the initialize on Congo
time so it's this from tax that we want to call
from tax takes five arguments it takes the window
that this tax is going to be printed to its gonna
ran past the taxed that's going to be created for that
image the font name the fight high
and line spacing wet and the alignment we can start
there are default values for those who can drop those
so here and say I Frontex the first is self
because that's the one over passing herself and others
I'm next thing I knew them say hello
I know o'leary come
I'm on the third
is the font name and I need to specify a fun time
I if you have a font file your taxes specify that
you do that half or I'm yes that's why the path minimal
bill that image without font I don't want to
I remember where that is our look it up as can be different
a cross-platform so
why things I'm gonna do is
are you
30 default fun I'm go through will give me a default
fun and then
let's make that 100 pixels tall can't and then on
drawn and/or its actually put on the screen I'm just gonna say
we want image to drama at
00 0 and we'll talk about those mean
later K let's see if we can get that to work
and there is hello LA rubicam at
without has the best game ever
that was crazy press escape into goes away escape
and
let's change it just LA and do it again
there you go are other tax thing is I wanna make this
centered right on so
let's take a look at the drama third the drama that takes a bunch of arguments
I'm really the first three are the ones that we care about and the rest
have default value so we can leave them offer for not going to change it
the first is axe the next is why in the thirties
see so let's see what what those mean
I on
here's our screen given 800 by 600 screen
on the external IR
the coordinates on the screen we want something place
right so the upper left hand corner is 0x0 why
the bottom right hand corner is a hundred axe
601 the middle is going to be four hundred action 300 why
make sense so
let's move over doctor occurred so I we know this is a hunter by six hundred
so impressive 400 by three hundred and get in the middle
that's right now but it doesn't get in the middle because
middle point is also the upper left hand corner
OVR image right sup ca
are source try and fix it see what we could do is price a
maybe four hundred I'm this is the same thing as Excel thought where
actually three sets of that with minus
image start with I don't know how big the images
right so self
height minus image to
hi I am
live coding from a lot people I just realize that
okay I out and work either
now
other number well i kno and now yeah
when you divide in half so divide that have tried again
how does work again why doesn't work again
nano are I'm
okay so we're getting a
we are getting
a advice how to get a centered
right so what we want is what the center point to the screen which is self-taught
with
salt out with divided by two so if it's or a hundred why do we want that $400
value
and the the vertical position we want our total height which is 600 divided by
two
but because we want the image centered now we have to move
the written with those values up by half the height
are the image in half the with the image right and so
I'll the Seahawks will see if this works and sup
RI here's the thing about this
it's math right hiding games in ruby is fun but there's math involved
sometimes we get that now throng map
right solve that for the wifi password
right map he thought you were done
with after school but you're not math is coming back
okay so there is math involved
that can be frustrating but really try and
and work through it so what are the things that I would really like to do
is I would like this image to do something kinda interesting
right is just sittin there not really do anything is not turning its key
so let's make your Netsky all these things are here this calculation
I don't know are you don't want that in my draw I don't wanna add logic tried
riders want to be responsible for drawings wanna do
them to come up here and I'm gonna macon
X instance variable I'm gonna put that
on but that logic an axe
act and then I'm gonna come over here
and I'm gonna put that and why
this podium is the worst trip
thank you now the shin
change it doesn't send thanks we're going to go we've got these action why
values now
we can I we can change them so what are the ways we can change them
is to make them cut time-dependent so why things I like to do
is I'm gonna add I'm value
so I'm gonna say mouth not sign church
timed out now
to which is going to give me a float
right and I'm multiply that times but 150
kak I do that
now to go back and forth right so
time is always going to be updating every time a call update we're gonna get
a slightly different I'm
and so we're gonna move that position
slightly are you know every fraction of a second sixty times
a second we're gonna move that image let's do it again
let's add now cosine
timed now
dots to and let's not play that times two hundred
so obviously more exaggerated go
so math sign and cosine is a circle
we didn't do anything without this is all more now math is fun
camp Africa center so blase
let's change this out like attention lower thats
doesn't shows up on the screen
area
so we have really done
much in this game
think all the damn on we built an image
of a syntax I we r
taking input so we know that we press the escape button
we're gonna close and we are calculating position that we want this image to be
now there is math involved were saying however wide
the the the window is ring try and find the center Marc
we're gonna offset that by the size of the image and then we're going offset
that by
some value sine and cosine at the current time
call are I'm
there's more we could do
I want to try to not only
see the image you see if we can hear stuff as well
go soo has more offers us
I'm not just feel we don't just have the ability to print things
screen we can actually play songs play sounds as well
so they're two different classes one is song which is intended to be
a sound that's gonna be playing for a long time
the other is a sample which is intended to be a sound that you might have
happening I might be having multiple times mobile
instances a sample could be playing at the same time typically smaller
so just performance wise is different characteristics for dealing with that
those resources and time again and so they're the two outlets
look at what that documentation looks like again on the live go soo
dorks I I'm the methods was recreated
we give it a window and a file name
ever play and stop for the song
and the sample is pretty much the same have initialize
I'm and then also play
when we play it we've given a volume and speed
whether or not you want to loop kak
I'm so
let's openness
up on my desktop got a couple love
songs I missed and drop into this project so
see astute bubble
that's a good one and area
he can possible found some errands do communicator
so
back in our our initializer
I'm going to create a song object
and asking me coming from go soo Saunders new
in passing and self I go see when does a special object
really showing ever initialize one instance a window
and ask because I was going to do a bunch of low-level some resource tough
murder print
to the to the screen so that's why we're passing this when they were around so
much
so call self and then it's going to be bubbles
mp3 alright
get bubble mp3 I
this is a wide look Easter song from long long long ago
and then we'll do sound is going to be
USU sample
new also self and it will be
communicator
thank you live coding isn't one all these a
all these commits are available my get every vote because of along with that
at just in case I can always check that out if I
totally screwed something up just gotta get back on flash blancmange
what's up blow
mange BL 0 WN AG up
II so on
Bruno Mayor age
alright I wanna do as I say sample
da play on
whenever ID is gonna be
axe so keyboard
X I'm so
I also the song is always gonna play
and samples gonna play whenever had
so for up
oh I see your
see if this works
up
yeah it is that's right did not
convert any
chic
E
be me
11
area so I
that's how easy it is to use right I you
create an image object either create that from tax story come on image
on the filesystem you can create song object
or sample you can play that its
340 it's not very difficult 25 lines code
and good to go so I'm let's take a look at maybe a little
a little bit different example
thing after Christmas lines
it was a fun show cancer like that yes
okay I when we are working with and games is very common for people to talk
about sprites as anybody
heard the term sprite before but I don't mean CSS sprites
who is heard a sprite before but and not a CSS sprite
cool happier so what is break somebody tell me what a sprite is
what's up
as a bitmap typically out
its it's a region on the screen
the run-up you're gonna draw to you right on
its pretty it's pretty common when I
for sure you in the game's that they'll create an object to be responsible for
printing to the screen and we're gonna call that a sprite
I'm it's also really common
for for these concepts have something known as a sprite
sheet astray she is a special case
image that can be divided into columns and rows
and each each cell this larger image
has a small incremental change
and some animation show so in this case we've got my laura b guy
and he's slowly moving his legs
is inverted feet to walk I didn't do the hump action
I'm looks kinda funny to me but it works
and this is a spreadsheet can't
so lets a but saving at this work and so
to create a new directory cult sprites right
an incredible and if I'll say that as sprites
RB her do the same thing we did before require go soo
create new class called sprite game
is going to inherit from go soo window
and then at the end of that we're gonna call
sprite came tot nu
talk show and that will tell go soo to play this game for us
we in initializer a
I'm with 800
hi
600 and
fullscreen faults
and then call super to let goes to know about this
but see if we get this to work sprite
cool
so we got the window we don't have anything happening here yet but will add
us in fact I can even exit cancelled out
let's
check out exercise 2.1
I'm confused
unable to read current working directory no I'll
okay your check out X
2.1 area see straight
here's my files got a spry and this player image
K so my sprite game
again the with and higher her by six hundred on
on the crate a new spray object passing and the window
on button down I escape gonna close
when the window has update called word is gonna pass to update down to the
sprite object
and then went dry as called for in also tell the spread object to drop
so let's look what's and a sprite objects right object was responsible for
printing to the screen
on when it's created we're gonna have this window object we're gonna
store that at window for later we're going to create a new image
I'm from player that P&G and then we're just going to center that image
by taking the window high divided by two of setting up by the image height
divided by two
and we're gonna draw that so release right
30 our little guy doesn't do anything
but again his cape because so let's make and do something
and update I'm
because we're holding on to this one to object weekend inspect the window object
ask questions well the questions we can ask is whether or not
about in this town right so I'll
I might say is some like I want my ex
value II position IX corner
I want to I am I want
updated by negative 5
-5
if my white button-down
is
keyboard left see if that works
so in a press left I hold left his
just gonna move I don't need a press left every single time for every single
loop
because every week for checking to see if it spreads depressed
so let's do the same thing for
I'm for
button right K
friend again and now a left turn right
we can we were gone I'm
can now indoor moving left and right he's not changing direction
so the next thing I want to do as I wanna take
this little dude and when he goes left I want them to look left
K that's pretty easy to do actually
when we called wrong we're giving her ex
cornet or white corn and this last one is busy and axe
that's the same for CSIS on the web so I'm assuming it was a run here
is you know nose with dizzy and access
it's just how close to the camera something
so some reason overlap the asset with the higher z-index is going to be on top
I'm after XY and z. there's a an X Factor know why factor
these default 1 and these are just
on like how I how proportional the images
so if we set for example that we want it
to be too into and weary weary round ass
our guys bigger so he's been stretched is now two hundred percent
the size whether things we could do is we could say we want to be -1
right that's gonna take that X and acts and
reverse ep so now
because his -1 on
he's facing the other way so
I'll I know if he's moving left or he's moving right
so I'm gonna put like a direction value in here
and he's going to fall to write
and and I say
effort pressing left then I want my direction
two people left and then
otherwise effort pointing right
I wanna murai and I want my direction
to cool right and then we'd rock
I'm just gonna check for direction here so I know that
thank you so
F direction is right K
I'm gonna draw as normal on
otherwise really pointing left and I want him to be
facing the other way the mixer
so what we've added is united this value
left to right when we move left
were enough said to laughter move right concerts right
when we draw our we're going to take a look at our valued determine how we're
gonna drop
K so I can move right
gonna post left and he goes way far left
right and you see how he's flipping
on that position first position up
right here his origin is right there
so only flip it his jumping so
we can fix this as well when we draw on the left what we're gonna do
is we're gonna subtracted by the image
wet
no or at the image
now he looks
a little happier right so
in go left finger I you can leave the screen no nursing
kak on that works
for it would work even better if he was actually
animating care so
we're going to do is instead of having this immature
which is a static image we're gonna have on this
idle object and if remember
from the documentation on image we have our normal
constructor word 30 initialized we also have these other
class ones we talked about from tax which will damage from tax
is off also the slow tiles this is where we're going to be able to look at and
get our I'm are
that spike she and I'll take that strikes you can cut up
several images so here let's say
blue tiles we're still gonna ask it
to do it from our window when set of player we're gonna go
runner out at different file I don't have that
here right now so
I'm gonna do is I'm going to
quickly check that out C
ok
so go I think that we've added here we've
on set and so having a and image object we had this
idle object now that's gonna be populated by the slow tiles
we're gonna grab it from this
file and that is the file right
so it's it's a spreadsheet the other thing we did is we have this new
variable call Fran right this is the frame that we want to choose from our
spreadsheet every time call update
we're going to Akron that frame and then
when we called rock were gonna do
is we're going to take the module s
a the frame and the ideal size so we're gonna have 32 images
so far frame is a hundred and 74
you know we wanna pull out whatever friend that is which is like
18 or something on so
we always want number in our ranger
images for idol and
then we're just going to ask for that image out over idle object which is
actually just in Iraq
so that's the only change we've made we've
polled our image out and now we have
an array a list collection of images I'm working track of RAM
were and crying frame on update and we're using that frame to Paul
out the image from our collection so we can print it
everything else is exactly the same so
if we run ass now he moves
ever so slightly but he still turns around he doesn't jump anymore
before so is good for getting better
on I would really like it I think it makes sense for him to just be like
you know breathing and stuff well is standing still but if he's moving I'd
like him to look like he's moving
so let's add up so
check out X 2.6
the difference here is now we have the second I'm
move objects second collection the images
we've got one coming from this
title image in the other come from the smooth image if you look at the moving
image
you know she's got a lot more movement everything else stays the same
I'm were still on gonna
set of RAM count for something and come into now we've also added this moving
value here and so will every time we call update we're gonna reset moving to
fault sandifer have a left or right cue down
demographic backed true and then we'd rock
are gonna do is if removing we're gonna pull out the image from our move
collection
otherwise around pulled out from idol collection right
so incremental change now as we move
at a glorious 60 frames a second
to tech so that's it
that's all this out this is running at as fast as we can do it so
60 frames a second we're pushing a new image on
there are other games at intentionally reduce the frame rate up to the sprites
down to like six or eight frames a second
because it's got that vintage you feel right but on
here's an example or something you know these games are popular had adventures
feel they don't have to actually have that vintage feel
because the capabilities are here to make a really compelling and interesting
looking game
geez are so one
while
that was fast start so one thing I wanna show is
on next I was gonna build this there's a couple other examples
actually many we check this out real quick
so if we check out X
3.5 I'm
we can do some parallax stuff
so parallax is a as a an effect where you're gonna move
the background in the foreground a slightly different a
speeds give the illusion of depth got the app
backers all their the section really easy
there's a there's a method and go soon called translate
that will I'm let you print your
your sprite to the background and then change the camera to fall
so on that's not very difficult at all
and then the last one is um this game that bill
as hoping to her sounds this
I was hoping to walk through how this is implanted but very simple thing we're
have a velocity and then every
framework in UTRAN whole that velocity down
pull that position down and hit space your Europe
jump back up on that velocity and so we get this
compositional game called really hot
there should be some I was not I'll
its open it up to
ok
sounds really important on
home this game is incredibly them on
on down
haha done
on
on
am
on
%uh so I did that last night and this morning
that lot stuff
you can repair relax with a staff on
her locks on
as a really hot I again I just about last night super fun
I'll the pile on and on here is that if you're ever at Aruba conference
or if you're ever act fast if you're a usergroup
write a game her up with people
have fun and thank you very much my name is Mike more
the
well
the
the do you can