Read and display Sprites sheet with blazor

Question

User-725068702 posted

I'm trying to display a full skin for an application, the skin is made up of lots of sprites in a PNG SpritesSheet. I have the JSON which contains the list of coordinates of all the prites in Object format, secondly, I will try to capture each sripte using the coordinates and display them. For now, I'm only trying to parse the JSON and display the Objects list.I am using System.Net.Http.Json 3.2. installed with Nuget.
But, for the moment, nothing work, Nothing items is displayed.

Here my actualy code:

@page "/fetchdata"
@inject HttpClient Http

<h1>JSON Sprites Sheet Parser</h1>

<p>@items <br></p>

@code
{
    private void LoadJson()
    {
        using (StreamReader r = new StreamReader("root/Shared/Skining/sprites_sheet.json"))
        {
            string json = r.ReadToEnd();
            List<Item> items = JsonConvert.DeserializeObject<List<Item>>(json);



            foreach (var item in items)
            {

            }

        }
    }
}

And here is a sample of my JSON, it looks like a "frame" collection with a list of objects in it.

{"frames": {

"Bitmap 1":
{
	"frame": {"x":0,"y":1936,"w":100,"h":100},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":100,"h":100},
	"sourceSize": {"w":100,"h":100}
},
"Bitmap 10":
{
	"frame": {"x":366,"y":1882,"w":51,"h":51},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":51,"h":51},
	"sourceSize": {"w":51,"h":51}
},
"Bitmap 11":
{
	"frame": {"x":240,"y":1815,"w":68,"h":73},
	"rotated": false,
	"trimmed": false,
	"spriteSourceSize": {"x":0,"y":0,"w":68,"h":73},
	"sourceSize": {"w":68,"h":73}
},

Answer 1

User-474980206 posted

several issues with your code. your json is an object with a property that a mapped object, not a collection. as C# does not support a mapped objects, its typically treated  as a dictionary. assuming your Item correctly maps objects its

public class FramesModel
{
      public Dictionary<string,Item> frames {get; set;}
}

then its:

Dictionarty<string,Item> items = JsonConvert.DeserializeObject<FramesModel>(json).frames;

Answer 2

User-725068702 posted

Hello, and thank you for this quick response
Indeed, I can try what you offer me. Maybe I have a simpler solution, I can export my sprites sheet in XML format. which might be easier. If it works well, I would like to make it a reusable component with any Sprites Sheet, 
Here is a sample of the xml:

<?xml version="1.0" encoding="UTF-16"?>
<TextureAtlas imagePath="cdj1000mk3.png">
<!-- Created with Adobe Flash CS6 version 12.0.0.481 -->
<!-- http://www.adobe.com/products/flash.html -->

<SubTexture name="Bitmap 1" x="0" y="1936" width="100" height="100"/>
<SubTexture name="Bitmap 10" x="366" y="1882" width="51" height="51"/>
<SubTexture name="Bitmap 11" x="240" y="1815" width="68" height="73"/>
<SubTexture name="Bitmap 12" x="375" y="1815" width="51" height="51"/>
<SubTexture name="Bitmap 13" x="627" y="1930" width="26" height="26"/>
<SubTexture name="Bitmap 14" x="626" y="2008" width="26" height="26"/>
<SubTexture name="Bitmap 15" x="656" y="1841" width="26" height="25"/>
<SubTexture name="Bitmap 16" x="408" y="2028" width="18" height="18"/>
<SubTexture name="Bitmap 17" x="600" y="1930" width="27" height="26"/>
<SubTexture name="Bitmap 18" x="655" y="1815" width="27" height="26"/>
<SubTexture name="Bitmap 19" x="600" y="1956" width="27" height="26"/>

What do you think?

Answer 3

User-474980206 posted

I would not switch to xml. It doesn't look any easier to me.

I'd more likely convert the json to CSS file, a common approach for sprites. Maybe your tool does this already. also a more modern approach than a sprite, is to convert the spites to a font. this allows scaling. of course this requires vectors.

Answer 4

User-725068702 posted

Thanks Bruce for your reply, for the size of my sprites they cannot change. they are already at 1: 1 too, the entire sheet should be displayed in a canvas I guess. I don't know if what I would like to do is possible, a SWF is really responsive, but when will it be in a canvas?
The final goal of the application is to redo something I did in AS3 for flashplayer ten years ago .. here is the demo (you have to activate Flash player in the browser)
https://www.luceymael.be/cdj/
In AS3, it's very easy, in Blazor, I know almost nothing and Microsoft help is very far from being as well done as that of AS3!
https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/index.html
Where then, I haven't found it yet.

I haven't vectorized my sprites, it's true that it's really better, I didn't think about it, but it must be said that in 2010, we weren't really talking about responsive yet .. or c ' was the start. My GUI can't exceed a maximum equivalent to the size of the object in real life, so I think even with my PNGs it might be fine in the current case.
Ok, I will dig into all your proposals .. Thank you again for this help Bruce

Answer 5

User-474980206 posted

If your sprite is swf frames than a canvas will work well.

Blazor is not really a true replacement for flash. Blazor runs  in a WASM sandbox, and can not access files, network,  dom elements, dom events or canvas directly, it uses JavaScript interop. It has a JavaScript library that handles a dom updates and passing dom events to the blazor code.

You are probably going to need to write a JavaScript graphics library that your blazor code calls. there are lots of libraries to start with. Try

https://two.js.org/#introduction

if you want to expand to 3D then

https://threejs.org