WEBVTT 00:00.090 --> 00:05.760 Hello again! In this video, we are going to have a slight digression before we get onto the breakout 00:05.760 --> 00:06.180 game 00:06.180 --> 00:11.850 in the project. We are going to go back to the random walk practical from the "Algorithms" section. 00:12.720 --> 00:16.680 I promised I would show you how to do this in two dimensions, using graphics. 00:17.280 --> 00:18.240 And here it is. 00:20.040 --> 00:26.760 Let's start off with a couple more concepts from SFML that we are going to need. The "Vector2" represents 00:26.910 --> 00:34.380 a two-dimensional vector. It has members 'x' and 'y', which you can access directly, without using getters 00:34.380 --> 00:35.190 and setters. 00:36.150 --> 00:38.340 It supports arithmetic operations. 00:38.340 --> 00:43.170 So you could add two vectors together, for example, and you can also compare them for equality. 00:44.100 --> 00:45.450 And it is a template class. 00:47.220 --> 00:52.860 We are going to be using "Vector2f", which is an alias for the instantiation of this with a float 00:53.370 --> 00:54.420 type parameter. 00:55.080 --> 01:02.310 And the reason for that is that SFML uses float internally. As opposed to C++, which uses double by 01:02.310 --> 01:02.760 default. 01:04.960 --> 01:09.520 We are not actually going to use the "Texture" class until the next video, but we need to introduce it 01:09.520 --> 01:09.820 now. 01:10.570 --> 01:15.910 This represents an image which has been loaded into the graphics card. And it can be drawn on a "render 01:15.910 --> 01:18.310 target", such as the RenderWindow. 01:18.340 --> 01:19.630 we had in the last example. 01:20.020 --> 01:23.140 This drawing will actually be done by the graphics card. 01:23.890 --> 01:30.850 It does not involve the CPU or main memory at all, so there is no overhead in terms of processor time or memory 01:30.850 --> 01:31.480 operations. 01:32.020 --> 01:33.490 So this is incredibly fast. 01:34.210 --> 01:39.940 On the other hand, loading data into the graphics cards and getting it out again is extremely slow. 01:40.570 --> 01:44.920 So this is mainly useful for things which you are going to be displaying very frequently. 01:46.180 --> 01:48.880 The shape class represents a pre-defined texture. 01:49.180 --> 01:55.090 So you can think of this as a texture which is provided by the library. And it can be drawn on a render 01:55.110 --> 01:55.600 target. 01:56.050 --> 01:59.980 It has a rectangle associated with it, called a "texture rectangle". 02:00.940 --> 02:07.060 So for example, we could have a texture, an image which represents a circle. This texture rectangle 02:07.060 --> 02:09.990 will be the vector angle which bounds this circle. 02:10.000 --> 02:16.390 So the circle just fits inside it. The "origin" of this shape is the top left-hand corner of the 02:16.390 --> 02:21.010 texture rectangle. Which confused me a bit when I started using SFML. 02:21.910 --> 02:25.930 You would think, if you rotate a circle, it would go like that, about the centre of the circle. 02:26.410 --> 02:30.040 In fact, it goes like that, around the origin of the rectangle. 02:33.200 --> 02:36.770 The Shape is an abstract base class, so we cannot use it directly. 02:37.490 --> 02:42.530 There are some child classes. We are going to use the CircleShape, which is obviously a circle. 02:43.070 --> 02:46.520 There is also a ConvexShape and a RectangleShape. 02:48.980 --> 02:50.620 So here is the code. 02:51.040 --> 02:56.180 We are going to write a class, which will represent the creature which is moving around on the screen. 02:56.840 --> 03:03.200 We have the random number engine and the Bernoulli distribution object, which we declare as static. 03:03.770 --> 03:08.570 So these are going to generate Booleans with a 50/50 chance of being true or false. 03:11.200 --> 03:19.300 We are going to use a Vector2f to represent the velocity of this creature. The x component will control 03:19.300 --> 03:21.100 the movement sideways. 03:21.430 --> 03:24.880 So if "vx" is positive, it is going to move to the right. 03:24.880 --> 03:27.190 And if it is negative, it is going to move to the left. 03:28.180 --> 03:33.400 If "vy" is positive, the creature will move down the screen, and if it is negative, it will move up. 03:34.900 --> 03:38.500 We are going to use a CircleShape as the actual graphical object. 03:40.890 --> 03:42.670 And then we have the constructor. 03:43.110 --> 03:45.420 So this will create a creature 03:45.420 --> 03:55.680 at the requested coordinates. We set the velocity to the default values, then we set the circle 03:55.680 --> 03:57.900 to be in the position that is requested. 03:59.010 --> 04:04.380 We set the radius of the circle to be 5 pixels, and we fill it in with the red colour. 04:06.230 --> 04:12.860 We have a draw() member function, which will do whatever is needed to get an object to this class to be drawn 04:12.860 --> 04:13.430 on the window. 04:14.390 --> 04:19.550 In this case, we just call the draw() member function of the window and we pass the CircleShape to it. Because 04:19.550 --> 04:22.070 the SFML library will know what to do with that. 04:23.810 --> 04:28.460 And finally, we have an update() member function, which will calculate the new position of the creature. 04:28.820 --> 04:32.240 So this is just the logic we had before, to change the direction of movement at random. 04:33.470 --> 04:38.840 And then, once we have got this velocity vector, we move the creature to its new position. 04:39.170 --> 04:42.170 So this will add "vx" and "vy" to the existing position. 04:44.000 --> 04:48.500 Then we initialize our static objects, outside any class or function. 04:50.000 --> 04:52.130 We create an object of this class. 04:52.550 --> 04:54.620 We want this to appear in the middle of the screen. 04:54.620 --> 04:59.450 So we use half the width as the x coordinate, and half the height as the y coordinate. 05:00.290 --> 05:02.270 And then, most of this code is going to look very familiar. 05:02.270 --> 05:10.250 So we create the RenderWindow, limit the frame rate, have a game loop, clear the screen, check for closing 05:10.250 --> 05:14.240 or pressing escape, and then we update the creature. 05:14.360 --> 05:20.510 So this is where we calculate the new position of the creature. And then we call its draw member function. 05:20.900 --> 05:26.090 So it is all ready, it is all in the window's buffer. And then we call display() to make it actually 05:26.090 --> 05:26.990 appear on the screen. 05:27.350 --> 05:29.510 And then we go back on, to the next loop iteration. 05:32.610 --> 05:33.090 And there we are. 05:33.240 --> 05:35.220 So there is our bee, buzzing around. 05:35.550 --> 05:37.860 Or our drunkard tryin to find a way home. 05:38.010 --> 05:39.130 Or whatever it is meant to represent. 05:41.460 --> 05:42.840 Okay, so that is it for this feature. 05:43.260 --> 05:44.040 I will see you next time. 05:44.220 --> 05:46.140 Until then, keep coding!