This project will be embedded to the Arcadians v2 mint site. It shows an animated Arcadian and can play different animations and wear different parts
- This takes in a GLTF file that contains the mesh of an animated Arcadian.
- The parts of the Arcadian can be mixed and matched
- Predefined animations can be exported to a PNG sprite sheet
- Front end HTML code can call the functions in the JS code to change parts and animations
- Clone the repository
- Run any http server on the working directory (i.e.
http-server) - Open http://localhost:8080
config.jshas been provided as a starting point that contains the v1 Arcadians data- It contains settings on the following:
- exporting the sprite sheet
- list of gltf files, materials and animations
- list of parts
- The config file contains documentation comments on the important sections
New pngs can be added in the selection by copying the pngs to their appropriate folder in 'v1/arcadian-parts'.
Directories here as structured as:
arcadian-parts/[Gender]/[Part]/[FileName].png
Take care to keep the directory structure as is.
Once all the desired pngs have been added, run 'updatePartsConfig.js' via node in the terminal. E.g. if you have the terminal open in the root directory, the command would be:
To run for V1 - node src/updatePartsConfig.js
To run for V2 - node src/updatePartsConfig.js v2
If no errors pop up, then the config has been updated and the new parts can be viewed in the html on refresh.
For each body part, you will have to do the following steps:
- Add the body part pngs
- Create a new directory for the new part, like so:
v2/arcadian-parts/<Gender>/<Body Part Name>/ - Place the PNGs there
- Run parts config script.
node src/updatePartsConfig.js v2
- Create a new directory for the new part, like so:
- Update the Blender file by adding new polygons that would be used for that new part
- Duplicate an existing material
- Assign faces that would use this new material
- Export to GLTF
- Update v2/config.js to add the new material name
- After these steps, the new body part should be usable
- Duplicate the Male folders inside
arcadian-partsandgltffolders - Update the config.js file by copying the male block and pasting it at the bottom. Remember to check the syntax of the json.
- See if it shows up in the html page
- Add/replace the images for the body parts
avatarCanvas.jsis a reusable game lego for drawing and playing animations from the exported sprite sheet- Demo page has been provided as a sample how to use this class