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:Thisshouldbeaslider.Min:0.00,Max:100.00
  • Color:Thisshouldbeaslider.Min:0.00,Max:200.00
  • paused?Canbeeitheryesorno.Thisstatesifitispausedorunpaused.
  • PenSize:Thisshouldbeaslider.Min:1.00,Max:200.00
  • PenUp?Canbeeitheryesorno.Thisstatesifthepenisupordown.
  • Saturation:Thisshouldbeaslider.Min:0.00,Max:100.00
  • Transparency:Thisshouldbeaslider.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

whenclickedshowgotox:0y:0
whenp:keypressedthisstateswhathappenswiththisspritewhenitispausedifpaused?=yesthenhidehidesthisspritewhenunpausedelseshowshowswhenpausedgotofront:layerend

Color State Code

whenclickedshowgotox:0y:0
whenclickedforeverthisistochangethecolorstatethatthisspriteisin,itreflectsaclosereplicaofwhatthedrawingcolorwillbe,butitwillnotbeabletochangethebrightnessif<(paused?)=[yes]>thensetcolor:effecttoColor:setbrightness:effectto100-Saturation:thisblocksouldn'thavebeennamedbrightnesswhenitdoesn'tevenchangethebrightness,whentestingwasbeingdonewefoundthatthisblockchangedthesaturationofthespriteandnotthebrightnesssetghost:effecttoTransparency:end
whenp:keypressedthisstateswhathappenswiththisspritewhenitispausedifpaused?=yesthenhidehidesthisspritewhenunpausedelseshowshowswhenpausedend

Draw Tool Code

whenclickederaseallclearsthedrawingeverytimetheflagisclickedswitchbackdroptopaused:statesthatthetoolstartsuppuasedsetPenUp?:toyessetColor:to0defaultstartcolor,whichisredsetPenSize:to50defaultpensize,shouldbeclosetothesamesizeasthissprite,sowhenthisnumberchangesthesizeofthisspritechangeswithitsetSaturation:to100defaultsaturation,ifthisissetto0thenthecolorwillbewhitesetBrightness:to100defaultbrightness,ifthisissetto0thenthecolorwillbeblacksetTransparency:to0defaulttransparencysetpaused?:toyesgotox:184y:129
whenclickedforeverifpaused?=nothengotomouse-pointer:elsesetsizetoPenSize:%setpensizetoPenSize:/2.272727272727273setpencolor:toColor:setpensaturation:toSaturation:setpenbrightness:toBrightness:setpentransparency:toTransparency:end
whens:keypressedthisissothatyoucanstartandstopdrawingatyourlesurewithouthavingtopauseifnotpaused?=yesthenpendownsetPenUp?:tonoelsepenupsetPenUp?:toyesend
whenp:keypressedthisstateswhathappenswiththisspritewhenitispausedifpaused?=yesthenhidevariablePenSize:hidevariableColor:hidevariableSaturation:hidevariableBrightness:hidevariableTransparency:switchbackdroptounpaused:setPaused?:tonosetstounpausedelsepenupsetPenUp?:toyesshowvariablePenSize:showvariableColor:showvariableSaturation:showvariableBrightness:showvariableTransparency:switchbackdroptopaused:setPaused?:toyessetstopausedend

References