So I am working on something that involves the photo and scene modules. I take a photo from the photoalbum and display it as SpriteNode on the screen through Texture. However, I noticed that some pictures get displayed color inverted this way. I figured out that it seemed to be when the images are PNGs, JPEGs are just fine. To solve this, I could run an color inversion filter if the asset is PNG, but I would like to know where the problem comes from in the first place. Any advice ?
Forum Archive
Image.UI gets color inverted if photo is PNG
@FuckingNerd never seen that. Just tried with a png, no problem. Possible to post your png?
here is the image from my album and a screenshot from my app
relevant code
def prev_image(self):
if self.current_album_pic_id <= 0:
return
self.current_album_pic_id -= 1
self.canvasSprite.texture = Texture( self.get_current_image() )
self.rescale_canvas()
def get_current_image(self):
image = self.get_current_asset().get_ui_image()
return image
@FuckingNerd I see it correctly, non inverted colors, but not as an asset, as a downloaded file
The file is fine. The display as SpriteNode is the issue. JPG gets rendered correctly PNG not. I have many other PNGs, all seem to be color inverted when displayed as a spritenode.
@FuckingNerd Weird. I use a SpriteNode with texture = your .png, without colors inversion
iPadOS 15.6.1
Can you change the texture with .yourSpriteNode.texture = Texture( image ) ? I suspect it might be the assignment where it happens. Not during initialization.
@FuckingNerd that's what I did. I use an old script where I put your png as texture
from scene import *
import sound
import random
import math
class MyScene (Scene):
def setup(self):
self.background_color = 'midnightblue'
self.ship = SpriteNode()#'spc:PlayerShip1Orange')
self.ship.texture = Texture('1 - 97f7tRn.png')
self.ship.position = self.size / 2
self.add_child(self.ship)
self.lasers=[]
def updatex(self):
x, y, z = gravity()
pos = self.ship.position
pos += (x * 15, y * 15)
# Don't allow the ship to move beyond the screen bounds:
pos.x = max(0, min(self.size.w, pos.x))
pos.y = max(0, min(self.size.h, pos.y))
self.ship.position = pos
def touch_began(self, touch):
laser_animation=Action.repeat_forever(Action.sequence(Action.call(self.fire_laser), Action.wait(0.1) ) )
self.run_action(laser_animation, 'laser')
def touch_ended(self,touch):
self.remove_action('laser')
def remove_laser(self,laser):
del self.lasers[laser]
def fire_laser(self):
a=random.random()*500-250
laser = SpriteNode('spc:LaserBlue9', position=self.ship.position, z_position=-1, parent=self)
self.lasers.append(laser)
laser.run_action(Action.sequence(Action.move_by(a, 1000), Action.remove(), Action.call(lambda:self.remove_laser(laser))))
sound.play_effect('arcade:Laser_1')
run(MyScene(), show_fps=True)
So the photo module as asset is the issue.
@FuckingNerd No idea, try to import your photo as a local Pythonista file and then use it as texture
I have no idea how to access those imported files(never done it). This is not the way it seems. Can you help me out ?
@FuckingNerd I think you have correctly imported some images and you can replace in my little script my 1 - 97f7tRn.png by one of your IMG_xxxx.PNG
Did that. No color invert. So it’s the asset.
@FuckingNerd I guess, sorry, I can't help more 😢
Helps for the effort man!
@FuckingNerd Perhaps, you could
- get the asset as an ui.Image
- write it as a local (temporary) file
- use it as Texture
- remove the local file
I was able to solve the problem.
Instead of using asset.get_ui_image() and pass it on to SpriteNode(Texture(..ui_image..)) I got a PIL image directly with asset.get_image() and transformed it with the scripts found here to and ui image.
relevant from above link:
```
pil <=> ui
def pil2ui(imgIn):
with io.BytesIO() as bIO:
imgIn.save(bIO, 'PNG')
imgOut = ui.Image.from_data(bIO.getvalue())
del bIO
return imgOut
```
I hope you find this useful google hero from the future. This solves “weird false inverted colors for PNG ui.image from assets in photo module”.
@FuckingNerd 👍
@FuckingNerd you could try Asset.get_image_data which could be quicker
Asset.get_image_data(original=False)
Fetch the asset’s image data, and return it as a io.BytesIO object.
You can use io.BytesIO.getvalue() to get the image data as a byte string.
By default, the most recent version of the image is returned;
pass original=True to get the image without any adjustments/edits.
If you only need the image for saving it as a file,
this is more efficient than Asset.get_image().
The returned io.BytesIO has an additional uti attribute
that can be used to determine the file type of the image data.