Agar.io is a fun, online game that involve players competing against each other to grow in size. Each player controls a cell, and the goal of the game is to gain as much mass as possible by eating other, smaller cells while avoiding larger cells. The game ends when a player’s cell gets eaten by a larger cell. It is a simple, competitive and highly addictive game, and something you can make on your own! In this tutorial, we will guide you through building your own Agario using Scratch.
Building Agar.io with Scratch
Scratch is a visual programming language and platform that allows users to build interactive stories, animations and games. It is designed for beginners to computer programming with no prior experience, and serves as a great learning resource. We will use this great tool to build our very own Agar.io game.
1. Adding the background grid
Start by creating a new Scratch project, and deleting the default sprite. We will upload our own sprite, which will serve as a background grid. You can download the image below, and upload it as a new sprite.
This isn’t the best-looking grid, but it will do for the purpose of this tutorial. Now, we need to make the background really large, for which we will use a special trick.
- Go to the Costumes tab, and add a new blank costume. By default, this should be named “Costume 1”. Put this blank costume before the main grid costume
- Go to the Scripts tab, and add a “when green flag clicked” block which you can find in Events
- Add a “switch costume to” block (Looks) underneath, and choose the blank “Costume 1” from the drop-down
- Add a “go to x y” block (Motion) underneath with 0 value for both x and y. This will be the center of the grid
- Add a “set size to” block (Looks) underneath with a value of 300%
- Finally, add a “switch costume to” block and select your grid from the dropdown
This script should make the background grid really big. The next step is to add a player cell.
2. Creating the player cell
Now, we need to create the player cell sprite for the game. Click on the “paint new sprite” icon, and draw a circle using the Ellipse tool. Hold the Shift key while drawing to make a perfect circle. Draw in the center of the canvas or use the “set costume center” tool to mark the center. We will name this sprite “cell” and will refer to it as such throughout this article.
In order to make the cell appear to be moving, we will make the graph move. This means that the cell will always stay in the center.
- Add another “when green flag clicked” block in the Scripts section
- Add a “forever” loop underneath
Within this forever loop, we will change the x and y positions based on the position of the mouse. This is achieved by using the “change x by” block under Motion, along with the “mouse x” block under Sensing. This will allow the grid to slide left or right, but the motion will be too fast. To slow it down, we need to multiply the x mouse coordinate with -0.01. This can be done using the multiplication operation under the Operators section. The entire script should read as “change x by (mouse x) * 0.01”. We need to do the same for y coordinates as well.
Food spawning code.
Next I am going to make those smaller cell, which the main cell is going to eat in order to grow bigger. Paint a new, small circle in different color. Make sure that it is centered. Name this one ”food”. Now I am going to give it some code, and I am going to say when the game starts, forever make a clone of its self. That is going to make too many clones, therefore I will have to slow down the clone production a little bit. Add one ”when green flag clicked” block. Under it add one ”forever” block and one ”create clone of food’ block. Then add one ”wait 3 seconds” block, to slow it down. Then add the ”when I start as a clone”, remember that clones to listen to this block only. I am going to make the clone food spawn in random positions on the stage. Add one ”go to x y” Motion block, and I am going to use the random number generated ”pick random” block, to put them in random positions. Set the random number spawn range from -240 to 240 for x coordinates, and duplicate this Operators block and place it for y coordinates as well. Run the program and see if it works. Every 2.5 seconds you should see a new food particle to appear. Notice how they are not moving. We need them to make them move exactly as the background is. I am going to copy the ”forever change x and y” script to the second sprite. Place it under the ”when I start as a clone” script. Change the multipliers to -0.015 for better gaming experience. The clones are now moving with the background. You will notice that the food is following the cell, because it does not execute the script that is made for clones. To make it act like the rest of the food particles, simply add the ”hide” block from the looks category, and place it under the ”when green flag clicked” block. And make sure that you add the ”show” block under the ”when I start as a clone” Operators block.
Next I am going to make code that will make the main cell eat the smaller ones. Actually, what will happen is that the smaller cells will be deleted, when I touch them. Add one ”delete this clone” block for the food sprite. Place it inside an ”if then” statement block. The statement will be that, if It touches the main cell sprite, it will disappear. Go to Sensing category, and add one ”touching” bock inside the statement window, and in the drop-down menu choose ”Cell”. Put it inside the ”forever” loop. Now the food will disappear when I touch them, appearing to be eaten. To make the food appear in different colors, add the ”change color effect” Looks block inside the main ”forever” block for the food sprite. Now I will make the cell grow bigger when it consumes food. Click on the character, and add one ”when green flag clicked” Event block. Under it, add one ”set size to 50%” block. This will make the cell start at its normal size. Now, add one ”forever” block, and inside it add the ”if then” statement. Inside the conditional window add the ‘touching food” block. And when the cell touches the food, we want it to grow bigger. To do so, add one ”change size by 10” Looks block. As I run the program, I noticed a big problem. As soon as I touch the food sprite, the program deletes it, and it does not make the cell grow bigger. To fix this, click on the food sprite, and add one ”wait 0.01 sec” block above the ”delete this clone’ block
I hope you enjoyed the how to make agar.io on Scratch.
I recommend you taking this course to learn programming basics. It will help you understand such concepts as variables, coordinates, scripting, objects, loops, conditional statements, Boolean, lists and much more! It will get you started to program your dream projects! I offer you a 25% discount price in this link: https://www.udemy.com/scratch-programming/?couponCode=SPECIAL