Line 22: Type 'number' is not assignable to type 'RGB'

Arcade Help
,
#1

Hi, so i was messing around with the fade color extension, and because its so usefull for handling colors and doing color math, i thought it would be a good idea to use this to my advantage to automatically create a “water” pallette:

let waterPalettes: color.RGB[] = []
let ogPalettes: number[][] = [
    [0, 0, 0],
    [255, 255, 255],
    [255, 33, 33],
    [255, 147, 196],
    [255, 129, 53],
    [255, 246, 9],
    [36, 156, 163],
    [20, 220, 82],
    [0, 63, 173],
    [35, 242, 255],
    [142, 46, 196],
    [164, 131, 159],
    [92, 64, 108],
    [229, 205, 196],
    [145, 70, 61],
    [0, 0, 0],
]

for (let i = 0; i < 16; i++) {
    waterPalettes[i] = color.rgb(ogPalettes[i][0], ogPalettes[i][1], ogPalettes[i][2])
    //waterPalletes[i] = color.rgb(1,1,1)
}

let waterPalette = color.rgbArrayToPalette(waterPalettes)

But for some reason, i have this error, that just wont go. I dont know why. Its a simple error so i thought somebody may know why this happens:
Line 22: Type ‘number’ is not assignable to type ‘RGB’.
Ive tried looking into the extensions source code, several times, changing things around a bit, but it still happens everytime.
I hope you can help me.

#2

Try changing line 122 from

    waterPalettes[i] = color.rgb(ogPalettes[i][0], ogPalettes[i][1], ogPalettes[i][2])

to

    waterPalettes[i] = new color.RGB(ogPalettes[i][0], ogPalettes[i][1], ogPalettes[i][2])
#3

^^ Yeah Richard’s right / that’s the fix, sorry for the bad javascript name for that color.rgb function - it’s one that converts an rgb triplet → a packed hex, not an RGB object, and I only intended to use it internally so I didn’t revise my bad naming on it D:

#4

Thanks for the quick response, but i was gonna use this palette as a buffer (did i sentence that correctly?) and now this happens:

let waterPoints: number[][] = []
let waterPalettes: color.RGB[] = []
let ogPalettes: number[][] = [
    [0, 0, 0],
    [255, 255, 255],
    [255, 33, 33],
    [255, 147, 196],
    [255, 129, 53],
    [255, 246, 9],
    [36, 156, 163],
    [20, 220, 82],
    [0, 63, 173],
    [35, 242, 255],
    [142, 46, 196],
    [164, 131, 159],
    [92, 64, 108],
    [229, 205, 196],
    [145, 70, 61],
    [0, 0, 0],
]

for (let i = 0; i < 16; i++) {
    waterPalettes[i] = new color.RGB(ogPalettes[i][0], ogPalettes[i][1], ogPalettes[i][2])
    //waterPalletes[i] = color.rgb(1,1,1)
}

let waterPalette = color.createBuffer(color.rgbArrayToPalette(waterPalettes))
/*
function wave(x0: number, y0: number, x1: number, y1: number) {
    let dx = Math.abs(x1 - x0);
    let dy = Math.abs(y1 - y0);
    let sx = (x0 < x1) ? 1 : -1;
    let sy = (y0 < y1) ? 1 : -1;
    let err = dx - dy;
    for (let i = 0; i < 40; i++) {
*/
        let x0 = 1;
        let y0 = 1; 

        screen.mapRect(x0, y0, 1, 160, waterPalette)

Line 34: Argument of type ‘Palette’ is not assignable to parameter of type ‘number[]’. Property ‘push’ is missing in type ‘Palette’.

Line 49: Argument of type ‘ColorBuffer’ is not assignable to parameter of type ‘Buffer’. Property ‘concat’ is missing in type ‘ColorBuffer’.

#5

Ah, I think you’re confusing the purpose of mapRect.

mapRect is used to map colors from the current palette to another color in the current palette; the buffer should be exactly 16 bytes long and each byte should contain a number between 0-15.

For example, let’s say you have an image with these pixels:

2 2 3 3 4 4
2 2 3 3 4 4

This would be an image with three squares: red, pink, and orange. Now let’s say I’m using a mapRect buffer with bytes that looks like this:

values:
[0, 0, 4, 3, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
bytes:
0x00 0x00 0x04 0x03 0x02 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00 0x00

If I were to call mapRect on that image, the output would be the three squares in reverse order (orange, pink, red). That’s because mapRect will replace every pixel with the color in the corresponding index in the buffer; thus: 2 → 4, 3 → 3, and 4 → 2. All other colors will be replaced with 0.

1 Like
#6

You can’t use mapRect to change a color to be a color that isn’t already in the palette. It only maps colors from one index to another.

1 Like
#7

Ohh, i understand now. what i was going for was transparent water, like that shader extension you made

but your extension had a new palette right? how did you do that??

#8

The shader extension doesn’t actually have a new palette!

It just maps to darker colors in the original palette. Here’s the mapping:

Screen Shot 2022-01-31 at 11.55.01 AM

each row is one shade darker

1 Like
#9

Thanks alot! I also never thought of storing the palette in a image, thats pretty clever.

#10

If its not too much to ask, could you also show me how to turn a string to a hex value?

example:

let hexString : string = "2000102030405060708090A0B0C0D0E0F"

let Buffer : Buffer = HexStringToHex(hexString)

for some reason hex() errors with !!proc || !bin.finalPass when i try this:

console.log(hex("000102030405060708090A0B0C0D0E0F"))
#11

@hasanchik hex is a special function called a template string; you call it like this:

hex`000102030405060708090A0B0C0D0E0F`

no parentheses and backticks instead of quotes

#12

i know, but i cant put a variable in like this:

let hexString : string = "2000102030405060708090A0B0C0D0E0F"

let Buffer : Buffer = hex`hexString` //How do i do this part?

hexstring is already a string that is hex… if that makes any sense

#13

@hasanchik you can’t do that. The hex function is only for defining buffers at compile time, not runtime.

But, you can write your own function to do this. Or just use this one I just wrote:

function hexStringToBuffer(hex: string) {
    const buf = control.createBuffer(hex.length / 2);
    for (let i = 0; i < hex.length; i += 2) {
        buf.setUint8(i / 2, parseInt(hex.substr(i, 2), 16));
    }
    return buf;
}
#14

Thanks!!! I’d never be able to figure out that! I just started doing typescript

#15

No worries! Let me know if you have any questions about the code