Create Your First Java Game with Processing Library | Saran Siri | Skillshare

Create Your First Java Game with Processing Library

Saran Siri, Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
14 Lessons (31m)
    • 1. Introduction to Java Game with Processing Library

      0:33
    • 2. Basic - Draw a Rectangle

      2:08
    • 3. Basic - Draw an Animation

      2:00
    • 4. Basic - Draw Shapes

      3:25
    • 5. Basic - Detect Mouse

      1:36
    • 6. Basic - Add Clickable Button

      2:00
    • 7. Basic - Detect Keys

      1:33
    • 8. Basic - Add Image

      1:24
    • 9. Basic - Add Sound

      1:17
    • 10. Basic - Add Actor

      2:06
    • 11. Game - Add Player

      5:20
    • 12. Game - Detect Collision with Enemy

      2:26
    • 13. Game - Show Score

      3:47
    • 14. Game - Share Your Game

      1:27

About This Class

This course benefits anyone who wants to start making 2D games. We use Java and Processing to cover basic game development. You should already be able to write Java at the beginner level.

Section 1: Basics

  • Install Processing
  • Draw a rectangle
  • Show how to animate objects
  • Detect mouse and keyboard inputs
  • Make a clickable button
  • Add image and sound
  • Create Actor class

Section 2: Game

  • Create Player
  • Detect collision between objects
  • Add score system
  • Publish the game

Transcripts

1. Introduction to Java Game with Processing Library: Hello, everyone. Welcome to Java game with processing library. In this course, we gotta learn how to make sure the games using Java with the help of processing library. All my videos are highly did a few free to post at any time. We're going to start with doing shapes, working with mouse and keyboard, adding images, sounds and active. After we finish all basics, we're gonna make a game using what we learned. Thank you. 2. Basic - Draw a Rectangle: Let's start form dollars processing. Go to processing the Orc Quick ontology and dollar diversion of Yours minus Mac OS, and one is done exhibit and we were run to processing on windows. Find processing. Don t xy to test it out. Just click run. There are three men functions in processing the 1st 1 Your settings in settings said that skiing size 600 by six send it. The next function is strong. As the name suggests, you draw stuff in here for example of a draw. A rectangle rectangle needs full barometers. X Why with and height typing r e c T. I would put my rectangle at 00 The with will be 100 and high to be 200. So 00 is here. This is the with. This is the height. This is the positive X. This is the positive Phi. You can change the color. Let's say I want to make it great. So I used a few here it has to be RGB foment rate is 100% greeny 0% and blew it 0%. The third function is set up. It is called before a draw function, for example, I could remove the outline of the rectangle by calling North Drug, and that's it for this video. Next video of a Megan move. 3. Basic - Draw an Animation: the draw function in processing is running 60 times per second. For example, if I print out Hello Hello. We appear on the screen 60 lines per second. I would create a variable I and you don't set up. It starts with zero Then it keeps going up by one every frame. Then I unfriended out Now you can see how fat it iss I would come in this one since the eyes going up. I could use this to change the explanation of the rectangle. As exposition goes up, our rate rectangle goes to the right side. Send goes forward a y position But right now it doesn't look like an animation because we're trying to pent on the same paper. We can clear the paper on every frame by using background function. Nice. More like an animation. This add another rectangle. Have you made it blue and it moves downwards. That's it for this video. Next video, we withdraw emotions 4. Basic - Draw Shapes: you start by removed no stroke function and I'm going to draw a line so you need to points to draw a line. Don't start at 00 and it ends at the center of the screen. I can use within height how we make it blue. Also, we can change the size of the stroke. Next, you're going to draw a triangle. Let's make it great. So try and go needs three points. We'll start at a center of the screen, then go to the top right corner and then up at it. Right. Cynda, we can use no stroke after drawing the line. Now let's draw a circle. Gonna make a jail. We need X y with and height just like rectangle. Oh, you see lips for the SoCal, It has the same with and height. But if I changed the height to 400 este lips Now this door half so called just like the lives we have X y within height. But you can specify when to start and when to stop. We have to use our for example. It starts at 45 degrees, which is partly why did by four, and it ends at 3 60 which is two pi. So this is CEO. This is 45 degrees all the way to 3 60 The last one is to display a text of a mega Dwight. Let's say hello at the center of the screen. Notice that hello starts from here but the text chose a both the y direction. So be careful about the co ordinates and that's it for this video next video, all we show you how to detect mouse position. 5. Basic - Detect Mouse: Let's start by drawing a black so called I can replace the position of the so called with most X and mouse. Why and now So call follows my mouse. Most pressed is used to shake whether you so click something on the screen. If Mouse pressed, he goes true. I wish changed the color of the circle to black when mouth breast is false. So who is white now? Whenever I click, it turns black. We can also use a function code mouse pressed and, of course, inside here we run whenever Molly expressed. Next video. What we show you how to make a button? 6. Basic - Add Clickable Button: Let's create a button now to make it clickable. We have to detect if Maoists breast and when it's pressed, mouse's inside a rectangle Somali expressed and mosaics this between X and the width of the rectangle. Same goes for the mouse y. So when it's clicked, let's make it black because we're gonna use a lot of these. It would be better if recreate a function for you now we can. Libya's thes with is inside, So you have you have another button. We just shame this. That's it for this video on the next video. Always show you how to to take keys from the keyboard. 7. Basic - Detect Keys: Let's create a black circle, just like detecting with the mouse click we can use Key Pressed to shake with the any key is pressed. Now you five press any keys. It turns black. But if you want to change the color to blue when be key is pressed. Michelle. If key equals collector, be now. Only when I pressed be it turns blue, but it went in for a space bar. It turns black, and like Mount Crest, you can use their own function. For example, I print Akita expressed. Now I'm pressing a and that's it. Next video we wish or image on the screen. 8. Basic - Add Image: first, you need an image. I have a notion image, which is 300 by 300 pixels going to a sketch and show sketch folder. You hear you can drag ocean to this cash for her, then create a variable P image. Load the image file inside set up function. It has to be the full name. Then draw it using image function. I'll be droid at 00 because the size 300 this half of the screen. If it wanted 50% smaller, we can add two more parameters within height or we can make it through a screen. That's it. Next video we show how to play sounds. 9. Basic - Add Sound: I have an attack. Scientific year two important fighting your project. Done, Dragon inside a sketch photo. You cannot take the sound yet, so you have to add fired here. Now we need to import sound library. Go to sketch important library and library and search for sound. Pick this one and install it. Then we need to import processing the sound of star Create a sound fire. I would name it attack then in a set up function create a new sound fire and used the food name. So when the mouse clicked, it plays sound. When does it next video always showed how to make an actor, so it's more organized. 10. Basic - Add Actor: where we have so many shapes in a draw function. It's kind of hard to keep track wishes. Wish So we're going to create an actor class to help us more organized. Get a fire hall actor. It's going to be a class actor. Should have basic properties such as X. Why, with a night, it should also have constructor the function to draw the actor itself, I would call it display. Another one is update function two up. There is logic and position. I would put all parameters inside a constructor, so X y with and height can be excited once is created. Now let's draw this actor as a SoCal and for the update function moved to the right side. Now let's go back to the sketch class and create this factor. So after a starts at the center after a can draw itself using display function, and once it is done, it can up their Dealogic, which is to move. And if you have two acres, you can see the pattern here. It makes draw function so much cleaner. We are now ready to make a game. Thank you 11. Game - Add Player: we would create a new project Cooking Fire New seven and call you gain. Did we have the same functions? The concept is everything on the screen should be an actor, so we re create an act of first and it do have X. Why, with height and color in a RGB foment, for example, this is blue color a, uh see and be now let's create a constructor act. I should have display an update function and we will draw a so called using color and see it does nothing in the update function. Test it now we would create a player player also has all properties and functions like active class. So in here we were used job or inheritance and May player as a subclass of active by typing in extends, Actor sent all parameters to the super class player. We share the same display function over right update function, for example. Player can move now Let's taste it so the act of states do and the players moving. That's good. We were delayed the test in the player at another function to take 20 years breath from the man class. I was tested our first by bringing peace in the game. When key expressed, we will let the player handles the logic by itself. It looks not. Go back to the player, maybe add variable speed. Let's make it two pixels per frame at another variable called direction and let's say zero is left. One is right to his up and three is down. So when we pressed, a direction will be zero, which is left now in the update function. If direction is left, player should move to the left by this beach. Be careful that up direction means negative by access and list on player at no direction. If we press a play is moving to the left, Then I pressed D. We can change the speed. It is too slow. We still have the problem that the players you don't go outside of the screen to fix that once the position of the player is updated. If either X or Y is outside, we should tell the port player back inside a screen. For example, if X is negative till pour them back to zero. Now players stays there until I'm moving downwards. Next video, I will show you how to do collision detection with the enemy class 12. Game - Detect Collision with Enemy: enemy is also an actor, so I can use extends. Actor. I'll create a new enemy, put it below the player and make it rate. Now Good enemy should be able to move, so I'm gonna make it bounce back between both. It has a direction just like player, but it starts moving to left side and also the speech. Let's make it faster than player. We use the same course to move from player class now to make it bounce back between two wolves when it's outside the left screen, we wish in this direction make it go to the right side instead. Now, when player hits the enemy players who die in respond at the center of the screen. To do that, we need to find this town speech. You're in enemy and player. If the circles intersect, players should die. We can calculate the distance between player and enemy using this function. When we moved player cross to the enemy, you can see the number decreases, and when the distance is less than a equals to some of both ladies, that's when they collide because with and height of the circle are the same, we confined radius by with divided by two player least bone at the center. For the next video, we will add coins 13. Game - Show Score: coin is also an actor we can use. Coin extends actor and let's go back to game and create a coin. Quincy put it to the left side, make it smaller and make a deal. We would draw it before drawing player. Now, if player hits, coin players should collected and corn will be responds on Mario's. So we were at another collision. Detection between player and coin. Don't respond to coin somewhere else. Get the random number between zero and the width of the screen. Also the height. That should be more than one coins. So we're going to make a list of coins, create a new variable coins, make a loop to ANFO corns in peak random position. Then we have to display each coin for each coin. See inside coins. See the display. Same for update function and a collision. We'll use the same name. This will fire distance between every coin and the player. Now player to track how many coins in has so go back to the player. Create schools. Start with zero. Go back to game when player collided coins Player that scores should increase by one. We we don't play your schools. Last thing when player least wounds, the score should be recent. That's it. We will publish our game on the next video. 14. Game - Share Your Game: before sharing this game to your friends. We have a couple of things to set up first. If you want to change the game title in a set of function type in so faced on state title, it's called my first game. Also, we can change the icon image by loading a mess we want. Then type in surface. Start said Icon. Now I call it changed to export the game. Go to file export education and shoes platforms You want to export for the windows copy of the entire folder Because in order to play, it needs data and live photos on Maga s Lavery is included in one fire. All the next chair. Entire photo like windows. You can remove the job are fire if you don't want others to see your courts and does it. Thank you.