Do you want to create a video game but don’t know how to get started? Have you looked at complicated video tutorials that were confusing? Do you want an easy to learn language that gives you instant feedback?
Well, you're come to the right place. Welcome to my course entitled Build the Next Great Video Game Using the Hottest Tools. Hi, my name is Robin Chase, founder of Creative Programming Workshops and an instructor at Udemy.
In this course, you'll learn, using a step-by-step approach, how to create your own asteroids game.
I'm always in search of the latest tools. That's why I'm happy to introduce to you P5.js, the all new programming language and environment made specifically for artists. With P5.js, along with the P5.play library, you’ll be able to create your own video game quickly and easily.
Do you want to create a video game but don’t know how to get started? Have you looked at complicated video tutorials that were confusing? Do you want an easy to learn language that gives you instant feedback?
Well, you’re in luck. Introducing P5.js, the all new programming language and environment made specifically for artists. With P5, along with the P5.play library, you’ll be able to create a video game quickly and easily.
In this video, we will look at how to setup our environment so that we can begin creating our video game. We will download and install a language called P5.js in order to create our work environment. We will also download and install the P5.play library, which will allow us to create game components. Finally, we will create a canvas area for our game and change its colour. Let’s get started.
Now that we have P5.js and the P5.play library installed on our computers, and understand the coordinate system, we’re going to start drawing basic shapes.
In this video, we will learn to draw basic shapes using commands, which are basic instructions that tells the computer what to do. We will learn to draw a circle, a square and a rectangle. We will take a look at what parameters are and why they are important.
We will also change the colour of the canvas work area. In doing so, we’ll take a look at the RGB colour system and see how we can use not only the red, green and blue values but combine them to create any colour we want.
We’ll also create text, set its size and colour, and position it where we want on the screen. Finally, we will set the outline colour and the inner colour of shapes
Now that we know how to draw basic shapes, understand what parameters are and can use the RGB system to change the colour of text and objects, we’re ready to move on.
In this video, we will learn key programming concepts that we will use throughout the course. This is an important lecture.
We will take a look at variables, boxlike containers that have a label or name, and contain something inside them, which we call values. We will then use the values inside the containers, or variables, as a way to make our code more tidy and easier to understand.
We will increase the value inside the X variable by 1 over and over. By doing so, we will animate the circle on the screen.
We will also increase the speed of the animation. Then, we will increase the value of the Y variable, which will allow us to animate our circle down the page.
Afterwards, we’ll learn to comment out code our code, a way to make it ineffective, but an important concept to understand when testing or making notes for ourselves. Finally, we will look at IF statements, special conditions that, when true, allow P5 to change its behaviour.
Now that we can animate our ball going across and down the screen, we can see the power that animation can have. However, what if we want to move the ball in the other direction, either leftwards on the screen, or up the page, how would we go about it?
In this video, we will learn how to move our ball backwards, either leftwards across the page, or up the page. We will also use width and height, special prebuilt variables that contain values.
First, we will start off by creating a new sketch, or test file. We will link it, like we did before, to our web page.
After we create a canvas and set its colour, we will create two variables, X and Y, and we will give them both values. We will then animate the ball moving across the screen.
Next, instead of adding 1 to our X variable, we will subtract 1 from the variable. Doing so will make our ball move in the opposite direction. By increasing the value that we subtract from the X variable from 1 to 5, we increase the speed at which the ball moves.
We then create an IF statement, logic that will allow the circle to loop over and over again. Next, we use a prebuilt variable called width that contains the value of the width of the page.
We also adjust the values so that the entire circle animates offscreen. We then comment out our code in order to make it ineffective.
Afterwards, we create an animation up the page along the Y-axis. Using another IF statement, we use logic to allow the ball to loop over and over.
We then use another prebuilt variable called height, that contains the value of the height of the page. Once we are happy with the animation, we adjust it to make sure that the entire ball animates offscreen before looping.
Now that we know how to animate our ball on the screen, can use IF statements and the width and height variables, we are ready to move on to more complicated programming examples.
What if we wanted to run code multiple times? Do we need to copy and paste our code over and over again, or is there a more efficient way to repeat code?
What if we wanted to store multiple pieces of information? Is there a container designed specifically for that purpose?
In this video, we will learn to create for loops in order to allow our code to run multiple times. We’ll begin by looking at the structure of a for loop. A for loop has 3 parts, initialization, condition and update.
These parts serve different purposes. We will not only learn about the different parts of the loop but how they work together.
Next, we will learn about arrays. Arrays are pill-boxlike structures that allow us to store information in a organized, efficient way. We will also learn to put information into our array, and view the information inside an array.
Then, we will take a look at the mouseIsPressed variable. This prebuilt variable holds either a true or false value.
When used with an IF statement, we can check whether the mouse was pressed and if so, certain things can occur. An ELSE block of code will run when the IF condition is false.
Afterwards, we will use the preload() function, a special area where we can load images and sound. Finally, we will load an image into a variable using the loadImage() command, and later on, we will display it using the image() command.
We now understand for loops and can use them, along with arrays, to store multiple pieces of information. We can also use the mouseIsPressed variable along with IF/ELSE statements to change the background colour of the canvas. We’re now ready to move on.
What if we wanted to build our own game. How would we go about doing so? Where would we start?
In this video, we’ll learn about sprites, the basic building blocks of games. We’ll learn how to create them, how to put them into variables and how to set their X and Y positions.
After that, we’ll learn to display our sprites. The basic sprite, a container, will simply have a shape, a colour and a position. However, the fact that we can see them tells us that they are there, which is what we want.
Next, we will use the loadImage() command to load an image of a spaceship into P5. Later, we’ll add this image into our sprite container.
We will then learn to load multiple animations into our sprite and we’ll see why each animation has its own handle, or unique identifier. This enables us to change our sprite’s animation whenever we want.
Afterwards, we will set the collision area of our sprite in order to know where it might collide with other sprites. We will also turn on the sprite’s debug mode in order for us to see the collision boundaries, an area we can adjust.
Finally, we will scale down our sprite in order to make it a manageable size.
Now that we know how to create sprites and for loops, we can use them together to create multiple sprites. There are some questions that remain, however.
First, how many times do we go through the loop? What impact would going through the loop 5 times have as opposed to going through it 10 times?
Next, how can we position our sprites so that they appear randomly on the canvas? How can we set the speed and direction of sprites?
Finally, how do we check if sprites go off the canvas? Is there a way to keep them on the canvas no matter how they move?
In this video, we will begin by creating a for loop. We do so in order to create multiple sprites. Since one sprite will be created each time through the loop, we will make the loop repeat 10 times in order to create 10 sprites. These sprites will be our asteroids.
We will use the random() command to set the X and Y positions of our asteroid sprites. Random() generates a number between a lower and upper limit, and we can use this number to place our asteroid sprites on the canvas.
Using a new command called setSpeed(), we will also set both the speed and direction of our newly created asteroid sprites.
With our asteroid sprites created, we can see them moving around the canvas. Once they go offscreen, however, they do not reappear.
We solve this problem by creating another for loop, one that checks the position of every asteroid sprite. Using IF statements, we track each sprite so that when it goes offscreen, it continues its journey on the other side of the canvas.
Afterwards, we will check for collisions between the asteroid sprites and the ship sprite using the bounce() command. Apart from checking for collisions, this command also tells the sprites to bounce off the ship sprite if they come in contact with it.
Now that we know how to create multiple sprites using a for loop, can place them anywhere on the canvas and can set their speed and direction, we’re well on our way to building our game.
We have also learned how to check for collisions between the ship sprite and the asteroid sprites and are ready to move forward.
Questions remain however. What if we want to uniquely identify the image that we added to our ship sprite? Is there a way to do so, given that it is not an animation?
Next, our spaceship is quite large. If we scale it down, does the collision area change as well?
We also would like to control the speed of the ship sprite. Is there an easy way to do so? Can we add instructions so that users know how to play the game?
In this video, we will begin by giving our sprite image a handle, or unique identifier, so that if needed, we will be able to easily select it later on. We also change the identifier of an animation from normal to thrust, a word that better describes what the ship sprite is doing.
Next, we scale our ship down to half of its original size. We see that when we do so, the collision area changes as well.
Then, we use the maxSpeed() command to set a ‘speed limit’ for the sprite. In this way, the ship sprite will never move too fast, no matter how it’s bumped or pushed around.
Afterwards, we’ll apply friction to our ship sprite, giving it the ability to slow down. We adjust the friction value so that the ship sprite can move, but at the same time, not be out of control.
Finally, using the text() command, we create instructions for our users in order for them to play the game. We place the text in a colour that contrasts against the dark grey background, and we set its position at the top of the canvas.
We covered a lot in our last video. We now know how to give the images in our sprites unique identifiers. We discovered that changing the size of our sprites will also scale the collision area.
Next, we learned how to set the maximum speed or ’speed limit’ of a sprite and also how to apply friction in order to slow it down.
By adjusting the friction value, we allowed our ship sprite to be moved by collisions but still remain in control. We are now ready to move forward building our game.
What if wanted to control our ship sprite. How would we do so? Could we rotate our ship by pressing a key? Would the collision area change or stay the same? How could we apply the animation to our ship that we added in an earlier step?
In this video, we will rotate our ship by pressing a key. To do so, we will use an IF statement. Here, when the left arrow key is pressed, the condition is true and we will run the code. When the left arrow key is pressed, we select our ship sprite, take its rotation value, and subtract 4 from it. This has the effect of rotating the ship left.
Then, to rotate our ship right, we do the same thing. We create an IF statement that checks if the right arrow key has been pressed. If the condition is true and the right arrow key has been pressed, we then take the rotation value of the ship and add 4 to it. This has the effect of rotating the ship right.
As we can see, when the ship rotates either left or right, the collision area changes. This is okay for now.
We then want to make our ship move forward. We’ll do this by creating another IF statement. Here, if the up arrow key has been pressed, we use the setSpeed() command to make our ship move forward at a specified direction.
To animate our ship, we use the changeAnimation() command. This will allow us to use our thrust animation whenever the up arrow key is pressed.
By adding an ELSE block, we reset the ship sprite back to simply displaying an image when the up arrow key is released. We now can move our ship forward and rotate it.
Now that we know how to control the rotation, speed and direction of our ship sprite, and can change its animation, we are now ready to move on.
One of the issues we face is that the collider changes shape as we rotate the ship sprite. Can we adjust the ship so that when it rotates, the collision area stays the same?
We also want our ship to fire bullets at asteroids. How would we do so?
In this video, we will begin by changing the collision area of our ship sprite. Doing so will allow it to rotate without altering the collision area.
As we change the shape of the collision area from a rectangle to a circle, we remove the last parameter. This is because while rectangle collision areas have both a width and a height, circle collision areas only have a diameter.
We then adjust the values until we are happy with the result.
Afterwards, we use an IF statement to check whether the ‘x’ key was pressed. If it was, we create a bullet sprite and add an image to it.
Now that we know how to modify the collision area of a sprite and can create new sprites with a key press, we’re ready to move on.
We have some issues however with our bullets. Although a key press does create a new bullet, the sprite itself does not move.
Is there a way to get the bullets to move when fired from the ship? Can the bullets be aligned with the ship’s rotation?
Is it possible to keep the bullets onscreen for a set amount of time? Finally, can we get the ship to fire only one bullet at a time?
In this video, we will begin by giving each bullet fired from the ship sprite a speed and a direction. This is done with the setSpeed() command.
By adding the speed of the ship plus 10 to the speed of the bullet sprite, we ensure that the bullets always move faster than the ship.
We also adjust the angle of the bullet sprites so that they are fired in a straight line, no matter how much the ship is rotated.
Next, we adjust the size of each bullet so that it is in proportion to the ship and asteroids. We then create and adjust the life property, a variable that allows us to control the length of time the bullet stays on the screen.
Afterwards, we modify the condition of our IF statement so that only one bullet is fired per key press. This gives the user more control and creates a better experience.
Now that we know how to shoot bullet sprites at our asteroids from our spaceship, we are ready to move forward.
Can we easily change the functionality of our code? Why would we do so? Can we make our own custom commands and functions? Are there ways of sending information to our custom function? Finally, can errors in our code actually be a good thing?
In this video, we will begin to change the functionality of our code so that new sprites are created somewhere else. We do this to break up large pieces of code into smaller ones. This also makes our code easier to understand.
We start off by commenting out code that we no longer need and writing new code to take its place.
Next, we’ll create two local variables that only exist within our for loop. These variables will hold random numbers. Then, each time the loop runs, we will call a custom function, one that we create ourselves.
We have been calling commands, or functions, right from the start of this course. Yet those functions were already created as part of P5. We don’t need to write those functions because they already exist.
However, when we create our own custom function, it does not exist. We therefore need to build it ourselves. We do this using the function keyword followed by the name of the function, which in this case is called createAsteroid().
We then pass in parameters, information that we send to our function from where we called it. Here, 3 goes into the type parameter (variable), the value of px goes into x and the value of py goes into y.
We then use the values in our x and y variables in order to create a new sprite, which we put into the a variable, where a stands for asteroid. This is also a local variable, as it only exists inside the createAsteroid() function.
As we test our code, errors appear. This is actually a good thing since error messages usually give us information that allows us to fix our code. Here, we see that the name of the function does not match the call to the function.
Fixing this spelling mistake allows our code to run error free.
We now know how to break up our code into smaller pieces and call custom functions. We also learned how to comment out code that we no longer use.
Next, we learned about local variables and how to create and call custom functions. Afterwards, we learned to fix errors in our code. We’re now ready to move forward.
Can we load our asteroids in a random way? Why would we do so? Are there concepts that we need to learn first?
In this video, we will a step back in order to learn an important concept - concatenation. By understanding this important idea, we will be able to dynamically load images of our asteroids as they are created.
At first glance, concatenation appears to be a strange idea. We therefore start off with a simple example where we compare addition to concatenation.
As we do so, we see that concatenation behaves differently than addition. Whereas the plus sign adds numbers together, concatenation uses that same plus sign to takes strings, or strings and numbers, and place them side by side.
We can then use this behaviour in order to put 2 or more pieces of a string together. This enables us to load images dynamically as long as they have similar names.
Now that we know how concatenation works, we are ready to move forward.
How will we apply our concatenation skills? Is there a way to set the rotation speed of our sprites? Can the size of a sprite affect collisions?
In this video, we’ll use own newfound concatenation skills to randomly import images. Using the loadImage() command, we load individual images into a variable.
Next, we add the image to our asteroid sprite using the addImage() command.
Afterwards, we use the setSpeed() command to set both the speed and direction of our asteroid sprites. We also use the rotationSpeed() function to set the rotation speed for our sprites.
We turn on the debug mode in order to see the collision area of the asteroids. This allows us to adjust the size of the collision area.
We then use the type variable to set the type parameter of the asteroid. The type property is just like a variable, but one that is associated with the asteroid.
Afterwards, we scale the asteroids based on the value in the type variable. Next, we set the mass of the sprite in relation to its size. This will make bigger sprites have more impact on contact.
We then set and adjust the collision area of the asteroids using the setCollider() function. Finally, we add our asteroid sprites to a group. Our game is coming together nicely.
We now know how to randomly and dynamically load images into our asteroid sprites. We also can set and adjust their speed, direction and rotation. We then added these sprites to a group.
Why did we put both our asteroids sprites and our bullet sprites into their own groups? What is a group anyway? Why would we use them?
In this video, we will learn about groups. Groups are very similar to arrays, the pill-boxlike structures that we learned about earlier on in this course. In fact, groups and arrays are interchangeable.
When we think about groups however, they do not need to be in pill-boxlike structures. They can simply be thought of as collections. Here, we see that both the asteroids and bullets are in their own groups. Each group therefore, is a collection of sprites. This allows us to test collisions between members of groups.
We don’t need to know which individual bullet sprite comes into contact with its corresponding asteroid sprite.Instead, we simply ask whether any members of one group come into contact with any members of the other group. If the answer is yes, then a collision has occurred. We use the overlap() command to perform this check. Once a collision has occurred, we call a custom function. We give the function a descriptive name.
We also take a look at the properties of our asteroid sprites. Properties, like variables, are boxlike structures that contain both a name and a value. However, unlike other variables that may or may not have any connection, these variables are all associated with the asteroid sprite. We therefore call them properties of the asteroid sprites. Here, we see that the type property of the asteroid sprite contains the value of 1.
We now know about groups. We can test if sprites inside groups overlap one another and call custom functions when those collisions occur.
We also learned about properties, where we took a look at the type property of the asteroid sprite.
How would our asteroids respond to bullet hits? Would they break into smaller parts? How many parts would they break into?
In this video, we will look at the asteroidHit() function. Using the type property of the asteroid sprite, we’ll create new sprites by calling our createAsteroid() custom function.
This function is called twice for every hit, meaning 2 new sprites will be created.
Next, we learn to remove asteroids that have been hit by bullets. As we test our game, we see the consequences of not removing sprites that have been hit.
Not only are there too many sprites, but smaller ones are never removed. We therefore make sure that when hit, both our bullet and asteroid sprites disappear, using the remove() function to do so.
Afterwards, we turn off the debug mode in order to get a true feel for our game. Our ship can move around and fire bullets, and the asteroids respond by breaking up.
Finally, we scale down our ship in order to make it fit better. All that’s left to do now is to add some finishing touches.
Now that we know how to break up sprites by removing some and creating others, we can add finishing touches to our project.
What would make this game complete? Would sound effects enhance the user experience? When should these sounds occur?
In this video, we’ll look at adding sound effects to our game. Using the preload() function, we’ll load 3 sound effects into variables.
Later, we’ll use the play() command in order to play our sound effects.
We add a sound effect to when the ‘x’ key is pressed. This allows a sound to be played whenever the ship fires a bullet.
We add another sound effect to our asteroidHit() custom function. A different sound now plays whenever an asteroid is hit.
Next, we create another custom function. This function plays a sound when the ship bounces against an asteroid.
You did it! Congratulations! I hope you enjoy your new game. Feel free to change and modify the game to suit your style and tastes.
If you have any questions or comments, feel free to contact me at email@example.com. Have a great day!
As a graduate of the Multimedia program with a Bachelor of Arts degree (BA) from the University of New Brunswick in Fredericton, Canada, I am a specialist in new media. My post-graduate certificate in Interactive Multimedia from Algonquin College in Ottawa, Canada has taught me how to work effectively in groups and manage new media projects.
By completing 3 tracks at Treehouse, an online school based in the United States, I also have recent training in complex computer languages. My classical animation background from Studio Technique, an online school based in Montreal, Canada, has enabled me to understand motion and has tested my creativity.
As a professor here at Udemy, I have experience creating professional courses. I am proficient in the latest version of P5.js and the P5.play library. I am confident in my drawing and Fine Arts skills.
As part of my experience, I have created many technology videos as part of my YouTube channel. I have also designed and coded several websites for businesses and artists in the province of Quebec, Canada.
I work hard to bring you excellent courses. Right now, I am offering 2 courses entitled Adobe After Effects for All Levels: Step-by-step Animation andDrawing for All Levels: How to Design Cartoon Women.
En tant que diplômé du programme multimédia avec un baccalauréat en arts libéraux (BA) de l'Université du Nouveau-Brunswick à Fredericton, au Canada, je suis un spécialiste des nouveaux médias. Mon certificat d'études supérieures en multimédia interactif du Collège Algonquin à Ottawa, Canada m'a appris comment travailler efficacement en groupe et de gérer de nouveaux projets de médias.
En complétant 3 pistes à Treehouse, une école en ligne basé aux Etats-Unis, j'ai appris également de nouveaux langages informatiques complexes. Le cours de formation d'animation classique que j'ai compléter de Studio Technique, une école en ligne basée à Montréal, Canada, m'a permis de comprendre le mouvement et a testé ma créativité.
En tant que professeur ici à Udemy, j'ai de l'expérience en créant des cours professionnels. Je suis compétent en P5.js et la bibliothéque P5.play. Je suis confiant dans mon dessin et mes compétences en beaux-arts.
Dans le cadre de mon expérience, je l'ai créé de nombreuses vidéos de sujets technologiques dans le cadre de ma chaîne YouTube. Je l'ai également conçu et codé des sites Web pour les entreprises et les artistes dans la province de Québec, Canada.
Je travaille fort pour vous apporter d'excellents cours. En ce moment, je vous propose 2 cours intitulé Adobe After Effects pour tous les niveaux: Animation étape par étape et Dessin pour tous les niveaux: comment concevoir des femmes cartoon.