Loading animation from ACE .json export

Questions
1

To preface, I am new to web development, coming from a game engine background, so take this with the possibility that I may be missing something that may be obvious to most people here.
I have a local project based on the Guided Learning>Create A Game Tutorial Series>Getting Set Up tutorial, using typescript, npm, babylon, and webpack.

I don’t quite understand how to take the JSON export from the Animation Curve Editor and add it to my project. What I did is make a new folder src/animations/, and drag the file “bounce.json” there.
Then in my main scene creation method I added let testJsonAnim = await Animation.ParseFromFileAsync("zoom", "animations/bounce.json");

When I run this, I get the console error GET http://localhost:8080/animations/bounce.json 404 (Not Found)
I found some forum threads asking similar question, but all the answers are in the playground (so all the resources are loaded from snippets or a URL, and not a local filesystem), and I don’t know how to apply them to a project that isn’t in the playground.

What am I doing wrong?

2

Hello! It seems like you need to add all asset files that should be available via localhost to the public folder.

webpack-dev-server exposes the public folder and compiles app.ts to a JavaScript-bundle and serves it from the same directory. The animations are static JSON assets, and as such webpack doesn’t touch them.

1 Like
3

Thank you! That was it!