WEBVTT 00:00.000 --> 00:23.800 All right! So, we've imported the Prong project. Now, in this game, we will create some simple 00:23.800 --> 00:28.640 physics where the platforms here for the players will respond to our commands, and they 00:28.640 --> 00:33.040 will start moving on the screen, and the ball will bounce in between the platforms and 00:33.040 --> 00:37.720 in between the sidewalls of the stage. In order to implement that, we will need to 00:37.720 --> 00:42.080 learn about coordinates and positions on the screen, which is a very important idea that 00:42.080 --> 00:46.200 I want you to take away from these videos, because you will need coordinates for every 00:46.200 --> 00:51.840 single game that you will create. So, let's move our focus here to the right-hand side of 00:51.840 --> 00:57.000 the screen, where we have the stage and the sprite editor. I would like you to select 00:57.000 --> 01:11.200 the basketball sprite, and I want you to fill in the X and Y fields with 0 and 0. So, notice 01:11.200 --> 01:17.480 that the basketball sprite suddenly moved to the dead center of the screen. X and Y are 01:17.480 --> 01:23.280 called coordinates, and they specify where on the screen a sprite is going to be. The 01:23.280 --> 01:29.040 value 0 for X and Y mean the dead center of the stage, both on the horizontal. That's 01:29.040 --> 01:36.280 what X specifies and on the vertical direction, which is what Y specifies. Now I'm going to 01:36.280 --> 01:40.680 focus on the X, the horizontal coordinate, and everything that I'm going to talk about 01:40.680 --> 01:46.400 here will also apply to the vertical coordinate as well. So, if I change this X coordinate 01:46.400 --> 01:53.900 instead of 0, if I set it to 50, notice that the basketball moved 50 steps to the right 01:53.900 --> 02:03.260 of the center of the screen. The further I want to go, the greater I have to make X. So, 02:03.260 --> 02:10.600 if instead of 50, I do 100 notice that the ball will move further to the right. So, let's 02:10.600 --> 02:16.700 set X back to 0. If I want to go left from the center of the screen, I'm going to have 02:16.700 --> 02:24.620 to make X a negative coordinate. So, I will have to make X 50, for example, with a minus 02:24.620 --> 02:32.100 sign and the ball will move as you notice left from the center of the screen. The further 02:32.100 --> 02:40.060 I want to go left, the more negative X is going to be. So, if I do instead of 50, I do 100. 02:40.060 --> 02:45.160 The further left, the ball is going to be from the center of the screen. So, I hope 02:45.160 --> 02:50.920 that makes sense. I'm going to set X back to 0 again, and I'm going to go to the code 02:50.920 --> 02:58.640 section to the motion section in the code, and I'm going to bring in this blue change 02:58.640 --> 03:07.400 X by 10 and bring it into the open space. If I just click this block, the ball will 03:07.400 --> 03:15.020 change its X coordinate by 10 positions. It will increase X by 10. Increasing X, as you 03:15.020 --> 03:22.100 saw, means moving the ball to the right. So, if I change X by 10, if I just click it, 03:22.100 --> 03:27.140 notice that the ball just slightly moved to the right. If I click it multiple times, 03:27.140 --> 03:31.980 the ball will increase its X position and move to the right notice. Its X coordinate has 03:31.980 --> 03:38.680 increased to 50. So, changing X by a positive value, 10 in this case will make the sprite 03:38.680 --> 03:48.440 move to the right. If instead of 10, I do negative 10. And that means subtracting from 03:48.440 --> 03:54.760 X, which means I'm moving the ball to the left in this case. So, if I just click this 03:54.760 --> 04:01.860 block, notice the ball has started moving to the left until the X coordinate is 0. And 04:01.860 --> 04:08.620 if I click the block again, the coordinate will start turning negative. So, we'll do 04:08.620 --> 04:14.340 negative 10, and then even more negative, the more I click on this blue code block. So, 04:14.340 --> 04:22.740 if I click again from negative 10, it will do 20, 30, and so on and so forth. So, just 04:22.740 --> 04:28.340 remember, this X equals 0 means the center of the screen to the right of the center of 04:28.340 --> 04:37.420 the screen. Means a positive value, like 50 or 100. To the left of the screen, means 04:37.420 --> 04:45.020 a negative value, like 50 or 100. To move the sprite left or right, you need to change 04:45.020 --> 04:54.100 its X coordinate by either a positive value to move to the right like this, or by a negative 04:54.100 --> 05:02.300 value to move to the left. So, moving to the right means changing X by a positive value. 05:02.300 --> 05:06.740 Moving to the left means changing X by a negative value. That's all that I want you to 05:06.740 --> 05:12.020 remember. Now, as I mentioned, everything that I'm explaining for the X coordinate is 05:12.020 --> 05:17.900 also valid for the Y, the vertical coordinate as well. So, a positive value means upwards 05:17.900 --> 05:21.940 from the center of the screen. A negative value means downwards from the center of the 05:21.940 --> 05:31.580 screen. So, if I change the Y coordinate to be 50, notice the ball has moved upwards, 05:31.580 --> 05:38.620 and if I said Y to 50, the ball is downwards from the center of the screen, and the same 05:38.620 --> 05:44.140 mechanism for changing coordinates is also valid for the Y coordinate. So, if I pull the 05:44.140 --> 05:49.660 change Y by 10 from the code sections, and if I click on it, change a Y by a positive 05:49.660 --> 05:59.620 value will move the ball upwards. Notice what I'm doing, and if I change Y by a negative 05:59.620 --> 06:07.980 value like negative 10, the ball will move downwards. Now these ideas with co-ordinates and movement 06:07.980 --> 06:15.460 will be very important because our games will move all sorts of spreets all over the screen, 06:15.460 --> 06:22.700 and we will start by programming our platforms here for the players. So, let me drag these 06:22.700 --> 06:27.260 code blocks wherever they came from. So, to make them disappear, let's start programming 06:27.260 --> 06:34.580 our first platform. So, I'm going to click on this red down bar, and I'm going to pull 06:34.580 --> 06:39.860 in my first block. So, I'm going to go to events, this yellow section, and I'm going 06:39.860 --> 06:46.860 to drag one flag clicked. I'm going to zoom into the code so that the code is clearly 06:46.860 --> 06:53.620 visible on the screen. So, when the green flag is clicked, I want the red bar to be responsive 06:53.620 --> 07:01.300 to my left and right arrow keys. If I move my left arrow key, I'm going to move the 07:01.300 --> 07:06.940 bar to the left. That means decreasing the X coordinate, or changing it by a negative 07:06.940 --> 07:13.020 value. And if I press the right arrow key, I'm going to change its next coordinate by 07:13.020 --> 07:20.500 a positive value. So, let me go to the control section, the orange section, and I'm going 07:20.500 --> 07:29.620 to bring in the if block. So, if the right area is pressed, then I'm going to change the 07:29.620 --> 07:37.900 X caught by a positive value. So, I'm going to go to sensing here, the light blue section, 07:37.900 --> 07:42.540 and I'm going to drag in the diamond-shaped key space. First, I'm going to snap it inside, 07:42.540 --> 07:50.460 and instead of space, I'm going to change that and select the right arrow. So, if the 07:50.460 --> 07:55.460 right arrow is pressed, then I want to change the X coordinate by a positive value. So, 07:55.460 --> 08:00.300 I'm going to go back to motion the blue section, and I'm going to bring in the change 08:00.300 --> 08:07.180 X by 10 block. So, when the green flag is clicked, if the right area is pressed, then 08:07.180 --> 08:13.500 change X by 10. Remember, changing X by 10 means moving 10 positions to the right. So, 08:13.500 --> 08:20.300 let me click on the green flag and press the right arrow key. But nothing's happening 08:20.300 --> 08:26.700 now. Why is that now? The reason is that the computer is very fast. When I click the 08:26.700 --> 08:32.580 green flag, the computer will very quickly ask, is the right error? Key pressed. Well, at 08:32.580 --> 08:37.780 the time I click the green flag, I'm probably not already pressing the right area key. So, 08:37.780 --> 08:42.380 the computer will very quickly assess that the right error is not pressed. So, the 08:42.380 --> 08:46.260 coordinate will not be changed by the time I have a chance to actually press the right 08:46.260 --> 08:52.940 error. Key the script is done, executing a long time ago. So, we need to constantly check 08:52.940 --> 08:57.100 if the right error is pressed, which we can do by going to the control section and bringing 08:57.100 --> 09:06.500 in a forever block to wrap around our IF statement. Now, the script will go on forever, 09:06.500 --> 09:11.820 and the computer will constantly be checking if I'm pressing the right error key. So, let's 09:11.820 --> 09:16.820 click on the green flag and validate that. So, I'm clicking on the flag. Notice the script 09:16.820 --> 09:20.740 has lit up, so it's being evaluated right now, and I'm just going to click on the right 09:20.740 --> 09:28.300 arrow key. So, notice that as I'm pressing the right arrow key, the platform moves to 09:28.300 --> 09:35.940 the right. So, let me stop this script, and let's add a condition for the left Iraqi. So, 09:35.940 --> 09:41.500 I'm going to right click on this, if block and I'm going to click duplicate, and I'm going 09:41.500 --> 09:48.340 to put it after the first IF block. So, I have an IF for the right error key, and another 09:48.340 --> 09:55.940 IF for the left error key, that I'm just selecting right now. And if I have the left error 09:55.940 --> 10:01.260 can want the platform to move left, that means changing X by a negative value. So, I'm 10:01.260 --> 10:06.500 going to put a negative 10 inside. Now, if I click on the flag, the computer will constantly 10:06.500 --> 10:12.580 be checking if the right Iraqi is pressed, and if the left Iraqi is pressed. So, that 10:12.580 --> 10:16.380 when I click on the left arrow key and the right arrow key, the platform will start 10:16.380 --> 10:23.220 moving left and right. So, this is pretty cool. We already have a controllable sprite 10:23.220 --> 10:30.500 on the stage. Now, we can make use of this exact code for the top bar as well. So, I'm 10:30.500 --> 10:34.620 just going to drag this code and drop it onto the up bar sprite, which will make this 10:34.620 --> 10:39.780 code duplicated in the upper bar sprite as well. So, both the down bar and the up bar 10:39.780 --> 10:44.380 will have the same code. Now, when you select the up bar sprite, make sure that the keys 10:44.380 --> 10:49.260 to which the up bar will respond are different from the right and left arrow keys. So, I'm 10:49.260 --> 10:53.500 going to change the right arrow to have the D arrow key pressed, and the arrow key instead 10:53.500 --> 10:58.500 of the left arrow. So, the up bar will be controlled by the keys A and D for the left 10:58.500 --> 11:03.500 and right, and the down bar sprite will be controlled by the left and right arrow keys. 11:03.500 --> 11:08.340 So now, if I stop by the scripts and click on the green flag again, both bars will be 11:08.340 --> 11:12.860 controllable. So, with the left and right arrows for the down bar and the keys A and D for 11:12.860 --> 11:19.500 the up bar as well, both players can control both bars. Alright, so this is pretty cool. 11:19.500 --> 11:23.700 We already have two player controls for the up and down bars for this game. The next 11:23.700 --> 11:27.980 thing that we have to do is to control the ball, which will move in between the platforms 11:27.980 --> 11:32.460 and between the side walls of the stage. So, I'm waiting for you in the next video 11:32.460 --> 11:34.460 to teach you how to do it.