Jump to content

Search the Community

Showing results for tags 'pixi-spine.js'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
    • Paid Promotion (Buy Banner)
  • Frameworks
    • Pixi.js
    • Phaser 3
    • Phaser 2
    • Babylon.js
    • Panda 2
    • melonJS
    • Haxe JS
    • Kiwi.js
  • General
    • General Talk
    • GameMonetize
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered
    • Marketplace (Sell Apps, Websites, Games)

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Website URL


Twitter


Skype


Location


Interests

Found 2 results

  1. Hi, I was trying to understand how to use Pixi-spine library that adds support for spine animations for PixiJS . But I did not find anything useful on the internet. Can anyone help me understand it?
  2. <script>window.onload = function () { //Application 1: Dog 1 var app_1 = new PIXI.Application($(window).width(),$(window).height(), { transparent: true }); var dog1; document.getElementById('area').appendChild(app_1.view) $(window).resize(function () { app_1.renderer.resize( $(window).width(),$(window).height()); }); // load spine data PIXI.loader .add('dog1', 'assets/animate/dog1_skeleton.json') .load(onAssetsLoaded); app_1.stage.interactive = true; app_1.stage.buttonMode = true; function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function scaleScene() { app_1.renderer.resize($("#area").width(), $("#area").height()); var bottom_position_ratio = 50/800; dog1.position.set(app_1.screen.width / 4, app_1.screen.height - bottom_position_ratio*app_1.screen.height); var base_height = 800; var base_scale = .25; var ratio = .25 / 800; dog1.scale.set(ratio*app_1.screen.height); } $(window).resize(function () { scaleScene(); }); function onAssetsLoaded(loader, res) { console.log(res); dog1 = new PIXI.spine.Spine(res.dog1.spineData); // set current skin dog1.skeleton.setSkinByName('dog1_skin'); // set up the mixes! // dog1.stateData.setMix('neutral_breth', 'head_l', 0.2); dog1.stateData.setMix('head_l', 'head_r', 0.4); dog1.stateData.setMix('head_r', 'head_l', 0.4); scaleScene(); // play animation dog1.state.setAnimation(0, 'neutral_breth', true); dog1.state.setAnimation(1, 'tail_fast', true); app_1.stage.addChild(dog1); app_1.stage.on('pointertap', function () { // change current skin console.log('wgt>!'); // dog1.stateData.setMix('head_l', 'neutral_breth', 0.4); // dog1.state.setAnimation(1, 'head_l', .04); // dog1.state.setAnimation(3, 'head_r', fal); var rand = getRandomInt(2); if (rand == 1) { dog1.state.setAnimation(3, 'head_l', false, 0); } else { dog1.state.setAnimation(3, 'head_r', false, 0); } rand = getRandomInt(3); setTimeout(function () { dog1.state.setAnimation(4, 'blink', false, 0); }, getRandomInt(2000)); }); console.log(document.body); } //Application 2: Dog 2 *********************************************** var app_2 = new PIXI.Application($(window).width(),$(window).height(), { transparent: true }); var dog2; document.getElementById('area').appendChild(app_2.view) $(window).resize(function () { app_2.renderer.resize( $(window).width(),$(window).height()); }); // load spine data PIXI.loader .add('dog2', 'assets/animate/dog2_skeleton.json') .load(onAssetsLoaded); app_2.stage.interactive = true; app_2.stage.buttonMode = true; function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function scaleScene() { app_2.renderer.resize($("#area").width(), $("#area").height()); var bottom_position_ratio = 50/800; dog2.position.set(app_2.screen.width / 4 + app_2.screen.width / 2 , app_2.screen.height -bottom_position_ratio*app_2.screen.height); var base_height = 800; var base_scale = .25; var ratio = .25 / 800; dog2.scale.set(ratio*app_2.screen.height); } $(window).resize(function () { scaleScene(); }); function onAssetsLoaded(loader, res) { console.log(res); dog2 = new PIXI.spine.Spine(res.dog2.spineData); // set current skin dog2.skeleton.setSkinByName('dog1_skin'); // set up the mixes! // dog1.stateData.setMix('neutral_breth', 'head_l', 0.2); dog2.stateData.setMix('head_l', 'head_r', 0.4); dog2.stateData.setMix('head_r', 'head_l', 0.4); scaleScene(); // play animation dog2.state.setAnimation(0, 'neutral_breth', true); dog2.state.setAnimation(1, 'tail_fast', true); app_2.stage.addChild(dog2); app_2.stage.on('pointertap', function () { // change current skin console.log('wgt>!'); // dog1.stateData.setMix('head_l', 'neutral_breth', 0.4); // dog1.state.setAnimation(1, 'head_l', .04); // dog1.state.setAnimation(3, 'head_r', fal); var rand = getRandomInt(2); if (rand == 1) { dog2.state.setAnimation(3, 'head_l', false, 0); } else if (rand == 2) { dog2.state.setAnimation(3, 'head_r', false, 0); } else { dog2.state.setAnimation(3, 'fun', false, 0); } setTimeout(function () { dog2.state.setAnimation(4, 'blink', false, 0); }, getRandomInt(2000)); }); console.log(document.body); } }</script> I originally had 1 application with 2 dogs animated inside. I now split the application so each dog is separate dog 1 and dog 2. But I did not split it correctly, as the dogs do not appear anymore. What mistakes do you see in this code?
×
×
  • Create New...