Modding:Sprites
Sprites[edit]
Sprite is a generic term for any image in the game. Sprites are loaded on the client from spritesheets as textures to reduce load.
Custom Sprites[edit]
Mods can add spritesheets to load.
First, they need to hook the onBeforeGetResourceList event.
The event will be fired with an array of mappings (empty by default).
To load a spritesheet, push a string to the array.
If your images are in an images directory inside a mod called coolsprites, the path would look like server/mods/coolsprites/images/myCoolSprites.png.
Notice how the path ends with .png, and how it is relative to the src directory, not just the server code.
See the necromancer mod source code for an example of how to load images.
Under the Hood[edit]
server/config/clientConfig.js fires the onBeforeGetResourceList event.
Your mod hooks the event.
Your mod adds to the array.
ClientConfig saves that array.
A user loads the client.
The client (js/system/client) is initialized.
After initializing, onClientReady is called.
That method sends a request to clientConfig and calls getResourcesList.
The clientConfig sends back the array configured by your mod earlier.
The client receives the list, and initializes js/resources with the list.
Resources adds the list of sprites to the core game's sprite list.
After that, resources loads the images.
If an image path includes png, the raw path is used and if configured correctly in the mod, the server will send through the correct file.
Otherwise, the image is loaded from the client code's image directory with .png appended to the path.
After loading all the sprites, resources emits an event that calls start on main.js.
This starts everything else, such as the ui factory, the input handler, and the renderer.
When the renderer is started, it prepares Pixi.js and configures everything it needs.
It has a list of spriteNames and then it gets the list from the resource list.
It adds any that were in the resource list that contain .png.
This is why it is necessary to include png: the renderer only additionally loads sprites with .png.
The renderer then creates a texture from each sprite, and uses the textures created for a lot of rendering magic that I'm not going to touch.