Drawing Text
The Text Command
So far we've used Print and Write to print plain text onto the screen, but most of the time you'll want to do more interesting things with text.
For that reason, GotoJSE has a Text command, which works more like the drawing commands.
Line 320,0,320,480
SetCol 255,255,0
Text 320,160,"Left!",0
SetCol 255,128,0
Text 320,240,"Middle!",1
SetCol 0,128,255
Text 320,320,"Right!",2
Text at points, with alignment!
We give it our standard X,Y co-ordinate, then the content we want it to write.
We then follow it up with either a 0, a 1 or a 2, depending on whether we want it Left aligned, Centre aligned, or Right aligned.
0 will draw text starting at the X,Y point that we give.
1 will draw text with the middle being the X,Y point that we give.
2 will draw text ending at the X,Y, point that we give.
But it's nice to have the choice, when you need it.
BIGGER!
We can play with the size and style of the text, too.
Repeat
CLS
Y=64
For J=8 To 40 Step 2
Text 320,Y,"Hello World!",1
Y=Y+J
Next
Flip
Forever
Hello!
This is a nice and simple example, but it sure would be nice if the text size (font size) grew with the gaps, right?
That's when we make use of the SetFontSize command.
Repeat
CLS
Y=64
For J=8 To 40 Step 2
SetFontSize J
Text 320,Y,"Hello World!",1
Y=Y+J
Next
Flip
Forever
The font size grows!
SetFontSize takes any number from 1 to 128, and sets the font size to the appropriate settings.
Turning
Sometimes we might not want to draw text straight from left to right.
For that we can make use of the SetRot command.
Spin=0
Repeat
CLS
// Spin around from 0 to 360 and back
Spin=Wrap(Spin+1,0,360)
// Set the drawing Rotation to "Spin"
SetRot Spin
// Draw the text with the Rotation.
Text 320,240,"Weeeee!",1
Flip
Forever
Weeee!
SetRot turns your next drawing commands around, in a clockwise direction.
Any turning happens with the X,Y Point as the middle of the spin.
That's the ,1 type.
SetRot is short for SetRotation and works like SetCol does.
We set it once, and then things that we draw afterwards will be drawn with the rotation.
Limited Rotation
SetRot works on "some" drawing commands, but not all.
Plot is too small to do any rotation to, with it just being a tiny pixel.
A Line will always be between the specified points, so rotation doesn't work on those, either.
The Rect command won't rotate because GotoJSE always draws rectangles upright.
However, Ovals will rotate, as will Text, and some other shapes.
Spin=0
Repeat
CLS
// Spin around from 0 to 360 and back
Spin=Wrap(Spin+1,0,360)
// Set the drawing Rotation to "Spin"
SetRot Spin
// These drawing commands won't Rotate
Plot 320,120
Line 140,110,180,130
Rect 480,120,64,32
// These drawing commands will Rotate
Text 320,240,"Weeeee!",1
Oval 160,360,32,64
// Oooh a new shape!
Star 480,360,32,64
Flip
Forever
Some rotate, others don't.
Angles
Angles of a rotation are in Degrees, the same as on a compass.
0 is "normal", and then angles go all the way around from 0 to 360.
Degrees on a Compass
If 0 is 12 o'clock on a clock, then 90 degrees is 3 o'clock
6 o'clock would be 180 degrees, and 9 o'clock is 270 degrees.
We can do maths for this. 30 * Hour = Degrees!
For Hour=1 To 12
SetRot (30*Hour)-90
SetFontSize 8
if Hour==3 then SetFontSize 10
if Hour==6 then SetFontSize 12
if Hour==9 then SetFontSize 14
if Hour==12 then SetFontSize 16
Text 320,240," "+Hour+" o'clock",0
Next
Hours to Degrees.
Otherwise, text at 0 degrees will naturally flow left to right, not upwards.
Reset
Whenever we change a Drawing Style with SetCol or SetRot or more, these changes become permanent until we change them again.
Spin=0
Repeat
CLS
Text 300,120,"Flat White",1
SetRot 45
SetCol 255,128,0
Text 320,240,"Sloped Orange",1
Text 340,360,"Flat White",1
Flip
Forever
That isn't right!
Things end up being stuck in the style that we've set.
To quickly fix things up, we can make use of the ResetDraw command.
Spin=0
Repeat
CLS
ResetDraw
Text 300,120,"Flat White",1
ResetDraw
SetRot 45
SetCol 255,128,0
Text 320,240,"Sloped Orange",1
ResetDraw
Text 340,360,"Flat White",1
Flip
Forever
Much better!
But it's a good idea to use it at the top of your loop, usually after every CLS.
That way, everything should look the same, every loop.
Can you add a holiday message to our Snowman.
So happy!
You'll probably want to add a ResetDraw after the CLS.
Try playing with SetFontSize and SetRot to make the Text a bit more lively.