solved [Solved] Splitting a Project into Multiple Files

[PhantomWarrior562]

In Summary: How do you split 1 BabylonJS file (with existing code) into multiple JavaScript files (and 1 HTML file)?

Hey all, I’m having lots of fun building my RPG game in BabylonJS! Unfortunately, I’m having trouble splitting my file into multiple files to make it easier to organize/eventually scale-up my code. The only information I found off of the Internet was hard to understand.

What I Have Right Now:

[File] Main HTML Code, including;

—All BabylonJS code

—All keyboard-listening code

I am using the BabylonJS HTML template from here (https://doc.babylonjs.com/babylon101/first) and put all of my BabylonJS code inside the createScene function.

Note: So far, all of my information (including boxes and sprites) are all created from BabylonJS and not imported (besides 1 sprite).

Note: I am using JavaScript and am using a regular simple-to-use IDE (Komodo Edit) for typing my code.

 

What I Would Like (in General):

My goal for asking this question is to learn how to split 1 BabylonJS file (as you see above) into multiple JavaScript files so I can organize my files something similar to what I list below this paragraph. (Important Note: I am not asking how to implement each of the files I list right below this paragraph. I'm self-teaching myself those things outside of this thread.  I am showing this list below because I would like to demonstrate how I would like to split 1 BabylonJS file into multiple JavaScript/HTML files.)

Note: Each [File] represents a separate file (ex: .js or .html file), each containing a separate piece of code for the project.

[File] Main HTML Code (including necessary CDNs)

[File] BabylonJS Scene code, including

—Processing Cannon.js physics engine

—Rendering Loop

—Asset Loader - Not yet written/I don’t yet know how it works. Possibly better to put this in a separate file.

[File] The Player's Character

—SpriteManager/sprites

—BABYLON.MeshBuilder.CreateBox component (Note, I am using a mix of 3d box and a sprite for this character.)

—various variables

[File] Keyboard Listener

[File] Create Camera Function

[File] World Code (General) (Where the player moves around and talks with NPCs, interacts with buildings etc.)

[File] World Code - Desert Specifics- Not yet written

[File] World Code - Forest Specifics - Not yet written

[File] World Code - Forest - House 1 - Not yet written

[File] World Code - Forest - House 2 - Not yet written

[File] Menu Code - Not yet written

[File] Held Item - Not yet written

[File] Enemy (General) - Not yet written

etc.

Note: This does not include importing models and environments/terrains from Blender, which I will eventually do/learn how to do.

 

What I Have Tried:

Mainly, my problem has came from with trying to write BabylonJS JavaScript files outside of

var createScene = function () { /*Where my code is now*/ }

When I try to write code outside of that function and call it from inside the function, that external function cannot access BABYLON. For example: new BABYLON.SpriteManager will not work since the external function does not recognize BABYLON (even though the function is called inside a function that does have access to BABYLON). This happens when I type the function in the same file outside the createScene function. It also happens with calling a function in a separate JavaScript file that is called using the <script src=“codeFiles/player.js”></script>

 

Internet Finds that Might be Helpful (that I Don't Understand):

Here are a few things on the Internet I found and didn’t really understand.

—SceneLoader and SceneLoader.append()      <- from the BabylonJS library

——I’m not sure if these apply to my certain situation. I don’t really know what these are for. I assume that they are for already-built terrains/environments/models (or groupings of already-built terrains/environments/models), all of which were created in Blender or somewhere else. (If I am mistaken, I would like to know. ). I have not yet learned how to use/import/create already-built terrains/environments/models. (It’s on my to-do list as I progress through building this game ) If they are for my situation, then I would love to learn how to use them.

——If these are appropriate, I have read that SceneLoader.append() is much better than SceneLoader.load(); Is that true?

—These 2 Links:

——deployed.js by DigiHz Data (http://www.html5gamedevs.com/topic/23372-loading-new-scnes-from-different-js-scripts/)

———I know this script includes using SceneLoader to load a scene from an AJAX command. It includes a fair amount of complicated code I don’t really understand.

——Stupax Platformer Game Code by mbarde (https://github.com/mbarde/stupax/blob/master/js/mainGame.js) (Fun game, by the way )

———Unlike this game, my game uses an external physics engine (Cannon.js), so the way mbarde splits things might not apply to my game.

 

I was wondering whether someone could help me and/or point me in the right direction. Thanks for the help!

[Guest]

Can you share your project on a live server? Seeing it in action will help us helping you

[PhantomWarrior562]

Hi Deltakosh,

Thanks for responding. Unfortunately, I don’t have a live server at this time. Right now, my game is pretty much using arrow keys and the space bar to move a cube in 5 directions (+/- x axis, +/- z axis, + y axis (and - y axis is taken care of by gravity.)).

Here is my attempt at clarifying what I am asking:

Let’s ignore, for now, my previous post and look at my following explanation/question with fresh eyes. I am trying to move parts of my code to a separate file.

What I Have Now:

1 HTML file, identical to BabylonJS Template code (https://doc.babylonjs.com/babylon101/first#html-template) except with my code inside the createScene function.

My Goal:

2 Separate Files:

MainFile.html

Note: The “…” means etc. The code would be almost the same as the HTML template I hyperlinked above.

…

<src script = “codeFiles/createPlayerScript.js”></script>

...

var createScene = function(){

     …

     var playerCube = createPlayer();

     …

}

...

 

createPlayerScript.js:

function createPlayer(){

     // Includes code like var playerCube = BABYLON.CreateMesh.CreateBox

     …

     return playerCube;

}

When I try to use a method like BABYLON.CreateMesh.CreateBox in that external file, an error is thrown because I did not define the function inside the createScene function. Because of this problem, I don’t know how to create external files like createPlayerScript.js and would appreciate learning how to do so.

[Guest]

This should work if you make sure to first reference Babylon.js before referencing your files

[PhantomWarrior562]

Hi Deltakosh,

I’ve been doing a lot of testing. My local server is slow, so it took me a while to realize the following: the issue actually is a JavaScript problem instead of specifically being a BabylonJS issue. I am unable to call an external JavaScript function from another file. If you or anyone here are willing to help with that, that’s great. If not, that’s fine. If you want, I could start a new thread for that. I have more details below:

 

I am calling <script src=“externalCode/createPlayerScript.js"></script> at the beginning of my HTML file. And I am doing it after calling the working CDNs for BabylonJS (https://preview.babylonjs.com/babylon.js) and Cannon.js (https://preview.babylonjs.com/cannon.js).
     
Below: My code for calling my external JavaScript function and BabylonJS and Cannon.js, in the order in which I call them in my HTML file.
     <script src="https://preview.babylonjs.com/cannon.js"></script>
      <script src="https://preview.babylonjs.com/babylon.js"></script>
      <!-- My own external player creation script below-->
      <script src="externalCode/createPlayerScript.js" charset="UTF-8"></script>

 

My createPlayerScript.js currently contains:

function testFunction(){

     console.log("testFunction() ran");

}

My main file calls this function like this: testFunction(); (inside the createScene part of the BabylonJS template.)

And my Code inspector on Chrome tells me “Uncaught Reference. TestFunction is not defined etc.”

My mainFile.html is in the same folder as the  externalCode folder. I am wondering what is going wrong.

Note: This happens when I run my code on my local server and when I run my code by manually opening the HTML file in Chrome.

I tried the following (the changes I tried are in bold), which also does not help:

     <script src=“externalCode/createPlayerScript.js" charset = “UTF-8”></script>

 

Another attempt: Adding the following lines even though the BabylonJS template already has a meta tag.

<meta charset="utf-8">

<meta name="description" content="">

<meta name="viewport" content="width=device-width">

This also did not help.

[Guest]

“Uncaught Reference. TestFunction is not defined"==> make sure your function is name TestFunction

[PhantomWarrior562]

Unfortunately, I mistyped. It's testFunction(); (using camelCase)

I also tried the following, which shouldn't make a difference, and it didn't work.

<script src=“externalCode/createPlayerScript.js" type ="text/javascript"></script>

As I showed above, I also tried adding more meta tags, which did not help.

Edited May 17, 2018 by PhantomWarrior562
Adding another attempt

[Guest]

Without a live version I can't help more 

What about creating a repo on GitHub and share it here? We could see the code at least then

[PhantomWarrior562]

Hi Deltakosh,

Thanks so much for helping me.

My code is on this repo: [Link Removed]

Thanks again.

[Guest]

I do not see the createPlayer.js file? (which should be referenced at the end before closing the body tag)

[PhantomWarrior562]

Thanks for pointing that out. I'll post it soon. I just found something I need to look into regarding this issue. I'll update once I learn more. Thanks, by the way.

[PhantomWarrior562]

Hi Deltakosh,

Thanks again for your help!

I figured out the problem. The JavaScript external file problem was actually caused by my accidentally leaving a "}" uncommented in the createPlayerScript.js.

And what I thought was a BabylonJS error was actually my trying to access a variable outside of scope (accessing a variable that was declared inside the createScene function from outside the function (in the external file)).

Thanks again for your help! Hope you have a great weekend!

[Guest]

All good then!

[JCPalmer]

1 hour ago, PhantomWarrior562 said:

Hi Deltakosh,

Thanks again for your help!

I figured out the problem. The JavaScript external file problem was actually caused by my accidentally leaving a "}" uncommented in the createPlayerScript.js.

And what I thought was a BabylonJS error was actually my trying to access a variable outside of scope (accessing a variable that was declared inside the createScene function from outside the function (in the external file)).

Thanks again for your help! Hope you have a great weekend!

The perfect case for using Typescript.  There is overhead, but minor syntax problem become simple, and keep the number of wild chases down to something you can live with.

[PhantomWarrior562]

Hi JCPalmer,

Thanks for the suggestion! Haven’t checked out Typescript in depth just yet but leafed through the basics. Looks like it would be very useful for structure, which is exactly what I want. Thanks!