iio Debugger

Download iioDebugger.js

The iio Debugger is a tool that allows you to monitor your application's framerate performance and object groups.

Setup is very simple, just load an iioDebugger js file directly after you load the iioEngine:

<!doctype html>
  <body>
    <script type="text/javascript" src="iioEngine.js"></script>
    <script type="text/javascript" src="iioDebugger.js"></script>
    
  </body>
</html>

Then put the activateDebugger command anywhere in your iio application script:

MainAppFunction = function(io){
 
  //start the debugger
  io.activateDebugger();

  //print debug message
  io.debugMsg('Hello Debugger!');

};

That's it, you should now see the debugger console popup on your application canvas.

Please update your browser to a version that supports canvas

//Full HTML page and Application script demo
<!doctype html>
  <body>
    <script type="text/javascript" src="iioEngine.js"></script>
    <script type="text/javascript" src="iioDebugger.js"></script>
    <script type="text/javascript">
      function DebuggerDemo(io){

        //activate debugger
        io.activateDebugger();
        
        //print debug message
        io.debugMsg('Hello Debugger!');
       
        //set background color and speed
        io.setBGColor('#5e3f6b');
        var backgroundSpeed = 6;

        //load images
        var imgPath = 'path-to-images'
        var backgroundSrcs = [imgPath+'Background/starBig.png', 
                          imgPath+'Background/starSmall.png', 
                          imgPath+'Background/speedLine.png', 
                          imgPath+'Background/nebula.png'];

        var asteroidSrcs = [imgPath+'meteorBig.png', 
                            imgPath+'meteorSmall.png'];

        //create background objects
        function runBgCreator(yMin, yMax){
          for (var i=0; i<4; i++)
            for (var j=i*io.canvas.width/4; j<(i+1)*io.canvas.width/4; j++)

                //create nebula
                if (iio.getRandomNum(0,10)<.2)
                    io.addToGroup('nebulas',
                        new iio.Rect(j, iio.getRandomInt(yMin, yMax)), -20)
                        .createWithImage(backgroundSrcs[3])
                        .enableKinematics().setVel(0,backgroundSpeed)
                        .setBound('bottom',io.canvas.height+200);

                //create small stars
                else if (iio.getRandomNum(0,10)<.2)
                    io.addToGroup('small stars',
                        new iio.Rect(j, iio.getRandomInt(yMin, yMax)), -30)
                        .createWithImage(backgroundSrcs[1])
                        .enableKinematics()
                        .setVel(0,Math.round(backgroundSpeed/2))
                        .setBound('bottom',io.canvas.height+100);

                //create big stars
                else if (iio.getRandomNum(0,10) < .2)
                    io.addToGroup('big stars',
                        new iio.Rect(j, iio.getRandomInt(yMin, yMax)), -30)
                        .createWithImage(backgroundSrcs[0])
                        .enableKinematics()
                        .setVel(0,Math.round(backgroundSpeed/2)+.2)
                        .setBound('bottom',io.canvas.height+100);
        }

        function createLargeMeteor(){
            io.addToGroup('large meteors',
                new iio.Rect(iio.getRandomInt(30,io.canvas.width-30)
                          ,iio.getRandomInt(-800,-50)))
                .createWithImage(meteorSrcs[0])
                .enableKinematics()
                .setVel(iio.getRandomInt(-2,2)
                       ,iio.getRandomInt(10,14))
                .setBound('bottom', io.canvas.height+200)
                .setTorque(iio.getRandomNum(-.1,.1));
        }
        function createSmallMeteor(){
            io.addToGroup('small meteors',
                new iio.Rect(iio.getRandomInt(30,io.canvas.width-30)
                          ,iio.getRandomInt(-800,-50)))
                .enableKinematics()
                .setBound('bottom', io.canvas.height+200)
                .createWithImage(meteorSrcs[1])
                .setVel(iio.getRandomInt(-2,2),
                        iio.getRandomInt(10,14))
                .setTorque(iio.getRandomNum(-.1,.1));
        }

        var bgCreatorDelay = 80;
        var bgCount = 0;
        function updateBackground(){
            if (bgCount < 1){
                runBgCreator(-io.canvas.height*2, 0);
                for (var i=0; i<2; i++){
                    createLargeMeteor();
                    createSmallMeteor();
                }
                bgCount = bgCreatorDelay;
            } else bgCount--;
          }
       
        io.setFramerate(60, function(){
            updateBackground();
        });

      }; iio.start(DebuggerDemo,'canvasId');
    </script>
  </body>
</html>