Bind properties of ObservableObject to flexable tile system?

[Shadowblitz16]

Sorry I'm new to the mvvm thing.
I was wondering how to acheave a flexible tile system simulare to what old school game consoles had..

My first problem is How do I bind Quest properties to so users can change the size, span and count of tiles and colors?

The second problem is how do I render a indexed color system?

The third is how do I combine smaller tiles into sequences of single or meta tiles?

Here is kinda what

using System.Collections.ObjectModel;
using System.Reactive.Linq;
using Avalonia.Media;
using CommunityToolkit.Mvvm.ComponentModel;

namespace AvaloniaZelda.Models;

public partial class Quest : ObservableObject
{
    [ObservableProperty] private uint _tileWidth      = 8;
    [ObservableProperty] private uint _tileHeight     = 8;
    
    [ObservableProperty] private uint _tilePageCount  = 256;
    [ObservableProperty] private uint _tilePageWidth  = 10;
    [ObservableProperty] private uint _tilePageHeight = 9;
    
    [ObservableProperty] private uint _colorPageCount  = 256;
    [ObservableProperty] private uint _colorPageWidth  = 24;
    [ObservableProperty] private uint _colorPageHeight = 24;

    
    [ObservableProperty] private ObservableCollection<Image> _tiles = new();
    [ObservableProperty] private ObservableCollection<Color> _colors = new();

    public Quest()
    {
        _tiles.Width .Bind(TileWidth );
        _tiles.Height.Bind(TileHeight);
        _tiles.Count.Bind(TilePageWidth * TilePageHeight * TilePageCount);

        _colors.Count.Bind(ColorPageWidth * ColorPageHeight * ColorPageCount);
    }
}

[Shadowblitz16]

#16202 this is related but not the same question.
This has more to do with the viewmodel and models.
#16202 has to do more with the views

[stevemonaco]

Data binding is not appropriate for raw pixel data of an image, IMO. The overhead is far too high. If you're maintaining pixel data (rather than loading from an image file), then you should be drawing the pixel buffer to a WriteableBitmap or SKBitmap that then can be set as an <Image /> source or (latter) rendered to screen. This is up to you to write.

[Shadowblitz16]

Data binding is not appropriate for raw pixel data of an image, IMO. The overhead is far too high. If you're maintaining pixel data (rather than loading from an image file), then you should be drawing the pixel buffer to a WriteableBitmap or SKBitmap that then can be set as an <Image /> source or (latter) rendered to screen. This is up to you to write.

so your saying I can't have dynamically resizable tiles?

[stevemonaco]

The dimensions are enough information. It's dumb overhead to create a binding for every single pixel and you will flood the UI with change notifications if you were to say change them all to purple even on a modest image size.

That said, standard controls are designed for the most common use cases. Stitching together tile-based graphics is not a common use case in software. You can use collection controls for individual tiles, but I much prefer a custom control or at least drawing the tiles into a single image. Especially if the number of tiles is large because you run into perf issues when the visual tree has thousands of extra visuals. This does mean that you will have to handle selection and a few other things yourself.

[Shadowblitz16]

The dimensions are enough information. It's dumb overhead to create a binding for every single pixel and you will flood the UI with change notifications if you were to say change them all to purple even on a modest image size.

That said, standard controls are designed for the most common use cases. Stitching together tile-based graphics is not a common use case in software. You can use collection controls for individual tiles, but I much prefer a custom control or at least drawing the tiles into a single image. Especially if the number of tiles is large because you run into perf issues when the visual tree has thousands of extra visuals. This does mean that you will have to handle selection and a few other things yourself.

The problem with one big textures is tile wrapping and texture size limit. I plan on having 65535+ 8x8 tiles opengl only supports up to 8k on good computers.

As for the example of tile wrapping I want to have meta tiles able to have a width and height where the width and height wrap around the right to the next row.

I did get around the messaging system on a previous test project by lazily doing events and drawing when the a property getter was accessed, and pushing to a command stack when a property or operation was set, but that was hard to do with imgui and raylib where I had texture batching and functional deferred drawing. something more object oriented like avalonia I probably would be fighting the api.

[stevemonaco]

The problem with one big textures is tile wrapping and texture size limit. I plan on having 65535+ 8x8 tiles opengl only supports up to 8k on good computers.

That doesn't seem like an issue? 65k 8x8 tiles is only 4m pixels or about 16MB texture.

As for the example of tile wrapping I want to have meta tiles able to have a width and height where the width and height wrap around the right to the next row.

If you're wrapping tiles based on their parent container size, then sure. Besides that, it's more straightforward to do snap scrolling than continuous scrolling. ie. The scrollbar only stops at the tops of tiles. You easily know what needs to be redrawn and you can easily calculate extents if necessary. You can allocate one WriteableBitmap / SKBitmap based on the size of the scrolling area and reuse it for manual rendering of "on-screen" tiles until there's a resize. I do this for a vector art app though it will also work for tile-based rendering. See the demo and the related InfiniteCanvas control though the art app itself is closed source.

Though I'd start with normal layout containers first and specialize later if necessary. InfiniteCanvas is one of the more extreme cases where you want a high degree of control and even that could be optimized quite a bit with quadtrees.

[Shadowblitz16]

I am currently working on trying to figure out how to write a IndexBitmap equivalents of the other Bitmap classes here #16264

I don't think this was a good question to start with, I should have asked more specific questions so I'm closing this.