Forums

Runtime Image Source in Monogame
Last Post 07 Jun 2016 08:31 PM by Filip Dušek. 3 Replies.
Printer Friendly
  •  
  •  
  •  
  •  
  •  
Sort:
PrevPrev NextNext
You are not authorized to post a reply.
Author Messages
Reinier VensUser is Offline
New Member
New Member
Posts:2


--
07 Jun 2016 04:50 PM
    I am trying to use Empty Keys for my UI in Monogame, and all of the provided examples use a BitmapImage with a source in the UI project folder precisely matching the path of the same image in the content folder of the game project (duplicating all my assets shouldn't be necessary but I can roll with it). However, I need to be able to change the content of a control. For example, the ship editor UI needs to have an image of the player's current ship, the inventory will need to be fed a bunch of icons by the game code, etc.

    What's the protocol, here? I love the convenience of being able to use Visual Studio's Designer to craft game UI, but just trying to make the player's current ship appear in the UI has turned into a nightmare of frustration. You can't imagine how many places I've looked for a solution - I went as far as trying to turn a Texture2D into a System.Windows.Media.ImageSource myself using Microsoft WPF DirectX Extensions, but with no docs and a useless sample I had nothing to go on. I wouldn't be tearing my hair out over this, if making a sprite of my choice appear weren't something I can take care of with a single line of code in any OTHER runtime UI framework I can think of.

    Thanks in advance.
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:695


    --
    07 Jun 2016 05:16 PM
    UI was designed with MVVM design pattern in mind so properties on controls can be bind to some property in View Model or Model.

    In my Game I have all bitmap images for UI in one big resource dictionary so it's easy to change them. Every image has unique key based on usage. I use ILocalizationService interface with simple implementation of GetLocalizedImage to get any image out of that dictionary. Tho you could create your own service. I'm using ServiceManager to get instance of that service anywhere in my code.

    Every ship in my game has multiple images (large, small, icon etc). So for example
       
       <BitmapImage x:Key="FactoryItem_0_3_LargeImage" UriSource="Images/Units/FactoryItem_0_3_LargeImage.png" />
       


    This image belongs to Factory Item with Id 0 for Race with Id 3 so very simple key format. Factory Item has property of BitmapImage type, which gets actual image from dictionary.

            public BitmapImage LargeToolTipImage
            {
                get
                {
                    if (largeToolTipImage == null)
                    {
                        largeToolTipImage = LocalizationHelper.GetLocalizedImage(string.Format(largeImageResourceKeyFormat, RaceId, Id));
                        if (largeToolTipImage == null)
                        {
                            largeToolTipImage = LocalizationHelper.GetLocalizedImage("UnitToolTipImage_Placeholder");
                        }
                    }
    
                    return largeToolTipImage;
                }
            }
    


    Factory Item has its own Data Template with Image control.

    Image Source="{Binding LargeToolTipImage}" Stretch="Uniform" Grid.Row="1" Margin="2,0,2,2"

    That's it. My solution is bit more complex, because 99% of my game is data driven. You could just make Data Templates for each specific type with specific image.
    Reinier VensUser is Offline
    New Member
    New Member
    Posts:2


    --
    07 Jun 2016 07:12 PM
    It really sounds like we have similar use cases (my game is also very data-driven), but a lot of this xaml stuff goes over my head, not having used it before. See, I'm not even sure where your LocalizationHelper gets the images from. Since I'm using Monogame I import sprites using the content pipeline and receive them as Texture2Ds, and like I mentioned in my post I don't know how to turn those into BitmapImages.

    If I understand the MVVM binding thing correctly, I can use the return value of a binding property to change what image appears. But I don't understand what you were doing with FactoryItem. Is there an image at "Images/Units/FactoryItem_0_3_LargeImage.png"?

    Could it be possible for you to share a working example of sending images to the UI at runtime?

    Thanks for the help.
    Filip DušekUser is Offline
    Advanced Member
    Advanced Member
    Posts:695


    --
    07 Jun 2016 08:31 PM
    If you look at GitHub examples - http://github.com/EmptyKeys/UI_Exam...rInterface there is image MonoGameLogo.jpg in Dictionary.xaml file and in directory Images. And yes i have image at that location for Factory Item.

    You can access generated dictionaries in code with static Instance property. In GitHub examples it's Dictionary.Instance, which is collection of keys and values.
    You are not authorized to post a reply.