About This File
About
This is a Javascript file which extends your browser so that it can display SPR/ACT files as if they were interactive images.
You can use it for anything you'd like - no need to credit me.
Requires a fairly recent browser. Confirmed to work in Chrome 29, Firefox 23 and Opera 12.16.
Usage
Simply add it to the your HTML head like this:
<head> ... <script src="HTMLRagnarokSpriteElement.js"></script></head>
You can now add Ragnarok SPR/ACT files as if they were regular elements:
<ragnarok-sprite src="alice.act"></ragnarok-sprite>
Note that for the above example to work, both alice.spr and alice.act needs to be hosted.
The ragnarok-sprite tag supports the following attributes:
- (URI string) src - URI to the SPR/ACT files. You don't need the .act extension.
- (number) speed - animation speed
- (boolean) animated - whether to display animation
- (number) width - absolute width of the element
- (number) height - absolute height of the element
The src attribute is the only one which is required. Note that if width AND height are not specified, the element will automatically be as large as it needs to display every action in the ACT file.
If your browser has support for custom elements (see below) you can also create new instances of the element from JavaScript.
var alice = new HTMLRagnarokSpriteElement();alice.src = "alice.act";document.body.appendChild(alice);
Should I use this?
Go ahead if you find some purpose for it - but not if you need it to work smooth for everyone. Many people are still on old browsers. It's also relatively resource heavy, and SPR/ACT files are not suitable as web formats. While it will run in most recent browsers it's bad practice to use non-standard features such as adding a new pseudo-tag.
However, in the near future adding tags will be a feature, as defined by W3. This script already uses these features where available, which at present seems to be in Chrome 31 and Firefox 23 with experimental web platform support turned on.
