Jump to content
  • Advertisement
  • entries
  • comments
  • views

BabylonJS. Usage TS in Browser



If you what to use a few TypeScript files the Browser you need to bundle them in on file. What is simple and cheap way to make it? Use Browserify + UglifyJS tools.

BabylonJS is a game engine for creating 3D browser games. BJS was written in TypeScript. I this instruction I will show you how to create an example with a few TypeScript files. I do not like use: Webpack, Gulp, Grunt and so on at the beginning for simple examples. Because they require a lot of disk space on my laptop for my little examples. I create a lot of examples when I study something. For example, Gulp requires 80 MB. If I have 100 examples in TS then I will lost 800 MB. I use Browserify for creating a bundle that I can use in the browser. And I use UglifyJS to minify this bundle. You can install them only once using this commands:

npm install browserify -g
npm install uglify-js -g

Generate the “package.json” file using this command:

npm init -y

For example, you have two files with names “Program.ts” and “Game.ts” in the "src" folder. Open the “package.json” file and add these lines in the “scripts” section:

"scripts": {
    "browserify": "browserify dist/Program.js -o dist/bundle.js",
    "uglifyjs": "uglifyjs dist/bundle.js -o dist/bundle.min.js",
    "build": "tsc && npm run browserify && npm run uglifyjs"

You can generate the “bundle.min.js” in the "dist" folder later using this command:

npm run build

You can read here in the documentation: https://doc.babylonjs.com/ this information:



The example project below uses the most recent release of BabylonJS via the BabylonJS CDN, so you don’t need to download BabylonJS locally in order to use it.

However, you will need to download the BabylonJS TypeScript definition file from https://preview.babylonjs.com/babylon.d.ts in order to compile your project. Save this babylon.d.ts file into your project folder and create an empty index.html like so:


I want to keep all “.d.ts” files in the separate folder with the name “typings”. Create a "tsconfig.json" file in your root folder and add this line of code to the “tsconfig.json” folder:

"types": [

You need to add two “script” tags to the “index.html”:

<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="dist/bundle.min.js"></script>

I will show the “Program.ts” file. Another part of the example you will find here: https://doc.babylonjs.com/ Scroll down and click on the "TypeScript" button.

Source code: official-example-bjs-ts.zip


import { Game } from "./Game";

class Program
    public static Main()
        // Create the game using the 'renderCanvas'.
        let game = new Game('renderCanvas');

        // Create the scene.

        // Start render loop.

window.onload = () =>



Recommended Comments

There are no comments to display.

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Advertisement
  • Advertisement
  • Blog Entries

  • Similar Content

    • By Lookandfeel Games
      After more than 10 years as a Game Designer in very successful companies (Senior Game Designer at Matific, Lead Game Designer at TabTale, Owner at Lookandfeel Games), I had — and still have — the privilege and the opportunity to utilize data from hundreds of millions of users around the world. Now’s my time to share my knowledge with the world.
      For a long time, game designers utilized data through playtesting, usability sessions, data, and reports in order to ensure the best experience for their players — and their products. The great thing about working in big game companies is to have a dedicated data-analysis team to analyze the games’ data and tell me their pros and cons, including interesting insights and trends.
      Sorry to disappoint — your idea didn’t work.
      To disappoint? Hell no! Thanks for the opportunity to tell me I should rethink my design so I won’t continue to think that I nailed it, while in reality I didn’t. How can I improve otherwise? How can I gain mastery otherwise? Based on data-driven insights, good ideas are being duplicated and leveraged in my next projects, and the ‘trial balloons’ are being adjusted or dropped accordingly. Here’s my best practices bible with lessons learned from +250 games — proven by data to improve your monetization, retention, user experience & engagement.
      Speaking on mobile games, considering that most players are right-handed, the devices have comfort-to-reach area and hard-to-reach area depends on their orientation:
      Now take a look at the below examples from various mobile games:
      As you can see, in the most comfort-to-reach area,
      the best practice is to place interactive elements which can lead to monetization:
        Store button
        More apps
      Users are likely to interact with these elements — unfortunately even by mistake. Those mistakes are what we call a dark-UX, but it’s proven to maximize revenues. Note that for bottom ads, you must include at least 10 pixels margin from the ad to the interactive content in order to follow ad-serving guidelines in most of the platforms.
      Because the screen’s real-estate is limited, and the content in games is just getting bigger, sliders become a very handy component to expose many options to the users regarding extra content, without the need to navigate away from the main scene.
      Here are five examples of different slider designs which offer horizontal or vertical sliding, used in world-selection, shop, landscape categories\items selection, portrait categories\items selection, and avatar customization:
      Because the slider’s content expands outside the screen, we need to help the users understand there’s more content inside. Here are the best practices for sliders:
       Partly visible items: Make sure that content which expands outside the screen’s border will still be partially visible on screen, so users will understand there’s more of it.
       Animate from end to start upon launch: When introducing the slider to the users, either by automatic event or by a user-initiated event, make sure to launch it on its end-of-content, and scroll-reverse automatically to the beginning of its content. If your slider contains lots of content (i.e. 10 steps to scroll from beginning to end), you can just start from “step three” of the slider and then animate scrolling to “step 1”. This will show the users that there’s more content on the other side.
      Pop-ups are a good game component for delivering abstract and informational messages to users. Here are some useful best-practices:
       Associate visible UI with hidden UI via animations: When pop-ups are opened due to user-initiated action on an interactive item\button, animate their launch from the triggering button (i.e. scale up a store-pop-up from the store-button, and scale down the store-pop-up back to the store button upon closing). This way users will associate the pop-ups with their initiators better.
       Have a semi-transparent dim background behind popups: Because they often require a user-action, and might be big in size on screen, we should help the users understand that their session is paused, but still reachable. Pop-ups should be seen over a dim background that will allow the users to see a bit of their session behind (the dim background should animate quick fade-in parallel to the pop-up open animation, and fade-out parallel to its closing animation).
       Avoid the X: Many pop-ups contain a default design choice of an “X” button to close them. Most users recognize this “X” button as a pattern of an ‘annoying’ content and closing the pop-up instantly. If your pop-up contains valuable content to the users, and you’d like to increase the probability that they’ll read this content, make sure that the “Close” button will be designed as one of the user’s choices and not as an “X” button. Note: Don’t have duplicate options with the same meaning (i.e. both “X” and “Close” in the same pop-up; users will just tap the “X”).
        Pro tip #1: Tapping the dim background should close the popup as if tapping “cancel”, unless it’s a store popup — then only closing via “X” will close the store.
        Pro tip #2: Popups with rich text (such as intro story popups) should show their “X” or “Continue” button only after 2 seconds delay. This way users will be more likely to read the important content of the pop-up rather then instantly close it.
      As I mentioned above, lots of pop-ups require user-action as they are offering the users to take a decision. Here are several examples of pop-ups which asks the users how to proceed — do you see a pattern?
      As you may see, the rule of thumb here is as follow:
       User decisions which are good for your game are placed on the right side of the popup — As a game designer you want your players to confirm a purchase, you want your players to share the game, you want your players to spend in-game currency… etc. :
       User decisions which are bad for your game are placed on the left side of the popup —As a game designer, you won’t want your players to quit the game, disconnect, reset progress… etc. :
      Although you might think that this is considered as a dark UX, it can actually help the users a lot — you don’t want your users to accidentally reset their progress, do you? Anyhow, the key here is to lead the users to take a decision you want, which is good for your game’s KPIs (IAP, retention, engagement, viral exposure, sharing and so on).
        Tip: Associate a button color with its function (negative is red, positive is green, neutral can be blue).
      Rewarded-video ads become an industry standard in the past years, as part of a freemium model in mobile-games, which boost revenue and considered as a “win-win” situation (the users who cooperated with the offering to watch an ad, will receive an actual in-app reward in return).
      The best icon to represent rewarded video ads should look like a film clapper board with a play icon on it (we’ve tested lots of different icons and this one worked best).
      Here are several examples of rewarded video offering in different mobile games:
      As a game designer, you should think carefully what the prize is going to be, how to reward it and for ‘how long’. The main scenarios are:
        Permanent — Once the ad is watched, the users receive the prize for an unlimited time (i.e. get an item which is added to their inventory and stays there for good).
       Per Session — Once the ad is watched, the users receive the prize and it’s available to be used anytime during their current session. Once quitting the game and getting back on a later time — the prize is not there anymore. This can be helpful in order to increase session time.
        Per Scene — Once the ad is watched, the users receive the prize and it’s available to be used only at the current level (i.e. getting a booster, or ‘another try’).
      The rewarded video prizes should be significant and not ‘little things’ — otherwise, users won’t want to waste their time on the ad. As a game designer, you should think about what your users will want from your game.
        Pro tip: Don’t tell users what reward they’re getting, to make the reward more exciting (motivate their curiosity and surprise — and increase the probability that they will watch the ad).
      An intuitive game mechanic on mobile is ‘dragging an item’,
      though many times it can harm the game experience if not done right. When exporting game assets such as PNGs, the design can be very creative, while ‘behind the scenes’ of the device they are all rectangles with some transparent area.
      The default anchor points for rectangles are either the top left corner or the exact center. As a game designer, try to demonstrate how the object should be dragged as if dragging it in the real world — where the actual holding point of the item should be positioned for the user:
      Default anchors are often outside of the dragged object (top left corner). Even when centered, the dragging won’t make sense to the user most of the time.
      Here are important best practices for draggable objects:
       Set a custom anchor-point offset on draggable objects so the user’s finger will not hide them: Most of the times the default anchor points will have to be adjusted and get a custom offset so the draggable item will be visible despite the user’s finger on the screen.
       The grab area of small draggable items should be larger than their actual canvas size.
       The dragged item should be in front of other items when dragged (Z-index wise). In special cases (i.e. inserting an object inside another object) this should be customized.
       Use glow or dashed-outline for drop-zone areas. Don’t expect the user to understand immediately where the dragged item should go to. The best case is when having an intuitive ‘drop-zone’ (i.e. dragging a food item to a mouth) — in this case, no need to highlight the mouth, but just animate it ‘open wide’ when the food item is dragged. Users will know what to do.
        Pro tip: In general, pulling is easier than pushing (i.e., for right-handed users, dragging from left to right is easier than dragging from right to left ). If your game is designed for kids, try to have pulling over pushing by design.
      Lots of game designers are using the ‘rate us’ dialog too soon — calling the users to rate their experience before they actually formed an opinion about your game. When done right, using the ‘rate us’ dialog helps to achieve better ratings on the stores and helps organic promotion. So how to do it? The ‘rate us’ dialog should meet the user on the following scenarios:
       After a big achievement or big satisfaction point (i.e. defeating a boss, completing a world, winning a major challenge, etc.).
       After accumulating small satisfaction points (i.e. win 10 badges).
      To maximize the probability that users will rate your game, the ‘rate us’ dialog should be designed as follow:
       Have a relevant presenter, looking at the user.
       ”Rate button” should be with positive color (i.e. green) and more noticeable than the ‘later’ button. Also, if you followed the best practices mentioned in the ‘user decisions’ section above, you should know by now that its position should be on the right side.
        Tip: Never use “5 stars” reference — it’s against Apple’s guidelines.
      The design of your store dialog is critical to your selling. Many times the store dialog will offer some ‘full version’ deal along with some other in-app purchase options. Here are a few examples:
      To maximize the purchases of the full version, you can follow these guidelines:
       Make sure that the ‘full version’ button includes a presenter from the game, with noticeable eyes (preferably looking at the user).
       The ‘full version’ button should be stronger in color, larger and more attractive rather than the other in-app offerings.
       Add a ‘breathe’ animation to the full-version button(scaling up to 104%, then back to 100% two times, then stop for another 6 seconds before repeating the animation).
       The title of the full-version button should be bigger than its inline content.
       Have a clear “Discount” or “Best Deal” ribbon on the full-version button.
        Pro tip: If you are selling content such as extra levels, worlds, etc.., allow the users to enter the locked content screen and only then open the store dialog with a dim background behind it (rather than opening the store dialog ‘outside’ when clicking the locked content on the level-selection screen).
      I’m glad to take the opportunity to share my knowledge with this community and I hope that this info will provide value to lots of game designers, game developers, and product owners. This best practices bible for game design UX is formed from big data (and I mean — BIG — TabTale alone has more than 2 billion downloads and ranked among the top 10 publishers in the world several years in a row), but I also watched it executed for real with more than 500 users (at Matific I have the privilege to watch more than 500 users play my games in large scale events by the Israeli Ministry of Education where kids from all around the country are competing in a yearly Math-Olympics session). One thing I’d like you to remember along the way is that these are not ‘rules’, these are best practices. I recommend you to adopt them in order to get a better starting point, but don’t expect them to magically turn your game into the next hit. Now you are ready!
      If you liked what you read please help me spread the word — it means a lot  
      Amir Dori https://www.linkedin.com/in/amirdori
      Senior Game Designer at Matific (2016 to date)
      Lead Game Designer at TabTale (2013–2016)
      Owner at Lookandfeel Games (est. 2009)
      Lecturer at Mentor College (Metagame & Game Design course).
    • By Ben Cloward
      Several years ago I made a series of training videos to teach artists how to write real-time shaders in HLSL.  The series starts out with very simple concepts so that someone with no programming experience at all can start right from the beginning and learn to write shaders.  Further into the series, I cover more advanced topics such as parallax mapping, global illumination, reflection and refraction, and vertex animation. Everything is explained step by step so it's easy to follow.
      Originally, the videos shipped on 3 DVDs that sold for $60 each.  Sales were pretty successful, but the company that sold them went out of business just a short time after the 3rd DVD was released.  So I've decided to upload them to YouTube so that everyone can watch them for free!  My hope is that they'll help aspiring artists and programmers learn the art of shader creation.  Although some of the material is out of date, almost all of the principles taught are still valuable to learn and understand as a foundation to learning to write shaders.
      Here's my channel:  https://www.youtube.com/user/bcloward
      The series consists of 40 videos.  I'll be releasing a new video each weekday starting this week - so if you're interested, be sure to subscribe to the channel and check back often.  If I get enough interest, my plan is to start creating new videos that demonstrate more recent shader techniques.
      Let me know what you think.  I'd love to hear your feedback!
    • By Onny98
      Hello, im trying to learn new techniques to implement in my Unity3D projects and i have been looking for a particular answer about the way Hollow Knight's creators made to give background sprites that feeling of depth. I was thinking about just blurring them out in ps but someone suggested me increasing saturation, white degrading and changing opacity. Im unsure what is exactly the way to recreate this and i would like to know aswell if there is a tool in Unity3D that can make this automatically. Thank you so much I will leave a image showing what i mean exactly.

    • By JohnElliott
      Greetings all.
      I'm a researcher from Portugal, with the multimedia department of CIEBA, and I'm currently writing my PhD thesis on videogame composers' expansion of knowledge into areas of sound design, implementation, programming, and soft skills.
      I come to ask for bibliography, books and articles, on the process of creating videogames, particularly about differences between indie and AAA production (I am focusing on indie).
      So far I've used O'Donnell's "Developer's Dilemma", a great read I suggest to all, as well as my own experiences, but I am in need of more sources.
      Thanks in advance!
    • By leePerak
      Hi guys,
       Check this new free Android game I just released today in Play Store - Grazomvity.  Specially designed to be played one handed while standing in train, bus etc.   
       There are no make-believed, over-hyped, fabricated comments and ratings from friends or family. YOU be the FIRST to rate and comment.
       As a bonus, the winner gets free temporary upgrade and eventually can see the entire game source code.
      Your feedback is much appreciated.
      Thanks guys,

  • Advertisement

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

GameDev.net is your game development community. Create an account for your GameDev Portfolio and participate in the largest developer community in the games industry.

Sign me up!