Jump to content

How to scale the debug line along with the world


Recommended Posts

I'm probably being funny because I recently started working with phaser but I couldn't find an answer anywhere. I'm doing zoom by changing the world scale and my sprites seem to act naturally when I zoom but the lines that I render using debug.geom(line) don't update properly ( they start moving away from their start and end point ( which are sprites)  as I zoom in or out  but they still respond relatively if I drag either of the sprites. How do i make them to stick to the actual sprites not the view ? 

P.S. : If you check out the attachment : I have zoomed in a little bit and now the line has moved away from the handles but remains parallel to the invisible line that connects the two sprites, it will stay parallel to that even if I drag the handles around , but it's length is not scaling and the position is not right !

...        };        var newLine= function ()        {          handles['line'+lineCounter+'_1']= game.add.sprite(100, 200, 'balls', 0);          var handle1=handles['line'+lineCounter+'_1'] ;          handle1.anchor.set(0.5);          handle1.inputEnabled = true;          handle1.input.enableDrag(true);          handles['line'+lineCounter+'_2']= game.add.sprite(400, 300, 'balls', 0);          var handle2=handles['line'+lineCounter+'_2'] ;          handle2.anchor.set(0.5);          handle2.inputEnabled = true;          handle2.input.enableDrag(true);          lines['line'+lineCounter] = new Phaser.Line(handle1.x, handle1.y, handle2.x, handle2.y);          //handles['line'+lineCounter+'_1'].addChild(lines['line'+lineCounter]);          lineCounter++ ;        };        // Add available input keys        var key1 = game.input.keyboard.addKey(Phaser.Keyboard.ONE);        key1.onDown.add(previousPicture, this);        var key2 = game.input.keyboard.addKey(Phaser.Keyboard.TWO);        key2.onDown.add(nextPicture, this);        var key3 = game.input.keyboard.addKey(Phaser.Keyboard.THREE);        key3.onDown.add(newLine, this);        // set our world size to be bigger than the window so we can move the camera        //game.world.setBounds(-900, -900, 900,900);        // move our camera half the size of the viewport back so the pivot point is in the center of our view        game.camera.x = (game.width * -0.5);        game.camera.y = (game.height * -0.5);      },      update: function()      {        for (var lineName in lines)        {          lines[lineName].setTo(handles[lineName+'_1'].x, handles[lineName+'_1'].y, handles[lineName+'_2'].x, handles[lineName+'_2'].y);          //lines[lineName].fromSprite(handles[lineName+'_1'],handles[lineName+'_2'], false);        }          // movement      if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {        game.world.pivot.y -= 5;      }      else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {        game.world.pivot.y += 5;      }      if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {        game.world.pivot.x -= 5;      }      else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {        game.world.pivot.x += 5;      }      // zoom      if (game.input.keyboard.isDown(Phaser.Keyboard.Q)) {          worldScale += 0.05;      }      else if (game.input.keyboard.isDown(Phaser.Keyboard.A)) {          worldScale -= 0.05;      }      // set a minimum and maximum scale value      worldScale = Phaser.Math.clamp(worldScale, 0.8, 3);      // set our world scale as needed      game.world.scale.set(worldScale);        /*        if (cursors.left.isDown)         {           console.log("Left");           if (backgrounds['image-data-'+String(currentImage-1)] )           {             previous_image= backgrounds['image-data-'+String(currentImage-1)] ;             previous_image.alpha= 1.0 ;           }         }         if (cursors.right.isDown)          {            console.log("Right");            if (backgrounds['image-data-'+String(currentImage+1)] )            {              next_image= backgrounds['image-data-'+String(currentImage+1)] ;              next_image.alpha= 0 ;            }          } */      },      render: function()      {        for (var lineName in lines)        {          game.debug.geom(lines[lineName],'rgb(0,255,0)');        }      }


Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...