Library to use for Toradorable Animations on agar and deviants. Animations stored separately. To use, @require this first, then Animations.
当前为
此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.greasyfork.icu/scripts/24894/158357/Toradorable%20Animator.js
// ==UserScript==
// @name Toradorable Animator
// @namespace http://tampermonkey.net/
// @version 0.0.15
// @description Library to use for Toradorable Animations on agar and deviants. Animations stored separately. To use, @require this first, then Animations.
// @author Toradorable
// @grant none
// ==/UserScript==
/* Library to use for Toradorable Animations on agar and deviants.
* Animations stored separately.
* To use, @require this first, then any Animations you would like.
* To play the currently selected animation, call
animator.playAnimation();
* NOTE: playAnimation requires per-site functions that are not included with this library.
* You can find per-site functions in the link below.
* To stop playing the current animation, call
animator.pauseAnimation();
*
* To select the next/prev animation, call
animator.nextAnimation(); animator.prevAnimation();
* Note that next/prev do not change the playing status. If we are already playing, we will seamlessly switch over to the new animation.
*
* To add your own animations, type
animator.addAnimation({
title: "Name Of Your Animation",
// Optional Default display time, used when/if a frame does not have a time specified.
defaultDisplayTime: 1000,
frames: [
//time: Optional display time for this frame in milliseconds,
//url: "http://Link/To/Your/Image.png",
//nick: "Optional Nick to use if applicable. Most sites do not allow you to change your nick in game."
{time: 500, url: "https://s22.postimg.org/jha3867up/image.png", nick: "To"},
{time: 500, url: "https://s22.postimg.org/jrhlrimgx/image.png", nick: "Ra"},
{time: 500, url: "https://s22.postimg.org/6xjjy691d/image.png", nick: "Do"},
{time: 500, url: "https://s22.postimg.org/idpyw7n7l/Ra2.png", nick: "Ra"},
{time: 500, url: "https://s22.postimg.org/inxhfk1tt/exclam.png", nick: "!"},
{time: 2000, url: "https://s18.postimg.org/tl8xraeux/Taiga_square.png", nick: "Toradora!"}
]
})'
* To import a skinList, type
animator.importSkinList(
// First argument is a skin list array.
// Below is iWubbz's candy skinList as found on
// https://greasyfork.org/en/scripts/23677-iwubbz-candy-skin-changer/code
["http://i.imgur.com/1JQqUzR.png",
"http://i.imgur.com/VKcEy4k.png",
"http://i.imgur.com/FKsf0PC.png",
"http://i.imgur.com/zg6Oxzo.png",
"http://i.imgur.com/EPawa6H.png",
"http://i.imgur.com/NyKl8tG.png"
],
// Second argument is optional. However, I recomend setting title at the least.
//defaultDisplayTime is 1000 (1 second) by default.
//All frames will be displayed for defaultDisplayTime milliseconds.
//Use animator.addAnimation if you want different display times per frame.
{title: "iWubbz's Candy", defaultDisplayTime: 5000}
);
* ^^ Importing skin lists is as easy as stealing candy from iWubbz. ^^
* Note that this is just the Toradorable animator library.
* Keybindings, Animations, and per-site functions are stored separately.
*
* If you need Animations, Keybindings, and Per-Site functions, look in
* https://greasyfork.org/en/users/79223-Toradorable
* per-site scripts are labled "Toradorable Site.extention". NOTE: All per-site scripts already include this library.
* animations are labled "TitleOfAnimation Animation for Toradorable Skin Changer"
* and extentions are labled "FunctionOfLibrary Extention for Toradorable Skin Changer"
*/
var animator = (typeof animator === 'object') ? animator : (function () {
var AnimationContainer = {
animationIndex: 0,
animationTimeout: null,
startOnFirstFrame: false,
status: "Standby",
isPlaying: false,
isInitialized: false,
// Automaticly update UI if initilaized
autoUpdate: true,
// Name of the animation
titleOf: function(n){
return this.animations[n].title;
},
setAnimation: function(n){
this.animationIndex = n;
if (this.animationIndex >= this.animations.length) this.animationIndex = 0;
if (this.animationIndex < 0) this.animationIndex = this.animations.length - 1;
if (this.isPlaying && !this.animationTimeout) {
// Last Animation/frame had a displayTime <= 0, so no timeout as set.
// We are still considered to be playing, so lets update
this.playAnimation();
}
return this.animations[this.animationIndex];
},
nextAnimation: function(n=1){
this.animationIndex += n;
if (this.animationIndex >= this.animations.length) this.animationIndex = 0;
if (this.isPlaying && !this.animationTimeout) {
// Last Animation/frame had a displayTime <= 0, so no timeout as set.
// We are still considered to be playing, so lets update
this.playAnimation();
}
return this.animations[this.animationIndex];
},
prevAnimation: function(n=1){
this.animationIndex -= n;
if (this.animationIndex < 0) this.animationIndex = this.animations.length - 1;
if (this.isPlaying && !this.animationTimeout) {
// Last Animation/frame had a displayTime <= 0, so no timeout as set.
// We are still considered to be playing, so lets update
this.playAnimation();
}
return this.animations[this.animationIndex];
},
pauseAnimation: function(){
this.isPlaying=false;
if (this.animationTimeout) {
clearTimeout(this.animationTimeout);
}
this.onPause();
},
onPause: function() {
this.status='Standby';
this.site.updateUI();
},
onPlay: function() {
this.status='Animating Skin';
this.site.updateUI();
},
onFrameChange: function() {
},
playAnimation: function(isFirstFrame=true){
this.isPlaying=true;
var animation = this.currentAnimation();
if (isFirstFrame) {
if (this.startOnFirstFrame) this.frameIndex = 0;
this.onPlay();
} else {
this.nextFrame();
this.onFrameChange();
}
this.site.updateFrame( );
var time = animation.currentDisplayTime();
if (time > 0) {
clearTimeout(this.animationTimeout);
this.animationTimeout=setTimeout(function() { AnimationContainer.playAnimation(false); }, time);
}
},
toggleAnimation: function() {
if (this.isPlaying) {
this.pauseAnimation();
} else {
this.playAnimation();
}
},
refreshFrame: function(){
var animation = this.currentAnimation();
this.site.updateFrame( );
},
// Frames
defaultDisplayTime: 1000,
speedMultiplier: 1,
setSpeedMultiplier: function(newValue) {
if (newValue <= 0) {
newValue = 1;
}
this.speedMultiplier = newValue;
this.onSpeedMultiplierChange();
},
onSpeedMultiplierChange: function() {
this.site.elements.speedMultiplierBox.value=this.speedMultiplier
},
decrementSpeedMultiplier: function() {
this.setSpeedMultiplier( this.speedMultiplier / 2 );
},
incrementSpeedMultiplier: function() {
this.setSpeedMultiplier( this.speedMultiplier * 2 );
},
frameIndex: 0,
init: function() {
this.site.initialize();
this.isInitialized=true;
},
setFrameIndex: function(n) {
return this.currentAnimation().setFrameIndex(n);
},
nextFrame: function(n=1){
return this.currentAnimation().nextFrame(n);
},
prevFrame: function(n=1){
return this.currentAnimation().prevFrame(n);
},
// For re-transmitting when player-update
currentAnimation: function() {
if (this.animationIndex >= this.animations.length) this.animationIndex = 0;
return this.animations[this.animationIndex];
},
currentFrame: function(){
return this.currentAnimation().currentFrame();
},
currentFrameDisplayTime: function() {
return this.currentAnimation().currentDisplayTime();
},
// Agar Networks allows you to change your nick
currentFrameNick: function(){
return this.currentAnimation().currentNick();
},
currentFrameSkin: function(){
return this.currentAnimation().currentSkin();
},
addAnimation: function(animation){
var a = Object.assign({},this.animationTemplate,animation);
this.animations.push(a);
this.onAddAnimation();
return a;
},
onAddAnimation: function() {
if (this.autoUpdate && this.isInitialized) {
this.site.updateUI();
}
},
addAnimations: function() {
for (var i = 0; i < arguments.length; i++) {
this.addAnimation(arguments[i]);
}
return this.animations;
},
importSkinList: function(skinList,attributes={}) {
var animation = this.addAnimation(attributes);
for (var i = 0; i < skinList.length; i++) {
animation.frames[i] = {url: skinList[i]};
}
return animation;
},
/*removeAnimation: function(animation){
var a = Object.assign({},this.animationTemplate,animation);
this.animation.push(a);
return a;
},*/
site: {
nick: null,
elements: {
uiContainer: null,
nick: null,
skinurl: null,
chatboxInput: null,
mipmapNode: null,
animationSelector: null,
animationStatus: null,
},
initialize: function() {
this.elements.mipmapNode = document.getElementById("mipmapNode");
this.elements.chatboxInput=document.getElementById("input_box2");
this.elements.uiContainer=document.getElementById("overlays2");
this.elements.nick = document.getElementById('nick');
this.elements.skinurl = document.getElementById('skinurl');
this.elements.cssElement = this.elements.chatboxInput;
this.initilaizeUI();
},
getNick: function() {
return this.elements.nick.value;
},
setNick: function(newNick) {
this.elements.nick.value = newNick;
return newNick;
},
getSkin: function() {
},
setSkin: function(skin) {
},
//changeNickTo: function () { },
//changeSkinTo: function () { },
refreshCurrentFrame: function() { },
updateFrame: function(nick=AnimationContainer.currentFrameNick(), skin=AnimationContainer.currentFrameSkin(), time=AnimationContainer.currentFrameDisplayTime(), displaylocal=true) {
this.elements.skinurl.value = skin;
//setNick(nick,team,skin,partytoken);
//setNick(document.getElementById('nick').value);
var player=playerDetailsByIdentifier[nodeList[0][1] + nodeList[0][6]];
socket.emit("playerUpdated", {
"action": "update",
"displayName": player.displayName,
"socketRoom": player.socketRoom,
"identifier": player.identifier,
"url": skin,
"nick": player.nick,
"team": player.team,
"token": player.token
});
nodeList[0][5]=skin;
if (displaylocal) {
player.url=skin;
}
},
updateUI: function(status=AnimationContainer.status) {
this.elements.animationStatus.textContent=status;
for (var i = this.elements.animationStatus.children.length - 1 ; i >= 0 ; i--)
{
this.elements.animationStatus.remove(i);
}
for (var i = 0; i < AnimationContainer.animations.length; i++) {
var option = document.createElement("option");
//option.style.cssText = document.defaultView.getComputedStyle(chatboxInput, "").cssText;
option.value = i;
option.text = AnimationContainer.titleOf(i);
//this.elements.animationSelector.children[i] = option;
this.elements.animationSelector.appendChild(option);
}
this.elements.animationSelector.selectedIndex=AnimationContainer.animationIndex;
},
initilaizeUI: function() {
var SkinTargetType = document.createElement('BUTTON');
if (this.elements.animationStatus) this.elements.animationStatus.remove();
this.elements.animationStatus=SkinTargetType;
SkinTargetType.name="Skin Target Type:";
SkinTargetType.id="SkinTargetType";
SkinTargetType.textContent="Standby"; // Theft, Swap, Push
SkinTargetType.placeholder="Skin Target Type:";
SkinTargetType.style.cssText = document.defaultView.getComputedStyle(this.elements.cssElement, "").cssText;
SkinTargetType.style.width="200px";
SkinTargetType.style.right="9px";
SkinTargetType.style.bottom="250px";
SkinTargetType.style.position="absolute";
SkinTargetType.onclick=function(e) { AnimationContainer.toggleAnimation(); };
this.elements.uiContainer.insertBefore(SkinTargetType, this.elements.uiContainer.lastChild);
if (this.elements.chatboxInput) this.elements.chatboxInput.remove();
var SpeedMultiplierBox = this.elements.chatboxInput.cloneNode(true);
this.elements.speedMultiplierBox=SpeedMultiplierBox;
SpeedMultiplierBox.name="SpeedMultiplier:";
SpeedMultiplierBox.id="SpeedMultiplierBox";
SpeedMultiplierBox.value=1; // Theft, Swap, Push
SpeedMultiplierBox.placeholder="Speed Multiplier:";
SpeedMultiplierBox.style.cssText = document.defaultView.getComputedStyle(this.elements.cssElement, "").cssText;
SpeedMultiplierBox.style.width="140px";
SpeedMultiplierBox.style.right="39px";
SpeedMultiplierBox.style.bottom="290px";
SpeedMultiplierBox.style.position="absolute";
SpeedMultiplierBox.onchange=function(e) { AnimationContainer.setSpeedMultiplier(e.target.value); };
this.elements.uiContainer.insertBefore(SpeedMultiplierBox, this.elements.uiContainer.lastChild);
if (this.elements.incrementSpeedMuliplier) this.elements.incrementSpeedMuliplier.remove();
var IncrementSpeed = document.createElement('BUTTON');
this.elements.incrementSpeedMuliplier=IncrementSpeed;
IncrementSpeed.name="Skin Target Type:";
IncrementSpeed.id="incrementSpeedMultiplier";
IncrementSpeed.textContent="+"; // Theft, Swap, Push
IncrementSpeed.placeholder="Skin Target Type:";
IncrementSpeed.style.cssText = document.defaultView.getComputedStyle(this.elements.cssElement, "").cssText;
IncrementSpeed.style.width="30px";
IncrementSpeed.style.right="9px";
IncrementSpeed.style.bottom="290px";
IncrementSpeed.style.position="absolute";
IncrementSpeed.onclick=function(e) { AnimationContainer.incrementSpeedMultiplier(); };
this.elements.uiContainer.insertBefore(IncrementSpeed, this.elements.uiContainer.lastChild);
if (this.elements.decrementSpeedMuliplier) this.elements.decrementSpeedMuliplier.remove();
var DecrementSpeed = document.createElement('BUTTON');
this.elements.decrementSpeedMuliplier=DecrementSpeed;
DecrementSpeed.name="Skin Target Type:";
DecrementSpeed.id="decrementSpeedMultiplier";
DecrementSpeed.textContent="-"; // Theft, Swap, Push
DecrementSpeed.placeholder="Skin Target Type:";
DecrementSpeed.style.cssText = document.defaultView.getComputedStyle(this.elements.cssElement, "").cssText;
DecrementSpeed.style.width="30px";
DecrementSpeed.style.right="179px";
DecrementSpeed.style.bottom="290px";
DecrementSpeed.style.position="absolute";
DecrementSpeed.onclick=function(e) { AnimationContainer.decrementSpeedMultiplier(); };
this.elements.uiContainer.insertBefore(DecrementSpeed, this.elements.uiContainer.lastChild);
//overlays2.insertBefore(StealSkinBox, overlays2.lastChild);
if (this.elements.animationSelector) this.elements.animationSelector.remove();
var SkinListBox = document.createElement("select"); //StealSkinBox.cloneNode(true);
this.elements.animationSelector=SkinListBox;
SkinListBox.name="Selected Skin:";
SkinListBox.id="SelectedSkinElm";
SkinListBox.value=""; // Theft, Swap, Push
SkinListBox.placeholder="No Animation Selected";
SkinListBox.style.cssText = document.defaultView.getComputedStyle(this.elements.cssElement, "").cssText;
SkinListBox.style.width="200px";
SkinListBox.style.right="9px";
SkinListBox.style.bottom="210px";
SkinListBox.style.position="absolute";
overlays2.insertBefore(SkinListBox, overlays2.lastChild);
for (var i = 0; i < AnimationContainer.animations.length; i++) {
var option = document.createElement("option");
//option.style.cssText = document.defaultView.getComputedStyle(chatboxInput, "").cssText;
option.value = i;
option.text = AnimationContainer.titleOf(i);
SkinListBox.appendChild(option);
}
SkinListBox.onchange=function(event){ AnimationContainer.setAnimation(event.target.value); };
},
},
animationTemplate: {
/*addFrame: function(frame,showTime) {
},*/
/*fixFrameIndex: function() {
if (AnimationContainer.frameIndex >= this.frames.length) AnimationContainer.frameIndex = 0;
},*/
currentFrame: function() {
if (AnimationContainer.frameIndex >= this.frames.length) AnimationContainer.frameIndex = 0;
return this.frames[AnimationContainer.frameIndex];
},
setFrameIndex: function(n) {
AnimationContainer.frameIndex = n;
if (AnimationContainer.frameIndex >= this.frames.length) AnimationContainer.frameIndex = 0;
if (AnimationContainer.frameIndex < 0) AnimationContainer.frameIndex = this.frames.length - 1;
return this.frames[AnimationContainer.frameIndex];
},
nextFrame: function(n=1) {
AnimationContainer.frameIndex += n;
if (AnimationContainer.frameIndex >= this.frames.length) AnimationContainer.frameIndex = 0;
return this.frames[AnimationContainer.frameIndex];
},
prevFrame: function(n=1) {
AnimationContainer.frameIndex -= n;
if (AnimationContainer.frameIndex < 0) AnimationContainer.frameIndex = this.frames.length - 1;
return this.frames[AnimationContainer.frameIndex];
},
currentNick: function() {
var frame = this.currentFrame();
return ('nick' in frame) ? frame.nick : AnimationContainer.site.getNick();
},
currentSkin: function() {
var frame = this.currentFrame();
return ('url' in frame) ? frame.url : AnimationContainer.site.getSkin();
},
currentDisplayTime: function() {
var frame = this.currentFrame();
if ('time' in frame) {
return Math.floor(frame.time / AnimationContainer.speedMultiplier + 1);
} else {
return Math.floor( this.getDefaultDisplayTime() / AnimationContainer.speedMultiplier + 1);
}
},
getDefaultDisplayTime() {
if ('defaultDisplayTime' in this) {
return this.defaultDisplayTime;
} else {
return AnimationContainer.defaultDisplayTime;
}
},
initialize: function() { },
title: "Unnamed Animation",
frames: [
{
nick: null,
time: 0,
url: "",
}
],
},
animations: [],
};
return AnimationContainer;
})();