Problem with Ticker?

Zenithkicker's Avatar

Zenithkicker

22 Jun, 2012 04:23 AM

Hello everyone,

I have been programming in AS3 for awhile but I'm completely new to Javascript so I'm sorry if what I am doing is completely wrong. What I am trying to do is draw a circle onto the canvas and have it move right to left and keep repeating. I am trying to do this from an external Javascript class called Main and I am passing a window reference so I can add the tick listener to it. Here is the Main.js file:

(function(window)
{
var canvas = document.getElementById("canvas");
var stage = new Stage(canvas);
var speed = 1;
var circle;

//Constructor/class name
function Main()
{
    var g = new Graphics();

    g.setStrokeStyle(1);
    g.beginStroke(Graphics.getRGB(0,0,0));
    g.drawCircle(0,0,15);

    var circle = new Shape(g);
    circle.x = 300;
    circle.y = 200;
    stage.addChild(circle);
    stage.update();

    Ticker.setFPS(30);
    Ticker.addListener(window);
}

//game loop
function tick()
{
    circle.x += speed;
    if(circle.x > canvas.width )
    {
        speed *= -1;
    }
    else if(circle.x < 0 )
    {
        speed *= -1;
    }

    stage.update();
}

window.Main = Main();
})(window);

The problem is that the tick method doesn't fire. However the alert method shows that the window object is not null.
Maybe it is just my lack of javascript experience but does anybody know what is going on?

Thanks for the help!

Also here is the html file:

<!DOCTYPE HTML >
<html>
<head>
<title></title>

</head>
<body onload="start();">
<canvas id="canvas" width="960" height="600"></canvas>
</body>

<script src="easeljs-0.4.2.min.js"></script>
<script src="Main.js"></script>
<script>
    function start()
    {
       var game = new Main(window);
    }
</script>
</html>
  1. Support Staff 1 Posted by Lanny McNie on 22 Jun, 2012 03:59 PM

    Lanny McNie's Avatar

    The problem is that by defining your "class" within the function scope, your tick method is not actually on "window". Instead, try using a reference to your tick method directly.

    Ticker.addListener(tick);
    

    This is not the recommended approach, as you are not really leaving yourself with anything referencing "Main". In fact, by executing Main on this line:

    window.Main = Main(); // Note, not recommended
    

    you are actually setting window.Main to null, since Main() doesn't return anything, and will execute your script instead. A better approach is to define your tick method on the prototype of Main

    Main.prototype.tick = function() {
        // Your code
    }
    

    have your Ticker listen on Main instead:

    Ticker.addListener(this);
    

    and then set Main on the window properly.

    window.Main = Main
    

    Hope that helps.

  2. Lanny McNie closed this discussion on 22 Jun, 2012 03:59 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac