Login | Register

Angled arc text

March 28, 2007, 14:57 by Calle
[loading]
-->
In PowerPoint you can find something called ”Word art”, that draws good looking text with all sort of colours and shapes. One shape is like an arc, like a parable. There are several ways to produce this same thing in Game Maker, and I am going to show you one. Without colour and stuff though, that is something you can add yourself. <b>This is a translation from an article on Swedish that I wrote, which is why my English in some cases sounds funny, more than in my other texts</b>.

1. Choose a function
Choose a function to decide how the arc should look. Any parable will do, but often you look for something special… In our case we want a arc, a parable that is turned upwards. The general formula for a second degree equation is user posted image , but we don’t need to define all of those variables. For us user posted image will do, since that will create a fitting arc (control with a graph calculator). If we wanted an arc that’s turned downwards we could have used user posted image.

Now you just have to choose a value for b. The larger the more sharp upwards it will go, if the value gets to high then the text will not be easy to see, and therefore we choose something not too large, not too small:
user posted image.

2. Derive the function
By deriving the function we can get the coefficient, and it will indicate how sharp the curve is. It can decide how much angle every single letter should have, this is how we do:
user posted image.

If you are not familiar with derivation you don’t need to care about this, like you don’t have to care about the next step if you do not know of trigonometry; as long as you can see what we want with each piece of code.

3. How to calculate the angle for the n:th letter
In the code each letter will correspond to one x, therefor we can use the derivation. The derivation tells us show sharp the curve is, therefore it can be expressed as the following:
user posted image.

We can now do the coding
Since we now have a plan, we can do the code. First of all there are a couple of things that we ought to decide; for an example the constant b, the spacing between each letter and the text we want to write.
text = "THIS IS AN EXAMPLE";
space = 10;
h = 20;



Then we create a loop which will be used to write all letters. The condition for this loop will therefore be ”do this until it has been done as many times as the number of letters”:
for (i=1; i<=string_length(text); i+=1) {

And then we calcualte on which x position the letter should be drawn at:
xx = x+string_width(string_copy(text,1,i-1))+space*i;

We start out from the object’s x-position when we draw, then we work towards the right by counting the spacing for every letter and the width of the letter themselves.

Som jag sade tidigare vill vi att varje bokstav skall representera en x position, eftersom det ger den bästa kurvan. Använder vi x som x-position kommer kurvan att vara slut redan efter två tre bokstäver. Då blir det såhär:
yy = (b/string_length(text))*i

The angle is calculated using the derivation:
angle = arctan(b-2*yy)*string_length(text)+180

+180 doesn’t belong to the trigonometry, but must be there because of the way Game Maker sees angles. I multiply with the number of letters since I have earlier divided with with the number of letters when I calculated yy; which I did because it had to work the last stage, but here we don’t really want it. Last stage is to draw everything, and it is nothing strange about it, everything is just as we have calculated it with the function as the y value of the letter:
draw_text_ext_transformed(xx,y-(b*(yy)-sqr(yy)),string_char_at(text,i),-1,-1,-1,-1,angle);
}



And this is the entire code:
text = "THIS IS AN EXAMPLE";
space = 10;
b = 20;

for (i=1; i<=string_length(text); i+=1) {
xx = x+string_width(string_copy(text,1,i-1))+space*i;
yy = (b/string_length(text))*i
angle = arctan(b-2*yy)*string_length(text)+180
draw_text_ext_transformed(xx,y-(b*(yy)-sqr(yy)),string_char_at(text,i),-1,-1,-1,-1,angle);
}


And it is put in draw event, as draw is what you do.

Here is a screenshot:
user posted image

I hope someone found this interesting. Note that there are several other ways to do this same thing, but I wanted to use this math and that’s why I choose it. Trigonometry only will work also.

Comments

Loading comments... [loading]
.
Users logged in:

game maker articles, game maker examples, game maker tutorials, gmtutorials, game maker questions and answers, game maker crash course, how to create games