How to Make a Drawing Tool

This tutorial explains how to create a drawing tool.

What is a drawing tool?

A drawing tool is something that is used to help people draw stuff, the one we are using can do several things.

What will this drawing tool do?

The drawing tool will be able to change the pen's size, color, saturation, brightness, and transparency.

What is needed?

First, 3 sprites and 2 backgrounds are needed. One sprite should be named "Draw Tool", another should be named "Color State", and the final sprite should be named "Pause State".

One background should be named "Paused" and the other should be "Unpaused". Both of the backgrounds should be blank.

We also will need to use the Pen Extension.

The Variables

• (Brightness:) // This should be a slider. Min: 0.00, Max: 100.00
• (Color:) // This should be a slider. Min: 0.00, Max: 200.00
• (paused?) // Can be either yes or no. This states if it is paused or unpaused.
• (Pen Size:) // This should be a slider. Min: 1.00, Max: 200.00
• (Pen Up?) // Can be either yes or no. This states if the pen is up or down.
• (Saturation:) // This should be a slider. Min: 0.00, Max: 100.00
• (Transparency:) // This should be a slider. Min: 0.00, Max: 100.00

Draw Tool Sprite

This is a small ball, just use "ball-c" from the Sprite Library.

Файл:Draw Tool.svg

This is the Draw Tool sprite.

Color State Sprite

This is just a big red square that is set at 0,0. Please note that this sprite will not display the changes to the brightness.

Файл:Color State.svg

This is the Color State Sprite.

Pause State Sprite

This sprite will show when the tool is paused. The black bar is where the settings to change the drawing stuff will be.

Файл:Pause State.svg

This is the Pause State sprite.

The Code

We are going to start with the easiest part of the code.

Pause State Code

when green flag clicked
show
go to x:(0) y:(0)

when [p: v] key pressed // this states what happens with this sprite when it is paused
if <(paused?)=[yes]> then
   hide // hides this sprite when unpaused
else
   show // shows when paused
   go to [front: v] layer
end

Color State Code

when green flag clicked
show
go to x:(0) y:(0)

when green flag clicked
forever // this is to change the color state that this sprite is in, it reflects a close replica of what the drawing color will be, but it will not be able to change the brightness    if <(paused?)=[yes]> then
   set [color: v] effect to (Color:)
   set [brightness: v] effect to ([100]-(Saturation:)) // this block souldn't have been named brightness when it doesn't even change the brightness, when testing was being done we found that this block changed the saturation of the sprite and not the brightness
   set [ghost: v] effect to (Transparency:)
end

when [p: v] key pressed // this states what happens with this sprite when it is paused
if <(paused?)=[yes]> then
   hide // hides this sprite when unpaused
else
   show // shows when paused
end

Draw Tool Code

when green flag clicked
erase all // clears the drawing every time the flag is clicked
switch backdrop to [paused: v] // states that the tool starts up puased
set [Pen Up?: v] to [yes]
set [Color: v] to [0] // default start color, which is red
set [Pen Size: v] to [50] // default pen size, should be close to the same size as this sprite, so when this number changes the size of this sprite changes with it
set [Saturation: v] to [100] // default saturation, if this is set to 0 then the color will be white
set [Brightness: v] to [100] // default brightness, if this is set to 0 then the color will be black
set [Transparency: v] to [0] // default transparency
set [paused?: v] to [yes]
go to x:(184) y:(129)

when green flag clicked
forever
if <(paused?)=[no]> then
   go to [mouse-pointer: v]
else
   set size to (Pen Size:) %
   set pen size to ((Pen Size:)/[2.272727272727273])
   set pen [color: v] to (Color:)
   set pen [saturation: v] to (Saturation:)
   set pen [brightness: v] to (Brightness:)
   set pen [transparency: v] to (Transparency:)
end

when [s: v] key pressed // this is so that you can start and stop drawing at your lesure without having to pause
if <not <(paused?)=[yes]>> then
   pen down
   set [Pen Up?: v] to [no]
else
   pen up
   set [Pen Up?: v] to [yes]
end

when [p: v] key pressed // this states what happens with this sprite when it is paused
if <(paused?)=[yes]> then
   hide variable [Pen Size: v]
   hide variable [Color: v]
   hide variable [Saturation: v]
   hide variable [Brightness: v]
   hide variable [Transparency: v]
   switch backdrop to [unpaused: v]
   set [Paused?: v] to [no] // sets to unpaused
else
   pen up
   set [Pen Up?: v] to [yes]
   show variable [Pen Size: v]
   show variable [Color: v]
   show variable [Saturation: v]
   show variable [Brightness: v]
   show variable [Transparency: v]
   switch backdrop to [paused: v]
   set [Paused?: v] to [yes] // sets to paused
end