Font use on screen

[johnbbq]

Hi there. I have tried today to print a score in our game, but I'm not sure how the font system works.

I found an example in how fonts are used here: https://tinycircuits.com/blogs/learn/tinyscreen-battery-voltage

So I put the following lines in my setup() function:

display.setFont(thinPixel7_10ptFontInfo);
display.fontColor(0xFFFF, 0x0000);

Then in the loop function, i have an scoreUpdate() function called. Here is what it is in scoreUpdate:

display.setCursor(12, 12);
  display.print(score);

(score is a global variable, initialized to 0)
As it stands, when I run the program everything on screen is "frozen" (player can't move, nothing is updating on the screen except the player and the score), and the 0 value for the score is displayed there and it's flickering constantly.

For drawing the screen I am using the drawbuffer function that came with the TinyArcade tutorial.

Could anyone point me to the right way of doing this?

Thanks,

[HunterHykes]

Hi John,

When I looked into your issue myself, I came to the conclusion that the flickering is due to the drawBuffer() function and the display.print() function interfering with one another. If you would like to display the score in this manner, you will have to find a way to do so within the drawBuffer() function.

Personally, I am no expert on the font library. However, with some investigation into their hex values as arrays, you should be able to figure out how each character is represented and possibly work it into the drawBuffer() function. If this seems overwhelming, I can look into the issue myself to see if I can find a solution to your problem.

-Hunter

[johnbbq]

Hey Hunter. Thanks for the reply. I looked into it today, but I'm not sure what to do.

I was going to start creating a bitmap font routine to display the scores, but if you guys can give me any pointers on how to use the fonts with the drawbuffer function, that will save me a lot of time. Thank you!

Our second TinyArcade arrived yesterday, and we promptly put it together today . We are now working on two projects at the same time.

[dulsi]

Viobyte displays a score without using the font. I added in an image of numbers at 4x4 size. For color monster I needed a full font. I found one on opengameart.org. It has more complicated drawing code so viobyte might be easier to understand but you could still use the larger font. 4x4 was needed for viobyte because I wanted the maze to be as large as possible.

[HunterHykes]

If need be, an easy fix could be done by creating sprites for your text and loading in the numbers in that way. You would load in the score sprites just like any other sprite by adding it to the spriteList[] array. You would have a sprite for the ones place, tens place, hundreds place, and so on. Then, depending on the value of the score variable, you would make the sprite point to the proper bitmap.

I hope this helps.

-Hunter

[johnbbq]

Hello guys! Sorry for this late reply. Thank you for the ideas. I'll be implementing it based on your recommendations, and I'll post my solution to see what do you think.

Cheers,

[johnbbq]

Hello guys. I'm struggling with how to assign a new bitmap to a sprite on runtime. So for example:

ones->bitmap = spriteList[20]; //Assign zero sprite (sprite 20 in sprite list), to the place where the ones digit goes.

I get the following error:

base operand of '->' has non-pointer type 'ts_sprite'

What's the right way to call the instruction to change a bitmap on a sprite?

Thanks!

[HunterHykes]

Hey John,

In order to assign a new bitmap to the sprite, you need to create the bitmap(s) for the ts_sprite objects to take on. Once you have the bitmap(s) created, the assignment would look something like this:

(Given that "ones" is an instance of a ts_sprite object and "digitOneBitmap" is the bitmap for the number one)
ones.bitmap = digitOneBitmap;

This way, you will be directly assigning the unsigned int pointer named "bitmap" within the instance of a ts_sprite object named "ones" to the desired bitmap.

I hope this helps!

-Hunter

[johnbbq]

That was it Hunter, thank you! I'll continue working on the code to display the score beyond 1 digit, and I'll post my solution.

Cheers,

[johnbbq]

I'm happy to say that I was able to complete the solution to display the score system in my game. Please let me know what you think.

Here is what I did:

I created sprites for each number. For example:

Code: [Select]

ts_sprite zero = { offscreen, offscreen, 3, 5, 0, zeroBitmapFont };
There is a bitmap for each number.

Then I defined 4 sprites, one for each digit (for a number from 0 to 9999), displayed on the top right:

Code: [Select]

ts_sprite onesdigit = { 91, 2, 3, 5, 0, zeroBitmapFont };
ts_sprite tensdigit = { 87, 2, 3, 5, 0, empty };
ts_sprite hundredsdigit = { 83, 2, 3, 5, 0, empty };
ts_sprite thousandsdigit = { 79, 2, 3, 5, 0, empty };
(the empty sprite contains the same size of a number, but with ALPHA on each pixel)

I defined a score global variable:

Code: [Select]

int score = 0;
And two arrays: One for all the numbers, and one for all the digits:

Code: [Select]

ts_sprite * numbersBitmapFont[10] = { &zero, &one, &two, &three, &four, &five, &six, &seven, &eight, &nine };
ts_sprite * digits[4] = { &thousandsdigit, &hundredsdigit, &tensdigit, &onesdigit };
I added a scoreUpdate() function to the loop(), and every time I kill an enemy I add +1 to the score variable.

Here is what's in scoreUpdate():

Code: [Select]

void scoreUpdate() {
  //Convert score to string
  String scoreDisplay = String(score);
  //Determine how big is the score and how many digits will be needed to display it
  int startAt = 4 - scoreDisplay.length();

  //Go through the string, and draw each character
  for (int i = 0; i < scoreDisplay.length() ; i++) {
    int c = scoreDisplay.charAt(i);
    //c will have the ASCII value of the character, number 0 is 48 in ASCII
    int n = c - 48;
    //make digit be the right number
    digits[startAt+i]->bitmap = numbersBitmapFont[n]->bitmap;
  }
}
Cheers,