Animated Item Thumbnails

Resources
1

I created a quick animation system that changes the item thumbnail inside the inventory when used.

First you’ll need to add following variables to your item:
animationPropertyList : string : “[ ]”
animationPlayList : string : “”
frameURL : string : “”
frameDuration : number : 0
animationIsRunning : boolean : false

initialize 
{
     "triggers": [],
     "conditions": [
          {
               "operator": "==",
               "operandType": "boolean"
          },
          true,
          true
     ],
     "actions": [
          {
               "type": "setEntityVariable",
               "entity": {
                    "function": "thisEntity"
               },
               "variable": {
                    "function": "getEntityVariable",
                    "variable": {
                         "text": "animationPropertyList",
                         "dataType": "string",
                         "entity": "NG5gjDrimk",
                         "key": "animationPropertyList"
                    }
               },
               "value": {
                    "function": "insertStringArrayElement",
                    "value": "[\"240\",\"https://cache.modd.io/asset/spriteImage/1683288430619_Test_UI_000.png\"]",
                    "string": {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationPropertyList",
                                   "dataType": "string",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationPropertyList"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    }
               },
               "comment": ""
          },
          {
               "type": "setEntityVariable",
               "entity": {
                    "function": "thisEntity"
               },
               "variable": {
                    "function": "getEntityVariable",
                    "variable": {
                         "text": "animationPropertyList",
                         "dataType": "string",
                         "entity": "NG5gjDrimk",
                         "key": "animationPropertyList"
                    }
               },
               "value": {
                    "function": "insertStringArrayElement",
                    "value": "[\"240\",\"https://cache.modd.io/asset/spriteImage/1683292757986_Test_UI_003.png\"]",
                    "string": {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationPropertyList",
                                   "dataType": "string",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationPropertyList"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    }
               },
               "comment": ""
          },
          {
               "type": "setEntityVariable",
               "entity": {
                    "function": "thisEntity"
               },
               "variable": {
                    "function": "getEntityVariable",
                    "variable": {
                         "text": "animationPropertyList",
                         "dataType": "string",
                         "entity": "NG5gjDrimk",
                         "key": "animationPropertyList"
                    }
               },
               "value": {
                    "function": "insertStringArrayElement",
                    "value": "[\"240\",\"https://cache.modd.io/asset/spriteImage/1683288327097_Test_UI_004.png\"]",
                    "string": {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationPropertyList",
                                   "dataType": "string",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationPropertyList"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    }
               },
               "comment": ""
          },
          {
               "type": "setEntityVariable",
               "entity": {
                    "function": "thisEntity"
               },
               "variable": {
                    "function": "getEntityVariable",
                    "variable": {
                         "text": "animationPropertyList",
                         "dataType": "string",
                         "entity": "NG5gjDrimk",
                         "key": "animationPropertyList"
                    }
               },
               "value": {
                    "function": "insertStringArrayElement",
                    "value": "[\"240\",\"https://cache.modd.io/asset/spriteImage/1683288288964_Test_UI_005.png\"]",
                    "string": {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationPropertyList",
                                   "dataType": "string",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationPropertyList"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    }
               },
               "comment": ""
          },
          {
               "type": "setEntityVariable",
               "entity": {
                    "function": "thisEntity"
               },
               "variable": {
                    "function": "getEntityVariable",
                    "variable": {
                         "text": "animationPropertyList",
                         "dataType": "string",
                         "entity": "NG5gjDrimk",
                         "key": "animationPropertyList"
                    }
               },
               "value": {
                    "function": "insertStringArrayElement",
                    "value": "[\"240\",\"https://cache.modd.io/asset/spriteImage/1683288223651_Test_UI_006.png\"]",
                    "string": {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationPropertyList",
                                   "dataType": "string",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationPropertyList"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    }
               },
               "comment": ""
          },
          {
               "type": "setEntityVariable",
               "entity": {
                    "function": "thisEntity"
               },
               "variable": {
                    "function": "getEntityVariable",
                    "variable": {
                         "text": "animationPropertyList",
                         "dataType": "string",
                         "entity": "NG5gjDrimk",
                         "key": "animationPropertyList"
                    }
               },
               "value": {
                    "function": "insertStringArrayElement",
                    "value": "[\"240\",\"https://cache.modd.io/asset/spriteImage/1683288179954_Test_UI_007.png\"]",
                    "string": {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationPropertyList",
                                   "dataType": "string",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationPropertyList"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    }
               },
               "comment": ""
          },
          {
               "type": "setEntityVariable",
               "entity": {
                    "function": "thisEntity"
               },
               "variable": {
                    "function": "getEntityVariable",
                    "variable": {
                         "text": "animationPropertyList",
                         "dataType": "string",
                         "entity": "NG5gjDrimk",
                         "key": "animationPropertyList"
                    }
               },
               "value": {
                    "function": "insertStringArrayElement",
                    "value": "[\"240\",\"https://cache.modd.io/asset/spriteImage/1683288119754_Test_UI_008.png\"]",
                    "string": {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationPropertyList",
                                   "dataType": "string",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationPropertyList"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    }
               },
               "comment": ""
          },
          {
               "type": "setEntityVariable",
               "entity": {
                    "function": "thisEntity"
               },
               "variable": {
                    "function": "getEntityVariable",
                    "variable": {
                         "text": "animationPropertyList",
                         "dataType": "string",
                         "entity": "NG5gjDrimk",
                         "key": "animationPropertyList"
                    }
               },
               "value": {
                    "function": "insertStringArrayElement",
                    "value": "[\"0\",\"END\"]",
                    "string": {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationPropertyList",
                                   "dataType": "string",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationPropertyList"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    }
               },
               "comment": ""
          },
          {
               "type": "setEntityVariable",
               "entity": {
                    "function": "thisEntity"
               },
               "variable": {
                    "function": "getEntityVariable",
                    "variable": {
                         "text": "animationIsRunning",
                         "dataType": "boolean",
                         "entity": "NG5gjDrimk",
                         "key": "animationIsRunning"
                    }
               },
               "value": false,
               "comment": ""
          }
     ],
     "name": "initialize",
     "parent": null,
     "key": "RdxXQVj4zt",
     "order": -1
}

The initialize script should be run on item creation.
The first number inside each row tells how long(MS) the frame should be played, while the second part is the URL of the frame image that should be shown.
I added 2 key-words “END” for an one shot animation and “REPEAT” for an infinite looping animation.
You can add as many frames to your animation as you want using the same action of setting entity variable.

3 Likes
2
Animation Start 
{
     "triggers": [
          {
               "type": "itemIsUsed"
          }
     ],
     "conditions": [
          {
               "operator": "==",
               "operandType": "boolean"
          },
          true,
          true
     ],
     "actions": [
          {
               "type": "setEntityVariable",
               "entity": {
                    "function": "thisEntity"
               },
               "variable": {
                    "function": "getEntityVariable",
                    "variable": {
                         "text": "animationPlayList",
                         "dataType": "string",
                         "entity": "NG5gjDrimk",
                         "key": "animationPlayList"
                    }
               },
               "value": {
                    "function": "getValueOfEntityVariable",
                    "variable": {
                         "function": "getEntityVariable",
                         "variable": {
                              "text": "animationPropertyList",
                              "dataType": "string",
                              "entity": "NG5gjDrimk",
                              "key": "animationPropertyList"
                         }
                    },
                    "entity": {
                         "function": "thisEntity"
                    }
               },
               "comment": "",
               "disabled": false
          },
          {
               "type": "sendChatMessage",
               "message": {
                    "function": "concat",
                    "textA": "AniStart: ",
                    "textB": {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationPlayList",
                                   "dataType": "string",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationPlayList"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    }
               },
               "disabled": true
          },
          {
               "type": "condition",
               "conditions": [
                    {
                         "operator": "!=",
                         "operandType": "boolean"
                    },
                    {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationIsRunning",
                                   "dataType": "boolean",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationIsRunning"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    },
                    true
               ],
               "then": [
                    {
                         "type": "setEntityVariable",
                         "entity": {
                              "function": "thisEntity"
                         },
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "animationIsRunning",
                                   "dataType": "boolean",
                                   "entity": "NG5gjDrimk",
                                   "key": "animationIsRunning"
                              }
                         },
                         "value": true,
                         "comment": ""
                    },
                    {
                         "type": "runScript",
                         "scriptName": "TKvrJ1Bsyy",
                         "isEntityScript": true,
                         "disabled": false
                    }
               ],
               "else": [],
               "isExpanded": {
                    "self": false
               }
          }
     ],
     "name": "Animation Start",
     "parent": null,
     "key": "bHj8oFI2g5",
     "order": 1
}

This script should be run whenever you want to start the animation I use on item used for this example.

Animation Loop 
{
     "triggers": [],
     "conditions": [
          {
               "operator": "==",
               "operandType": "boolean"
          },
          true,
          true
     ],
     "actions": [
          {
               "type": "condition",
               "conditions": [
                    {
                         "operator": ">",
                         "operandType": "number"
                    },
                    {
                         "function": "getStringArrayLength",
                         "string": {
                              "function": "getValueOfEntityVariable",
                              "variable": {
                                   "function": "getEntityVariable",
                                   "variable": {
                                        "text": "animationPlayList",
                                        "dataType": "string",
                                        "entity": "NG5gjDrimk",
                                        "key": "animationPlayList"
                                   }
                              },
                              "entity": {
                                   "function": "thisEntity"
                              }
                         }
                    },
                    0
               ],
               "then": [
                    {
                         "type": "condition",
                         "conditions": [
                              {
                                   "operandType": "string",
                                   "operator": "=="
                              },
                              {
                                   "function": "getStringArrayElement",
                                   "number": 1,
                                   "string": {
                                        "function": "getStringArrayElement",
                                        "number": 0,
                                        "string": {
                                             "function": "getValueOfEntityVariable",
                                             "variable": {
                                                  "function": "getEntityVariable",
                                                  "variable": {
                                                       "text": "animationPlayList",
                                                       "dataType": "string",
                                                       "entity": "NG5gjDrimk",
                                                       "key": "animationPlayList"
                                                  }
                                             },
                                             "entity": {
                                                  "function": "thisEntity"
                                             }
                                        }
                                   }
                              },
                              "END"
                         ],
                         "then": [
                              {
                                   "type": "setEntityVariable",
                                   "entity": {
                                        "function": "thisEntity"
                                   },
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "animationPlayList",
                                             "dataType": "string",
                                             "entity": "NG5gjDrimk",
                                             "key": "animationPlayList"
                                        }
                                   },
                                   "value": "[]",
                                   "comment": ""
                              },
                              {
                                   "type": "setEntityVariable",
                                   "entity": {
                                        "function": "thisEntity"
                                   },
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "frameDuration",
                                             "dataType": "number",
                                             "entity": "NG5gjDrimk",
                                             "key": "frameDuration"
                                        }
                                   },
                                   "value": 0,
                                   "comment": ""
                              },
                              {
                                   "type": "setEntityVariable",
                                   "entity": {
                                        "function": "thisEntity"
                                   },
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "animationIsRunning",
                                             "dataType": "boolean",
                                             "entity": "NG5gjDrimk",
                                             "key": "animationIsRunning"
                                        }
                                   },
                                   "value": false,
                                   "comment": ""
                              },
                              {
                                   "type": "return"
                              }
                         ],
                         "else": [],
                         "isExpanded": {
                              "self": false
                         }
                    },
                    {
                         "type": "condition",
                         "conditions": [
                              {
                                   "operandType": "string",
                                   "operator": "=="
                              },
                              {
                                   "function": "getStringArrayElement",
                                   "number": 1,
                                   "string": {
                                        "function": "getStringArrayElement",
                                        "number": 0,
                                        "string": {
                                             "function": "getValueOfEntityVariable",
                                             "variable": {
                                                  "function": "getEntityVariable",
                                                  "variable": {
                                                       "text": "animationPlayList",
                                                       "dataType": "string",
                                                       "entity": "NG5gjDrimk",
                                                       "key": "animationPlayList"
                                                  }
                                             },
                                             "entity": {
                                                  "function": "thisEntity"
                                             }
                                        }
                                   }
                              },
                              "REPEAT"
                         ],
                         "then": [
                              {
                                   "type": "setEntityVariable",
                                   "entity": {
                                        "function": "thisEntity"
                                   },
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "frameDuration",
                                             "dataType": "number",
                                             "entity": "NG5gjDrimk",
                                             "key": "frameDuration"
                                        }
                                   },
                                   "value": 0,
                                   "comment": ""
                              },
                              {
                                   "type": "setEntityVariable",
                                   "entity": {
                                        "function": "thisEntity"
                                   },
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "animationIsRunning",
                                             "dataType": "boolean",
                                             "entity": "NG5gjDrimk",
                                             "key": "animationIsRunning"
                                        }
                                   },
                                   "value": false,
                                   "comment": ""
                              },
                              {
                                   "type": "runScript",
                                   "scriptName": "bHj8oFI2g5",
                                   "isEntityScript": true
                              },
                              {
                                   "type": "return"
                              }
                         ],
                         "else": [],
                         "isExpanded": {
                              "self": false
                         }
                    },
                    {
                         "type": "setEntityVariable",
                         "entity": {
                              "function": "thisEntity"
                         },
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "frameDuration",
                                   "dataType": "number",
                                   "entity": "NG5gjDrimk",
                                   "key": "frameDuration"
                              }
                         },
                         "comment": "frame duration as index 0 of array index 0 of play list",
                         "value": {
                              "function": "stringToNumber",
                              "value": {
                                   "function": "getStringArrayElement",
                                   "number": 0,
                                   "string": {
                                        "function": "getStringArrayElement",
                                        "number": 0,
                                        "string": {
                                             "function": "getValueOfEntityVariable",
                                             "variable": {
                                                  "function": "getEntityVariable",
                                                  "variable": {
                                                       "text": "animationPlayList",
                                                       "dataType": "string",
                                                       "entity": "NG5gjDrimk",
                                                       "key": "animationPlayList"
                                                  }
                                             },
                                             "entity": {
                                                  "function": "thisEntity"
                                             }
                                        }
                                   }
                              }
                         }
                    },
                    {
                         "type": "sendChatMessage",
                         "message": {
                              "function": "concat",
                              "textA": "AniDur: ",
                              "textB": {
                                   "function": "getValueOfEntityVariable",
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "frameDuration",
                                             "dataType": "number",
                                             "entity": "NG5gjDrimk",
                                             "key": "frameDuration"
                                        }
                                   },
                                   "entity": {
                                        "function": "thisEntity"
                                   }
                              }
                         },
                         "disabled": true
                    },
                    {
                         "type": "condition",
                         "conditions": [
                              {
                                   "operandType": "number",
                                   "operator": "=="
                              },
                              {
                                   "function": "getValueOfEntityVariable",
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "frameDuration",
                                             "dataType": "number",
                                             "entity": "NG5gjDrimk",
                                             "key": "frameDuration"
                                        }
                                   },
                                   "entity": {
                                        "function": "thisEntity"
                                   }
                              },
                              {
                                   "function": "undefinedValue"
                              }
                         ],
                         "then": [
                              {
                                   "type": "setEntityVariable",
                                   "entity": {
                                        "function": "thisEntity"
                                   },
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "frameDuration",
                                             "dataType": "number",
                                             "entity": "NG5gjDrimk",
                                             "key": "frameDuration"
                                        }
                                   },
                                   "value": 0,
                                   "comment": ""
                              }
                         ],
                         "else": [],
                         "comment": "catch the nasties before they destroy our precious",
                         "isExpanded": {
                              "self": false
                         }
                    },
                    {
                         "type": "condition",
                         "conditions": [
                              {
                                   "operator": ">",
                                   "operandType": "number"
                              },
                              {
                                   "function": "getValueOfEntityVariable",
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "frameDuration",
                                             "dataType": "number",
                                             "entity": "NG5gjDrimk",
                                             "key": "frameDuration"
                                        }
                                   },
                                   "entity": {
                                        "function": "thisEntity"
                                   }
                              },
                              0
                         ],
                         "then": [
                              {
                                   "type": "setEntityVariable",
                                   "entity": {
                                        "function": "thisEntity"
                                   },
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "frameURL",
                                             "dataType": "string",
                                             "entity": "NG5gjDrimk",
                                             "key": "frameURL"
                                        }
                                   },
                                   "value": {
                                        "function": "getStringArrayElement",
                                        "number": 1,
                                        "string": {
                                             "function": "getStringArrayElement",
                                             "number": 0,
                                             "string": {
                                                  "function": "getValueOfEntityVariable",
                                                  "variable": {
                                                       "function": "getEntityVariable",
                                                       "variable": {
                                                            "text": "animationPlayList",
                                                            "dataType": "string",
                                                            "entity": "NG5gjDrimk",
                                                            "key": "animationPlayList"
                                                       }
                                                  },
                                                  "entity": {
                                                       "function": "thisEntity"
                                                  }
                                             }
                                        }
                                   }
                              },
                              {
                                   "type": "changeItemInventoryImage",
                                   "url": {
                                        "function": "getValueOfEntityVariable",
                                        "variable": {
                                             "function": "getEntityVariable",
                                             "variable": {
                                                  "text": "frameURL",
                                                  "dataType": "string",
                                                  "entity": "NG5gjDrimk",
                                                  "key": "frameURL"
                                             }
                                        },
                                        "entity": {
                                             "function": "thisEntity"
                                        }
                                   },
                                   "item": {
                                        "function": "thisEntity"
                                   }
                              },
                              {
                                   "type": "setEntityVariable",
                                   "entity": {
                                        "function": "thisEntity"
                                   },
                                   "variable": {
                                        "function": "getEntityVariable",
                                        "variable": {
                                             "text": "animationPlayList",
                                             "dataType": "string",
                                             "entity": "NG5gjDrimk",
                                             "key": "animationPlayList"
                                        }
                                   },
                                   "value": {
                                        "function": "removeStringArrayElement",
                                        "number": 0,
                                        "string": {
                                             "function": "getValueOfEntityVariable",
                                             "variable": {
                                                  "function": "getEntityVariable",
                                                  "variable": {
                                                       "text": "animationPlayList",
                                                       "dataType": "string",
                                                       "entity": "NG5gjDrimk",
                                                       "key": "animationPlayList"
                                                  }
                                             },
                                             "entity": {
                                                  "function": "thisEntity"
                                             }
                                        }
                                   }
                              }
                         ],
                         "else": [],
                         "isExpanded": {
                              "self": false
                         }
                    }
               ],
               "else": [],
               "isExpanded": {
                    "self": true,
                    "then": true
               }
          },
          {
               "type": "condition",
               "conditions": [
                    {
                         "operator": ">",
                         "operandType": "number"
                    },
                    {
                         "function": "getValueOfEntityVariable",
                         "variable": {
                              "function": "getEntityVariable",
                              "variable": {
                                   "text": "frameDuration",
                                   "dataType": "number",
                                   "entity": "NG5gjDrimk",
                                   "key": "frameDuration"
                              }
                         },
                         "entity": {
                              "function": "thisEntity"
                         }
                    },
                    0
               ],
               "then": [
                    {
                         "type": "setTimeOut",
                         "duration": {
                              "function": "getValueOfEntityVariable",
                              "variable": {
                                   "function": "getEntityVariable",
                                   "variable": {
                                        "text": "frameDuration",
                                        "dataType": "number",
                                        "entity": "NG5gjDrimk",
                                        "key": "frameDuration"
                                   }
                              },
                              "entity": {
                                   "function": "thisEntity"
                              }
                         },
                         "actions": [
                              {
                                   "type": "runScript",
                                   "scriptName": "TKvrJ1Bsyy",
                                   "isEntityScript": true
                              }
                         ]
                    }
               ],
               "else": [],
               "isExpanded": {
                    "self": false
               }
          }
     ],
     "name": "Animation Loop",
     "parent": null,
     "key": "TKvrJ1Bsyy",
     "order": 2
}

This script does the main work and don’t need to be touched or run, If you don’t know what’s going on don’t worry about it.
I made a game where I improved on this concept a little it’s currently undocumented but just have a look:

4 Likes
3

making a open sourced game for test it would be awesome, and helpfull for beginner not understanding everything

3 Likes