Use with JavaScript

Overview

This guide demonstrates how to use the Axie Mixer SDK in a JavaScript app. The Axie Mixer is built upon Spine Animation with additional customization, that helps you create the skeleton data to be used with Spine.

Before you start

Before you start using the Axie Mixer SDK in your JavaScript app, make sure you have the following:

• npm or yarn for package installation. This guide uses Yarn.
• pixi.js^4.0.0
• pixi-spine^1.6.2

To install PixiJS and PixiSpine, run the following command:

yarn add @axieinfinity/mixer pixi.js^4.0.0 pixi-spine^1.6.2

Quickstart

1. Install the Axie Mixer SDK:

yarn add @axieinfinity/mixer

2. Create Axie Spine data:

import { AxieMixer } from '@axieinfinity/mixer'
const axieGene512 =
  '0x180000000000030002812051030c00000000008c086080020000008408204402000000800820420200010014188042060001000c1840c5040000008c0840c402'
const mixer = new AxieMixer(axieGene512)
const assets = mixer.getAssets()

Reference

AxieMixer class

new AxieMixer(gene: string, bodyIdLabel?: string | number, skipAnimation?: boolean): Axie Mixer

The AxieMixer class is the core of the SDK that receives an Axie's gene as an input and produces Spine data of the Axie as an output.

• gene: string: Gene of an Axie, must be gene512.
• bodyIdLabel: string|number: ID of an Axie, only used for a mystic Axie.
• skipAnimation: boolean: Option to turn off animation.

AxieMixer.getAssets() API

const mixer = new AxieMixer(gene512)
const assets = mixer.getAssets()

Generates assets from an Axie's gene, including Spine data, the variant of the Axie, and an adult combo skeleton.

AxieMixer.getAvatarLayers() API

const mixer = new AxieMixer(gene512)
const assets = mixer.getAvatarLayers()

Generates layers of Spine data from AxieMixer.

exportAvatarLayers method

exportAvatarLayers (skeletonJson: MixedSkeletonData, adultCombo: Map<string, string>, variantKey): Array<{ imagePath: string; px: number; py: number }>

Generates layers of Spine from the Mixer's assets:

• skeletonJson: MixedSkeletonData: Spine data of the Axie.
• adultCombo: Map<string, string>: Combo data of the Axie.
• variantKey: string: Variant of the Axie.
• customize: AvatarLayersOptions: Customize the size and positioning of the output image.

getSpineFromAdultCombo method

getSpineFromAdultCombo (adultCombo: Map<string, string>, skipAnimation?: boolean): MixedSkeletonData

• adultCombo: Map<string, string>: Combo data of the Axie.
• skipAnimation: boolean: Option to turn off animation.

getAxieBodyStructure512 API

getAxieBodyStructure512 (geneString: string): AxieBodyStructure

Gets the Axie's detail from the data gene:

• geneString: string: Gene of an Axie, must be gene512.

AxieBodyStructure interface

The AxieBodyStructure interface is a type of Axie. It includes the details of an Axie parsed from the Axie's gene.

interface AxieBodyStructure {
  class: CharacterClass
  body: number[]
  bodySkin: number
  primaryColors: number[]
  secondaryColors: number[]
  parts: {
    [AxiePartType.Eyes]: AxiePartStructure
    [AxiePartType.Mouth]: AxiePartStructure
    [AxiePartType.Ears]: AxiePartStructure
    [AxiePartType.Horn]: AxiePartStructure
    [AxiePartType.Back]: AxiePartStructure
    [AxiePartType.Tail]: AxiePartStructure
  }
}

AxiePartStructure interface

The AxiePartStructure interface is a type of part. It includes the details of a part parsed from the Axie's gene.

interface AxiePartStructure {
  stageCap: number
  stage: number
  reservation: number
  skinInheritability: boolean
  skin: number
  groups: Array<{
    class: CharacterClass
    value: number
  }>
}