This page contains the expression type description for Spine 4.0 as well as information about how we've used Spine 4.0 to create our flagship game .
2D Animated Character
Spine
The Duro Dog characters were created using the animation engine Spine. It is an animation tool that focuses specifically on 2D animation for games. Animation in Spine is done by attaching images to bones, then animating the bones. This is called skeletal or cutout animation and has numerous benefits over traditional, frame-by-frame animation. You can read about it here .
The Sample App provides an example of how to render 2D Spine animations in React. The code that renders a Duro Dog can be found in the Sample App at: /src/components/PixiNFT.js. The two main libraries used to render the dogs are pixi.js & pixi-spine.js.
Spine Expression Type
The Spine expression type includes the following expression attributes:
.json
.png
.atlas
All three of these attribute values (file locations in this case) are required to render a dog in Spine.
Getting The Expression Values
We get the expression values for each dog (NFT) with the following API Route: /pages/api/collection/nfts with "collectionId": "638665d8506da1c31926beef" as the input parameter. This API Route is calling the Asset Layer API with the following: You can also make calls directly to the API by using Postman.
GET https://api.assetlayer.com/api/v1/collection/nfts
The API response for the Duro Dog collection and Duro Dog serial number '0' will look like this:
The following code parses out the expression attribute values which are received from the API.
function getExpressionValue(expressionValues, expressionName, expressionAttributeName, showAnimations) {
return String(expressionValues?.find((expressionVal) => expressionVal?.expression?.expressionName === expressionName && expressionVal?.expressionAttribute?.expressionAttributeName === expressionAttributeName)?.value);
}
function parseNFT(nft, expression) {
if (!nft) {
return { parsedJson: null, parsedAtlas: null, parsedPng: null}
}
const parsedJson = getExpressionValue(nft.expressionValues || [], expression, 'JSON');
const parsedAtlas = getExpressionValue(nft.expressionValues || [], expression, 'Atlas');
const parsedImage = getExpressionValue(nft.expressionValues || [], expression, 'PNG');
return {
parsedJson,
parsedAtlas,
parsedImage,
};
}
useEffect(()=>{
const { parsedJson, parsedAtlas, parsedImage } = parseNFT(assetlayerNFT, expression);
if (parsedJson) {
// setSpineJson('jsonNamehere.json'); // setting this do a local copy of any nfts, they are not nft specific, only the image is
setSpineJson(parsedJson); // using the parse Json from the nft.
}
if (parsedAtlas) {
// setSpineAtlas('atlasNamehere.atlas'); // setting this do a local copy of any nfts, they are not nft specific, only the image is
setSpineAtlas(parsedAtlas); // using the parse Atlas from the nft.
}
if (parsedImage) {
setSpinePng(parsedImage);
}
}, [assetlayerNFT, expression])
Rendering Each Duro Dog
Each dog is then rendered using the following code:
There will also be an area in the marketplace where Spine animators will be able to sell their own 2D character collections consisting of unique or common NFTs.
As you can see in the .json response above, each dog has 3 expressions: Front View, Three Quarter View, and Menu View. That's the power of the Asset Layer platform - one NFT can be expressed in multiple ways. Even though they both use the same NFTs, the game uses the Front View expression whereas the game uses the Three Quarter View. The Menu View is just a simple image of each NFT that is used in the Marketplace.
You can use the Duro Dog Spine output files in your app (by using Duro Dogs in your app as a foreign slot) or create your very own characters in Spine, and then upload the files using the No-code Tool. If you do not have the skills to create your own spine character & animations, then you can hire one of the talented animators here or here .
