Change color in a sprite

[ArtemKuchinParticipant]

hello!

I am very new to Monkey. I learned the languages Prtty easy (i already have C,ASM,C++,C#,perl,php etc… in my work, so, this is nothing new), but i am not good with graphics. Mostly done data processing all my life.

So, i need to have several sprites, mostluy monochrome, but some can have several colors. And before drawng them i need to change a certain color to other one in a sprite. I have no clue where to start for this task. Everything is strictly 2d.

For exaple, i need to draw 50 monochrome sprites. I load them from file Then i need to change thge color of a sprte to some other color. For example, there are white by default and i change to red. Then draw 50 red sprites. The colro is actually user selectable, if it matters.

[HezkoreParticipant]

Just draw the sprites as normal, and when you want to switch colour you do canvas.color=Color.Red or whatever and draw all the red sprites.
You can also do canvas.color=New Color( r:float, g:float, b:float) to set your own custom colour.

I don’t have Monkey 2 installed right now, so the syntax is bound to be incorrect, but the general idea will work.

[nerobotParticipant]

Also there is an Image.Color property.

[ArtemKuchinParticipant]

Thank you

I tried mojotest app from bananas

 

did this:

image=Image.Load( “asset::RedbrushAlpha.png” ) image=Image.Load( “asset::RedbrushAlpha.png” ) image.Color=Color.Grey

The result is strange. Seems .color does not replacem pixel colors, but mixes with pixels in image.

See attached file.

 

Also, this way i do not have any way to choose what color to replace. But it is secondary task.

Attachments:

1. 

   -изображение-2017-9-8_8-21-30.559.jpg
   

[nerobotParticipant]

Yes, colors mixes. To get clean custom color your source image should be white.

[ArtemKuchinParticipant]

Aha, found this in image class description

 

<li class=”mx2docs”>Color – when rendering an image to a canvas, this property is multiplied by the current canvas color and the result is multiplied by actual image pixel colors to achieve the final color to be rendered.

So, color does not do it.

I guess i need a way to directly manipulate pixels in image or on canvas in ARGB fomat.

I don’t see anyt ReadPixels/WritePixels in mojo2 for images and buffers.

Is it possible?

[abakoboParticipant]

For exaple, i need to draw 50 monochrome sprites. I load them from file Then i need to change thge color of a sprte to some other color. For example, there are white by default and i change to red. Then draw 50 red sprites. The colro is actually user selectable, if it matters.

If you start with white images you can use the .Color stuff because white multiplied by a color is the color…
I made a small sample (attached zip) that shows that the white dot is always getting the correct color.

I don’t see anyt ReadPixels/WritePixels in mojo2 for images and buffers.

There’s something with Image.Texture and Pixmaps.GetPixel but I don’t remember and the link to Texture in the docs is broken.. Can’t find the example I made at the time.

I made a small sample (attached zip) that shows that the white dot is always getting the correct color.

EDIT: Texture is hidden from docs.. At the time I did some modifications to play around with monkey2 itself so I don’t really know how you can “extract” the pixmap of an Image. Maybe create a new Canvas with the Image then myCanvas.CopyPixmap then myPixmap.Getpixel. But this is so complicated. Image.GetPixel would be nicer..

Attachments:

1. sprite_color.zip

[abakoboParticipant]

here’s an Image Extension that will do Image.GetPixel (very slow!). There’s also an Image.GetPixmap (faster to scan the whole image (untested)) but i’m not quite sure how the resource will be managed..

I’m not sure it’s the right/good way to do it though! It’s so complex for such a simple thing…

Monkey

[crayon-5cba85cab8465885813351 inline="true" ]Class Image Extension Method GetPixel:Color(x:Int,y:Int) Local myCustomImage:=New Image (Self.Width,Self.Height) Local myCanvas:=New Canvas(myCustomImage) myCanvas.Clear(Color.None) myCanvas.DrawImage(Self,0,0) myCanvas.Flush() Local myRecti:=New Recti(0,0,Self.Width-1,Self.Height-1) Local myPixmap:=myCanvas.CopyPixmap(myRecti) Local c:=myPixmap.GetPixel(x,y) myPixmap.Discard() myCustomImage.Discard() Return c End Method GetPixmap:Pixmap() Local myCustomImage:=New Image (Self.Width,Self.Height) Local myCanvas:=New Canvas(myCustomImage) myCanvas.Clear(Color.None) myCanvas.DrawImage(Self,0,0) myCanvas.Flush() Local myRecti:=New Recti(0,0,Self.Width-1,Self.Height-1) Local myPixmap:=myCanvas.CopyPixmap(myRecti) myCustomImage.Discard() Return myPixmap End End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

[crayon-5cba85cab8465885813351 inline="true" ]Class Image Extension Method GetPixel:Color(x:Int,y:Int) Local myCustomImage:=New Image (Self.Width,Self.Height) Local myCanvas:=New Canvas(myCustomImage) myCanvas.Clear(Color.None) myCanvas.DrawImage(Self,0,0) myCanvas.Flush() Local myRecti:=New Recti(0,0,Self.Width-1,Self.Height-1) Local myPixmap:=myCanvas.CopyPixmap(myRecti) Local c:=myPixmap.GetPixel(x,y) myPixmap.Discard() myCustomImage.Discard() Return c End Method GetPixmap:Pixmap() Local myCustomImage:=New Image (Self.Width,Self.Height) Local myCanvas:=New Canvas(myCustomImage) myCanvas.Clear(Color.None) myCanvas.DrawImage(Self,0,0) myCanvas.Flush() Local myRecti:=New Recti(0,0,Self.Width-1,Self.Height-1) Local myPixmap:=myCanvas.CopyPixmap(myRecti) myCustomImage.Discard() Return myPixmap End End

[/crayon]

[TomToadParticipant]

You could always keep a copy of the image in a pixmap, then you can alter the pixmap with pixmap.SetPixel() when you need to and use New Image(pixmap) to transfer the altered pixmap to an image for rendering

Monkey

Namespace myapp #Import "<std>" #Import "<mojo>" Using std.. Using mojo.. Class MyWindow Extends Window Field pixmap:Pixmap = New Pixmap(64,64) Field image:Image Field currentColor:Color = Color.White Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null ) Super.New( title,width,height,flags ) 'let's fill the pixmap with a red circle For Local x:Int = -32 To 31 For Local y:Int = -32 To 31 If Sqrt(x*x+y*y) < 32 pixmap.SetPixel(x+32,y+32,Color.Red) Else pixmap.SetPixel(x+32,y+32,Color.Black) End If Next Next 'Now insert white square For Local x:Int = 24 To 40 For Local y:Int = 24 To 40 pixmap.SetPixel(x,y,Color.White) Next Next 'now load the pixmap into an image image = New Image(pixmap) End Method OnRender( canvas:Canvas ) Override App.RequestRender() 'if space key is pressed, change the color to the next one If Keyboard.KeyPressed(Key.Space) 'get the next color Select currentColor.ToARGB() Case Color.White.ToARGB() currentColor = Color.Blue Case Color.Blue.ToARGB() currentColor = Color.Green Case Color.Green.ToARGB() currentColor = Color.Yellow Case Color.Yellow.ToARGB() currentColor = Color.White End Select 'draw a square in the pixmap For Local x:Int = 24 To 40 For Local y:Int = 24 To 40 pixmap.SetPixel(x,y,currentColor) Next Next 'transfer the pixmap to image image = New Image(pixmap) End If 'draw the image canvas.DrawImage(image,100,100) End End Function Main() New AppInstance New MyWindow App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81

Namespace myapp   #Import "<std>" #Import "<mojo>"   Using std.. Using mojo..   Class MyWindow Extends Window Field pixmap:Pixmap = New Pixmap(64,64) Field image:Image Field currentColor:Color = Color.White   Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null )   Super.New( title,width,height,flags ) 'let's fill the pixmap with a red circle For Local x:Int = -32 To 31 For Local y:Int = -32 To 31 If Sqrt(x*x+y*y) < 32 pixmap.SetPixel(x+32,y+32,Color.Red) Else pixmap.SetPixel(x+32,y+32,Color.Black) End If Next Next 'Now insert white square For Local x:Int = 24 To 40 For Local y:Int = 24 To 40 pixmap.SetPixel(x,y,Color.White) Next Next 'now load the pixmap into an image image = New Image(pixmap) End   Method OnRender( canvas:Canvas ) Override App.RequestRender() 'if space key is pressed, change the color to the next one If Keyboard.KeyPressed(Key.Space) 'get the next color Select currentColor.ToARGB() Case Color.White.ToARGB() currentColor = Color.Blue Case Color.Blue.ToARGB() currentColor = Color.Green Case Color.Green.ToARGB() currentColor = Color.Yellow Case Color.Yellow.ToARGB() currentColor = Color.White End Select 'draw a square in the pixmap For Local x:Int = 24 To 40 For Local y:Int = 24 To 40 pixmap.SetPixel(x,y,currentColor) Next Next 'transfer the pixmap to image image = New Image(pixmap) End If 'draw the image canvas.DrawImage(image,100,100) End End   Function Main()   New AppInstance New MyWindow App.Run() End

[nerobotParticipant]

Or you can write own fragment shader to process images.

Little more info: http://monkeycoder.co.nz/forums/topic/image-with-texture-mask/

My idea is

• pass R1 G1 B1 /  R2 G2 B2 (to get by-component control) integer parameters into shader using Image.Material.SetInt( “R1”,200 ) method,
• inside of shader get color components, translate them into integers (color has ‘float vec4’ type in shader) and compare with your R1 G1 B1
• if there is a match – replace color with R2 G2 B2, converted back to float

[abakoboParticipant]

You could always keep a copy of the image in a pixmap

To me the problem is more how to get the pixmap out of a loaded .png image. Once you have the pixmap you can use Pixmap.Getpixel() or GetARGBpixel().

Nerobot’s solution is of course top performance but needs more work/knowledge.

[ArtemKuchinParticipant]

aha, so i neex pixelmap, not image

pixelmap has load  method which load from png and save which saves to png

that’s very good, i will play with it

[abakoboParticipant]

pixelmap has load method

how can I have missed that!

[ArtemKuchinParticipant]

Okay, i have done it. See code below. HOWEVER one thing i don’t understand. if ALPHA channel is ZERO i can still the color. To fully hide pixel i need to set ALPHA to zero and RGB to zero also. This i don’t understand.

 

Monkey

Namespace pmtest #Import "<std>" #Import "<mojo>" #Import "assets/" Using std.. Using mojo.. Class MyWindow Extends Window Field pixmap:std.graphics.Pixmap Field image:Image Field k:Int Field colors:UInt[] Field currentColor:Color = Color.White Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null ) Super.New( title,width,height,flags ) colors=New UInt[5] colors[0]=$FF0000FF colors[1]=$FF00FF00 colors[2]=$FFFF0000 colors[3]=$FF00FFFF colors[4]=$FFFFFF00 pixmap= std.graphics.Pixmap.Load("asset::test.png",std.graphics.PixelFormat.RGBA32,True) Local p:UInt Ptr p=Cast<UInt Ptr>(pixmap.Data) For Local i:Int=0 To 100*100 ' ABGR If p[i]=$FF000000 Then p[i]=colors[0] Endif Next image = New Image(pixmap) End Method OnRender( canvas:Canvas ) Override App.RequestRender() If Keyboard.KeyPressed(Key.Space) k=k+1 If k>4 Then k=0 Local p:UInt Ptr p=Cast<UInt Ptr>(pixmap.Data) For Local i:Int=0 To 100*100 ' if anythung non transparent If p[i] & $FF000000 Then p[i]=colors[k] Endif Next image = New Image(pixmap) End If canvas.Clear(Color.Grey) canvas.Color=Color.Blue canvas.DrawOval(100,100,100,50) canvas.Color=Color.White canvas.DrawImage(image,100,100) End End Function Main() New AppInstance New MyWindow App.Run() End

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

Namespace pmtest #Import "<std>" #Import "<mojo>" #Import "assets/" Using std.. Using mojo.. Class MyWindow Extends Window Field pixmap:std.graphics.Pixmap Field image:Image Field k:Int Field colors:UInt[] Field currentColor:Color = Color.White Method New( title:String="Simple mojo app",width:Int=640,height:Int=480,flags:WindowFlags=Null ) Super.New( title,width,height,flags ) colors=New UInt[5] colors[0]=$FF0000FF colors[1]=$FF00FF00 colors[2]=$FFFF0000 colors[3]=$FF00FFFF colors[4]=$FFFFFF00 pixmap= std.graphics.Pixmap.Load("asset::test.png",std.graphics.PixelFormat.RGBA32,True) Local p:UInt Ptr p=Cast<UInt Ptr>(pixmap.Data) For Local i:Int=0 To 100*100 ' ABGR If p[i]=$FF000000 Then p[i]=colors[0] Endif Next image = New Image(pixmap) End Method OnRender( canvas:Canvas ) Override App.RequestRender() If Keyboard.KeyPressed(Key.Space) k=k+1 If k>4 Then k=0 Local p:UInt Ptr p=Cast<UInt Ptr>(pixmap.Data) For Local i:Int=0 To 100*100 ' if anythung non transparent If p[i] & $FF000000 Then p[i]=colors[k] Endif Next image = New Image(pixmap) End If canvas.Clear(Color.Grey) canvas.Color=Color.Blue canvas.DrawOval(100,100,100,50) canvas.Color=Color.White canvas.DrawImage(image,100,100) End End Function Main() New AppInstance New MyWindow App.Run() End

Attachments:

1. 

   test.png
   

[Mark SiblyKeymaster]

if ALPHA channel is ZERO i can still the color. To fully hide pixel i need to set ALPHA to zero and RGB to zero also.

This is because image rendering uses pre-multiplied alpha. This is a technique where image colors are assumed to be pre-multiplied by image alpha – more information here (and much more via goggle):

Premultiplied alpha

You can premultiply pixmap data like this by setting the pmAlpha parameter of Pixmap.Load to true when loading a pixmap, or using the Pixmap.PremultiplyAlpha method.

Note that Image.Load is really just a ‘wrapper’ around something like this:

Monkey

Local pixmap:=Pixmap.Load( path,Null,True ) Local image:=New Image( pixmap ) Return image

1 2 3 4

Local pixmap:=Pixmap.Load( path,Null,True ) Local image:=New Image( pixmap ) Return image

If you want to modify  image pixels when loading, the best way to do it is to use Pixmap.Load as above, modify the pixmap, then use New Image to create  anew image with the modified pixmap.

Image are not really intended to be ‘read’ by the CPU. In fact, the more HW evolves, the harder this gets – in Open GL ES there aren’t even any commands for reading texture data, so you need to render and then copy from the backbuffer! The has the potential to lose lots of precision along the way, as textures/backbuffers masy be in a crappy format behind the scenes on some taregets and texture data may be compressed etc etc.

The only way to guarantee ‘clean’ pixele data is by using Pixmap.Load and using the pixel data *before* it reaches the image/texture. Once things reach the GPU, they should ideally only be read by the GPU – which includes shaders, which can easily access texture data (although again it may not be exactly the same as the original pixmap data on some targets).

[Author]

Posts