Client-side avatar customization engine written in pure JavaScript for HTML5 canvases
JavaScript
Permalink
Failed to load latest commit information.
avaku
images
.gitignore
README.md
index.html
license.txt

README.md

Usage

  1. Specify the rendered avatar position
<div id="avatars">
    <canvas id="avatar" width="160" height="220">
        <div id="bc_avatar"></div>
    </canvas>
    <div id="dom_compiled">
        <img id="compiled" src="images/Elidiun/Base_normalF.png" width="160" height="220" />
    </div>
</div>
  1. Specify an equipped section
<div id="equipped">
</div>
  1. Specify an inventory section
<div id="inventory">
</div>
  1. Specify save and clear operations
<div id="options">
    <a href="#" id="save" >Save</a>
    <a href="#" id="clear">Clear</a>
</div>
  1. Include the necessary scripts into your document
<script type="text/javascript" src="avaku/config.js"></script>
<script type="text/javascript" src="avaku/linkedlist.js"></script>
<script type="text/javascript" src="avaku/algo.js"></script>
<script type="text/javascript" src="avaku/avatar.js"></script>
<script type="text/javascript" src="avaku/base.js"></script>
<script type="text/javascript" src="avaku/layer.js"></script>
<script type="text/javascript" src="avaku/itemfactory.js"></script>
<script type="text/javascript" src="images/Elidiun/elidiun.js"></script>
<script type="text/javascript" src="avaku/inventory.js"></script>
<script type="text/javascript" src="avaku/avaku.js"></script>
  1. Initialize the scripts
<script type="text/javascript">
function init() {
    Avaku.init();
}
window.addEventListener('DOMContentLoaded', init);
</script>

Adding Item Sources

There are two methods of defining a source of items: 1) Inheriting from the ItemFactory or 2) setup the AjaxFactory.

Inheriting from the ItemFactory

In order to define a source of items, we must inherit from the ItemFactory and define the required methods:

  1. getItems(user, category) Returns a list of items owned by a user under a specified category.

  2. sendItems(user, avatar) Defines how to update the user's avatars on the server side.

var Elidiun = function() {
    this.matrix = {};
    this.matrix['head'] = [
        new Item('images/Elidiun/items/23h6qgw.jpg'),
        new Item('images/Elidiun/items/30b1b4g.jpg'),
        new Item('images/Elidiun/items/ancienp_hair_olive.png'),
        new Item('images/Elidiun/items/ancienp_hair_purple.png'),
        new Item('images/Elidiun/items/ancienp_hair_white.png'),
        new Item('images/Elidiun/items/ancienp_eyes_purple.png'),
        ];
    this.matrix['upper'] = [
        new Item('images/Elidiun/items/SpaceROCK_Cape_Blue_U.png'),
        new Item('images/Elidiun/items/WINTERDOLL_DRESS_MALE_blonde.png'),
        new Item('images/Elidiun/items/femalehoodiedeepurple.png'),
        new Item('images/Elidiun/items/femalehoodieforest.png'),
        new Item('images/Elidiun/items/femalehoodiegray.png')
        ];
    this.matrix['lower'] = [
        new Item('images/Elidiun/items/SWAGGER_JEANS_white.png'),
        new Item('images/Elidiun/items/StVRoses_f_skirt_white.png')
        ];
    this.matrix['shoes'] = [
        new Item('images/Elidiun/items/converseblack.png')];
}

Elidiun.prototype = ItemFactory;

Elidiun.prototype.getItems = function(user, category) {
    return this.matrix[category];
};

Elidiun.prototype.sendItems = function(user, avatar) {
    // Do nothing
};