DigitalTina

help with splitting an application

Recommended Posts

<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? 

Screen Shot 2018-03-28 at 3.48.34 PM.png

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.