🎱Customize your own simulation

NOTE: every time you change character data, you should re-run npx convex run testing:wipeAllTables and then npm run dev to re-upload everything to Convex. This is because character data is sent to Convex on the initial load. However, beware that npx convex run testing:wipeAllTables WILL wipe all of your data.

1. Create your own characters and stories: All characters and stories, as well as their spritesheet references are stored in characters.ts. You can start by changing character descriptions.

2. Updating spritesheets: in data/characters.ts, you will see this code:

   export const characters = [
     {
       name: 'f1',
       textureUrl: '/assets/32x32folk.png',
       spritesheetData: f1SpritesheetData,
       speed: 0.1,
     },
     ...
   ];

   You should find a sprite sheet for your character, and define sprite motion / assets in the corresponding file (in the above example, f1SpritesheetData was defined in f1.ts)

3. Update the Background (Environment): The map gets loaded in convex/init.ts from data/gentle.js. To update the map, follow these steps:

   • Use Tiled to export tilemaps as a JSON file (2 layers named bgtiles and objmap)

   • Use the convertMap.js script to convert the JSON to a format that the engine can use.

   node data/convertMap.js <mapDataPath> <assetPath> <tilesetpxw> <tilesetpxh>

   • <mapDataPath>: Path to the Tiled JSON file.

   • <assetPath>: Path to tileset images.

   • <tilesetpxw>: Tileset width in pixels.

   • <tilesetpxh>: Tileset height in pixels. Generates converted-map.js that you can use like gentle.js

4. Adding background music with Replicate (Optional)

   For Daily background music generation, create a Replicate account and create a token in your Profile's API Token page. npx convex env set REPLICATE_API_TOKEN # token

   This only works if you can receive the webhook from Replicate. If it's running in the normal Convex cloud, it will work by default. If you're self-hosting, you'll need to configure it to hit your app's url on /http. If you're using Docker Compose, it will be http://localhost:3211, but you'll need to proxy the traffic to your local machine.

   Note: The simulation will pause after 5 minutes if the window is idle. Loading the page will unpause it. You can also manually freeze & unfreeze the world with a button in the UI. If you want to run the world without the browser, you can comment-out the "stop inactive worlds" cron in convex/crons.ts.

   • Change the background music by modifying the prompt in convex/music.ts

   • Change how often to generate new music at convex/crons.ts by modifying the generate new background music job