ericaxu_gemmy/docs/Adding-animation-to-plugin-source.md

Adding your new animations to the plugin code

This guide walks you step-by-step for adding your created animations into the source code.

Each file where you need to add your additions will include commented templates to make the process easier.

For this pages examples, I will use the following popular character: Pikachu.

👿 Please DO NOT add a Pikachu animation to a public copy of this plugin.

1. Adding quotes to QuoteManager.ts

⚠ If you have not already added your new character's quote lines in Quotes, do that first. You can find instructions in Adding quotes to Granite.

To have your characters say something within Granite, we need to tell the plugin to add its quotes. In QuoteManager.ts, you will first want to import the quotes you created in Quotes.ts.

Imports

Underneath the import section, add your new character to the import list.

Before:

import GranitePlugin from './main';  
import { AnimationSourceType } from './Setting';  
import { GraniteMode, GraniteState } from './Granite';  
import { DRAKE_EXCLUSIVE_QUOTES, GEMMY_EXCLUSIVE_QUOTES, GRANITE_BASE_QUOTES, Quotes } from './quotes/Quotes';

After:

import GranitePlugin from './main';  
import { AnimationSourceType } from './Setting';  
import { GraniteMode, GraniteState } from './Granite';  
import { PIKACHU_EXCLUSIVE_QUOTES, DRAKE_EXCLUSIVE_QUOTES, GEMMY_EXCLUSIVE_QUOTES, GRANITE_BASE_QUOTES, Quotes } from './quotes/Quotes';

Quotemap

In the QuoteManager class, you will want to add your new character to the quote map.

Before:

	constructor(plugin: GranitePlugin) {
		this.plugin = plugin;

		this.quoteMap = {
			[AnimationSourceType.GEMMY]: {
				[GraniteMode.IDLE]: this.getIdleQuotes(GEMMY_EXCLUSIVE_QUOTES),
				[GraniteMode.WRITING]: this.getWritingQuotes(GEMMY_EXCLUSIVE_QUOTES),
			},
			[AnimationSourceType.DRAKE]: {
				[GraniteMode.IDLE]: this.getIdleQuotes(DRAKE_EXCLUSIVE_QUOTES),
				[GraniteMode.WRITING]: this.getWritingQuotes(DRAKE_EXCLUSIVE_QUOTES),
			},
		};

After:

	constructor(plugin: GranitePlugin) {
		this.plugin = plugin;

		this.quoteMap = {
			[AnimationSourceType.GEMMY]: {
				[GraniteMode.IDLE]: this.getIdleQuotes(GEMMY_EXCLUSIVE_QUOTES),
				[GraniteMode.WRITING]: this.getWritingQuotes(GEMMY_EXCLUSIVE_QUOTES),
			},
			[AnimationSourceType.DRAKE]: {
				[GraniteMode.IDLE]: this.getIdleQuotes(DRAKE_EXCLUSIVE_QUOTES),
				[GraniteMode.WRITING]: this.getWritingQuotes(DRAKE_EXCLUSIVE_QUOTES),
			},
			[AnimationSourceType.PIKACHU]: {
				[GraniteMode.IDLE]: this.getIdleQuotes(PIKACHU_EXCLUSIVE_QUOTES),
				[GraniteMode.WRITING]: this.getWritingQuotes(PIKACHU_EXCLUSIVE_QUOTES),
			},
		};

2. Import your animations into Animations.ts

To add your newly created animations into Granite to be rendered, we need to tell the plugin to process the gifs.

Imports

Under the import section, we need to import the animations under unique names.

Before:

// Draconic Animations  
import EMERGE_MOTION_DRAKE from '../animations/drake/drake_emerge.gif';  
import POP_MOTION_DRAKE from '../animations/drake/drake_pop.gif';  
import DISAPPEAR_MOTION_DRAKE from '../animations/drake/drake_disappear.gif';  
import ANGRY_MOTION_DRAKE from '../animations/drake/drake_angry.gif';  
import LOOK_MOTION_DRAKE from '../animations/drake/drake_lookAround.gif';  
import IDLE_MOTION_DRAKE from '../animations/drake/drake_idle.gif';  
import DISAPPOINT_IMG_DRAKE from '../animations/drake/drake_disappoint.gif';

After:

// Draconic Animations  
import EMERGE_MOTION_DRAKE from '../animations/drake/drake_emerge.gif';  
import POP_MOTION_DRAKE from '../animations/drake/drake_pop.gif';  
import DISAPPEAR_MOTION_DRAKE from '../animations/drake/drake_disappear.gif';  
import ANGRY_MOTION_DRAKE from '../animations/drake/drake_angry.gif';  
import LOOK_MOTION_DRAKE from '../animations/drake/drake_lookAround.gif';  
import IDLE_MOTION_DRAKE from '../animations/drake/drake_idle.gif';  
import DISAPPOINT_IMG_DRAKE from '../animations/drake/drake_disappoint.gif';

// Pikachu Animations
import EMERGE_MOTION_PIKACHU from '../animations/pikachu/pikachu_emerge.gif';  
import POP_MOTION_PIKACHU from '../animations/pikachu/pikachu_pop.gif';  
import DISAPPEAR_MOTION_PIKACHU from '../animations/pikachu/pikachu_disappear.gif';  
import ANGRY_MOTION_PIKACHU from '../animations/pikachu/pikachu_angry.gif';  
import LOOK_MOTION_PIKACHU from '../animations/pikachu/pikachu_lookAround.gif';  
import IDLE_MOTION_PIKACHU from '../animations/pikachu/pikachu_idle.gif';  
import DISAPPOINT_IMG_PIKACHU from '../animations/pikachu/pikachu_disappoint.gif';

Animations class

Within the animations class, you will want to add your animation map.

Before:

// the mappings from an animation type to an actual image file for the drakeling  
public readonly drakeAnimationMap: Record<AnimationType, string>;

After:

// the mappings from an animation type to an actual image file for the pikachu  
public readonly pikachuAnimationMap: Record<AnimationType, string>;
// the mappings from an animation type to an actual image file for the drakeling  
public readonly drakeAnimationMap: Record<AnimationType, string>;

Animation Map

Then further down, define the animation map. This is where you will tell Granite what animation to use for each emote.

Before:

constructor(plugin: GranitePlugin) {  
    this.plugin = plugin;  
  
    this.drakeAnimationMap = {  
       [AnimationType.EMERGE]: EMERGE_MOTION_DRAKE,  
       [AnimationType.POP_MOTION]: POP_MOTION_DRAKE,  
       [AnimationType.DISAPPEAR_MOTION]: DISAPPEAR_MOTION_DRAKE,  
       [AnimationType.ANGRY_MOTION]: ANGRY_MOTION_DRAKE,  
       [AnimationType.LOOK_MOTION]: LOOK_MOTION_DRAKE,  
       [AnimationType.IDLE_MOTION]: IDLE_MOTION_DRAKE,  
       [AnimationType.DISAPPOINT_IMG]: DISAPPOINT_IMG_DRAKE,  
    };

After:

constructor(plugin: GranitePlugin) {  
    this.plugin = plugin;  
    
    this.pikachuAnimationMap = {  
       [AnimationType.EMERGE]: EMERGE_MOTION_PIKACHU,  
       [AnimationType.POP_MOTION]: POP_MOTION_PIKACHU,  
       [AnimationType.DISAPPEAR_MOTION]: DISAPPEAR_MOTION_PIKACHU,  
       [AnimationType.ANGRY_MOTION]: ANGRY_MOTION_PIKACHU,  
       [AnimationType.LOOK_MOTION]: LOOK_MOTION_PIKACHU,  
       [AnimationType.IDLE_MOTION]: IDLE_MOTION_PIKACHU,  
       [AnimationType.DISAPPOINT_IMG]: DISAPPOINT_IMG_PIKACHU,  
    };

    this.drakeAnimationMap = {  
       [AnimationType.EMERGE]: EMERGE_MOTION_DRAKE,  
       [AnimationType.POP_MOTION]: POP_MOTION_DRAKE,  
       [AnimationType.DISAPPEAR_MOTION]: DISAPPEAR_MOTION_DRAKE,  
       [AnimationType.ANGRY_MOTION]: ANGRY_MOTION_DRAKE,  
       [AnimationType.LOOK_MOTION]: LOOK_MOTION_DRAKE,  
       [AnimationType.IDLE_MOTION]: IDLE_MOTION_DRAKE,  
       [AnimationType.DISAPPOINT_IMG]: DISAPPOINT_IMG_DRAKE,  
    };

Source Map

And right below that, add your character to the source map.

Before:

this.animationSourceMap = {  
    [AnimationSourceType.DRAKE]: this.drakeAnimationMap,  
    [AnimationSourceType.GEMMY]: this.gemmyAnimationMap,  
};

After:

this.animationSourceMap = {  
    [AnimationSourceType.PIKACHU]: this.pikachuAnimationMap, 
    [AnimationSourceType.DRAKE]: this.drakeAnimationMap,  
    [AnimationSourceType.GEMMY]: this.gemmyAnimationMap,  
};

3. Update Settings.ts

Now we need to make it so that you can toggle which character to use in your settings.

AnimationSourceType

In the animation source type section, we need to define the name of the character for the animations we have loaded thus far.

Before:

export enum AnimationSourceType {  
    GEMMY = 'gemmy',  
    DRAKE = 'drake',

After:

export enum AnimationSourceType {  
    GEMMY = 'gemmy',  
    DRAKE = 'drake',
    PIKACHU = 'pikachu',  

PluginSettingsTab

Now, we add the new character to the dropdown list.

Before:

.addDropdown(dropdown =>  
    dropdown  
       .addOption(AnimationSourceType.GEMMY, 'Gemmy')  
       .addOption(AnimationSourceType.DRAKE, 'Drake')

After:

.addDropdown(dropdown =>  
    dropdown  
       .addOption(AnimationSourceType.GEMMY, 'Gemmy')  
       .addOption(AnimationSourceType.DRAKE, 'Drake')
       .addOption(AnimationSourceType.PIKACHU, 'Pikachu')

4. Update Main.ts

This last update will tell Granite what to load based on the settings provided.

Async loadsettings

Before:

async loadSettings() {  
    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());  
  
    // migrations  
    // @ts-ignore    
    if (this.settings.animationSource === 'dragon') {  
       this.settings.animationSource = AnimationSourceType.DRAKE;  
    }  
    // @ts-ignore  
    if (this.settings.animationSource === 'original') {  
       this.settings.animationSource = AnimationSourceType.GEMMY;  
    }  
  
    await this.saveSettings();  
}

async loadSettings() {  
    this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());  
  
    // migrations 
    if (this.settings.animationSource === 'rat') {  
       this.settings.animationSource = AnimationSourceType.PIKACHU;  
    }  
    // @ts-ignore    
    if (this.settings.animationSource === 'dragon') {  
       this.settings.animationSource = AnimationSourceType.DRAKE;  
    }  
    // @ts-ignore  
    if (this.settings.animationSource === 'original') {  
       this.settings.animationSource = AnimationSourceType.GEMMY;  
    }  
  
    await this.saveSettings();  
}