Creating your own asset pack

There are times when you would like to make your assets available to others as asset packs. Or perhaps you are a 3D modeller and want to make your model and animations available to developers. Whatever be the case, it is easy to create youir own asset pack and make it available to others. You can make your assets available to others by publishing them to any npm registry. In the near future, you may be able to publish your asset packs to an asset store located at assets.kheljs.com.

Follow the steps outlined on this page to create your own asset pack. Then follow the instructions in "Publishing Assets" page to to publish your asset pack to any npm registry.

Step 1 - Generate an empty asset pack

Execute the following command to generate an empty asset pack

kheljs asset-pack create @idutta/animated-men

This will ask a few questions such as author name, email, description etc and will generate a folder named @idutta/animated-men with a package.json file, an index.ts file, a README.md file and an empty assets/ folder.

Step 2 - Put your asset files under assets/ folder

Put all asset files for your asset pack in the folder @idutta/animated-men/assets. You can organize the files into any folder structure you want.

Step 3 - Modify the asset manifest file

Next change working directory to @idutta/animated-men folder, open the index.ts file and modify its content to list the assets in your asset pack. This file basically exports an array where each item of the array describes an asset in your asset pack. The following example shows entries from this file describing two assets. Note that the filePath attribute indicates the folder in which the asset exists and this path is always realtive to the assets/ folder.

const manifest = [
    ...
    { 
        name: "large-building",
        description: "A mesh of victorian style large building"
        filePath: "buidings/largeBuilding/",
        fileName: "lg_building.obj"
    },
    {
        name: "mountain-grass",
        description: " A texture for mountain grass",
        filePath: "textures/grasses/"
        fileName: "mountainGrass.png"
    }
    ...
]
export manifest;

Step 4 - Modify the README.md file

Privide a description of your asset pack in the README.md file. This is the description user will see when he/she visits the asset pack page in the asset store. At a minimum you should provide a description of your assets and list them by name. If your meshes have animation groups, you should mention the names of the animation groups as well. The generated README.md file provides you with some examples.

Step 5 - Validate your asset pack

After you have performed all of the above steps, you are ready publish your asset pack to the asset store. However, you need to validate you asset pack for errors before you publish it. The publish process will run this checks and will fail if validation does not pass. To validate your asset pack execute the following command from the asset pack folder.

kheljs asset-pack validate

The will run a series of tests against your asset-pack and will inform you of any problems, such as paths in the manifest not being right, some required fields missing in manifest etc. Finally you can execute the following command to view the list of assets in your asset pack:

kheljs asset-pack inspect

If all of your assets are listed correctly, you are ready to publish your assets. Read the section on Publishing Asset Packs for details.