Turbulenz: Game Script Doesn't Run When Moved to External .js FIle

Question

On starting a new project in the Javascript game engine Turbulenz, an example from the website runs fine when included in script tags within index.html. However, any attempt by me to move that code to an external .js file results in the moved code not being run.

Here's my program (the version that runs):

<!doctype html5>

<html>

<head>
  <title>Blockhead</title>
  <script src="jslib/debug.js"></script>
  <script src="jslib/webgl/turbulenzengine.js"></script>
  <script src="jslib/webgl/graphicsdevice.js"></script>
  <script src="jslib/draw2d.js"></script>
  </head>

<body>
  <canvas id="canvas" width="400px" height="600px"/>
  <script>
     TurbulenzEngine = WebGLTurbulenzEngine.create ({canvas: document.getElementById("canvas")});

     var graphicsDevice = TurbulenzEngine.createGraphicsDevice({});

     var draw2D = Draw2D.create({graphicsDevice: graphicsDevice});

     var r = 1.0, g = 1.0, b = 0.0, a = 1.0;
     var bgColor = [r, g, b, a];

     var x1 = 50;
     var y1 = 50;
     var x2 = graphicsDevice.width - 50;
     var y2 = graphicsDevice.height - 50;

     var rectangle = [x1, y1, x2, y2];

     var drawObject =
       {
       color: [1.0, 0.0, 0.0, 1.0],
       destinationRectangle: rectangle
       };

     var sprite = Draw2DSprite.create
       ({
       width: 100,
       height: 100,
       x: graphicsDevice.width / 2,
       y: graphicsDevice.height / 2,
       color: [1.0, 1.0, 1.0, 1.0],
       rotation: Math.PI / 4
       });

     var texture = graphicsDevice.createTexture
       ({
       src: "particle_spark.png",
       mipmaps: true,
       onload: function (texture)
         {
         if (texture)
           {
           sprite.setTexture(texture);
           sprite.setTextureRectangle([0, 0, texture.width, texture.height]);
           }
         }
       });

     var PI2 = Math.PI * 2;
     var rotateAngle = Math.PI / 32;

     function update ()
       {
       b += 0.01;
       bgColor[2] = b % 1; // Clamp color between 0-1
       sprite.rotation += rotateAngle;
       sprite.rotation %= PI2; //Wrap rotation at PI * 2
       if (graphicsDevice.beginFrame())
         {
         graphicsDevice.clear(bgColor, 1.0);
         /* Rendering code goes here */
         draw2D.begin(); // Opaque
         draw2D.draw(drawObject);
         draw2D.end();

         draw2D.begin('additive'); // Additive
         draw2D.drawSprite(sprite);
         draw2D.end();
         graphicsDevice.endFrame();
         }
       }

     TurbulenzEngine.setInterval(update, 1000 / 60);

  </script>
</body>
</html>

And here's the version that doesn't run (The only change is the inclusion of the new script tag and the moving of all the internal js to that file):

<!doctype html5>

<html>

<head>
  <title>Blockhead</title>
  <script src="jslib/debug.js"></script>
  <script src="jslib/webgl/turbulenzengine.js"></script>
  <script src="jslib/webgl/graphicsdevice.js"></script>
  <script src="jslib/draw2d.js"></script>
  <script src="javascript/blockhead.js"></script>
  </head>

<body>
  <canvas id="canvas" width="400px" height="600px"/>
</body>
</html>

Lastly, here's the page from their site that the walkthrough came from:

http://docs.turbulenz.com/starter/getting_started_guide.html

There's got to be a way to split the program up into multiple files or else projects would become almost unmanageable.

You didn't just move the script to an external file, you also moved the script tag. You also have some HTML errors, [use a validator](http://validator.w3.org). — Quentin, Oct 26 '14 at 10:29
@Quentin: Hence the inclusion of the script link to Blockhead.js, pointing to the new file. But I will check out a validator and get back to you on the results. — Nightmare Games, Oct 27 '14 at 06:18
Alright, it looks like another problem is that this engine doesn't seem to like self-closing tags, such as , which the validator caught. Good idea. — Nightmare Games, Oct 27 '14 at 06:46

HMR · Accepted Answer · 2014-10-26T10:53:25.477

2

This should work:

  <canvas id="canvas" width="400px" height="600px"/>
  <script src="javascript/blockhead.js"></script>
</body>

Because

document.getElementById("canvas")

The canvas element doesn't exist when that executes, it has to execute after the canvas element is defined.

If you open the page in chrome you can press f12 to open the developer tool or use Firefox with the firebug extension. The console should show you an error and you can set breakpoints or use console.log to inspect certain variables

edited Oct 26 '14 at 10:53

answered Oct 26 '14 at 10:24

HMR

37,593
24
91
160

That was a smart idea. I moved all my script tags to the end of the body and it works great now. Too bad they don't have it that way in the tutorial. – Nightmare Games Oct 27 '14 at 06:33

Turbulenz: Game Script Doesn't Run When Moved to External .js FIle

1 Answers1