00:00:10.480
All right, welcome everyone to the workshop! Just to make sure everyone is in the right place, this is Soup to Nuts: Building a Game with Ruby.
00:00:18.320
I will post code just in case anyone falls behind in the primary Discord channel.
00:00:24.000
I have one request. If everyone could share one of their favorite 2D games, or a 2D game that they remember fondly, that would be really helpful.
00:00:30.960
It could be a game that you saw a demo of and thought, 'That looks really cool!' This feedback will be especially useful for the second half of the workshop.
00:00:36.160
I think this workshop is being streamed live. For anyone that has questions, please post them in the Discord.
00:00:42.480
I'd appreciate your participation. Also, if you could include your favorite 2D game in the thread, that would be helpful.
00:00:48.399
Some examples of 2D games include Stardew Valley, Mega Man X—one of my personal favorites—and Undertale.
00:00:59.160
To find the thread, go to the workshop channel for Soup to Nuts, and you'll find two threads: the pre-workshop and the wish list.
00:01:07.920
If you have any questions, you can post them in the pre-workshop wish list or in the general chat. I'll try to keep an eye on those.
00:01:16.640
Chrono Trigger is an excellent choice! There are so many amazing games out there. Alright, let’s get started!
00:01:23.439
We're going to start with a little bit of code, and then I’ll talk about some of my game development experience. I’ll flip-flop between the two during the first half of the workshop.
00:01:35.360
In the second half, we’re really going to dig into some more advanced game development topics. Hopefully, there will be a lot for you to learn during this workshop.
00:01:46.320
A quick show of hands: who here is completely new to Ruby? Just a complete beginner?
00:01:52.560
Alright, it seems like everyone has some experience, with most having over two years of experience with Ruby.
00:02:03.760
So, some of the introductory material will be Ruby-specific, but we should be able to move through it fairly quickly.
00:02:10.320
And who has five or more years in Ruby? Great! How about 10 or more years? Wow, that’s impressive!
00:02:27.560
I started working with Ruby back in 2013, so I’ll be coming up on eight years.
00:02:35.920
One thing that we all feel when starting to use Ruby is this sense of magic associated with the language.
00:02:43.520
It's hard to describe, but there’s an aesthetic to Ruby that makes it a joy to use.
00:02:51.360
However, over the course of 10 years, that sense of magic tends to fade away. What I hope for during this workshop is that you’ll find that magic again.
00:03:09.920
It's really important, and it's something I cherish about the language.
00:03:15.680
The instructions are all there, and the assumption is that everyone has a working environment similar to this.
00:03:23.040
So go ahead and launch your code editor. The source code for what you’re seeing on the left side is inside a directory called 'my game'.
00:03:30.960
Inside that directory, there should be another folder called 'app', and then the file 'main.rb' contains the source code we’ll be working with.
00:03:42.720
Is everyone good with that? You should be able to run the game and make changes in that file.
00:03:52.880
With the game running, you should be able to change a line of code, save it, and see the game update immediately.
00:04:01.600
This is the starting point. If you hit any obstacles or get stuck, let me know.
00:04:09.680
I’ll give you about 30 seconds to set things up. Meanwhile, let me check the Discord.
00:04:20.320
Lots of awesome games mentioned there! Great to see that!
00:04:25.600
Can you make the text larger on the screen? Yes, I can do that.
00:04:30.560
How’s that? Is that better? The gameplay stream will be small, but I want the code to have enough detail.
00:04:37.440
Let's write a simple Hello World program! I want you to replace the code inside the `tick` function. This function is the entry point for the game engine.
00:04:50.080
You can think of this as your top-level event loop. It runs at 60 frames per second, independent of your simulation update.
00:04:57.920
The number you see displayed is the frame count of the game. Update your code to reflect the line above.
00:05:03.280
The `tick` function receives an environment class called `args`. Inside this, there’s a property called `outputs`, which contains `labels`.
00:05:10.080
We are sending a tuple into this construct, representing the `x` and `y` coordinates of the label, as well as the tick count from `args.state`.
00:05:20.800
By doing this, you should see a label display the tick count on the screen.
00:05:29.840
So far so good? In the game itself, we have a heads-up display (HUD). If you press the tilde key, you will see the HUD.
00:05:37.520
You can click 'Show Menu' and press 'Reset Game' to reset your game. You can also use this feature to evaluate Ruby code.
00:05:45.600
For example, when you enter `1 + 2`, it will evaluate this code.
00:05:50.960
The tilde key is right next to the `1` key. Can everyone see it pop up?
00:05:56.640
For those who are into video games, this console is quite reminiscent of the Quake console.
00:06:03.520
You have full access. You can type `say hi`, and it will respond back to you.
00:06:09.040
Now, we have a label working and we understand how to use the console. You can use the console to reset the game at any time.
00:06:15.920
Any questions so far? We’re going to get into some cooler stuff next.
00:06:26.080
Yes, a question was asked about the text editor. Is it an adequate size? Yes, it seems good to me.
00:06:32.560
Alright, let's dive into some cooler things!
00:06:38.640
We are going to render a square on the screen. The concept remains the same: you will provide a tuple.
00:06:45.520
You specify the `x` and `y` position, width, and height of the square.
00:06:52.960
I promise it's going to get much harder, but we’ll start slow and speed up over time.
00:07:00.960
Let’s look at another render primitive called a border.
00:07:06.800
You can notice our fancy little border here. It uses the same constructs as before.
00:07:12.800
If you want to render a sprite, this one takes an additional property, which is the path to your sprite.
00:07:20.720
If you check your 'my game' directory, you will see a folder called 'sprites', which contains a collection of sprites for you to use.
00:07:36.960
I will also post this code in Discord for those working remotely.
00:07:41.440
Now let’s take a look at one of our tech demos that I put together in the past.
00:07:48.320
This demo was a collaboration with an artist, and it showcases various game concepts.
00:07:55.200
Using the concepts we’ve discussed, you can build a game that looks amazing with overlays and ripple effects.
00:08:00.960
You will notice the lily pads have a simple physics aspect to them.
00:08:10.480
Ryan C. Gordon, one of our partners on DragonRuby, has previously built Tetris, which might inspire you for your own projects.
00:08:17.720
So, this tutorial will eventually walk you through creating a Tetris-like game.
00:08:26.960
As for my credibility in this space, I have a game released on the Nintendo Switch that was built using DragonRuby.
00:08:33.440
It's called 'A Dark Room', and there’s even a Wikipedia page for it, which is pretty cool!
00:08:41.520
This game was also available on iOS and Android, and it even went viral after being featured in the New Yorker.
00:08:50.400
So, there’s legitimate credibility behind building games with Ruby in this game engine.
00:08:56.960
Another way to render content is to use hashes, which I'll post in the Discord as well.
00:09:05.200
As for the NSB release, I’m currently working on it.
00:09:12.480
One question that came up was when the pre-sequel would be released, and I assure you that work is in progress.
00:09:19.680
I know I missed a syntax error. Did I forget an end somewhere? There we go!
00:09:27.120
Voila! So, what you have here should work correctly.
00:09:31.440
You'll see similar attributes for sprites, such as rotation and alpha settings for colors.
00:09:39.520
The label also has some additional properties we can explore.
00:09:45.920
Does anyone have questions so far?
00:09:51.760
Yes, as we continue, the tick method is called continuously.
00:09:54.720
When you render repeatedly, it seems you are starting from scratch each time, correct? Yes, that's accurate.
00:10:00.640
This structure allows you to reason about your game without the need to delete rendered objects.
00:10:06.160
You have a clean slate at the start of each tick.
00:10:12.480
There’s a variant called static underscore, which will retain your render primitive by reference—a more advanced API.
00:10:20.720
The documentation for this is locally available. You’ll find documentation in your local environment, as well as online.
00:10:29.040
You can check out docs.dragonruby.org for that.
00:10:37.040
There’s a wealth of sample apps available to help you as we go through the workshop.
00:10:43.760
Does anyone have further questions before we move on to the next part of the workshop?
00:10:53.040
As you all play with the code, you’ll see plenty of opportunities to ask questions and figure things out.
00:11:00.160
I'll pause for a moment to check Discord for any questions.
00:11:06.480
Let’s take a moment to check on the thread for your favorite 2D games.
00:11:10.480
I’m excited to hear your selections and talk about their relevance in game development.
00:11:16.760
As we figure things out together, let’s try building on top of the concepts we’ve discussed today.
00:11:22.080
In the meantime, let's move forward into more advanced coding procedures and techniques.