Feature request: Use SMX files for rendering animated units

[Sam152]

I created a project for rendering SMX files, see: https://github.com/Sam152/genie-smx and demo: https://sam152.github.io/genie-smx/

I was wondering if it could be useful for the animation mode:

1. You could apply a player color palette to create a distinct visual tone for each player in the draft.
2. Assets would not have to be preped, new civs could be added without any additional conversions.
3. You could use the in-game directionality, instead of preparing multiple assets for smooch mode.
4. Could have some interesting additional features, like playing the death animation when a civ is defeated.

Ultimately it may not be worth the additional complexity, but I thought it was worthy of a mention.

[HSZemi]

This is really cool! Especially the colour coding idea. Currently we give all units from the same game version / expansion the same colour, but it doesn't have to be that way.

The main issues I currently see, which are probably all fixable, are:

• While the animation looks rather smooth in Chrome, your test page heavily flickers in Firefox.
• We cropped some units on purpose, mainly those with long pointy sticks, because they would just look tiny if we simply scaled them down to fit into the frame.
• I am a bit concerned about file size: All animated units (one orientation) currently take up 12.6 MiB, yet one smx for an idle animation by itself usually is over 1 MiB. However, if it's possible to programmatically remove all but two rotations, the resulting files could even be smaller than the apng files we currently have.
• When we tested animated units with webm files instead of apng, Firefox (again) struggled heavily. I guess we'd have to check if using the smx files leads to a similar issue.

[Sam152]

@HSZemi Thanks for the response!

To address each point:

1. The demo code reads the SMX format when reach frame is rendered, a mature implementation would render each frame once, hold the resulting image data in memory and repaint that on the canvas in sequence. I've used the SMX code in other projects with this approach and the rendering is far more performant.
2. Interesting point, a little bit of metadata for each unit related to scaling and positioning could address this, wouldn't be required to tightly crop around the boundary of each drawn unit.
3. Hm, great point. In theory an additional few utilities in the project could read the SMX data and write it back out with a subset of the frames for a specific set of directions. Automating this into the build process would keep the benefits of not having to prepare assets in advance while scaling down the size by a factor of about 8.
4. I have profiled rendering 1000+ SMX files on a single canvas (keep in mind during runtime, it's essentially just in memory image data) and have had no problems in firefox. The only catch might be rendering N canvas elements.

If you think this is a viable idea, I'm happy to work on the asset prep scripts and perhaps even some react components that accept an SMX resource, palette info and some sizing & positioning metadata.

[HSZemi]

Well I do think this is a viable idea 😊

[HSZemi]

With the new SLD graphics format in the upcoming patch, it looks kinda grim for the forseeable future though :frowning:

[Sam152]

Yep! Certainly a spanner in the works 😄

[denniske]

I am interested in this because I want to draw animated units in my aoe app.

@HSZemi How are you generating the .apng files at the moment? Do you have a script for that?

@Sam152 The last commit on your repo is from May 2022. Were you able to implement some of the planned features since then?

Did microsoft change the format from SMX to SLD? Is there a new parser for that?

[Sam152]

@denniske I imagine most people are using SLX studio for working with the game assets.

Which features are you interested in? With regards to caching in-memory bitmaps of rendered assets, that can be implemented by the consumer of the library. I also have an example of that here: https://github.com/Sam152/aoe2-micromania/blob/main/src/common/drawing/SlpManager.ts

[denniske]

@Sam152 Yes, I am interested in the bitmap caching. I will check SLP manager for this 👍

And I am also interested in the file size reduction by reading the SMX data and writing out a subset of the frames for one direction. Did you have success with that?

I guess for react native I can use react-native-skia: https://github.com/Shopify/react-native-skia/blob/main/docs/docs/image.md#makeimage

[Sam152]

Never ended up implementing a tool to slice out orientations, no. Given your requirements, it may be easier to export the specific images you require from SLX studio.