# Thread: Creating Elegant & Informative Progress Paints

1. ## Creating Elegant & Informative Progress Paints

Creating Elegant & Informative Progress Paints

What’s in this tutorial?
This guide will explain how to create and implement progress paint images in your SRL-6 scripts. I am an avid fan of high quality visual presentation, and users often appreciate helpful eye candy! If you have no experience in image editing beyond MSPaint, don’t worry. Creating fancy paints and images is not as complex as it seems. While you can achieve similar results from other image editing programs, I have found Photoshop to be the easiest software to use.

This tutorial is based around using Photoshop – other programs will likely have their own equivalents of the concepts discussed. Photoshop CS6 is used in the provided pictures. In earlier or later versions, the locations of some tools may be different.

Requirements

• Photoshop or another similar image editor (GIMP is a good, free alternative)
• A Simba script
• Creativity!

Types of Paints
You can paint shapes, colors, and images anywhere you want on the SMART client. It is usually best, however, to paint so that the important game elements are not obstructed. As a result, most scripts paint somewhere over the chatbox. Personally, I paint the main script progress report over the chatbox, while painting script status and other miscellaneous information on the edges of the mainscreen. Here’s an example from my mud runes script:

In the above example, I paint not only images, but also text and shapes in various places. This allows the user to fully understand what is going on during a run, as well as providing helpful information for me as I try to fix any bugs.

This tutorial will cover how to create the chatbox progress paint image, and then place it within a script.

Photoshop vs. Microsoft Paint
We’ve all used the good and trusty MSPaint. Depending on the task, MSPaint can actually be more useful than Photoshop when trying to perform very simple image edits. Beyond that, MSPaint doesn’t allow for a lot of interesting visual effects or styles. Photoshop, however, allows anyone to easily create an attractive, professional image.

MSPaint is a single-layer image editor. This means that everything you do in the program, like adding text or shapes, adds to one general image. Photoshop is a multi-layer image editor. If you add text or shapes in Photoshop, they occupy their own layers. These individual layers can be freely transformed, styled, and formatted however you like.

Creating a New Photoshop Project
For better learning, this tutorial will guide you through the entire paint creation process. I encourage you to go through the steps to become more familiar with the program! If you would like to skip these steps, download the template Photoshop files.

New File
We are going to create a brand new project file for our paint. Open up Photoshop, and click on File in the top left corner. A window will appear asking you to input some information for the new file.

For Name, you can title this file whatever you like. In our example, we have titled the new file “MyPaint.”

Next, go to the Width and Height fields, and edit the dimensions to 571x136 as shown. These are the typical chatbox dimensions that our image will be covering.

Go to Background Contents, select the transparent option.

Everything else can be left as they are. If you like, you can save these settings as a preset by clicking on Save Preset, so you don’t have to do this again! After clicking on OK, Photoshop will create the new project with a starting transparent layer.

If the layers screen did not appear, activate it via Window -> Layers.

The first element to take care of in a paint image is the background. Usually, this is a screenshot of the script’s activity. In my Barrows script, I use a screenshot of the barrows brothers’ crypts.

If I am not satisfied with in-game shots, I will search the Internet for cool desktop wallpaper-like images. Or you can make your own!

If the image you want to use is bigger than the chatbox dimensions, resize your working window by dragging out the bottom right corner. Then, decrease the current zoom percentage by editing the value in the bottom left corner.

Open the background image in Photoshop via File -> Open.

Click in the new working window that appears and select the entire image via CTRL-A. Copy the image via CTRL-C. Go back to the script paint working window, and paste in the image via CTRL-V. The image should appear within your script paint working window as shown below.

As we predicted, the background image is far too big for our small chatbox dimensions. We need to resize the background. To do this, click once on any of the squares around the image, located in corners and along the sides. After this, the Transform Controls will appear below the menu bar.

In between the W: and H: input boxes, activate the chain-link button. This will lock the dimension ratio so that adjustments will not stretch or shrink the image unnaturally. After doing this, you can either freely-resize the image in the working window, or edit the dimension percentages. If you want to freely resize while maintaining ratio, you can hold down the left SHIFT key instead of activating the chain-link button. Edit the dimensions so that as much of the image is visible as possible, as shown below.

While there is a lot of height left to be resized, if I were to adjust the dimensions any more while maintaining ratio, the width would become too small, leaving blank spaces. Find the best view of the background image you want, and when you are satisfied, press the ENTER key to confirm the image transformation.

Photoshop is still keeping track of the image parts we cannot see. We want to trim the image so that our background image has the exact dimensions of the overall image, else we will encounter problems when adding in style effects later. Do this quickly by selecting on the menu bar Image -> Trim…, and ensuring all aspects below are checked:

After clicking OK, you can change the window zoom back to 100%, and your workspace should look something like this:

We will add effects and style to the background image in a later section.

Adding Text - Script Title & Author
Now that we have our background image, the next step is to add some text. Select the text tool from the buttons on the left side and drag out the area where you want your text. After releasing the mouse, Photoshop will create a new text layer with these dimensions.

If the text input cursor is not flashing, click within the layer to start editing. Your text options will appear beneath the menu bar.

Cool Fonts
What sets script paints apart from the rest is a cool, unique font. Head over to a free fonts website and search for fonts that you like. I like to use www.dafont.com – it has a big database with really interesting work. Almost all of the fonts are freely shared for non-commercial use. Within the text options bar, select your desired font from the dropdown, as well as a suitable color by clicking on the colored box on the right. If you aren’t an expert on coming up with colors, you can use the color picker to select an in-theme color from your working window. The cursor automatically becomes a color picker when moving the mouse away from the colors window.

After you have adjusted and formatted the text to your liking, create a new text layer and repeat the process for however many extra text elements you want. I usually have script title, script author, and script statistics text layers.

Indeed, with a background image, the text can be hard to see at this point. We will add effects and style to the text in a later section to solve this problem.

We make paints primarily to show the user what’s going on during runtime. As a result, script statistics are the most important part! Creativity-wise, there is an unlimited amount of ways to add in statistics, but I will still provide an example.

Script statistics are typically updated on a paint image by drawing text on the SMART client. This is a separate process Photoshop imaging. The Photoshop image we are making will serve as the base background handled by Simba. Leave empty areas in your Photoshop project, anticipating where you will draw text later! I like to create header text like “Script Runtime:” in Photoshop and then have the actual time drawn on SMART.

I think that smaller text is often unclear when located over a background image, so I like to have a semi-transparent shape in between the background image and the statistics text. You can add shapes using the shapes tool on the left-hand side.

Notice that Photoshop created yet another layer for this shape. You can customize the color on the left-hand side, and then adjust the opacity in the layers interface, as shown below.

After this, you can add a text layer on top of the semi-transparent shape, with the end result being:

Effects & Styling
The example paint so far doesn’t look that great. It almost looks like something basic we could have made in MSPaint! When you have laid out all the layers you plan on working with, it’s time to add some effects and style. Here’s what a paint image might look like after adding some basic effects:

Up until now, we have mostly been leaving the layer interface alone. The power of multi-layer editing really comes forward in this next step. In the layer window, right click on any layer you wish to stylize. Select Blending Options. A window will appear that looks like this:

The blending options window is your hub for adding common effects to layers. On the left side there is a checkbox list of effects to add to the layer you selected. Each effect has its own customization screen with unique options. Feel free to experiment and explore with each one – you can make some pretty cool effects by just playing around!

Bevel & Emboss, Contour, and Texture – enabling this effect will raise the layer in a pseudo-3D way, making it look like a push button, depending on your customization.

Stroke – this effect adds a specific amount of pixels around the borders of the layer, useful for adding borders around shapes, or clarifying text.

Inner Shadow – this effect creates a shadow from within the layer.

Inner Glow – this effect creates a glow from within the layer.

Satin – this effect is very interesting; it modifies the colors of the layer with complex contour patterns.

Color Overlay – this effect adds a color over the entire layer, useful for altering color schemes of images that don’t fit the overall color scheme of your paint.

Gradient Overlay – this effect adds a color over the layer, but across a gradient which can be customized.

Pattern Overlay – this effect adds a pattern over the entire layer.

Outer Glow – adds a glow effect around the borders of the layer.

The cool thing about blending options is that they all conform automatically to the elements within the layer. Adding a drop shadow to text will add shadow around each letter individually!

Here is a comparison between no effects and effects:

A creative recommendation is to not over-effect. We all know how annoying overly-edited Call of Duty quick-scope trick-shot videos are on YouTube. Simplicity can be the most elegant. A few added strokes and shadows is sometimes all you need.

Other images can be added in just like the background image. They will simply be added in as new layers with their own blending options settings. The template PSD contains a gold coins image layer as an example of this.

Photoshop’s Results
Here are some paint images I have made so far. Because of the ease of Photoshop, each one took about five minutes to make from scratch. I encourage you to come up with your own cool, unique paint style!

Exporting the Image
When you are ready to use the image in a script, export the PNG file via File -> Save for web… and click OK. If you plan on adding an auto-downloading feature to your script (explained later), upload the PNG file to a popular image-hosting website like www.imgur.com.

Save the PNG image in an easily accessible directory within your Simba folders. I like to create a folder within C:\Simba\Scripts\ to contain all images and other assets for each script, such as C:\Simba\Scripts\ClarityMudRCImages\.

Implementing in a Script
Now that we’ve spent awhile making the paint image, we want to add it to a Simba script! Simba and SRL-6 each have a lot of useful functions and procedures that make this an easy process.

Add a global integer variable called scriptPaintBMP to your script. Sometimes, users don’t want to see the paint, so if you want to add user convenience (always a plus), add a global boolean variable called showScriptPaint. Somewhere after calling setupSRL(); insert something similar to the following code:

Simba Code:
if showScriptPaint thenbegin  scriptPaintBMP := loadBitmap(appPath + '[IMAGE PATH – for example ] /Scripts/ClarityMudRCImages/scriptpaint.png');  fastReplaceColor(scriptPaintBMP, 0, 1);end;

You only want to call this once during the entire script run, so it is best inserted before the main loop starts. Modify the image path to your own paint’s location. If you have any pure black colors (color of 0), these will be displayed as transparent unless you either change the BMP’s transparent color or use the fastReplaceColor quick fix included in the code above.

Within your paintProgress(); procedure (or wherever you decide to paint progress in your script), add the following code:

Simba Code:
if showScriptPaint thenbegin  smartImage.clear;    smartImage.drawBitmap(scriptPaintBMP, Point(3, 461));end;

This will paint the script paint over the chatbox. Now, after the smartImage.drawBitmap();, you can draw any text or shapes you want over the image you created! You will want to calculate all the variables, such as XP or XP per hour beforehand. Here is sample code from my mud runes script:

Simba Code:
costPerRune := (waterRune);profitPerRune := (mudRune - costPerRune);runesCrafted := tripsCount * essencesUsed;gainedXP := tripsCount * 9.5 * essencesUsed;xpPerHour := Round(gainedXP * (3600.0 / (GetTimeRunning / 1000.0)));runesPerHour := Round(runesCrafted * (3600.0 / (GetTimeRunning / 1000.0)));{…}cost := (necklacesUsed * bindingNecklace) + (ringsUsed * ringOfDuelling) + (pouchesUsed * pouchCost);if (transportMethod = 'Telescroll') then cost := (cost + (tripsCount * teleportScroll)) else  cost := (cost + (tripsCount * willowLog));costPerHour := Round(cost * (3600.0 / (GetTimeRunning / 1000.0)));profit := (runesCrafted * profitPerRune);profit := profit - cost;profitPerHour := Round(profit * (3600.0 / (GetTimeRunning / 1000.0)));{…}if showScriptPaint thenbegin  smartImage.clear;  smartImage.drawBitmap(scriptPaintBMP, Point(3, 461));  smartImage.drawText(ToStr(TimeRunning), Point(122, 517), 'smallChars', true, clWhite);  smartImage.drawText(ToStr(runesCrafted) + ' crafted', Point(100, 538), 'smallChars', true, clWhite);  smartImage.drawText(ToStr(runesPerHour) + ' crafted/hr', Point(133, 560), 'smallChars', true, clWhite);  smartImage.drawText(profitString + 'gp', Point(475, 482), 'smallChars', true, clLime);  smartImage.drawText(profitPerHourString + 'gp/hr', Point(475, 499), 'smallChars', true, clLime);  smartImage.drawText('Operation Costs', Point(430, 524), 'statChars', true, clWhite);  smartImage.drawText(costString + 'gp', Point(440, 535), 'smallChars', true, clRed);  smartImage.drawText(costPerHourString + 'gp/hr', Point(440, 550), 'smallChars', true, clRed);end;

In the above example, I first calculate all the variables I want to display on the paint, such as runesCrafted and profitPerHour. Then, if the user previously set showScriptPaint to be true, I clear the SMART drawing canvas, as it is about to be updated with new stuff. Finally, I draw the paint on SMART and all the text information I wanted to display. The parameters for drawText are as follows:

Simba Code:
smartImage.drawText('text to draw', point(x, y), 'desired font name', shadow or no shadow, text color);

You will have to guess and check the points to draw each text element. In Photoshop, you intentionally left blank spaces for SMART text to be drawn, so you need to adjust the draw points in the script code until the text occupies the areas you want. The resulting progress paint combined with properly adjusted SMART text drawing looks like this:

Because it is inconvenient for your script users to go about downloading the image, creating new directories and such, you can add in an automatic installation feature to your script. To do so, first insert the checkForFiles(); procedure, which will scan the user’s computer to see if the image exists already. If it doesn’t it will automatically download and save it to a specified folder.

Simba Code:
{PROCEDURE -- checkForFilesPurpose: Checks to see if file downloading is required.Comments: By Kevin, modified by Clarity}procedure checkForFiles(filePath, message, link: string);var  progFile: longInt;  fileName: string;begin  fileName := AppPath + filePath;  try    if not fileExists(fileName) then    begin      writeln('-- INSTALLATION STATUS: ' + message + ' does not exist - Downloading now.');      progFile := createFile(fileName);    end    else    begin      writeln('-- INSTALLATION STATUS: ' + message + ' exists.');      exit;    end;    closeFile(progFile);    progFile := rewriteFile(fileName, false);    writeFileString(progFile, getPage(link));    writeln('-- INSTALLATION STATUS: ' + message + ' has been downloaded.');  finally    if (progFile > 0) then      closeFile(progFile);  end;end;

Don’t modify this procedure, you will specify the download link and destination path in the next procedure snippet. Put the installAssets(); anywhere in your script below checkForFiles();.

Simba Code:
{PROCEDURE -- installAssets  Purpose:  Determines whether files exist and dictates their installation.  Comments: None.}procedure installAssets;begin  writeln('Please wait...now installing [MY SCRIPT NAME] image assets to your computer...');  if not directoryExists(appPath + 'scripts/[MY SCRIPT NAME]Assets/') then  begin    try      createDirectory(appPath + 'scripts/[MY SCRIPT NAME]Assets/');      writeln('Created a new folder in Simba/Scripts/');    except    end;  end;  checkForFiles('scripts/[MY SCRIPT NAME]Assets/scriptpaint.png', 'Script Paint', 'http://i.imgur.com/XgZdqsw.png');end;

installAssets(); will check to see if the assets directory exists before trying to write any files there. This is important to avoid any access violation errors. This procedure needs to be modified to suit your specific image download and destination.

After you check for the directory, call checkForFiles(); as many times as you need. The parameters are as follows:

Simba Code:
checkForFiles('[Image Destination Path]', '[File Title for Debug]','[Internet URL of Image]');

Once you have completed these two procedures in your script, call installAssets(); any time before you load the bitmap. For example:

Simba Code:
installAssets;if showScriptPaint thenbegin  scriptPaintBMP := loadBitmap(appPath + '/Scripts/ClarityMudRCImages/scriptpaint.png');  fastReplaceColor(scriptPaintBMP, 0, 1);end;

The end result is very convenient for everyone: users only need to download your Simba script file, and when the script runs, everything will be automatically installed and the paint will show up. You can do this for any file you want automatically added to a person’s computer, like a SPS map or INI file. Obviously, don’t use this to download malicious files. Doing that is not only lame but also obvious.

Conclusion & Template PSD
That should be about it for making and adding paints. If you have any questions or suggestions for elaboration, feel free to post!

Best of luck in your botting endeavors,
~Clarity
Last edited by Clarity; 10-27-2014 at 07:55 AM.

2. Awesome work Clarity! Hopefully this will lead to fancier paints!

3. Nice tutorial! GIMP is also a reasonable free substitute for photoshop if anyone prefers that.

4. Thanks a lot Clarity! i've been waiting for this

5. This is godlike. 10/10 will use.

6. My pleasure Feel free to post with any questions, or if you want something explained more in the tutorial!

7. nothing will ever defeat my mspaint creations!!!

hehe seems like a nice guide though!

8. You probably already know this, but it's worth noting that you don't need to click the chain-link button to lock the aspect ratio and can instead just hold down the left SHIFT key while resizing the image manually. Not much of a difference, but it is slightly faster.

Either way, this is an excellent tutorial, +rep!

9. Originally Posted by Incurable
You probably already know this, but it's worth noting that you don't need to click the chain-link button to lock the aspect ratio and can instead just hold down the left SHIFT key while resizing the image manually. Not much of a difference, but it is slightly faster.

Either way, this is an excellent tutorial, +rep!
Yeah, I always resize via editing percentages but that's definitely a good tip for those who want to do it freely. Added it in!

Originally Posted by Ashaman88
nothing will ever defeat my mspaint creations!!!

hehe seems like a nice guide though!
For you:
Last edited by Clarity; 10-27-2014 at 01:22 PM.

10. Thank you.

11. Ya'll are gonna like when you can create interactive progress reports.

12. Originally Posted by Olly
Ya'll are gonna like when you can create interactive progress reports.
That will be great! Is there any information about this out yet or will we just need to wait patiently?

13. SRL Junior Member
Join Date
Sep 2010
Posts
87
Mentioned
3 Post(s)
Quoted
25 Post(s)
Excellent tutorial!

14. Originally Posted by Olly
Ya'll are gonna like when you can create interactive progress reports.
Good thing I have a guide about doing that

EDIT: But then again, the new simba shows the incorrect coords for some people, so it's not of much use
Last edited by Kyle; 11-06-2014 at 05:41 PM.

15. @Clarity; It's possible to add paint to ogLib scripts as well correct?

16. Originally Posted by Clutch
@Clarity; It's possible to add paint to ogLib scripts as well correct?
Yep! Have a look at graphics.simba within the misc folder

17. Thanks for the tut, finally got rid of the drawText proggies on some of my scripts.

18. Originally Posted by Clarity
Yep! Have a look at graphics.simba within the misc folder
Sweet, looking at it now!

19. SRL Member
Join Date
May 2012
Posts
499
Mentioned
23 Post(s)
Quoted
228 Post(s)
You forgot to mention 1 important step @Clarity
Simba Code:
smartEnableDrawing := True;

20. Sweet as guide, adding it into my script now!

E: Would you happen to know where I could find the list of text colours? Thanks!

EE: Would you also happen to know where I could find all the fonts aswell? ThanksThanks!

21. Originally Posted by indirectMW
Sweet as guide, adding it into my script now!

E: Would you happen to know where I could find the list of text colours? Thanks!

EE: Would you also happen to know where I could find all the fonts aswell? ThanksThanks!
SRL-6 Colors from globals.simba:

Simba Code:
clWhite   = 16777215;  clBlack   = 0;  clRed     = 255;  clGreen   = 32768;  clBlue    = 16711680;  clPurple  = 8388736;  clYellow  = 65535;  clAqua    = 16776960;  clOrange  = 26367;  clFuchsia = 16711935;  clTeal    = 8421376;  clNavy    = 8388608;  clGray    = 8421504;  clLime    = 65280;  clMaroon  = 128;  clSilver  = 12632256;  clPink    = 11772650;

To see available fonts, navigate to your fonts\ folder in Simba\

22. Originally Posted by Clarity
SRL-6 Colors from globals.simba:

Simba Code:
clWhite   = 16777215;  clBlack   = 0;  clRed     = 255;  clGreen   = 32768;  clBlue    = 16711680;  clPurple  = 8388736;  clYellow  = 65535;  clAqua    = 16776960;  clOrange  = 26367;  clFuchsia = 16711935;  clTeal    = 8421376;  clNavy    = 8388608;  clGray    = 8421504;  clLime    = 65280;  clMaroon  = 128;  clSilver  = 12632256;  clPink    = 11772650;

To see available fonts, navigate to your fonts\ folder in Simba\

Thank you Clarity! Will definitely be handy knowledge!

23. Hey @Clarity; I have a quick question for you or anyone else who knows the answer.

Is there anyway to put text in between the text it's printing out? Like when it prints how many logs it's chopped and how many it will chop per hour, is there a way I can put text like '/' in the middle of them? At the moment it gives an error when attempting to do (choppedTrees + '/' + logsHR).

Simba Code:
smartImage.drawText(ToStr(choppedTrees, logsHR), point(38, 399), 'xpchars', true, clSilver);  smartImage.drawText(ToStr(fletchedBows, bowsHR), point(246, 399), 'xpchars', true, clYellow);  smartImage.drawText(ToStr(logsBurnt, logsHR), point(137, 399), 'xpchars', true, clRed);
All help is appreciated!

24. Originally Posted by srlMW
Hey @Clarity; I have a quick question for you or anyone else who knows the answer.

Is there anyway to put text in between the text it's printing out? Like when it prints how many logs it's chopped and how many it will chop per hour, is there a way I can put text like '/' in the middle of them? At the moment it gives an error when attempting to do (choppedTrees + '/' + logsHR).

Simba Code:
smartImage.drawText(ToStr(choppedTrees, logsHR), point(38, 399), 'xpchars', true, clSilver);  smartImage.drawText(ToStr(fletchedBows, bowsHR), point(246, 399), 'xpchars', true, clYellow);  smartImage.drawText(ToStr(logsBurnt, logsHR), point(137, 399), 'xpchars', true, clRed);
All help is appreciated!
Simba Code:
smartImage.drawText(toStr(choppedTrees) + ' / ' + toStr(logsHR), point(38, 399), 'xpchars', true, clSilver);

Iirc you have to call toStr() on both of the two non-string variables before you can concatenate them

25. Originally Posted by KeepBotting
Simba Code:
smartImage.drawText(toStr(choppedTrees) + ' / ' + toStr(logsHR), point(38, 399), 'xpchars', true, clSilver);

Iirc you have to call toStr() on both of the two non-string variables before you can concatenate them
Thanks a heap man for such a quick reply! Id rep you right now if I could...

E: Doesn't seem to actually print the text I want, rather just making a space...