Computer Science Canada Putting Text to the Center and Right of the Window |
Author: | Fexter [ Tue May 01, 2012 10:33 pm ] | ||||||||||||||||
Post subject: | Putting Text to the Center and Right of the Window | ||||||||||||||||
Basics Before you can start learning how to center and put text to the right of the screen, you should know about maxx and the division functions. Assuming you do not know this, maxx is the very right of the screen, and div can be used to divide a number into an integer (For example, 25 div 2 would be 12 -- 12.5 made into an integer). Now, I will explain a bit of the logic behind this tutorial. When you put 'maxx div 2', you can find the very center of the screen (maxx, the right, divided by 2 = The midpoint between maxx and 0). Therefore, we need to use some methods to center the text around this point for centering. To get the text on the right, it is basically the same thing, except we're simply subtracting the width of the text from maxx (maxx - width). Now, we need to find the width of the text, which can be done using Text.Locate() and Font.Width(). The first can be used with put only, whereas the second can only be used with Font.Draw(). Centering Text With Put Centering text with put is very easy. By using the Text.Locate() function, we can find a certain location on the screen, based on rows and columns, to place the text. The X value for this edits how many rows you will go down, whereas the Y value edits how far you go across the screen. With the default screen, you can go down 25 and across 80. Therefore, with this function, we will need to edit '80' to center the text. So, by dividing 80 by 2 (80 div 2), we get 40, which is the center of the screen. However, this will only work for a dot, and not work for a word of a random length. To make this work for any length, we need to use math with the length of the text, which can be done by subtracting 40 by length of text div 2 (One letter, no matter how long it is, takes up one column). So, putting all this together gives us 40 - length(text) div 2. This will allow us to center the text, which means we are finished with editing this. However, we need to put this into the Text.Locate() function. To do this, we need to find a value to go down in columns, which can be centered using the same function as we did for the amount of columns to go across, or can be given any value from 1 - 25. This does not matter, as we are centering across, so give it a value of your choice. Now, all you need to do is run this and put the text. Finished code The finished code for this function will be (With the put, using the word "Hello"):
Putting Text to the Right With Put Putting text to the right of the screen uses the same code as center, except we want to move everything to the left for every letter. So, instead of dividing length(text) by 2 and subtracting from 40, we will want to directly subtract 80 by length(text). This is done because 80 is the furthest possible point, and subtracting by the length of text will show everything on the screen, while still allowing us to have the text at the right. So, taking the same code as above but editing it for this, we can come up with the following code (Using "Hello"):
Centering Text with Font.Draw Font.Draw() gives us a useful function of 'Font.Width'. Using Font.Width, we can find out how long a word is in pixels, so we can plug this into the code 'maxx div 2 - width div 2', and use this as the x value for Font.Draw(). Font.Width takes two arguments, which are the text you are putting to the screen, and the font you are using. Then, by subtracting maxx div 2 by half the width, we can center this text completely. So, an example code for centering code with Font.Draw() would be (Using "Hello" and Font.New("Arial:12:bold")):
Running this code, like the above codes, should center the text "Hello" in the screen. Putting Text to the Right with Font.Draw The difference from centering text here is very minimal. The only thing you need to change is to not divide anything, giving you maxx - width as the code. So, using the above code for centering text, except with putting the text to the right of the screen:
Questions To see if you understand this, try the following: 1) Center the text 'This text should be centered' to the screen, using put Answer:
2) Put the text 'Congratulations' to the right of the screen, using Font.Draw(). Answer:
3) Make a function to center the text with put or Font.Draw (Have a mode variable to decide on put or Font.Draw()) The answer is below (Highlight to see):
4) Add putting the text to the right into the above function. Answer:
Any questions or comments about the tutorial? Post them or PM me so I can make this better / easier to understand. |