Quitnus not loading assets

[chand1012]

I copied the code from the basic Quintus platformer from the website home page with the same assets and nothing is loading. I tried running the game from a webserver (more specifically mongoose server) which also didn't work. The assets were being loaded with the Q.load function.

[viki53]

Did you look at the Network tab in your DevTools?

What URL is being loaded? What error do you get?

[chand1012]

There is nothing in the network tab at all, and on every file it says uncaught exception: Error loading <filename>

[viki53]

This is weird. You should see the network queries in the Network tab.

Does the Console provide more info about what's going on?

[chand1012]

Here are screenshots of what errors I am having. I can send you the code if you would like. I also tested this in both Firefox and Google Chrome both with and without running the HTML file on a Web Server and got the same error every time.

[viki53]

Please post the code you use to load those assets and the structure of your files.

Note that you will need a web server to load external files via XHR.

[chand1012]

Here is a screenshot of the file structure:

And here is the code for the loading of assets from game.js:

Q.load("test.tmx, rndgrsstile.png, player01.png, enemy01.png, tower01.png",
  // The callback will be triggered when everything is loaded
  function() {
    Q.stageScene("level1");
  });

index.html is the main file, I am loading Quintus from a CDN.

[viki53]

What version are you using from the CDN?

What does the Network tab show exactly?

[chand1012]

I am using v0.2.0 as it said in the tutorial on the Quintus home page. The Network tab shows nothing in both Firefox and Google Chrome.

[viki53]

It's weird that no XHR request is sent.

Have you tried using an Array to specify the assets, rather than a String?

Have you specified an errorCallback option to see what the error is exactly?

[chand1012]

I tried using a try-catch block and printing the error to no success, as I got the same error. I used an Array which again threw the same error. It seems to act as if the files don't exist. I've tried this on two different systems to get the same error both times.

[viki53]

But have you used the errorCallback option (part of the third parameter for the Q.load method)?

A simple try/catch won't work as it's an asynchronous treatment.

[chand1012]

May I ask how I would use that? I am a hobbyist programmer and Javascript is not my best language. Say if my function is set up like so:

var filestoload = ['test.tmx', 'rndgrsstile.png', 'player01.png', 'tower01.png', 'enemy01.png'];
Q.load(filestoload,
  function() {
    Q.stageScene("level1");
  });

How would I integrate the errorCallback from here?

[viki53]

In the third parameter (not set here), pass an object with a errorCallback key, like so:

Q.load(files, cb, { errorCallback: (err) => { console.dir(err) } });

[chand1012]

I got that to work after a bit of trial and error, in the end this worked out well:

var filestoload = ['test.tmx', 'rndgrsstile.png', 'player01.png', 'tower01.png', 'enemy01.png'];
var startlevel1 = function(){
  Q.stageScene('level1');
  console.log("First level loaded!");
};
var errorCallback = function(err){
  console.dir(err);
};
Q.loadTMX(filestoload,startlevel1(), errorCallback(err));

The error it throws out is this: TypeError: data is undefined for the file quintus-all.js

[viki53]

Could you give me the whole error (including the line number and call stack)?

[chand1012]

Here is a screenshot of the full error:

I can upload the Javascript file if you would like, its just copied almost entirely from here with minor changes. My goal was just to get a test level running so I can start on actually developing my game.

[viki53]

Looks like the problem is your TMX file, not the assets loading.

And I just took a closer look at your code:

Q.loadTMX(filestoload,startlevel1(), errorCallback(err));

This does 3 things:

• Ask Quintus to load a TMX file when you give a list of different files (1 TMX, 4 PNGs…), some of which are not supported
• You directly call the callback (by putting parenthesis after startlevel1) instead of giving its reference, before the assets are actually loaded
• Same with the errorCallback — which BTW should be in a object — which also uses an undefined err variable

Your code should look more like this:

Q.load(filestoload, startlevel1, { errorCallback: errorCallback });

[chand1012]

That removed the error entirely, but still nothing shows up at all on the screen. I shortened my code to this to minimize errors, as all I am trying to do is get a simple level rendered:

var startlevel1 = function(){
  Q.stageScene('level1');
  console.log("First level loaded!");
};
var firstlevelfiles = ['test.tmx', 'rndgrsstile.png'];
window.addEventListener('load', function(){
  var Q = window.Q = Quintus().include("Scenes, TMX").setup({maximize:true});
  Q.scene("level1", function(stage){
    Q.stageTMX('test.tmx', stage);
    stage.add('viewport');
  });
  Q.load(firstlevelfiles, startlevel1, { errorCallback: (err) => { console.dir(err) } });
});

Here is the HTML code if you were wondering:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<script src='http://cdn.html5quintus.com/v0.2.0/quintus-all.js'></script>
<script src='game.js'></script>
<style>
  body { padding:0px; margin:0px; }
</style>
</head>
<body>
</body>
</html>

[viki53]

I've never used TMX files, but as long as everything is loaded, all that's left todo is add some logs to see which functions have been called or not.

Also check the docs to make sure you didn't miss anything on the TMX use process.

[chand1012]

So I converted the TMX to Tiled's JSON format and it still came up blank in Firefox. I tested this again with Google Chrome, and the error came back. This time its a 404 error, but again the files are in the base directory. I am using the same code as above, here is the screenshot of the error:

[viki53]

The 404 is related to the favicon.ico file which is automatically loaded by Chrome if no favicon is specified in the HTML. Don't worry about it.

You do have a syntax error in your file, though, on line 16.

[chand1012]

This error doesn't show on Firefox, only Chrome. The line that the error is occurring is Q.load(firstlevelfiles, startlevel1, { errorCallback: errorCallback } }); which, as far as I know, is syntactically correct. All of the parenthesis and brackets are there.

[viki53]

It's not syntactically correct as there is one closing bracket too many. Firefox should have seen it too.

[chand1012]

Thank you, my IDE did not pick that up, its the kind of thing you wouldn't notice till someone points it out. Now Chrome is giving me a different 404 error while Firefox is not. Here is the console in both:
Chrome

Firefox

This is using the exact same code as the post from a few days ago, just with the brackets fixed.

[viki53]

You should check that the files are in the right folders then.

Quintus looks up files in dedicated directories by default. Make sure you follow the specs.

[chand1012]

I got the assets to load finally, and the world loads in. I don't know where the level itself is but I think i can figure it out by tinkering with the X and Y on the character I added. Thanks for the help!