How to change Image source at runtime?

13 Aug 2013, 19:40

Hey there,

While using NoesisGUI in C++ with OpenGL, I noticed that I need to replace the source of an image at runtime.
But... how can I do that? I saw that Image has a SetSource-function, but where do I get the resource from.

I have all of my image resource already built with the BuildTool, but I don't know how to switch them at runtime.

As a workaround, I know I could have two images and hide/show them as I need at runtime, but I would prefer the other method.

14 Aug 2013, 19:48

Hi Jan,

Although it is possible to use images that are not declared in the xaml, that is not recommended (and not easy). The best way to do this is having a dictionary with all the images, and select the one you want. Because the images are declared in the XAML they can be converted to textures (compressed to optimal format) at build time. For example:

<Grid
  xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" UseLayoutRounding="True" >

    <Grid.Resources>
     <ResourceDictionary>
		    <ImageBrush x:Key="brush0" ImageSource="calculator.png" Stretch="None"/>
		    <ImageBrush x:Key="brush1" ImageSource="calendar.png" Stretch="None"/>
		    <ImageBrush x:Key="brush2" ImageSource="camera.png" Stretch="None"/>
     </ResourceDictionary>
    </Grid.Resources>

    <Rectangle x:Name="img" Fill="{StaticResource brush1}" Width="48" Height="48"/>
</Grid>

Note that we are activating LayoutRounding and setting the exact Width and Height of the image to get perfect pixel 1:1 when drawing the image.

For changing the image at runtime you would do

Ptr<IResourceKey> key = ResourceKeyString::Create("brush2");
ImageBrush* brush = xaml->FindResource<ImageBrush>(key.GetPtr());
Rectangle* rectangle = xaml->FindName<Rectangle>("img");
rectangle->SetFill(brush);

Note that if you are going to use several images it is better to use an atlas for all of them. Our tutorial about images explains how to do it.

15 Aug 2013, 11:28

Is there any way to create Image from the file (bytes array)? We're making game with moddable content... it's required feature.

15 Aug 2013, 13:32

Is there any way to create Image from the file (bytes array)? We're making game with moddable content... it's required feature.

Yes, although the API is not properly exposed. What you don't have in runtime is the importer (create an image from .jpg, .png, ...). That byte array you mention is already raw memory with RGBs right?

15 Aug 2013, 15:39

jsantos, for a real example, we have icons for the game items in PNG24 format. Modders can change icons or add their own icons (in PNG24 format), run our "ModPacker" utility and get "mod"-file to drop in the game folder. On launch it's loaded in memory and every file inside it can be accessed from the virtual file system as bytes array or memory stream.

16 Aug 2013, 04:13

If you can fill correctly a Drawing::Image class, we can easily do the rest of the part (creating a texture and passing it to ImageSource). You have to convert from PNG to raw data because there is not support for that in the runtime library.

But there is another problem, doing that at runtime, the texture we create is not compressed (to reduce the size of the runtime the compressor is not included) and that probably can hurt performance, specially on mobiles where compressed textures (DXT, PVRTC) draw usually faster.

That is exactly what BuildTool does, compressing the images to texture at build time(yet not implemented in iphone or android by the way)

Is there any possibility to incorporate BuildTool to that ModPacker utility?

16 Aug 2013, 04:27

jsantos, our game is PC/Mac only, so optimization is not in high priority. We can incorporate BuildTool to ModPacker tool if it required or give much better performance to the game.
How to fill the "Drawing::Image" class from the Unity?

18 Aug 2013, 18:55

There is no proxy for the Drawing::Image class. We would have to add it and see how to support it as a valid ImageSource.

What priority is this for you?

18 Aug 2013, 19:09

jsantos, our game is not coming soon, so we can wait for this feature if you have more important tasks. But maybe others customers would need it. In some projects it's a must-have feature — for displaying user-uploaded avatars, loading images from web in tutorials, etc...

20 Aug 2013, 15:43

Yes, this feature is in the list. As soon as critical bugs are fixed this will become high priority.

Thanks!

How to change Image source at runtime? Topic is solved

How to change Image source at runtime?

Re: How to change Image source at runtime?

Re: How to change Image source at runtime?

Re: How to change Image source at runtime?

Re: How to change Image source at runtime?

Re: How to change Image source at runtime?

Re: How to change Image source at runtime?

Re: How to change Image source at runtime?

Re: How to change Image source at runtime?

Re: How to change Image source at runtime?

Who is online