Battle animations - jjppof/goldensun_html5 GitHub Wiki

You can create a battle animation WITHOUT PROGRAMMING KNOWLEDGE, you just need to set up a JSON file (JSON is not a programming language, it's a data file just like CSV or XML are) with the animation recipe and a spritesheet for the graphics. Each animation has one json file and one spritesheet. The json file contains one object with the following properties.

[Particles information are still missing.]

Files names pattern

Spritesheet

assets/images/abilities_animations/[battle_animation_key].png
assets/images/abilities_animations/[battle_animation_key].json

Recipe

assets/dbs/abilities_animations/[battle_animation_key]_db.json

battle_animation_key could be ice for Ice psynergy, for instance.

Properties

Example for Ice psynergy.

  • key_name [string]: battle animation unique key_name.

  • sprites [array|string]: specify the sprites that will be created for this battle animation. The indexes of this array can be used on sprite_index property. See below. If a string is passed to this property, it must be one of the following: "caster", "allies", "targets", or "background", by choosing one of these, you'll be able to access these sprites individually when defining animation sequences.

    • key_name [string]: sprite key_name. The animation for this sprite will also have this key_name, see animation_key property under play_sequence property below.
    • frames_number [number]: the number of frames that the key_name animation has.
    • per_target [boolean]: if it's going to be one sprite per battle target.
    • position [string]: can be "behind" if the sprite is behind caster and target groups. "between" if the sprite is between the groups. or "over" if the sprite is over the two groups.
    • count [number]: set a specific number of copies for this sprite to be created. Each copy has a different index that will be incremented up to the count number.
    • trails [boolean]: set to true if you want this sprite to have trails.
    • trails_mode [string]: the blend mode for the trails. It can be "normal" or "screen".
    • trails_factor [number]: controls the number of trails that this sprite is going to have.
    • follow_sprite [number]: the index of a sprite that you want this one to follow the position. A sprite index is the position number of a sprite inside the above sprite property.

  • x_sequence [array]: controlling the x property of a sprite in pixels.

    • sprite_index [string|number|array]: the index of a sprite that you want this action to take place. A sprite index is the position number of a sprite inside the above sprite property. This property can also be a string: "targets" if you're referring to targets, "allies" if you're referring to allies, "caster" if the caster, "background" if the background sprite. It can also be an array of any type before.
    • start_delay [number|array|object]: the initial delay in ms to this action takes place. The delay is always relative to the battle animation start. It can be an array of values if you set an array for sprite_index. The array length must match. If this property is of object type, you can use it to define a range of numbers:
      • starting_value [number]: the initial number of the range. Required property.
      • cumulator [number]: the step size that will be accumulated for each element. Required property.
      • reverse [boolean]: if true, it will reverse the resulting range elements order. Optiional property. Default is false.
    • to [string|number|array|object]: the value you're targeting. The value can be "targets", "reset" or an actual value. In the case of "targets" is the corresponding property value of the central target. In the case of using "targets", a "shift" property is available to be added to the resulting value. In the case of "reset", it will return to x or y original value of a fighter, only works for x_sequence and y_sequence, shift and is_absolute don't apply for this value. It can be an array of values if you set an array for sprite_index. The array length must match. If this project is set as an object, the behavior will be just like start_delay property, please check it.
    • to_expression [string]: for whatever is the resulting value of to property, this property modifies its final value by a given math expression. Use v to reference the to value. Example: "v * 2 / (v ^ 3) + sqrt(v)". Optional property.
    • shift [number|array|object]: the value to be added to the resulting value from to property. It can be an array of values if you set an array for sprite_index. The array length must match. If this project is set as an object, the behavior will be just like start_delay property, please check it.
    • is_absolute [boolean]: whether the value given in to property is an absolute value.
    • tween [string]: the easing type of the animation. Types can be found here. Example: "Elastic.Out".
    • duration [number]: how low this animation is going to last in ms.
    • yoyo [boolean]: if true, the property will reach the to value, then return to its initial value.

  • y_sequence [array]: controlling the y property of a sprite in pixels. Same properties as x_sequence.

  • x_scale_sequence [array]: controlling the scale.x property of a sprite. 100% is 1. Same properties as x_sequence.

  • y_scale_sequence [array]: controlling the scale.y property of a sprite. 100% is 1. Same properties as x_sequence.

  • x_anchor_sequence [array]: controlling the anchor.x property of a sprite. 0 is the left, 1 is the right side of the sprite. Same properties as x_sequence.

  • y_anchor_sequence [array]: controlling the anchor.y property of a sprite. 0 is the top, 1 is the bottom side of the sprite. Same properties as x_sequence.

  • alpha_sequence [array]: controlling the alpha property of a sprite. Values between 0 and 1. Same properties as x_sequence.

  • grayscale_sequence [array]: controlling the saturation of a sprite. Values between 0 and 1. Same properties as x_sequence.

  • rotation_sequence [array]: controlling the rotation property of a sprite in rad. Same properties as x_sequence plus the one below.

    • direction [string]: it can be "clockwise", "counter_clockwise" or "closest".

  • hue_angle_sequence [array]: controls the hue angle of a sprite in rad. Same properties as rotation_sequence.

  • center_shift_sequence [array]: this property controls how far a fighter sprite will be from the center of the stage. Default value: 0. Same properties as x_sequence plus the one below.

    • force_stage_update [boolean]: if true, the stage will be updated while this property is changing.

  • stage_angle_sequence [array]: controls the rotation of the stage in rad. Default position value is 0.7551327.

    • start_delay [number]: the initial delay in ms to this action takes place. The delay is always relative to the previous action.
    • to [number|string]: the value you're targeting. It can also be "default" to return to default position or "cast_position" to go to the cast position (allies or opponent, it depends on who is casting).
    • is_absolute [boolean]: whether the value given in to property is an absolute value.
    • direction [string]: it can be "clockwise", "counter_clockwise" or "closest".
    • tween [string]: the easing type of the animation. Types can be found here. Example: "Elastic.Out".
    • duration [number]: how low this animation is going to last in ms.

  • set_frame_sequence [array]: plays a sprite animation.

    • sprite_index [string|number|array]: the index of a sprite that you want this action to take place. A sprite index is the position number of a sprite inside the above sprite property. This property can also be a string: "targets" if you're referring to targets, "caster" if the caster, "background" if the background sprite. It can also be an array of any type before.
    • start_delay [number|array]: the initial delay in ms to this action takes place. The delay is always relative to the battle animation start. It can be an array of values if you set an array for sprite_index. The array length must match.
    • frame_name [string]: the frame name to be set.

  • play_sequence [array]: plays a sprite animation.

    • sprite_index [string|number|array]: the index of a sprite that you want this action to take place. A sprite index is the position number of a sprite inside the above sprite property. This property can also be a string: "targets" if you're referring to targets, "caster" if the caster, "background" if the background sprite. It can also be an array of any type before.
    • start_delay [number|array]: the initial delay in ms to this action takes place. The delay is always relative to the battle animation start. It can be an array of values if you set an array for sprite_index. The array length must match.
    • reverse [boolean]: if true, reverses the animation direction.
    • frame_rate [number]: animation frame rate.
    • repeat [boolean]: if true, the animation will keep repeating.
    • hide_on_complete [boolean]: if true, the sprite will be hidden after animation end.
    • wait [boolean]: if true, waits for this animation end before unsetting the current battle animation.
    • animation_key [string]: the sprite key_name that wat set in the sprite property. In the case sprite_index is "caster" or "targets", you can use the following keys:
      • "attack"
      • "cast"
      • "cast_init"
      • "damage"
      • "downed"
      • "idle"

  • blend_mode_sequence [array]: controls a sprite blend mode.

    • sprite_index [string|number|array]: the index of a sprite that you want this action to take place. A sprite index is the position number of a sprite inside the above sprite property. This property can also be a string: "targets" if you're referring to targets, "caster" if the caster, "background" if the background sprite. It can also be an array of any type before.
    • start_delay [number|array]: the initial delay in ms to this action takes place. The delay is always relative to the battle animation start. It can be an array of values if you set an array for sprite_index. The array length must match.
    • mode [string]: the blend mode. It can be "screen" or "normal".

  • sfx_sequence [array]: plays an sfx during the battle animation.

    • sfx_key [string]: the sfx key to be played.
    • start_delay [number]: the initial delay in ms to this action takes place. The delay is always relative to the battle animation start.
    • position_shift [number]: the amount of time in seconds to initially cut this sfx. Optional property.
    • volume [number]: the volume of the sfx to be executed. Optional property. Default is 1.

  • tint_sequence [array]: tint a sprite.

    • sprite_index [string|number|array]: the index of a sprite that you want this action to take place. A sprite index is the position number of a sprite inside the above sprite property. This property can also be a string: "targets" if you're referring to targets, "caster" if the caster, "background" if the background sprite. It can also be an array of any type before.
    • start_delay [number|array]: the initial delay in ms to this action takes place. The delay is always relative to the battle animation start. It can be an array of values if you set an array for sprite_index. The array length must match.
    • value [array]: array of 3 values for RGB. Each value ranging from 0 to 1. -1 values disable it.

  • blink_sequence [array]: blink a sprite by tinting it multiple times given an interval.

    • sprite_index [string|number|array]: the index of a sprite that you want this action to take place. A sprite index is the position number of a sprite inside the above sprite property. This property can also be a string: "targets" if you're referring to targets, "caster" if the caster, "background" if the background sprite. It can also be an array of any type before.
    • start_delay [number|array]: the initial delay in ms to this action takes place. The delay is always relative to the battle animation start. It can be an array of values if you set an array for sprite_index. The array length must match.
    • count [number]: the number of times this sprite will blink. Required property.
    • interval [number]: the blink interval in ms. Required property.
    • color [object]: the RGB color of the blink. Default is white.
      • r [number]: the red component ranging from 0 to 1.
      • g [number]: the green component ranging from 0 to 1.
      • b [number]: the blue component ranging from 0 to 1.

  • colorize_sequence [array]: colorize a sprite.

    • sprite_index [string|number|array]: the index of a sprite that you want this action to take place. A sprite index is the position number of a sprite inside the above sprite property. This property can also be a string: "targets" if you're referring to targets, "caster" if the caster, "background" if the background sprite. It can also be an array of any type before.
    • start_delay [number|array]: the initial delay in ms to this action takes place. The delay is always relative to the battle animation start. It can be an array of values if you set an array for sprite_index. The array length must match.
    • value [value]: Value ranging from 0 to 1. This range corresponds to the color spectrum starting with blue. -1 values disable it.
    • colorize_intensity [value]: Value ranging from 0 to 1. This is the intensity of the colorize.

  • texture_displacement_sequence [array]: shifts texture pixels within its sprite boundaries.

    • sprite_index [string|number|array]: the index of a sprite that you want this action to take place. A sprite index is the position number of a sprite inside the above sprite property. This property can also be a string: "targets" if you're referring to targets, "caster" if the caster, "background" if the background sprite. It can also be an array of any type before.
    • start_delay [number|array]: the initial delay in ms to this action takes place. The delay is always relative to the battle animation start. It can be an array of values if you set an array for sprite_index. The array length must match.
    • duration [number]: the duration of the pixel displacement in ms.
    • repeat_texture [boolean]: if false, it won't repeat the texture on displacement. Optional property. Default is true.
    • shift [object]: the x and/or y shift measured in px.
      • x [number]: the x-axis pixel shift to be applied in px.
      • y [number]: the y-axis pixel shift to be applied in px.

  • custom_filter_sequence [array]: any custom filter that you may want to apply for a sprite.

    • sprite_index [string|number|array]: the index of a sprite that you want this action to take place. A sprite index is the position number of a sprite inside the above sprite property. This property can also be a string: "targets" if you're referring to targets, "caster" if the caster, "background" if the background sprite. It can also be an array of any type before.
    • start_delay [number|array]: the initial delay in ms to this action takes place. The delay is always relative to the battle animation start. It can be an array of values if you set an array for sprite_index. The array length must match.
    • filter [string]: The key name of your custom filter.
    • value [?]: The custom value.

Common properties for all sequences:

  • ignore_if_dodge [boolean]: if true, this animation sequence will be ignored if the target dodged the attack. Optional property. Default is false.

Some builtin custom filters:

  • flame: flame coloring the sprite. Value is boolean. True if you want to activate.
  • levels: levels of an image. Value is an array of [min, max, gamma]. -1 values disable it.
  • color_blend: blend a given color with the current one in the sprite. Value is an array of 3 values for RGB. Each value ranging from 0 to 1. -1 values disable it.