using requireJS to dynamically load js files

Question

I'm creating a RPG. I would like to dynamically load NPC dialog js files depending on the current level.

Originally, I was doing <script type="text/javascript" src="js/npc_dialog_level_1.js"></script> at the top of my game.js file... but don't want to keep doing that for each npc_dialog.js file.

I would rather do something like:

if (map == 1) {
   require(js/npc_dialog_level_1.js);
if (map == 2) {
   require(js/npc_dialog_level_2.js);

I was following requireJS's tutorial, but I'm not clear on:

a) The download requireJS doesn't include the helper/utils.js folder and file specified in the example:

 project-directory/
    project.html
    scripts/
        main.js
        require.js
        helper/
          util.js

b) How to use the require function: require(["helper/util"], function(util) { On map change, I'd like to just place the path to the associated npc_dialog_level.js file. Where do I put the Require code, and what do I pass into it to load the correct js file?

Each npc_dialog_level file contains js object. I am using that in my game to read dialog

var dialog = {

quests : {
    Lee : {
        "1 - Introductions" :

Update:

I tried:

//load NPC dialog given the map
loadNpcDialog : function (dialogNumber) {
    require("npc_dialog_level_" + dialogNumber + ".js", function(dialog) {
    //  log(dialog);
    });     
},

Gives:

Uncaught Error: Invalid require call
http://requirejs.org/docs/errors.html#requireargs require.js:166

Can you elaborate further? What do the npc_dialog_level_X files contain? It doesn't sound like requirejs is the correct tool here. Have you considered using plain AJAX instead? — sahbeewah
– sahbeewah, Commented May 8, 2014 at 4:09

Louis · Accepted Answer · 2014-05-08 10:30:06Z

4

You have to use brackets for your dependency list when you call require, like this:

//load NPC dialog given the map
loadNpcDialog : function (dialogNumber) {
    require(["npc_dialog_level_" + dialogNumber + ".js"], function(dialog) {
    //  log(dialog);
    });     
},

If you don't use brackets, then you're using the pseudo-synchronous form of require, which would be used like this: var dialog = require("npc_dialog_level_" + dialogNumber + ".js"). However, this pseudo-synchronous form would not work in your case.

If eventually you want to make these files into JSON files or XML you can use the text! plugin to load them.

answered May 8, 2014 at 10:30

Louis

152k28 gold badges288 silver badges332 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3871 Over a year ago

Louis, this works, thank you! What's the benefit of storing the dialog as JSON/XML vs straight up text inside a javascript object?

Louis Over a year ago

In XML you can use schemas to constrain your data structure to a very high degree. I've not done the same with JSON but I've heard that schemas exist for JSON too. So you could get some significant support to help someone who does not know programming edit these files, without the extraneous stuff that a JavaScript editor might provide and with the extra guidance that a schema can provide. However, if you do not have a need for such functionality, then you can just continue to load a JavaScript file. In other words, I would not convert to JSON or XML just for the heck of it.

user3871 Over a year ago

Thanks for this, Louis. My current js object structure wouldn't change much if I use JSON format, right? The schema stays the same. I would just load it as a text file and read it in with $.getJSON("json_file.js",function(result){ then loop through my json fields with $.each(result, function(i, field){ right?

Louis Over a year ago

"My current js object structure wouldn't change much if I use JSON format, right?" It really depends on what you put in your objects. For instance, if you need to put functions in there then JSON won't work well because it does not allow functions. The code you've shown in your comment ought to work fine.

Jeremy J Starcher · Accepted Answer · 2014-05-08 13:45:50Z

2

IFF your dialog stuff is all actually JavaScript, then doing a late-loading is fairly easy.

function runNpcDialog(number) {
    require(["npc-dialog-" + number + ".js"], function(dialog) {
      // Run your dialog here.
    });
}

Otherwise, if your information is more of a JSON/XML format, then using ajax would be a better option.

EDIT: Fixed syntax

edited May 8, 2014 at 13:45

answered May 8, 2014 at 4:26

Jeremy J Starcher

24k6 gold badges56 silver badges75 bronze badges

2 Comments

user3871 Over a year ago

Gives error: Uncaught Error: Invalid require call requirejs.org/docs/errors.html#requireargs require.js:166

Jeremy J Starcher Over a year ago

Sorry, had the syntax slightly off .. the needed modules had to be in an array.

Collectives™ on Stack Overflow

using requireJS to dynamically load js files

2 Answers 2

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related