Search the Community

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!

Hi guys! So this is probably an easy question to answer, but everything I tried so far broke my code. So I am using states MMM.MainGame = function(game){ } MMM.MainGame.prototype = { create: function() { .... }; The issue that I am having is that I will not have that many states, besides booting, preloading, and the actual game, so my main game file is already getting pretty big with 100 lines alone for zooming in and out. Is there a way to export these functions somehow to external js files and put them together in the MainGame.prototype? Something like extends? I need some good practice advice here, because my main file will otherwise easily become thousands of lines and just one messy hell.

Hello there dear people of this awesome forum! I am hoping you can help me with a problem I have: Let's say my game has these files: main.jsplayer.jshud.jsIf hud.js is missing the game won't start. I need a way, so that this would only not show the hud but still execute the rest of the game. Any tips are appreciated, thanks in advance!