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
, but we don’t need to define all of those variables. For us
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
. 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:
. 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:
. 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:
. 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:
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...