RufusLoader

A JS module loading script I wrote around Spring 2011; I have since enhanced it with the ability to load image and audio resources and automatically bind modules to elements on a page- kinda like applets, but Javascript, not Java.

Example usage: (file can be edited to change paths and such)

Defining a Module

A module is kept in a JS file at "js/ModuleName.js" relative to the page base, which contains:

RufusLoader.Module("ModuleName", ["Dependency1", "Dependency2"], function(Dependency1, Dependency2) {
	// define contents; "this" is the module object,
	// which is passed to any modules using this as a dependency
	
	this.init = function(tag) {
		alert("Hello, World!");
	}
	
});

Using a Module

To use the module, bind it to a tag with the "data-applet-name" attribute and ensure the page loads RufusLoader. RufusLoader will load the module and any dependencies, and pass that tag to the module's init() function:

<script type="text/javascript" src="rufusLoader.js"></script>
...
<div data-applet-name="ModuleName">
example
</div>

Media Dependencies

If a dependency name is of the form "img/imageName.ext", then it will be loaded from that relative URL as a Javascript Image object, ready for use in <canvas> operations! Remember to include the extension in this case!

If a dependency name is of the form "wav/audioName", then it will be loaded from that relative URL as a Javascript Audio object, if the browser supports WAV audio. Remember to not include the extension!

Eventually I hope to implement dependencies of the form "audio/audioName", which will resolve to an Audio object sourced from either "mp3/audioName.mp3" or "vorbis/audioName.ogg", depending on the browser-supported format.

Misc. Modules

Preloaders

These are very simple animations that can be applied to a <canvas> element. They are passed the name of another module via a "data-chainload-applet" attribute, which presumably will take significantly longer to load with its dependencies.

After the chainloaded module is ready, the animation will stop and the chainloaded module's init() function will be called as expected.

One preloader shows a spinner, the other a grid of colored squares. Note that these files go under "js/preload/", not just "js/". Though you can of course change their names.

Keycontrol

This module allows easy checking of whether certain "interesting" keys are pressed or not.

Bind it to a <textarea> and it will automatically capture key events, setting the following module variables to true or false depending on whether the key is pressed or not:

This is designed for easy usage within a game loop.

SpriteTools

Contains some utilities for slicing up spritesheets and scrolling parallax / wrapping layers; I'll try to remember to document it better later, but a quick usage sample:

RufusLoader.Module("Example", ["SpriteTools", "img/spriteSheet.png"], function(SpriteTools, srcImage) {
	
	var sheet = new SpriteTools.SpriteSheet(srcImage,64,64,2,2);

	this.init = function(canvasTag) {
		var cx = canvasTag.getContext("2d");
		
		var layer = new SpriteTools.SpriteLayer(1,1);
		
		layer.add(sheet.make(0,0,0));
		
		layer.paint(cx, {x:0, y:0, w:640, h:480});
	}
	
});

License

These scripts are provided without warranty as free software. They may be freely used, modified, and/or redistributed, so long as modified versions do not claim to be the original.

In fact, they are quite likely to need modification to suit your needs. Go ahead, I won't be offended.

Who is Rufus?

My Sandile (now Krookodile) from Pokémon Black.