API

From Chibi Fighters
Jump to: navigation, search

You are looking to integrate Chibis in your game?

Chibi Fighters are coded on the PIXI framework. Within it the SPINE tools to be precise.

Find contracts and abis over here

Load Data

To integrate a still image simply query the Chibi and you have all required data at hand.

https://chibifighters.io/chibis.php?idj=43

This will return a json

{  
   "imageUrl":"https://chibifighters.io/chibis/generated/0/0/0286dd552c9bea9a69ecb3759e7b94777635514b.png",
   "externalUrl":"https://chibifighters.io/chibi/43",
   "description":"I will fry you in a pan! Chibiiii - This is Markus's Battle Roar. Chibis fight for Ether and Glory. Are you a true Warrior? Check them out at https://chibifighters.io</a>",
   "name":"Markus",
   "properties":{  
      "rarity":"Common",
      "isDead":"Not Dead",
      "TheHunt":"Good, not started",
      "trait1":"Soul Retriever",
      "trait2":"Soul Stealer",
      "trait3":"Priest",
      "gen":0,
      "fusionCounter":2,
      "winsRingOfDeath":0,
      "wins":0,
      "losses":0
   }
}


Load Spine

If you want to load our animated Chibis you will need two libraries, PIXI and PIXI.Spine

PIXI

https://github.com/pixijs/pixi.js

Which can be sourced like so

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.7.1/pixi.min.js"></script>


PIXI.SPINE

https://github.com/pixijs/pixi-spine

You will find the required file in /bin/ called pixi-spine.js
Upload it to your server and load it like so

<script src="/my_scripts/pixi-spine.js"></script>

Load all required Chibi data like so:

https://chibifighters.io/chibis.php?pixi=43

It can be a get or post request.

Depending the state of the Chibi you will get the following returns


Chibi doesn't exist

{
  "owner": null,
  "adult": null,
  "json": null,
  "atlas": null,
  "image_png": null,
  "texture": null,
  "root": "https://chibifighters.io"
}


Chibi exists, not an adult

(they can't fight)

{
  "owner": "0x95148894b4147f73a9dbfbf7e5fdba2cf522fe7a",
  "adult": false,
  "json": null,
  "atlas": null,
  "image_png": "/chibis/baby_chibi.png",
  "texture": null,
  "root": "https://chibifighters.io"
}


Chibi exists and adult

{
  "owner": "0x95148894b4147f73a9dbfbf7e5fdba2cf522fe7a",
  "adult": true,
  "json": "/rpg/models/chibis/chibi_master.json",
  "atlas": "/rpg/models/chibis/chibi_master.atlas",
  "image_png": "/chibis/generated/0/0/77de68daecd823babbb58edb1c8e14d7106e83bb.png",
  "texture": "/chibis/generated/0/0/77de68daecd823babbb58edb1c8e14d7106e83bb_atlas.png",
  "root": "https://chibifighters.io"
}

Just add the returned root to your files and you are good to go.


Animations

You have the following animations available

attack

attack_big (generally a crit attack)

death

dodge_1

idle

run


Examples

Static Chibi

Loading a static Chibi is easy as 1, 2, 3.

Let's get a random Chibi with name.

static_chibi.php

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<!-- you should replace these with places on your server, this is not a reliable source -->
<script src="/scripts/jquery-3.3.1.js"></script>

<p id="chibi_name"></p>
<div><img id="chibi_img" style="max-width: 10rem;"></div>
<p id="chibi_roar"></p>

<script>

    chibi_id = 3;

    $.get('https://chibifighters.io/chibis.php?idj=' + chibi_id, (data) => {
        
        document.getElementById("chibi_img").src = data.imageUrl;
        document.getElementById("chibi_name").innerText = data.name;
        document.getElementById("chibi_roar").innerText = data.roar;
        
    })

</script>

</body>
</html>


Animated Chibi

Here the code you need to add a Chibi to a stage, and whenever you click it it will perform a random animation.
You are now all set to make Chibis yours and create something fun with them!

animated_chibi.php

<!doctype html>

<!-- you should replace these with places on your server, this is not a reliable source -->
<script src="/utils/jquery-3.3.1.js"></script>
<script src="/pixi/pixi.min.js"></script>
<script src="/pixi/pixi-spine.js"></script>

<style>
    canvas {
        width: 100%;
        height: auto;
    }
</style>

<body>

<!-- we will insert the game here -->
<div id="game"></div>


<!-- ideally this will be in its own js file -->
<script>

    // shoutout to https://flappy-axie.herokuapp.com/
    // this code is heavily based on his pixi loading techniques

    // great helper funtion to get a random integer in js
    function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    // called when Chibi is clicked
    function changeAnim() {
        // this method is just for show, you should use another track for the attack, e.g. instead of 0 type in 1.
        // remove the idle at the end and instead use an event listener and clear the track once the attack is done/aborted
        // chibi.state.clearTrack(1);

        anim = randomInt(0,3);
        if (anim == 0) {
            // set animation, false = no loop
            chibi.state.setAnimation(0, 'attack', false);
        } else 
        if (anim == 1) {
            chibi.state.setAnimation(0, 'attack_big', false);
        } else 
        if (anim == 2) {
            chibi.state.setAnimation(0, 'dodge_1', false);
        } else 
        if (anim == 3) {
            chibi.state.setAnimation(0, 'death', false);
        }
        // once it finished playing it, it will trigger this animation (addAnim) which will play infinite, note the 0 at the end!!!
        chibi.state.addAnimation(0, 'idle', true, 0);
    }


    // initialize pixi
    gameScene = new PIXI.Application();
    gameScene.renderer.resize(1920,830);
    gameScene.stop();

    // load a chibi, this would be replaced with a function that checks the wallet of a user, finds their chibis and then queries one the player owns
    chibiID = 3;

    $.get({url: "https://chibifighters.io/chibis.php?pixi=" + chibiID}, function(data, status, xhr) {

        // check if it's an adult (this will also filter out Chibis that don't exist)
        if (data.adult == false) {
            console.log("Chibi not an adult yet")
            return;
        }
        
        // now construct path for atlas, image, model
        atlasURL = data.root + data.atlas;
        imageURL =  data.root + data.texture;
        modelURL = data.root + data.json;
        weaponURL = data.root + data.texture_weapon;

        // load the data
        PIXI.loader
            .add('stage', 'https://chibifighters.io/chibis/battlegrounds/plains.png')
            .add('chibi_atlas', atlasURL)
            .add('chibi_png', imageURL)
            .add('chibi_weapon', weaponURL)
            .load(function (loader, resources) {
                // this will be called once the previous files are loaded
                // now load the model (json) of the chibi, containing all data required for animations etc.
                $.get({url: modelURL, dataType: "json"}, function(rawSkeletonData) {
                    const rawAtlasData = resources['chibi_atlas'].data;
                    const spineAtlas = new PIXI.spine.core.TextureAtlas(rawAtlasData, function (line, callback) {
                        // pass the image here.
                        if (line == '@@@replace with chibi spritesheet.png@@@') {
                            callback(PIXI.BaseTexture.from('chibi_png'));
                        }
                        if (line == '@@@replace with chibi weapon.png@@@') {
                            callback(PIXI.BaseTexture.from('chibi_weapon'));
                        }
                    });
                    const spineAtlasLoader = new PIXI.spine.core.AtlasAttachmentLoader(spineAtlas);
                    const spineJsonParser = new PIXI.spine.core.SkeletonJson(spineAtlasLoader);
                    spineData = spineJsonParser.readSkeletonData(rawSkeletonData);

                    // now we can finally create the actual chibi object
                    chibi = new PIXI.spine.Spine(spineData);
                    // position it
                    chibi.position.set(gameScene.view.width * 0.4 , gameScene.view.height * 0.9);
                    // set animation to idle and infinite loop
                    chibi.state.setAnimation(0, 'idle', true);

                    // make it clickable
                    chibi.interactive = true;
                    chibi.on('pointerdown', changeAnim);

                    // elements are layered in order of appearance, so let's first create the background
                    bg = new PIXI.Sprite(PIXI.loader.resources["stage"].texture);
                    gameScene.stage.addChild(bg);

                    // add Chibi to the game stage
                    gameScene.stage.addChild(chibi);
                    
                    // attach the game stage to the div we defined up there
                    document.getElementById("game").appendChild(gameScene.view);
                    // and hit the play button so animations play etc.
                    gameScene.start();

                }).fail(function() {
                });
        });
    });
</script>

</body>

web3 random Chibi

To load a random Chibi of a wallet, the player needs to have MM installed and his wallet unlocked.

Then you can do something like this. Technically you only need tokensOf, but I left balanceOf in for reference.
Same for the ABI you could strip it down to the functions you actually need, no need to load the entire ABI.

get_random_chibi.php

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<script>

window.addEventListener('load', async () => {
    
    // Modern dapp browsers...
    if (window.ethereum) {
        window.web3 = new Web3(ethereum);
        try {
            // Request account access if needed
            await ethereum.enable();
            // Acccounts now exposed
            mmLoaded();
        } catch (error) {
            // User denied account access...
        }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
        window.web3 = new Web3(web3.currentProvider);
        // Acccounts always exposed
        mmLoaded();
    }
    // Non-dapp browsers...
    else {
        console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
    }
});


function mmLoaded() {
    chibiABI = [{"constant":false,"inputs":[{"name":"_tokenId1","type":"uint256"},{"name":"_tokenId2","type":"uint256"}],"name":"exhaustChibis","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_adultTimeSecs","type":"uint256"}],"name":"setAdultTime","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_tokenId","type":"uint256"}],"name":"approve","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_comission","type":"uint256"}],"name":"setComission","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_address","type":"address"},{"name":"amount","type":"uint256"}],"name":"weiToOwner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_setPaused","type":"bool"}],"name":"setGameStateFCF","outputs":[{"name":"_pausedFCF","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_tokenId","type":"uint256"},{"name":"_price","type":"uint256"}],"name":"setChibiForFusion","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"chibies","outputs":[{"name":"owner","type":"address"},{"name":"founder","type":"bool"},{"name":"nameChibi","type":"string"},{"name":"father","type":"uint256"},{"name":"mother","type":"uint256"},{"name":"gen","type":"uint256"},{"name":"forFusion","type":"bool"},{"name":"fusionPrice","type":"uint256"},{"name":"exhausted","type":"uint256"},{"name":"adult","type":"uint256"},{"name":"infoUrl","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_priceChibi","type":"uint256"}],"name":"setChibiGEN0Price","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_address","type":"address"}],"name":"setGeneContractAddress","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"approvedFor","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_address","type":"address"}],"name":"setBattleRemoveContractAddress","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_tokenId","type":"uint256"},{"name":"_name","type":"string"}],"name":"renameChibi","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"contract_owner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_setPaused","type":"bool"}],"name":"setGameState","outputs":[{"name":"_paused","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_fatherId","type":"uint256"},{"name":"_motherId","type":"uint256"},{"name":"_seed","type":"uint256"},{"name":"_name","type":"string"},{"name":"_battleRoar","type":"string"},{"name":"_region","type":"uint8"}],"name":"fusionChibis","outputs":[{"name":"success","type":"bool"}],"payable":true,"stateMutability":"payable","type":"function"},{"constant":false,"inputs":[{"name":"_address","type":"address"}],"name":"setBattleContractAddress","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"}],"name":"tokensOf","outputs":[{"name":"","type":"uint256[]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"queryFusionData","outputs":[{"name":"fusions","type":"uint256[]"},{"name":"forFusion","type":"bool"},{"name":"costFusion","type":"uint256"},{"name":"adult","type":"uint256"},{"name":"exhausted","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"ownerOf","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"tokenMetadata","outputs":[{"name":"infoUrl","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_exhaustionTime","type":"uint256"}],"name":"setExhaustionTime","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_owner","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"isNecromancer","outputs":[{"name":"","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[],"name":"acceptOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"cancelChibiForFusion","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"queryChibi","outputs":[{"name":"nameChibi","type":"string"},{"name":"infoUrl","type":"string"},{"name":"dna","type":"uint16[13]"},{"name":"father","type":"uint256"},{"name":"mother","type":"uint256"},{"name":"gen","type":"uint256"},{"name":"adult","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_address","type":"address"}],"name":"setFcfContractAddress","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"},{"name":"_battleRoar","type":"string"},{"name":"_region","type":"uint8"},{"name":"_seed","type":"uint256"}],"name":"buyChibiWithFcf","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"},{"name":"_battleRoar","type":"string"},{"name":"_region","type":"uint8"},{"name":"_seed","type":"uint256"}],"name":"buyGEN0Chibi","outputs":[{"name":"success","type":"bool"}],"payable":true,"stateMutability":"payable","type":"function"},{"constant":false,"inputs":[{"name":"_name","type":"string"},{"name":"_battleRoar","type":"string"},{"name":"_region","type":"uint8"},{"name":"_seed","type":"uint256"},{"name":"_specialId","type":"uint256"}],"name":"mintSpecial","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"contract_newOwner","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_tokenId","type":"uint256"}],"name":"transfer","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_price","type":"uint256"}],"name":"setMinimumPriceFusion","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"takeOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"getGameState","outputs":[{"name":"_paused","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"tokenURI","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"queryChibiAdd","outputs":[{"name":"owner","type":"address"},{"name":"founder","type":"bool"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"priceChibi","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"_tokenId","type":"uint256"}],"name":"queryFusionData_ext","outputs":[{"name":"forFusion","type":"bool"},{"name":"fusionPrice","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"prefix","type":"string"}],"name":"setInfoUrlPrefix","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_newOwner","type":"address"}],"name":"transferOwnership","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"inputs":[],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":false,"name":"tokenId","type":"uint256"},{"indexed":true,"name":"_owner","type":"address"},{"indexed":false,"name":"founder","type":"bool"},{"indexed":false,"name":"_name","type":"string"},{"indexed":false,"name":"dna","type":"uint16[13]"},{"indexed":false,"name":"father","type":"uint256"},{"indexed":false,"name":"mother","type":"uint256"},{"indexed":false,"name":"gen","type":"uint256"},{"indexed":false,"name":"adult","type":"uint256"},{"indexed":false,"name":"infoUrl","type":"string"}],"name":"ChibiCreated","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"tokenId","type":"uint256"},{"indexed":false,"name":"price","type":"uint256"}],"name":"ChibiForFusion","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"tokenId","type":"uint256"}],"name":"ChibiForFusionCancelled","type":"event"},{"anonymous":false,"inputs":[{"indexed":false,"name":"tokenId","type":"uint256"},{"indexed":false,"name":"battleRoar","type":"string"}],"name":"WarriorCreated","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"_from","type":"address"},{"indexed":true,"name":"_to","type":"address"}],"name":"OwnershipTransferred","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"_from","type":"address"},{"indexed":true,"name":"_to","type":"address"},{"indexed":false,"name":"_tokenId","type":"uint256"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"_owner","type":"address"},{"indexed":true,"name":"_approved","type":"address"},{"indexed":false,"name":"_tokenId","type":"uint256"}],"name":"Approval","type":"event"}];

    // start a contract instance
    chibiAddress = '0x71C118B00759B0851785642541Ceb0F4CEea0BD5';
    ChibiContract = web3.eth.contract(chibiABI);
    chibiInstance = ChibiContract.at(chibiAddress);

    chibiInstance.balanceOf(web3.eth.accounts[0], (err, res) => {
        if (err) return;
        
        // check balance, toNumber converts the bigNumber returned into readable number
        if (res.toNumber() > 0) {

            chibiInstance.tokensOf(web3.eth.accounts[0], (err, res) => {
                if (err) return;

                // return a random Chibi Number from the owner
                // res contains all Chibis in an array, so we pick a random chibi between 0 and the length of the array - 1
                rand_chibi_id = res[randomInt(0, res.length-1)].toNumber();

                console.log(rand_chibi_id);
            })
        }
    })
}

    // great helper funtion to get a random integer in js
    function randomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

</script>

</body>
</html>