Getting Spine into RPG Maker MV

[Erikari]

Hello, recently I've been wandering around searching for a solution on how to implement the wonders of Spine into RMMV. I'll try to post it all here so that nothing is missing.

I'm 100% sure there's some useless code in there, but it somehow works. What was done was downloading pixi-spine.js from github, adding also the spine runtime folders and adding a line in the index so that pixi-spine script is recognized (half a day went into this). then I went on Pixi.js website and copied the example code, I added the spine-data folder to my project and wow it works. (in order to check fastly I used the moving function so that I just had to click and see.

Problem is: this guy is in a canvas that is below everything. How can I fix it?

//=============================================================================
// Spine.js
//=============================================================================

/*:
* @plugindesc A plug in that holds Spine animations
* @author Erikari
*
* @help This plugin does not provide plugin commands.
*/

(function() {

Game_Player.prototype.executeMove = function(direction) {

var renderer = PIXI.autoDetectRenderer(900, 600);

document.body.appendChild(renderer.view);

// create the root of the scene graph
var stage = new PIXI.Container();
UpperCanvas.appendChildAt(this.stage,6)
// load spine data
PIXI.loader
//spineCharacter
.add('spineboy', 'spine-data/spineboy.json')
.load(onAssetsLoaded);

stage.interactive = true;

function onAssetsLoaded(loader, res) {

console.log(res);
// create a spine boy
var spineBoy = new PIXI.spine.Spine(res.spineboy.spineData);

// set the position
spineBoy.position.x = renderer.width / 2;
spineBoy.position.y = renderer.height;

spineBoy.scale.set(1.5);

// set up the mixes!
spineBoy.stateData.setMixByName('walk', 'jump', 0.2);
spineBoy.stateData.setMixByName('jump', 'walk', 0.4);

// play animation
spineBoy.state.setAnimationByName(0, 'walk', true);

stage.addChild(spineBoy);

stage.on('click', function () {
spineBoy.state.setAnimationByName(0, 'jump', false);
spineBoy.state.addAnimationByName(0, 'walk', true, 0);
});
}

requestAnimationFrame(animate);

function animate() {
requestAnimationFrame(animate);
renderer.render(stage);
}

};

})();
​

I'm pretty sure I could have avoided posting all this code but if only the other Japanese super guy who got it to work had done the same, (and unfortunately I don't know Japanese) I wouldn't be here, so instead, I'm sharing.
I'm desperate lol, any help is appreciated.

 

[LTN Games]

Hmm, well by the looks of this you're creating a brand new canvas have you tried using the canvas MV is using? Instead of using a brand new renderer and canvas you could try using MV's renderer and stage and then add your spine as a child at the back of the children array.
Has this script worked for you before? Or did the guy who got it working, not quite get it working? lol. Anyways, do you know a place that has premade spines I could use to test out this plugin?

 

[Erikari]

No I didn't because each time it says that "canvas" or whatever I try to use that I spot in other parts of the code are not defined. I'd wish to merge it all I just gave up for now but I'd gladly get it back in the code.
I already heard of this method but I missed the part of the array.

The script works, you just need to deactivate the UpperCanvas via console (I found it pressing F8) and it is majestically there. Except for the click part but that's not something I need at this stage.

https://github.com/pixijs/pixi-spine here is the script I was talking about. https://github.com/pixijs/examples/tree/gh-pages/required/assets/spine here you can clone all the spine examples. I used spineboy, in order to make a spine file work you need the atlas, json, and png all in the same folder (in my case I called the folder spine-data)

http://gamecome.hateblo.jp/entry/2015/11/24/015353 the awesome Japanese guy. He even put a couple videos that brought tears of joy to my eyes.

With this I hope I answered everything.

The next step I wished to have after getting the animation on top would be to turn this example into smaller functions in order to make it easier to use more of them, then my aim is to get the spine animations in battle scenes, title screens, in messages (thus integrating it somehow with YEP Message Core) and ideally being able to put them also in world map and as actors. I'm not sure I'll be able to do it, but I think this should be the priority as this kind of smooth animations are best appreciated when they can be big. Of course as I'm a newbie to the coding part I might be wrong haha.
[doublepost=1473160615,1473117592][/doublepost]I thought what you suggested was similar to this https://rpgmakermv.co/threads/please-help-understand-some-pixi-stuff.2875/ but turns out it isn't.

Instead of using a brand new renderer and canvas you could try using MV's renderer and stage and then add your spine as a child at the back of the children array.

I'm searching and searching and I really can't find clear documentation on how to do what you suggest Q.Q

 

[LTN Games]

I'll be able to help out later today I'm at work right now but I can leave you some quick hints. The documentation for MV sucks lol but the renderer is located in rpg_core.js in the Graphics class. You can link to it like this

var renderer = Graphics._renderer;

As for the stage it's also located in rpg_core.js it's a separate class which is only inherited, the main class which inherits it is Scene_Base.

 

[Erikari]

After another day where I concluded nothing even thought I tried to research what you wrote, ultimately wasting all my day because nothing worked, and seeing the humble bundle for Game Maker, I'm switching to GM which has natively integrated Spine and requires way less hacking.

Thank you for the support, stay amazing!