Everything about canvases
Note: this tutoral is long, if you have a short attention span, press “back” on your browser now
Ill get straight to the point, Canvases are for drawing- have SCAR open while reading this tutorail
Try this program before you start
SCAR Code:
program FastDrawExample;
var Buffer,Line,x:integer;
begin
Buffer:=BitmapFromString(400,200,'');
Line:=BitmapFromString(100,50,'');
FastDrawClear(Line,1088528);
DisplayDebugImgWindow(400,200);
repeat
FastDrawClear(Buffer,255);
FastDrawTransparent(x,100,Line,Buffer);
x:= x+1;
SafeDrawBitmap(Buffer,getdebugcanvas,0,0);
wait(10);
until(x>=300);
writeln('Ta-da');
PlaySound('C:\\windows\media\tada.wav');
end.
got this? Ok, that’s an example of what you can do with a canvas
another thing I made was the SCAR-game, Ice Magicks
another example is a utiluty I made ,the link is in my signature
glossery
Canvas = a surface on which programs can draw things onto
First get familiar with the debug canvas
If you call the procedure
“DisplayDebugImgWindow(w,h:integer);”
A debug image will be displayed, this is the first canvas you meet, the debug image is SCAR’s own persional canvas
The next canvas is the bitmap canvas, this is simply the canvas of a specified bitmap, for example, make a bitmap called “item1”, with canvases, you can draw over this bitmap
When using canvases, you have to get their handle first, the handle of a canvas is not an integer like bitmaps, chars or DTMs, a canvas handle is stored in a variable “TCanvas” these functions return the handle of a canvas
“Getdebugcanvas:TCanvas;” returns the canvas of the debug image
“GetBitmapCanvas(Bitmap:integer):TCanvas;” returns the canvas of a specified bitmap
Finally doing something with canvases
“Copycanvas”
This is where things finally get juicy, CopyCanvas takes a part of one canvas, and draws it onto another. See the example below
Copy this into scar
SCAR Code:
Program canvas;
//handle for the bitmap
Var bmp:integer; DebugCanvas,BmpCanvas:TCanvas;
begin
DisplayDebugImgWindow(300,300) //to show the canvas
Bmp:=LoadBitmap('C://windows\blue lace 16.bmp')//loads a bitmap
DebugCanvas:=getdebugcanvas //gets the referance to the debug image and stores in that varaible
BmpCanvas:=GetBitmapCanvas(Bmp)//gets the regerance to the bmp and stores in that variable
//CopyCanvas(Source,Dest:TCanvas;sx1,sy1,sx2,sy2,dx1,dy1,dx2,dy2:integer);
Copycanvas(BmpCanvas,DebugCanvas,0,0,30,30,10,10,40,40)
//copys the part of the bitmap canvas in the square 0,0,30,30 to a square on the debug canvas 10,10,40,40
End.
There you go, possibly the first example of canvas use you’ve seen
more
There is a third canvas, possible the most useful
Getclientcanvas:TCanvas;
Remember when you use that crosshair
Whatever you drag it to, that becomes the “client”, all mouse co-ordinates start at 0,0 on the top left corner and findcolors and bitmaps start in there
With this, you can copy a part of the runescape window onto another canvas, on a bitmap canvas for example, if you save it, it becomes a procedure also known as SaveScreenshot(path:string);
Heres an example of its use
SCAR Code:
program clientcanvas;
var x,y:integer;
begin
DisplayDebugImgWindow(100,100)//displays debug image
repeat
GetMousePos(x,y);//gets mouse cords
CopyCanvas(getclientcanvas,getdebugcanvas,x-50,y-50,x+50,y+50,0,0,100,100);
wait(10);//copies the client canvas onto the debug image
until(false);
end.
using copy canvas
The first two arguments of the procedure are for specifying the source and destination TCanvases, the next 8 arguments are for specifying the source and destinations postions and size, see the below example for the explanation for size
SCAR Code:
program clientcanvas;
var x,y:integer;
begin
DisplayDebugImgWindow(100,100);//displays debug image
repeat
GetMousePos(x,y)//you really should know about this procedure…
CopyCanvas(GetClientCanvas,getdebugcanvas,x-50,y-50,x+50,y+50,0,0,200,200);
wait(10);//copies the client canvas onto the debug image and changes size
until(false);
end.
if the area of the destination is different to the source, copycanvas will s-t-r-e-t-c-h or compress the canvas being copied.
Well done, you’ve read to the end of part 1, stay tuned for the next section, FastDrawing
Fast Drawing
Fast drawing is another way of using canvases, the procedures use a different way of copying the canvas, as a result, it is faster (hence the name) and it can support some colors becoming transparent (you can see whatever is behind them)
The way fast drawing is meant to be used is that you make a bitmap called “buffer”, then you fast draw all the other bitmaps into this 1, finnaly you use another procedure to draw the buffer onto the debug image. here are the advantages to this
1.speed – the path between bitmap-bitmap is much faster then bitmap-debug
2.flickering – if you draw everything individually on the debug image, the picture will flicker and look really rubbish
fast draw functions
Procedure Settransparentcolor(bitmap,color:integer); makes the chosen color transparent on the chosen bitmap, when I draw images to go into scar, I always make the transparent color to be black, so I just put 0 as the color
procedure Fastdrawtransparent(x,y:integer;sourcebmp,targetbm p:integer); draws the source bitmap onto the target bitmap at the cords x,y. if the source bitmap has been run though “settransparentcolor” the chosen color will be transparent and parts of the target bitmap will be shown behind the source
procedure Fastdrawsizetransarent(x1,y1,x2,y2:integer;sourceb mp,targetbmp:integer); same as fastdrawtransparent but can specify the 4 cords, the source bitmap will be stretched or compressed to fit into the square
procedure Fastdrawclear(bitmap,color:integer); totally overwrites the selected bitmap and fills it with the specified color, I use this mostly on the buffer bitmap if I want the background to be a color other than black, e.g. on the program at the beginning of the tutorial, I used this procedure to make the background green
procedure Safedrawbitmap(source:integer;dest:tcanvas;x,y:int eger); at the end of the fast drawing, use this procedure to draw the buffer on the debug image, e.g. “safedrawbitmap(buffer,getdebugcanvas,0,0)”
procedure Safecopycanvas(same arguments as copycanvas); exactly the same as copycavas but is called in another thread (called thread-safe) I don’t think this procedure is very useful for fast drawing, you have to fill out many more arguments which is pointless because if you wanted to change the size, you would do it in fastdrawsizetransparent. But it could be useful for people who want to use copycanvas in a thread-safe way
function Fastgetpixel(bitmap,x,y:integer):integer; similar to Getcolor(x,y):integer; but gets the color of the specified bitmap, I don’t have much to say about it because I dont use it so much, but its used in RadialRoadWalk to get the new road color
procedure Fastsetpixel(bitmap,x,y,c:integer); replaces the pixel x,y on the specified bitmap with color c. I suppose it could be used as a less destructive fastdrawclear, only coloring half of the bitmap or something
slightly more advanced canvases
a variable which contains a canvas contains more than a reference to it. A TCanvas variable is also an array for all its pixels
the pixel array generally looks like this ”tcanvas.pixels[x,y]:integer;”
SCAR Code:
program pixelarray;
var
pic,x,y:integer;
color: integer;
piccanvas:tcanvas;
begin
Pic:= BitmapFromString(20,20,'');
PicCanvas:=GetBitmapCanvas(pic)
CopyCanvas(GetClientCanvas,PicCanvas,0,0,20,100,0,0,20,20)
for y:=0 to 19 do
for x:=0 to 19 do
begin
color:= piccanvas.pixels[x,y];
writeln('pixels : '+inttostr(x)+','+inttostr(y)+' = '+inttostr(color));
end
end.
the above program writes every pixel into the debug log
a practical use for this is in the SRL mining include {.include SRL\SRL\Skills\Mining.scar} it is for checking gas, Piv cleverly used this to check if a canvas copied from client is different from a canvas copied 100 milliseconds later, therefore meaning that gas is coming from the rock
SCAR Code:
copycanvas(clientcanvas,gascanvas1,gx-20,gy-20,gx+20,gy+20,0,0,40,40);
wait(100);
copycanvas(clientcanvas,gascanvas2,gx-20,gy-20,gx+20,gy+20,0,0,40,40);
count:=0;
for yG:=1 to 40 do
for xG:=1 to 40 do
if((gascanvas1.pixels[xG,yG])<>(gascanvas2.pixels[xG,yG]))then
count:=count+1;
writeln(inttostr(trunc(((count)/1024)*100))+'% change.');
as you can see, this function compairs the pixels from two canvases,
you may notice that FastGetPixel does exactly the same thing except it only works for bitmap canvases
conclusion
Although canvases do not have very many uses for RS scirpting, for the things they are used for, they are very effective, the canvas used in RadialRoadWalk can pick the drasticly changing roadcolor
I know this is a lot of writing, and i wonder how many of you will acctually read the entire thing
My last
kaitneiks has this section in his form tutoral in the scar manual (copy into scar)
SCAR Code:
program fastdrawscar;
var
truck,truck2,buffer,f,x,y,t:integer;
dir:string;
begin
truck := BitmapFromString(49, 41, 'z78DAED5A5976DC480EBC52E' +
'ECB67AEF73FD22002C92ABA556A4BF64C8FE536F11E542A952866' +
'30020824B5B79163FF833938DB2477BB8CF1D3967FF6AFFF9AF97' +
'E786F83313344C9DB277967C42058B960D6B79FFCF760A26B2FC3' +
'0B5BEAF0F2BADB20D06C9BF8F9245F568FD398D643B83E539CF7C' +
'608DBDAEF8B5B30B64A4EB61B93AD1B8243030E8AC947F25C5150' +
'4DD195EB3C7ED8FCDBA869A0C2CC1665456BC6F5E0CC48E13328E' +
'D9E844BDBC47D9D67F408660E6BBF26BBF40805D75FBBC7FB1EAB' +
'FB04261FC86B2741BEB52C684761EBD744293690A62DEF6445352' +
'A13A091103BB9E43F85CC4A15393766601E8A9C79D42A3985F845' +
'51923A2BD71F2C18D537B01A6C60B30579679767ADFE184AE0CC5' +
'EDD210FC97334D4288BAA6EBAA95FB39E87087CD2800B8AC5CACD' +
'8E09392759A2992E806326A05E65F4FDDD6EB8AD8CD7AB6666D4A' +
'258058D12F0CBA947F94C1C4190B180FC0BD7F05CE10FEB74828C' +
'4B281CD2DBA4AF0978825BB50E5DBE3BA8727A0BACA223C7A4036' +
'E573CEA73959F0E5745A12D09F9A2EF3ED8E63A63230CBC41FBBA' +
'3D4E516A0B28493F134C5A813A64A1B276D78198702BC2694BC93' +
'2BD10AB829A333DF8E3875BF04860A06B2E89AD2A29A7D022A207' +
'842B882FE61813D62B600826DD213707947C234A51BE4A7582BEC' +
'2843FF4996E61E3A7A2476068E18B96CFC29F129D20990D5DD696' +
'B3B55EAB18F5BEBBC9B9F2703C7E7D27201A90357AD69C345DBF1' +
'C91D69C9A819254A8809562D57D78E86EC9F24DD033AC53EDE528' +
'19155EBAA1D49C615898A3CBACFF134CAB01F34B95A926EFE4A58' +
'F0E2B1C135E4AD88AF8D59813586174FE9A931C48ECF21D8EF12D' +
'4AD2AEE51D714EA8BA42110C6C4F7CF8FD416979388792817FB64' +
'6DEA1F932C37A39FF40972CC24C9975E4EC5D204B083DDE5EE7C7' +
'D7F5F3C808AF31235420A39DAB6CCC0B73B14F39741C993BECE58' +
'5DEA204E5708ED3A1E5E5A128CD844A2ECA94BFEFCE8C036249E9' +
'925C036693BC80A11D54EB102ECFBEB250AC8624BC4A52B8EC463' +
'994E988F11637E13DD612313DD9697E72DED13B2E6B96AF522FC1' +
'FF0C7CDEE6518E5E805E47AF6F1E539B9FDC0FC1B5181729C8483' +
'9BD83D2584049AB9C1E168B45179033E702360A1698E6161DBEF1' +
'F49C096E536E15EBFFF2A6BA9C4590D5772B4602FDD40DE7AF754' +
'5079C3B3AA591D97BFD1C8B3C1D9B2845AE3C7B602E0EEF652E0B' +
'D5690C5DA9C7EB858E36333CF32CC5A2A7836982D4FC144A1BBAA' +
'B5C63EFAEB15259A01126BDFD204A4FAF25D293CB69595CED1C75' +
'4ABB284D3E3352C5FDCAB877FF5D9402EF3AAEE07B393BAEC5832' +
'D3561CE6D0DF55CAA16D6E281CF9898E94A47E52E166B14D826CB' +
'527DD4250BDF9817D49932149187A37BC7B5AC18B0AB5070865DE' +
'F5E3415A2541F53CCC27D115FAA199FF170A7CDCADD3639A22624' +
'8FEB4C097F45BAEDFED19A76508A8240926B96DA20593ADB37390' +
'997F20BDCB823D41DD8DEAB43E7CA1E5E7A65DCFD884165342825' +
'50CB953ADD09DCD059667AF88779BDCF4EC79F164E8551914993C' +
'8707E297CA7284A9CFBD2BA2149D63578DA82F7E5DE38BA3BB88E' +
'826B70D56967693F8092B844BB70AB05102996C9DE73AA2EBAF88' +
'2637A0DAACA84AA52065559C11FD18B47C6AC3A7D068B6A368F59' +
'9898EC4835E96BBE5FB397774285FA66CAF9AF98E8C4A7B829262' +
'9DF50525582BA05D5C0D06D099F12981078D79A05AFA0E84FA034' +
'3111E412A5E7E795A74441A485888C94834492A2E9EBC9C566FB8' +
'A5D167EFBA8B282E78D1C9B1D68AC484751819B4C76F6B13A2A4B' +
'DFCF7450D205A0C16BD544095E547068AFE6E55155E3F0FF9A336' +
'7F03C8086E636896A18F25349E3537B20A089CBE31615913A226C' +
'847A95EC118A5E6AF826A17CDA93DF536506C7BA8167D0CA2C940' +
'9DC6D8B0F952DBC9E0E9D44F06F40093544EBFC8BDD27EED4892A' +
'E395CBF0F9FA2DCD8ACCB73B0FA8003B62832FA5F029944416121' +
'8B9AEC88CC2C88DA1EC6A88839B8F3966B14B3B6ECDA961E67AA9' +
'4A7BE951BB7C69E449F67C6A0027A9D549BAA7FF184A8DB64CBC8' +
'7BF72F670FED23BEC95171DFE5F76B180CC6047EE10BF589BEFEE' +
'C91C3F3910875190915516C9E4F9881C19FC2605C6646C866124A' +
'A7290639A8B9578811B27BBA3CA0E4C9A87E31A1EF3EF5B9446C2' +
'6C28FD315EF9A829A1CB6BEE26BCB7BFA79AD53C9EFAED9C438BF' +
'B204A150136C4DD1C4235150683543B58AD5BA82A074219C831C2' +
'B380056563EABEF926B5553AF0C9EFA9D2A3BAB64D6F60811E36E' +
'2B8C3803B1E808CA3FFD5AC13F74B4CE273E733F547075C85AF6B' +
'BB76B40E4A137B3876DBFA3DDDD986081551068263A5CD1DA1C4E' +
'136468FF619CAA2A34A227698A6B8E967C417C5247A1C71684EDC' +
'3B7AC1AE4255B28289936011877B771DDE3B37B4E14107A5F9859' +
'ABEF154453DC37CE64AF41A3B669F57DF5C0DBE62843AD8F5FCDF' +
'4E2812BA93131945BF9988EC10E87F319C8AA45A231AA93CE3B0E' +
'8AE4A7EE6A8D8315228A1881E85A027F396C479F658D0732B9C4C' +
'9C96730AE72332EA2526F9A626B2259339957BA18D6EB38D1B627' +
'C5DF593F1E1513B50AA9C8042F7FD9506AFE1016127428B906255' +
'0B42D70836C4513742D7AE1C3BAA047162DEB760E557548F2A2D3' +
'D98FE01456FF8E9D1EDC49F0A6F9C0C2E74CBD2EF1ADD547F474D' +
'ED39D91DB6A89AC68D39CCBD3DD0D3F34C3E057351679F86599E2' +
'EC5A19E573AB4EF542A16142E2569BD121E221C828412AAE1A806' +
'41773555AD5AC7B40B68283E4795EC92876954ABF233197E5D405' +
'B7A156AD7FB2871BDA824172BBE5113B5D65571E1C696FEA85197' +
'378377E24E699AD87F9069194AEFEE87F70DAC7B868AE630CD323' +
'6E2A8924798885419DA2BDB33EEAABCFC2A83A7C62C24D3D05B94' +
'0E678E9AEC4D4DF586D87A322AFB1B2674A77858D506CE59169C5' +
'50CD6FE6FF6E58E2A074231292833A136845627AD6CB523D4851E' +
'A6F1387DF0D6251537F512B623E2B6DDC4E1D0D7C46DF2C96FBED' +
'593B7CCC94F37AECF94033CA7384FCC831B67288ED36EF9911DBC' +
'1FC44D55C9A07168A4805577AAAF15BDC33462727C85AA7222B48' +
'71E6CB573B2B485E89D1BA2BFC0670A91D35FBB7AF7D5BF74BE53' +
'F46E6A0AD891909968524D953B54857B83FFF7FF3A388AF408171' +
'0876924DFF115AA4A2DF1EAF059D3CEB4C8BEA02ECB0F84E5CE79' +
'0B980197D7BA74D4F474E399FFE7A36A5A98CBCAA69A50DF7EE9E' +
'72C6AC38F2A599FD528D481D07A1E1642B97482186A55F7056107' +
'F7B2AAD3E7C58FAA2B950A0858CE719C040B9E6819FE63D417FBB' +
'F8B53C1183A019162CE6BA9AADC55D0E986E4D2DAA536EDEC63D3' +
'673AEEEB168F49796C3899BAB1A3921676D9A50057CE32E977F91' +
'F27AB8796AD8538D58CCCD1E76EEF3EED6AD88FCD91C8F4DF0793' +
'EFA8F29DE3E3BFFBE77F32FFE43FF94FFE77E6FF00511B1787');
Truck2:=CreateMirroredBitmap(Truck);
SetTransparentColor(truck,255);
SetTransparentColor(truck2,255);
Buffer:=BitmapFromString(300,300,'');
DisplayDebugImgWindow(300,300);
Dir:='right';
t:=truck;
x:=10;
y:=10;
repeat
FastDrawClear(buffer,1610776);
for f:=0 to 50 do
begin
FastDrawTransparent(random(350)-50,random(350)-50,truck,buffer);
FastDrawTransparent(random(350)-50,random(350)-50,truck2,buffer);
end
FastDrawSizeTransparent(x,y,x+86,y+76,t,buffer);
if(dir='right')then
begin
x:=x+2;
if(x>=226)then
begin
dir:='left';
t:=truck2;
end
end
if(dir='left')then
begin
x:=x-2;
if(8>=x)then
begin
dir:='right';
t:=truck;
y:=10;
end
end
y:=y+1
SafeDrawBitmap(Buffer,getdebugcanvas,0,0);
wait(1);
until(false);
end.
EDIT: who gave me the tutoral writers award?