Extending ct.js' gameplay loop with injections

Injections are a powerful instrument to extend functionality of ct.js framework beyond adding methods or properties. It allows you to add logic to a game loop, load resources, create bundled Templates, etc.

The injections folder inside your module's directory accepts files with code that will be injected while exporting a game. All of them are optional, and here is a list of all the possible injections:

General events:

load.js – fired once when a game's code has loaded, but nothing still happened, e.g. no resources were loaded;
start.js – fired once when all the game's resources have been loaded. No game logic have been run yet.
switch.js – fired each time when a room is switched, but before any other code. Here, a room variable is a name of the new room.

Room-specific events:

beforeroomoncreate.js — fired before a room is created, but after a camera and renderer are set.
roomoncreate.js – fired after entering a new room. This code is evaluated after user-defined OnCreate code, when all the copies were created. Here, this equals to a new room.
roomonleave.js – fired before leaving a room, but before any user's script. Copies still exist here.
beforeroomdraw.js
afterroomdraw.js
beforeroomstep.js
afterroomstep.js

Copy-specific events:

onbeforecreate.js — applied to a newly created Copy, before its OnCreate event, but after its type information was applied. Works with bare Copies (copies of no template) as well.
oncreate.js – applied to a newly created Copy, right after its own OnCreate event.
ondestroy.js – applied to a Copy before it gets deleted. This code is called before a Copy's OnDestroy event.
beforedraw.js
beforestep.js
afterdraw.js
afterstep.js

Templating and utilities:

css.css – injects CSS into an exported game.
res.js – called once while parsing loaded images.
resload.js – called once after all the resources were loaded.
templates.js – here you can place your own Templates.
styles.js – here you can place your own drawing styles.
htmltop.html – this code is placed right before the drawing canvas.
htmlbottom.html – this code is placed right after the drawing canvas.

Also see Call order with mod's injections for a more complete picture of call order.

Templating

Each injection can substitute a special label with a value from your settings. If you defined a setting field with a key enableSockets, then all matches with /*%enableSockets%*/ in js, css, and html files will be replaced with user's chosen value.

Be wary, as a field may return an empty value. In JavaScript, you may use this wrapper to safely read a variable without breaking syntax: [/*%enableSockets%*/][0]. This will return either the defined value or undefined.

Tips

Templating is also supported in your index.js file.