Kckckc: added guide for custom sprites

2018-11-16T15:01:43Z

added guide for custom sprites

New page

= Sprites =

'''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 ==

Mods can add spritesheets to load.
First, they need to hook the <code>onBeforeGetResourceList</code> 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 <code>images</code> directory inside a mod called <code>coolsprites</code>, the path would look like <code>server/mods/coolsprites/images/myCoolSprites.png</code>.
Notice how the path ends with <code>.png</code>, and how it is relative to the <code>src</code> directory, not just the server code.

See the necromancer mod source code for an example of how to load images.

=== Under the Hood ===

<code>server/config/clientConfig.js</code> fires the <code>onBeforeGetResourceList</code> event.
Your mod hooks the event.
Your mod adds to the array.
ClientConfig saves that array.

A user loads the client.
The client (<code>js/system/client</code>) is initialized.
After initializing, <code>onClientReady</code> is called.
That method sends a request to <code>clientConfig</code> and calls <code>getResourcesList</code>.
The clientConfig sends back the array configured by your mod earlier.
The client receives the list, and initializes <code>js/resources</code> 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 <code>png</code>, 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 <code>.png</code> appended to the path.

After loading all the sprites, resources emits an event that calls start on <code>main.js</code>.
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 <code>.png</code>.
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.

Modding:Sprites - Revision history

Kckckc: added guide for custom sprites