Custom colors (other than the 16 pre-defined?)

[johnbbq]

Hi there. Today I have been creating new sprites for our game, and I've been having a hard time finding how I can set up an RGB color. I am not sure what's the right format.

I found this page: http://www.barth-dev.de/online/rgb565-color-picker/ . But if I use their color values (for example 0xFE82), I get a completely different color on screen.

The only colors that work well are the ones defined in the library (TS_16b_Yellow for example).

Can you tell me what format should I enter the color values for each sprite pixel?

Thank you,

[dulsi]

My suggestion is to not set colors directly. Create your image in a painting program. Dowload zet23t's td2play (https://github.com/zet23t/td2play). Go to tools/js_image_converter. Load the html file into a browser. Use it to convert your images.

[johnbbq]

Thank you Dulsi! I will check it out.

[johnbbq]

So I tried the tool, but I'm not being able to make it work:

https://screencast.com/t/yUwMqJBo

The C code generated by the tool has 18 entries per line (when the image is 9 pixels wide), but it has the right number of lines (7). I am not sure if the settings I entered are the right ones. They are in the screenshot above.

All I get if I use that code is a square of red and black pixels.

But everything works great when I use the pre-defined colors.

Can anyone help? Thanks in advance.

[dulsi]

The C code generated by the tool has 18 entries per line (when the image is 9 pixels wide), but it has the right number of lines (7). I am not sure if the settings I entered are the right ones. They are in the screenshot above.

You have Color Conversion set to "RGB-565 (16bit)". That is two bytes per pixel which is why it has 18 entries per line. You should use that if you have "display.setBitDepth(TSBitDepth16);" in your code.

If you are using "display.setBitDepth(TSBitDepth8);", you need to change it to "RGB-332 (8bit)".

[johnbbq]

Hey Dulsi, thanks for your reply. Yes, display is set to 16 bit in my code, the exact line you wrote is in the setup.

Here is how I define the display:

TinyScreen display = TinyScreen(TinyScreenPlus);

And here is what my setup function looks like:

void setup() {
  arcadeInit();
  display.begin();
  display.setBitDepth(TSBitDepth16);
  display.setBrightness(15);
  display.setFlip(false);

  USBDevice.init();
  USBDevice.attach();
  SerialUSB.begin(9600);

}

Here is what the sprite code looks like:

const unsigned int tacoInvaderBitmap[] = {
  0x00,0x00,0x00,0x00,0x00,0x1f,0x46,0xcb,0x46,0xcb,0x46,0xcb,0x00,0x1f,0x00,0x00,0x00,0x00,
  0x00,0x00,0x00,0x1f,0x46,0xcb,0x2c,0xdb,0x34,0xba,0x2c,0xbb,0x46,0xcb,0x00,0x1f,0x00,0x00,
  0x46,0xcb,0x21,0x09,0x2c,0xdb,0x2c,0xda,0x34,0xbb,0x2c,0xba,0x2c,0xbb,0x21,0x09,0x46,0xcb,
  0x21,0x09,0x2c,0xdb,0x2c,0xda,0x2c,0xbb,0x2c,0xba,0x34,0xbb,0x2c,0xba,0x34,0xbb,0x21,0x09,
  0x21,0x09,0x2c,0xbb,0x34,0xda,0x2c,0xbb,0x2c,0xba,0x34,0xbb,0x2c,0xba,0x34,0xbb,0x21,0x09,
  0x2c,0xbb,0x34,0xba,0x2c,0xbb,0x34,0xba,0x2c,0xbb,0x34,0xba,0x2c,0xbb,0x34,0xba,0x2c,0xbb,
  0x2c,0xbb,0x34,0xba,0x2c,0xdb,0x2c,0xba,0x34,0xdb,0x2c,0xba,0x2c,0xdb,0x34,0xba,0x2c,0xdb,
 
};

Attached is how the image is looking like on the TinyScreen. The red square is this sprite, right below is another sprite defined with pre-defined colors.

Any ideas what may be causing this? Thanks again for your help.

[dulsi]

const unsigned int tacoInvaderBitmap[] = {

This is not what the image generator created. You need it to be char not int. If your drawing code requires int, you can cast it to an int pointer. (Alternatively you could combine the characters. So "0x00, 0x00" becomes "0x0000". I don't know off the top of my head if TinyArcade is little or big endian. If it is little endian you need to reverse the pairs when combining. So "0x10, 0x20" would become "0x2010". Personally I wouldn't do that as using the output of the image generator directly is easily than fiddling with it afterward.)

[HunterHykes]

Hi John,

The reason you're getting strange colors is because the TinyScreen's default state displays colors in a BGR format rather than an RGB. This is mentioned in the TinyScreen library documentation found at https://github.com/TinyCircuits/TinyCircuits-TinyScreen_Lib/blob/master/TinyScreenReferenceManual.pdf. Essentially what must be done is the hexadecimal representation must be converted to binary. Then, note that the first 5 bits are your Red bits, the next 6 are your Green bits, and the final 5 bits are your Blue bits. After taking note of this, you will rearrange the bits into a BGR format from the RGB.

For example:
1110 0110 1100 1010   (0xE6CA) RGB becomes
0101 0110 1101 1100   (0x56DC) BGR

You could do this in order to keep using the predefined colors, or you could also switch to the RGB color mode using display.setColorMode(TSColorModeRGB) where display is an instance of a TinyScreen object.

I hope this helps.

-Hunter

[johnbbq]

Hello! Sorry it took me so long to reply. I was immersed in trying to get a gameplay feature to work, and just today I've got back to this.

Dulsi, thank you for pointing my error out. Unfortunately for me I am not sure how to have the sprites be a char instead of an int (as the TinyArcade tutorial uses). But I'll start a separate thread as the tool you pointed out can be really useful.

Hunter, thank you again. I understand what the issue is now. Here is what I did to fix the problem:

- I chose to go with RGB, so I set the color mode in my program to RGB (is there a reason why BGR is better?).
- I found this online tool: http://www.barth-dev.de/online/rgb565-color-picker/ . In my Mac, pressing the color opens the color wheel, which has a color picker functionality. I kept Piskel in one window next to the browser side by side, and I was able to pick the colors directly from my image.

I replaced the default color values for the values that page me gave me, and it works like a charm!

I hope this info helps anyone who will stumble into this issue.

Cheers,