How to read pixel color?

[coter]

I have a image, it should not be displayed on the screen.  But I need the color values of certain pixels. Exists in pixi analog getPixel from as3? 

 

If pixi doesn't exist a worthy counterpart, then the second question is how to translate a color value from a context.getimageData().data in the format 0x00000000, suitable for graphics.beginFill() ?

[xerver]

getImageData is a Uint8ClampedArray of [R,G,B,A, R,G,B,A, ...] values. The format that graphics takes in a number that represents the RGB value. So 0xRRGGBB.

You can use a utility in pixi designed specifically to take an array [R, G, B] and give you 0xRRGGBB: https://github.com/pixijs/pixi.js/blob/master/src/core/utils/index.js#L56-L65

[coter]

Oh, it's a regular cent

[coter]

getImageData is a Uint8ClampedArray of [R,G,B,A, R,G,B,A, ...] values. The format that graphics takes in a number that represents the RGB value. So 0xRRGGBB.

You can use a utility in pixi designed specifically to take an array [R, G, B] and give you 0xRRGGBB: https://github.com/pixijs/pixi.js/blob/master/src/core/utils/index.js#L56-L65

 

And why does PIXI.utils.rgb2hex([255,255,255]) returns -16777471 is 000000?

[xerver]

Because rgb2hex is for working with normalized colors, those util functions were made to work with WebGL values.

The [R, G, B] array expects each value to be in the range [0, 1]. You can either normalize your [R,G,B] array (by dividing each value by 255) or use a different formula to calculate the number:

((rgb[0] << 16) + (rgb[1] << 8) + rgb[2])

[shepelevstas]

Hello!

I want to use png image as a height map for an isometric pixel game. I don't need to display it. I only need to load it and read pixel values in form of [r,g,b,a]. There are libs like png.js, which has png.getPixel(x,y). But I believe PIXI already has all I need for that. How can I do it? Instance of what class should I use? Or is there a way to convert a png image to a typed array? Or may be all this is a bad idea?

[ivan.popelyshev]

Its better to use pure 2d context for that. Create a canvas, use `getImageData` . If you use it wiht pixi loader you can get canvas either in "texture.baseTexture.source" (v4) or in "texture.baseTexture.resource.source" (v5).

Yes, PixiJS does not cover everything that 2d context does, its better to know how it works. I used context2d with pixi webgl many times : https://pixijs.io/examples/?v=v5.0.0-rc.2#/textures/gradient-resource.js

Some people take images from loader, make bitmaps from them and use them for interaction

P.S. You've missed, this thread is not related to your problem. It happens.

[shepelevstas]

Thank you!
I wrote a class to handle height maps from png images!

class HMap {
	constructor(img, offsetX = 0, offsetY = 0){
		this._w = img.width
		this._h = img.height
		this._offsetX = offsetX
		this._offsetY = offsetY
		this._data = this._getData(img)
	}

	_getData(img){
		const canvas = document.createElement('canvas')
		canvas.width = this._w
		canvas.height = this._h
		const context = canvas.getContext('2d', { alpha: false })
		context.drawImage(img, 0, 0, this._w, this._h)
		return context.getImageData(0, 0, this._w, this._h).data
	}

	pixel(x, y){
		if (
			x < this._offsetX ||
			x >= this._offsetX + this._w ||
			y < this._offsetY ||
			y >= this._offsetY + this._h
		) return [this._data[0], this._data[1], this._data[2]]
		const i = (y - this._offsetY) * this._w * 4 + (x - this._offsetX) * 4
		return [this._data[i], this._data[i+1], this._data[i+2]]
	}
}

And I get img from "PIXI.loader.resources['height_map.png'].data"! Is it ok? I could not find anything about "texture.baseTexture.source" or "texture.baseTexture.resource.source" in docs or source files.

[ivan.popelyshev]

Yes, its fine.