Alright, so a while ago I posted about wanting to change token images based on the rotation of the token and I was passed along to Rollable Table Token's and their properties. These things are, without a doubt, awesome. They also helped make this WAY easier. The idea was my party and I have a kind of love-hate relationship with top-down tokens. They tend to lack depth, and finding one that fits exactly with what you're looking for can be annoying. But, on the other hand. In this day and age of retro gaming, you can find HUNDREDS of THOUSANDS of sprite sheets just laying all over the interwebs. Not to mention the countless sprite customization tools out there. So I went out and made a simple character. Then cut out all of the center column into a photo editor like GIMP into 70x70 pixel sheets so there won't be any size formatting and rotated them accordingly. ^-Back ^-Front ^-Left ^-Right This is so that as the token rotates, the feet are always pointed to the bottom of the screen. Then I created a Rollable table and uploaded them in a specific order. Back, Right, Front, Left. We'll get to why in a moment. But if you do this, you can send the rollable table to the tabletop as a token, don't forget to convert it out of a drawing so it becomes a token. Then, like any other image, you can set it to represent a character, set health, etc. Now comes the fun part. Using the code I'm about to post in the api, it looks up the various images and changes the image based on which way its facing. on('change:token:rotation',function(obj){
var tok = obj;
//log(tok);
//Unless there is an attribute "Rotateable?" with the current value is set to "Yes" it will not attempt to change token image.
if(tok.get("represents") == "") {
return;
} else {
var rotable = findObjs({
_type: "attribute",
_characterid: tok.get("represents"),
name: "Rotateable?"
})[0].get("current");
//log(rotable);
if (rotable != "Yes") return;
};
//Make sure token rotation does not exceed 360 for simplification reasons.
var rot = tok.get("rotation");
//log(rot);
if (rot >= 360) {
tok.set("rotation", (rot - 360));
rot = rot - 360;
//log("New rot = " + rot);
};
//Make an array of the sides from the token, making them usable by ".set()" so the api
//wont complain it's not a thumb or in your library.
//log(tok.get("sides"));
var sides = tok.get("sides").split("|");
for (var i=0; i<sides.length; i++){
//log("Before: " + sides[i]);
sides[i] = sides[i].replace("%3A", ":");
sides[i] = sides[i].replace("%3F", "?");
sides[i] = sides[i].replace("med", "thumb");
//log(" After: " + sides[i]);
};
//Set the image based on 90 degree rotations.
if (rot == 0) { tok.set("imgsrc", sides[0]); }; //Back
if (rot == 90) { tok.set("imgsrc", sides[1]); }; //Right
if (rot == 180) { tok.set("imgsrc", sides[2]); }; //Front
if (rot == 270) { tok.set("imgsrc", sides[3]); }; //Left
}); As you may be able to tell. If you keep the order of image uploads uniform and in that specific order, it makes finding the right image simpler. Some of you code ninjas out there might be able to make something better that dances circles around my brute force, but it works. And with all that work done, you have a 4 faced token that looks in the direction its supposed to, rather than just a spinning top. It also wouldnt be that hard to tweak it to include the 45 degree angles if you found a way to make an 8-direction sprite or just want to use a specific face for them. (Click to see animation) So, thoughts and critiques?
