Color Botting Basics - Learn JavaScript by playing RuneScape 3/4

Our JavaScript RuneScape bot continues with part 3. Here we learn how to automate dropping logs from our inventory, how to use basic computer vision to find our targets to click on, how to randomize our clicks, and how to automate keyboard key presses to rotate our camera when we can't find any more trees to click on. This video covers the key concepts you need to know to build a video game bot with RobotJS.

This tutorial is for educational purposes only *

Full tutorial playlist:    • Learn JavaScript by playing RuneScape  

View the Code
GitHub Repo: https://github.com/learncodebygaming/...
RobotJS Documentation: http://robotjs.io/docs/syntax

Recommended JavaScript Resources
Eloquent JavaScript: https://amzn.to/3deUEfb or online edition at https://eloquentjavascript.net/
W3Schools: https://www.w3schools.com/js/default.asp

0:39 Clicking on multiple trees (the painful way)
4:56 Dropping logs automatically
8:50 Refactoring that code into a dropLogs() function
10:14 Testing RobotJS screen capture
14:08 Using pixel color matching
18:07 Arrays
20:21 Classic for loops
22:44 Introducing randomness
25:13 Finishing our computer vision function
28:42 Review of function return and if statements
30:05 Understanding fatal error messages
31:55 Automating key presses to rotate the camera
36:38 Recap

If your mouse is not moving to the correct coordinates *
Try this: https://github.com/learncodebygaming/...

Ok, so we've got a lot of things to cover in this part of the tutorial. We want to be able to move to different trees and chop them down, instead of waiting for the same tree to respawn. We also want to automatically drop the logs out of our inventory, so that it doesn't fill up with useless logs. And once we've done these things the painful way, I'm going to show you how to do pixel color matching, so that our code can actually see what's going on inside the game and it can try to find tree locations for us.

When we left off, our bot could simply click over and over again in the same location to chop down a single tree. Now let's use the same techniques to click on, and chop down, multiple trees.

You'll find it's quite difficult to find two pixel coordinate positions that will consistently cut down two trees, because as your character moves the pixel location of the tress also moves. I recommend cutting down two trees manually a few times until you get a consistent pattern. After you cut down tree #2, take a screenshot and use that to get the location of tree #1. Then manually cut down tree #1, take a screenshot, and use that to get the location of tree #2. The manually cut down tree #2 once more, so that your character is in the correct starting position for our code (because it will move our character from tree #2 to tree #1 as it's first step).

This is of course very fragile. We'll come back to this in a little bit.

As we have been developing our code, our inventory has been filling up with logs whenever we cut down trees. So far we've needed to discard those logs manually, which is pretty annoying, so let's write an automation to do that for us. To do this, first make sure your inventory is open, and then we need to determine the pixel position where those logs appear in our inventory on the screen. Once we've determined that, we can have RobotJS move our mouse to that position, then do a right click on it to open the item options dialog. From the current mouse position, we can then move down some pixels to the "Drop Logs" choice and click that. I found this position to be 70 pixels lower on the screen from the position of our initial click, so we can simply add 70 to the Y coordinate to get that position.

You could take this code and put it after each time we cut down a tree, but whenever you start duplicating code like that it's usually a good indication that you should create a function instead. So let's put it in a function called dropLogs(), which we can call in our main loop.

Now let's talk about simple computer vision using pixel color matching. In the RobotJS documentation, check out the screen.capture() method. This allows our code to take a screenshot at any point in time. That screenshot is returned as a Bitmap object which, if you read further down in the documenation, has a method on it called colorAt(x, y). When we call this method, it will return the color found in the screenshot at that pixel coordinate location, formatted as a hex color code.

To make sure we understand how to use these methods, let's write a quick test function.

Continue with the written tutorial, and see code samples, here: https://learncodebygaming.com/blog/co...