I'm working on a score display for my simple 2d SDL_2 Game.
This is the part of my code where I display the speed (basically just score):
void Renderer::renderText(const char* text, SDL_Rect* destR)
{
SDL_Surface* surfaceText = TTF_RenderText_Solid(Renderer::font, text, { 255,255,255 });
SDL_Texture* textureText = SDL_CreateTextureFromSurface(renderer, surfaceText);
SDL_FreeSurface(surfaceText);
SDL_RenderCopy(renderer, textureText, NULL, destR);
SDL_DestroyTexture(textureText);
}
There is the obvious problem that if I have a width for the number "1", the text would be squished a lot of the number was "10000" etc as you would have to fit 5 characters into an SDL_Rect that is only 1 character wide.
I could multiply the width by the number of characters however that wouldn't be very accurate as different characters have different widths.
How would I solve this?
(I only answered this because I found out how and nobody else answered)
You can do something like this.
SDL_Rect destR = { x, y, 0, 0 };
TTF_SizeText(font, text, &destR.w, &destR.h);
Basically, TTF_SizeText enables you to get the native width and height from the text with font. Then you can just multiply the height and width as you wish.
Related
I have a work-related C/C++ SDL 2.0 project - originally developed and compiled on Win7 computer for x86 platform (With MS Visual Studio) that was working fine for the whole time. Since the program was meant to run also at newer Win10 x64 devices, I moved the entire solution to a newer Win10 x64 computer, changed all SDL2 libraries, header files etc. for the x64 version and rebuilt the solution for x64 architecture.
The program is basically an advanced diagnostic screen with dials, icons and text information, so it uses variety of colors, fonts, geometry etc.
After the recompilation for x64 platform, I noticed that the colors of some elements are absolutely off. For example - a rectangle that should be grey (used SDL_SetRenderDrawColor one step before drawing the rect.) is suddenly green, despite its given grey RGB numbers as input arguments. Even the function SDL_GetRenderDrawColor called before and/or after drawing of the rectangle returns values 195, 195, 195, but the rectangle is shown green.
Rectangle drawing function:
void DrawRectangle(SDL_Color color, int pozX, int pozY, int width, int height)
{
SDL_Rect Proportions = { pozX, pozY, width, height };
SDL_SetRenderDrawColor(gRenderer, color.r, color.g, color.b, 0xFF);
SDL_RenderFillRect(gRenderer, &Proportions);
}
Rectangle drawing call:
DrawRectangle(grey, pocpozX, 182, width, height);
Later I have noticed that this rectangle inherits its color from a text rendered a few steps earlier. If I change the color of this text, it for some strange reason applies also for the rectangle.
Text drawing function:
void DrawText(std::wstring text, TTF_Font *font, int pozX, int pozY, SDL_Color color)
{
typedef std::basic_string<Uint16, std::char_traits<Uint16>, std::allocator<Uint16> > u16string;
std::wstring text_sf_str = text;
u16string utext_sf_str(text_sf_str.begin(), text_sf_str.end());
SDL_Surface* text_sf = TTF_RenderUNICODE_Blended(font, utext_sf_str.c_str(), color);
SDL_Texture* text_Tx = SDL_CreateTextureFromSurface(gRenderer, text_sf);
int text_TxW;
int text_TxH;
SDL_QueryTexture(text_Tx, NULL, NULL, &text_TxW, &text_TxH);
SDL_Rect textrect = { pozX, pozY, text_TxW, text_TxH };
SDL_RenderCopy(gRenderer, text_Tx, NULL, &textrect);
SDL_FreeSurface(text_sf);
SDL_DestroyTexture(text_Tx);
}
Notice all these conversions needed to display a wstring text with some uncommonly used UNICODE characters. I don't quite understand why SDL needs to be passed each character as Uint16 number, this could have been done better. I also don't understand the need of using SDL_QueryTexture just in order to display the text proportions right. I would expect the user to want to display the text not anyhow stretched by default. This all seems to me unnecessarily complicated.
Funny thing is, that if I remove SDL_DestroyTexture tag, there is of course a huge memory leak, but the problem disappears.
Text drawing call - in a for loop, this draws numeric labels onto speedometer axis:
if (i % 20 == 0)
{
if (i <= 160)
{
DrawText(str2, font, posX, posY, grey);
}
else
{
DrawText(str2, font, posX, posY, green);
}
}
... And this very "green" as the last argument of the call is what causes the rectangle to be green also - despite the fact that more elements are drawn between this text and rectangle so SDL_SetRenderDrawColor is called multiple times.
I have also noticed that some shown numbers are for a little while glitching some senseless values every n-th second, so I guess this is a memory-related problem. Of course there are more color problems, this was just for an example. Due to company policy, I cannot be more specific or post the full code here.
If I switch back to x86 configuration (with the right libraries of course), the problem now remains the same.
I use ID3DXFont interface to draw text and that perfectly suits my needs as long as complete string is in single color. Now I'd wish to draw a string but in multiple colors. For instance "abc", with a in red, b in yellow, etc.
I know that I could draw each letter on its own, giving a different Color parameter to DrawText each time. The only issue with this is that I do not know how many pixels should I offset after each letter because every letter has a different width. Hardcoding widths is not really a good solution.
The ID3DXFont interface doesn't allow you to draw multiple colors within a single invocation of DrawText. However, it can give you the bounding rectangles of any text that you wish to draw using the DT_CALCRECT flag, so you do not need to hardcode widths of particular glyphs within your font. This also means you can switch the font and/or size of the font without needing to modify your drawing code, or hardcoding new width. For example:
ID3DXFont* font = ...;
const char* strings[] = { "A", "i", "C" };
D3DCOLOR colors[] = { D3DCOLOR_ARGB(255, 255, 0, 0), D3DCOLOR_ARGB(255, 0, 255, 0), D3DCOLOR_ARGB(255, 0, 0, 255) };
RECT r = { 10,10,0,0}; // starting point
for (int i = 0; i < _countof(strings); ++i)
{
font->DrawText(NULL, strings[i], -1, &r, DT_CALCRECT, 0);
font->DrawText(NULL, strings[i], -1, &r, DT_NOCLIP, colors[i]);
r.left = r.right; // offset for next character.
}
Note: I have used 'i' instead of 'b' from your example, because it makes it apparent that the rectangles are correct, as 'i' is (generally) a very thin glyph. Also note that this assumes a single line of text. The calculated rectangle also includes height, so if you are doing multiple lines, you could also use the height of the calculated rectangle to offset the position.
Making some experiments with ttf fonts, and tried to use famous font rendering library FreeType, version 2.5.3.
My code:
#include "ft2build.h"
#include FT_FREETYPE_H
#define FONTPATH "<font path here>"
const char* fontfile=FONTPATH "<fontname here>.TTF";
const int w=25;
const int h=25;
char* outbitmap;
int main() {
outbitmap=new char[w*h];
memset(outbitmap,0,w*h);
FT_Library ftl;
FT_Error err=FT_Init_FreeType(&ftl);
FT_Face fface;
err=FT_New_Face(ftl,fontfile,0,&fface);
err=FT_Set_Pixel_Sizes(fface,w,h);
FT_UInt ch;
//ch=0x3042; //あ
//ch='_';
ch='|';
FT_UInt chridx=FT_Get_Char_Index(fface,ch);
err=FT_Load_Glyph(fface,chridx,FT_LOAD_DEFAULT);
err=FT_Render_Glyph(fface->glyph,FT_RENDER_MODE_NORMAL);
for(int y=0;y<fface->glyph->bitmap.rows;++y) {
int outy=fface->glyph->bitmap.rows-fface->glyph->bitmap_top+y; //???how to get baseline position
for(int x=0;x<fface->glyph->bitmap.width;++x) {
int outx=fface->glyph->bitmap_left+x;
outbitmap[outy*w+outx]=fface->glyph->bitmap.buffer[fface->glyph->bitmap.width*y+x];
}
}
delete[] outbitmap;
err=FT_Done_Face(fface);
err=FT_Done_FreeType(ftl);
return 0;
}
So I have some questions.
Assume that I need render one character to byte array with fixed size, in correct position.
Character size must be exactly size that fits in output bitmap, no clipping allowed.
It's OK to ignore kerning completely.
I specified character width=height=25. But for '|' it gives fface->glyph->bitmap.rows==26.
How should I set height to get exactly 25px output, not 26, for any normal font? If it isn't
possible, then is there any way to calculate output character height exactly in pixels before
FT_Render_Glyph. FT_Set_Pixel_Sizes doesn't work well enough, so I getting +1px sometimes.
How do I get baseline position for any given font? If I have baseline, I can place character
in exactly right position. I have no 1000x1000 screen, just one bitmap 25x25.
This is super late but I just found out how to do this:
(Getting the character height in pixels). From what I understand setting the font size (e.g. with FT_Set_Char_Size) really just defines a scaling between font units and pixel units (this explains more). I.e., 12pt font at 72dpi does not necessarily mean the glyph is 12 pixels high. You can, however, get a bounding box that I am pretty sure will enclose every single glyph in the chosen font. This is how I did it:
//12pt font
double font_size = 12.0;
//Resolution means DPI here
double pixel_size = font_size * resolution / 72;
//Font height and width in pixels
int font_height = round((face->bbox.yMax - face->bbox.yMin)*pixel_size / face->units_per_EM);
int font_width = round((face->bbox.xMax - face->bbox.xMin)*pixel_size / face->units_per_EM);
This is how I got a baseline height. It's just the maximum descent below the baseline of any glyph. When paired with the above code, drawing your glyph with the baseline at this position should guarantee that all glyphs will fit in the bounding box.
//Convert this to pixel_size if your DPI is not 72
double font_size = 12.0;
//Height in pixels (using a double for sub-pixel precision)
double baseline_height = abs(face->descender) * font_size / face->units_per_EM;
(Where face is the font you have loaded).
EDIT: forgot to account for DPI, in my application I was just using 72 so it canceled out
Nobody answered anything, so posting some more workarounds than answers I found by myself.
For question 1, I can probably live with that after applying following:
FT_Set_Pixel_Sizes(fface,w-1,h-1);
or maybe even
FT_Set_Pixel_Sizes(fface,w-w%2,h-h%2);
For question 2 I don't know yet ...
I draw some text to a surface (using SDL_ttf) and then I want to change the text on the surface. If I just redraw the surface the text does not go away. I have looked at several forum posts on how to fix the problem but I just cannot seem to figure it out. In particular I cannot understand why this solution does not work: (code is long so this just gives the essentials)
In Class file declared:
SDL_Surface* box; // These two are initialised to the
SDL_Surface* boxCopy; // same image
At the start of my render function:
*box = *boxCopy; \\Reset box surface
My understanding of pointers and C++ (which is admittedly limited) suggests that this should make the surface pointed at by box equal to the surface pointed at by boxCopy. Instead the boxCopy surface becomes a copy of box. I have no idea how boxCopy can be changed by this line of code but it seems like that is what is happening.
I'm not sure i completely understand your problem but hopefully this can help.. It's easier to update the text whenever the surface it's drawn on is to be updated rather than updating it whenever the actual text is updated. It might not be as optimized performance wise but i would say it's easier in most cases.
A typical program loop would include a re-rendering of a surface representing the screen followed by an SDL_Flip of this surface. You can of course optimize your re-rendering so you only render what has actually been updated since last frame. Is that what you're working on perhaps? If so, and if you use the method below you should be aware that the new text only covers the size of the new text and not the entire old text. I usually solve this by first drawing a filled rectangle and then the new text.
Here is a TTF example showing how text can be drawn on a surface (here called m_Screen, which is the surface flipped to screen every frame) in the simple case where i have one background color only:
void drawText(const char* string, int x, int y,
int fR, int fG, int fB, int bR, int bG, int bB)
{
SDL_Color foregroundColor = { fR, fG, fB };
SDL_Color backgroundColor = { bR, bG, bB };
SDL_Surface* textSurface = TTF_RenderText_Shaded(m_Font, string,
foregroundColor,
backgroundColor);
SDL_Rect textLocation = { x, y, 0, 0 };
SDL_BlitSurface(textSurface, NULL, m_Screen, &textLocation);
SDL_FreeSurface(textSurface);
}
Notice that this has been done before calling drawText (with some suitable font size):
m_Font = TTF_OpenFont("arial.ttf", size);
And this is done at cleanup:
TTF_CloseFont(m_Font);
I'm using SFML 2.0 libraries on Ubuntu 12.10, using
sudo apt-get install libsfml-dev
to get them. Now I'm trying to get a sf::Text centered in the sreen. To do this, I set the origin of the text (the place that is used to make transformations such as setting position, rotating, etc) to the center of the bounding box of the sf::Text, and then set the position to the center of the screen, like so:
//declare text
sf::Font font;
sf::Text text;
font.loadFromFile("helvetica.ttf");
text.setFont(font);
text.setString("RANDOMTEXT");
text.setCharacterSize(100);
text.setColor(sf::Color::White);
text.setStyle(sf::Text::Regular);
//center text
sf::FloatRect textRect = text.getLocalBounds();
text.setOrigin(textRect.width/2,textRect.height/2);
text.setPosition(sf::Vector2f(SCRWIDTH/2.0f,SCRHEIGHT/2.0f));
This does not work, the text is off by some amount, like 3 on the x axis and 25 on the y axis. Oddly, if you set up a sf::RectangleShape to represent the bounding box of the text, that rectangle IS centered and correctly sized to fit the text. But then the text is drawn out of that box with the previously mentioned offset.
In this image I've marked the center of the screen, painted a sf::RectangleShape in the place of the bounding box of the text, and the sf::Text.
http://i.imgur.com/4jzMouj.png
That image was generated by this code:
const int SCRWIDTH = 800;
const int SCRHEIGHT = 600;
int main() {
sf::RenderWindow window;
window.create(sf::VideoMode(SCRWIDTH,SCRHEIGHT), "MYGAME" ,sf::Style::Default);
window.setMouseCursorVisible(false);
window.setVerticalSyncEnabled(true);
sf::Font font;
sf::Text text;
font.loadFromFile("helvetica.ttf");
text.setFont(font);
text.setString("RANDOMTEXT");
text.setCharacterSize(100);
text.setColor(sf::Color::White);
text.setStyle(sf::Text::Regular);
sf::FloatRect textRect = text.getLocalBounds();
text.setOrigin(textRect.width/2,textRect.height/2);
text.setPosition(sf::Vector2f(SCRWIDTH/2.0f,SCRHEIGHT/2.0f));
sf::RectangleShape rect(sf::Vector2f(textRect.width,textRect.height));
rect.setFillColor(sf::Color::Blue);
rect.setOrigin(rect.getSize().x/2,rect.getSize().y/2);
rect.setPosition(text.getPosition());
sf::RectangleShape RectW;
RectW.setSize(sf::Vector2f(SCRWIDTH, 0.0));
RectW.setOutlineColor(sf::Color::Red);
RectW.setOutlineThickness(1);
RectW.setPosition(0, SCRHEIGHT / 2);
sf::RectangleShape RectH;
RectH.setSize(sf::Vector2f(0.0, SCRHEIGHT));
RectH.setOutlineColor(sf::Color::Red);
RectH.setOutlineThickness(1);
RectH.setPosition(SCRWIDTH / 2, 0);
while(window.isOpen()) {
window.clear();
window.draw(rect);
window.draw(text);
window.draw(RectW);
window.draw(RectH);
window.display();
if (sf::Keyboard::isKeyPressed(sf::Keyboard::Escape)) {
window.close();
}
}
return 1;
}
How can I get it to be centered and inside of it's bounding box, as it should be?
sf::Text::getLocalBounds() has non-zero values for the top and left fields, so you can't ignore them when centering the origin.
Try this instead:
//center text
sf::FloatRect textRect = text.getLocalBounds();
text.setOrigin(textRect.left + textRect.width/2.0f,
textRect.top + textRect.height/2.0f);
text.setPosition(sf::Vector2f(SCRWIDTH/2.0f,SCRHEIGHT/2.0f));
I think this is a know problem with SFML's text rendering. Head on over to their issue tracker and take a look at this issue.
Also you could ask at their development forum. The developers their are always very friendly and helpful.
In addition to Emile's answer, instead of using textRect.height, you should use the maxHeight from the code below:
for (size_t characterIndex = 0; characterIndex < text.size(); ++characterIndex)
{
currentHeight = font->getGlyph(text[characterIndex], 12, false).bounds.height;
if (currentHeight > maxHeight)
{
maxHeight = currentHeight;
}
}
Explanation here:
This is because the first line is aligned vertically on the height of the tallest character -- even if it's not in your string. This is to keep the top of the string steady even if you add higher characters on the first line.
The exact computation is not straight-forward: you would have to iterate through all the characters of the first line, compute the highest character size, subtract this from the CharacterSize of your sf::Text, and subtract the result from the height of the bounding rectangle.
Another very important note: You may upset the look of the text if you draw it at a non-integer position. This seems to include the origin as well... (So round your origin + position to the nearest integer!)