I've been continuing work with improving the test art and making the path from creating an asset to viewing it in game as quick and automatic as possible.

![head.png](https://files.steempeak.com/file/steempeak/smjn/E1zKDsdq-head.png)

Previously any code changes, style changes or level changes would trigger an update and the game would show the change. I demoed this in the past making code changes in the below video, it works the same if changing style or doing updates in the level editor.

<iframe width="858" height="483" src="https://www.youtube.com/embed/5YXkCYNd46A" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/>

I have now added support for the same type of work flow for doing changes to art and animations. By adding a watcher to the project setup, it now watches external files for changes, automatically runs  external software to produce assets and the game is triggered to update and show the asset. I decided to use [npm-watch](https://www.npmjs.com/package/npm-watch) for watching, it is configured in the package.json file and worked on the first try. The documentation was short and to the point, that is why I picked it out of the many, many options to use for watching files.

Here is a demo of working in [Inkscape](https://inkscape.org/), When exporting the pieces, [TexturePacker](https://www.codeandweb.com/texturepacker) will run in the background and take all the assets and assemble them into a single texture atlas. When the new atlas is created, the game notices this and updates. The key to get this to work smoothly is to use smart folders in TexturePacker. Any changes made to files you have added (or add) in those folders will be watched by TexturePacker and added/updated to an atlas when detecting changes. This can be automated by using the command line version of TexturePacker in combination with npm-watch. 

<iframe width="560" height="315" src="https://www.youtube.com/embed/rMAKnPChdgk" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/>

The process for working with animations in [Synfig](https://www.synfig.org/) is the same. As soon as you render an animation, TexturePacker packs the frames into a single texture atlas and the game updates.

<iframe width="560" height="315" src="https://www.youtube.com/embed/SXZlb3f7elc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<br/>

This work flow feels good for being productive. You can stay in the asset app and continue working, no need to switch back and forth between an editor/game/asset app.

If anyone is curious to try the project, I put up development builds quite often to: [dev.spelmakare.se](http://dev.spelmakare.se/expanse/?debugMenu)

<br>
___
<i>Game development using web technologies.

[Spelmakare.se](https://spelmakare.se)
[Discord](https://discord.gg/VG5EW9R)
[GitHub](https://github.com/smjnab)

[Try the latest development build of current project](http://dev.spelmakare.se/expanse/?debugMenu)
</i>