Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
9. November 2016

BabylonBannerSplattered_thumb[3]

Welcome to the GameFromScratch.com tutorial series covering the BabylonJS HTML5 game engine.  The home page of the series is available here.  For each tutorial in the series there is both a text and video version available.  In this post we are simply going to introduce the BabylonJS engine, the scope of this tutorial series and discuss why you might want to use the Babylon engine and also some of the alternatives available should you decide not to.  If you’ve already decided on using the BabylonJS game engine, jump forward to the next tutorial.

 

BabylonJS Overview

I’m not going to go into a great deal of detail on the functionality included in BabylonJS as I have already featured this game engine in the Closer Look game engine series.  Instead we are going to take a quick top level look at the engine features.

 

Why Choose BabylonJS

So, why is the BabylonJS game engine a good choice for you?

  • Open source (Apache 2 license) and free to use
  • Full featured 3D game library (scene graph, physics, particles, models, sprites, etc)
  • Compatible with most modern WebGL browsers
  • Excellent tooling, including level editor, Unity exporter, model converters
  • Good documentation, samples and other learning materials

You can read the full feature set here.

 

Why Not Choose BabylonJS?

So we mentioned a number of Babylon’s strengths, but why would you *not* choose to use BabylonJS?  Well, beyond the fact you may not like how they implement things the biggest reason all comes down to your priorities.  WebGL performance isn’t on par with desktop OpenGL or even OpenGL ES, so there is a bit of a performance penalty at work here.  While HTML5 applications can be wrapped to run as applications on various mobile devices, again there is a price to be paid, in both performance and labor.

At the end of the day, personally, I think a lot of it comes down to your primary target.  If you are creating a browser game first and foremost, I recommend working in a browser native library such as BabylonJS.  This has the most direct workflow, is easiest to debug, etc.  If on the other hand the browser is just another target for you you are probably better off working in a game engine that also targets HTML5, such as Unreal or Unity.

 

Alternatives to BabylonJS

Shockingly there aren’t actually a ton of HTML5 3D game engines or frameworks like BabylonJS.  The most direct alternatives are:

 

By no means is that an exclusive list, but it does represent some of the most common 3D engines with WebGL as their primary target.

In addition to these engines several 3D engines offer HTML5 as a target including Unreal, Unity, Godot and many more.  The primary challenge with these options is the generated code is often illegible, acting almost identically to a compiled binary.  So if things don’t work right you are dependent on the engine developer to fix things.  Or if you wish to use a native browser feature, you are again dependent on the engine developers to support it in some form.

 

Enough overview, lets jump into the technical details.  I am aiming to keep each tutorial somewhat short and concise, both text and video versions.  Stay tuned for the first tutorial covering getting BabylonJS up and running.

 

The Video

Programming


6. June 2016

 

V8 is a popular embeddable JavaScript engine, perhaps most famously used to power the popular Node development framework or as the JavaScript engine used by Chrome.  They just announced the release of version 5.2.  From the release notes V8 gained the following features:

ES6 & ES7 support

V8 5.2 contains support for ECMAScript 6 (aka ES2015) and ECMAScript 7 (aka ES2016).
Exponentiation operator
This release contains support for the ES7 exponentiation operator, an infix notation to replace Math.pow.
let n = 3**3; // n == 27
n **= 2; // n == 729
Evolving spec
For more information on the complexities behind support for evolving specifications and continued standards discussion around web compatibility bugs and tail calls, see the V8 blog post ES6, ES7, and beyond.

Performance

V8 5.2 contains further optimizations to improve the performance of JavaScript built-ins, including improvements for Array operations like the isArray method, the in operator, andFunction.prototype.bind. This is part of ongoing work to speed up built-ins based on new analysis of runtime call statistics on popular web pages. For more information, see the V8 Google I/O 2016 talk and look for an upcoming blog post on performance optimizations gleaned from real-world websites.

V8 API

Please check out our summary of API changes. This document gets regularly updated a few weeks after each major release.

GameDev News


27. May 2016

 

RPGMaker, the seminal, um... RPG (role playing game) maker, is currently available for free on Steam over the weekend and available for a sale price of 50% off.  image

 

RPGMaker is a complete game engine and toolset geared towards making JRPG style games.  First released in 1992, RPGMaker has been used to make several commercial games such as To The Moon and the Aveyond series.  Up until recently scripting was done using the Ruby language.  However with the move to MV, the language was changed to JavaScript.  Another major feature of the MV release is the ability to target both iOS and Android.  One nice thing about RPGMaker is it ships with a ton of game assets that should ease the getting started process.

 

To go along with the free weekend sale, the RPGMaker folks have put together an introduction:

So you’ve downloaded the program, opened it up, and are seeing the Engine for the first time. RPG Maker is not hard to use, but at first glance, there is so much to do that it can be a bit overwhelming. That is why we’ve prepared this quickstart guide, to get you on your way to making your game, your way.

What makes RPG Maker special, and what drew me to RPG Maker to begin with is that it allows anyone to make a game. You don’t have to know how to code, you don’t have to know how to make art, you don’t have to know how to make music. I don’t know how to do any of those things. But I can make a game, and you can too. All it takes is getting to know the three main parts of the RPG Maker engine. This won’t be a tutorial. It won’t explain how to do everything, but it will give you the basics of where to get started and how things work together.

 

Click here to read the full post.

GameDev News


3. May 2016

 

Cocos Creator is a new game editor built over top of the Cocos2d-x JavaScript port.  I did a hands on video with an earlier version of Cocos Creator if you are interested in learning more.

 

This release brings a number of new changes and features, including:

  1. [Animation] Allow position.x and position.y properties can be added separately in an animation
  2. Windows] Use new installer framework based on Squirrel.Windows. New version of Cocos Creator will be installed to %User/AppData/Local/CocosCreator, different version will be stored in sub folder named as app-x.x.x.
  3. Dashboard] Dashboard stays in memory now. When open a project the Dashboard window will hide, and show up again when the project is closed. Added Systray icon for dashboard. You can open multiple project from Dashboard now.
  4. JSB] Fixed newly created cc.SpriteFrame via url cannot be displayed when assigned to sprite issue.
  5. Engine] We include cocos2d-x prebuilt library in installation so no more manually building for that.
  6. Render] Add SpriteDistortion component for simulating a 3D ball rolling effect
  7. Render] Add Circle mode for Mask component
  8. Render] Fixed rotating a node with Mask will not display correctly issue.
  9. Console] Optimized duplicated message into collapsed messages.
  10. Animation] Fixed switching among multiple animation clip may cause timeline to lock up issue.
  11. Animation] Fixed play animation direction error when wrapMode is set to Reverse
  12. Animation] Fixed root node may jump to other position when updated sample issue.
  13. Component] Fixed help button link on builtin components
  14. Component] Add tooltip for Layout and EditBox components
  15. Prefab] Fixed when reference a node from scene on a component attached to Prefab may cause duplicated node instantiated together with prefab issue.
  16. Tiledmap] Fixed rotated tile in a tax file will not display correctly issue.
  17. Build] emit a editor:build-finished message after a successful build process. So plugins can catch that and do modifications to the built project.
  18. Build] Fixed iOS project templates may cause rejection when submitting to iTunes connect issue.
  19. Editor] Make error message when requiring third party javascript library more clear.
  20. Auto Update] Fixed when text is large in change log, the window will not display all content issue.

The full release announcement and download information is available here.

GameDev News


23. April 2016

 

Version 5.1 of the popular V8 JavaScript runtime was just released.  V8 started life as a high performance JavaScript runtime intended to power the Chromium (Google Chrome) web browser.  As it is one of those silent behind the scenes technologies we just take for granted, it’s perhaps useful to start with a description of V8 itself before continuing.  Here is Google’s own description of the V8 project:

V8 implements ECMAScript as specified in ECMA-262, 5th edition, and runs on Windows (XP or newer), Mac OS X (10.5 or newer), and Linux systems that use IA-32, x64, or ARM processors.

V8 compiles and executes JavaScript source code, handles memory allocation for objects, and garbage collects objects it no longer needs. V8's stop-the-world, generational, accurate garbage collector is one of the keys to V8's performance. You can learn about this and other performance aspects in V8 Design Elements.

JavaScript is most commonly used for client-side scripting in a browser, being used to manipulate Document Object Model (DOM) objects for example. The DOM is not, however, typically provided by the JavaScript engine but instead by a browser. The same is true of V8—Google Chrome provides the DOM. V8 does however provide all the data types, operators, objects and functions specified in the ECMA standard.

While providing a fast JavaScript runtime for a browser is important, it’s V8’s embeddability that has perhaps been it’s most important contribution.  Notice how JavaScript outside the browser has been more and more popular of late?  Most of this can be attributed to NodeJS.  Well Node itself is built on top of the V8 runtime.  Almost every single HTML5 based tool or engine I’ve discussed recently such as Cocos Creator, Superpowers or QICI Engine are in turn powered by Node.  Many modern tools are also built on top of Node as well including Visual Studio Code, Atom and MongoDB.  Sufficed to say V8 is increasingly important to game developers, and all developers in general.

 

So that’s a brief overview of V8 and hopefully explains why it might be of some importance to you, even if you don’t develop directly in JavaScript.  Now let’s get back to the details of the release.  So what does 5.1 bring?

Improved ECMAScript support

V8 5.1 contains a number of changes towards compliance with the ES2017 draft spec.
Symbol.species
Symbol.species allows you to override which constructor is used to construct objects when calling methods on a subclass of Array, RegExp, and other built-in classes.
instanceof customization
Constructors can implement their own Symbol.hasInstance method, which overrides the default behavior.
Iterator closing
Iterators created as part of a for-of loop (or other built-in iteration, such as the spread operator) are now checked for a close method which is called if the loop terminates early. This can be used for clean-up duty after the iteration has finished.
RegExp subclassing exec method
RegExp subclasses can overwrite the exec method to change just the core matching algorithm, with the guarantee that this is called by higher level functions like String.prototype.replace.
Function name inference
Function names inferred for function expressions are now typically made available in the name property of functions, following the ES2015 formalization of these rules. This may change existing stack traces and provide different names from previous V8 versions. It also gives useful names to properties and methods with computed property names:
class Container {
   ...
   [Symbol.iterator]() { ... }
   ...
}
let c = new Container;
// Logs "[Symbol.iterator]".
console.log(c[Symbol.iterator].name);
Array.prototype.values
Analogous to other collection types, the values method on Array returns an iterator over the contents of the Array.

Performance improvements

Release 5.1 also brings a few notable performance improvements to the following JavaScript features:
  • Executing loops like for-in
  • Object.assign
  • Promise and RegExp instantiation
  • Calling Object.prototype.hasOwnProperty
  • Math.floor, Math.round and Math.ceil
  • Array.prototype.push
  • Object.keys
  • Array.prototype.join & Array.prototype.toString
  • Flattening repeat strings e.g. '.'.repeat(1000)

WASM

5.1 has a preliminary support for WASM. You can enable it via the flag --expose_wasm in d8. Alternatively you can try out the WASM demos with Chrome 51 (Beta Channel).

Memory

V8 implemented more slices of Orinoco:
  • Parallel young generation evacuation 
  • Scalable remembered sets 
  • Black allocation

The impact is reduced jank and memory consumption in times of need.

 

You can read the full release notes here.The WASM announcement is perhaps the most interesting and confusing part of the release, so we will go into a bit of detail now.  So what exactly is Web Assembly?  Well:

WebAssembly is a low-level, portable bytecode that is designed to be encoded in a compact binary format and executed at near-native speed in a memory-safe sandbox. As an evolution of existing technologies, WebAssembly is tightly integrated with the web platform, as well as faster to download over the network and faster to instantiate than asm.js, a low-level subset of JavaScript.

So, essentially it’s a byte code for the web.  You can read more about the topic here if you are interested.

GameDev News


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List