excaliburjs · kamranayub · May 23, 2020 · Mar 30, 2019 · May 4, 2020 · May 9, 2020
diff --git a/.gitignore b/.gitignore
@@ -6,10 +6,11 @@ npm-debug.log
 TODO.md
 
 # Always-ignore folders
+_current
 _ghpages
 node_modules
 .grunt
-pages/api/edge
+static/docs/api/edge
 ex/
 .cache/
 public/
diff --git a/.travis.yml b/.travis.yml
@@ -16,9 +16,6 @@ env:
 before_install:
 - gem install sass -v 3.4.24
 script:
-# Remove @types packages that
-# conflict with Typedoc builds for Excalibur
-- rm -rf ./node_modules/@types/
 - npm run docs
 - npm run build
 after_success:

diff --git a/Gemfile b/Gemfile
@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+source "https://rubygems.org"
+
+gem "sass", "3.4.24"
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -0,0 +1,13 @@
+GEM
+  remote: https://rubygems.org/
+  specs:
+    sass (3.4.24)
+
+PLATFORMS
+  x64-mingw32
+
+DEPENDENCIES
+  sass (= 3.4.24)
+
+BUNDLED WITH
+   2.1.4
diff --git a/__mocks__/file-mock.js b/__mocks__/file-mock.js
@@ -0,0 +1 @@
+module.exports = 'test-file-stub'
diff --git a/docs.js b/docs.js
@@ -26,6 +26,7 @@ function build(version, title) {
       stdio: [0, 1, 2],
     })
   } else {
+    child_process.execSync('git restore .', { cwd: exPath, stdio: [0, 1, 2] })
     child_process.execSync('git pull', { cwd: exPath, stdio: [0, 1, 2] })
   }
   child_process.execSync('git rev-parse HEAD', {
@@ -66,7 +67,10 @@ if (process.argv.length === 3) {
   build('edge', 'Edge')
 }
 
-if (process.env.TRAVIS_CI && !process.env.GH_TOKEN) {
+if (
+  process.env.SKIP_DOCS_RELEASES ||
+  (process.env.TRAVIS_CI && !process.env.GH_TOKEN)
+) {
   console.info(
     'Missing GH_TOKEN environment variable, skipping building release tags'
   )

diff --git a/docs/00-welcome.md b/docs/00-welcome.md
@@ -6,3 +6,5 @@ path: /docs
 Excalibur is a simple, free game engine written in TypeScript for making 2D games in HTML5 canvas. Our goal with Excalibur is to make it _incredibly simple_ to create and write 2D HTML/JS games aimed at folks new to game development all the way up to more experienced game developers. We take care of all the boilerplate engine code, cross-platform targeting, and more so you don’t have to. Use as much or as little as you need!
 
 Excalibur is an open source project licensed under the 2-clause BSD license (this means you can use it in commercial projects!). It’s free and always will be. We welcome any feedback or contributions! If you make something with Excalibur, please [let us know](https://groups.google.com/forum/#!forum/excaliburjs) so we can feature you in our online gallery.
+
+Get started by [installing Excalibur](/docs/installation) in your project and [building your first game](/docs/getting-started), then dive in and learn [how to use Excalibur](/docs/intro). You can also check out the [examples](/examples) collection to see the engine in action with code samples!
diff --git a/docs/01-installation.md b/docs/01-installation.md
@@ -116,11 +116,10 @@ Just include the `excalibur.min.js` file on your page and you’ll be set.
 ```html
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-    </head>
-    <body>
-        <script src="excalibur.min.js"></script>
-    </body>
+  <head> </head>
+  <body>
+    <script src="excalibur.min.js"></script>
+  </body>
 </html>
 ```
 
@@ -135,7 +134,7 @@ For a simple TypeScript-based game, using triple-slash references works great. I
 ```js
 /// <reference path="node_modules/excalibur/dist/excalibur.d.ts" />
 
-var game = new ex.Engine({ ... });
+const game = new ex.Engine({ ... });
 ```
 
 Make sure the path is relative to the current TS file. You only need to include the reference on your “entrypoint” file. Then simply include `excalibur.min.js` as mentioned above in your HTML page.
@@ -169,7 +168,7 @@ import * as ex from 'excalibur'
 
 In a module loader system, such as Webpack, it will automatically bundle Excalibur. See the [webpack example repo][example-webpack]
 
-To support tree-shaking, you should use *named imports*:
+To support tree-shaking, you should use _named imports_:
 
 ```js
 import { Actor } from 'excalibur'
@@ -179,4 +178,4 @@ import { Actor } from 'excalibur'
 Excalibur doesn't do the best optimization to support tree-shaking--likely you'll end up importing everything.
 </docs-note>
 
-[example-webpack]: https://github.com/excaliburjs/example-ts-webpack
+[example-webpack]: https://github.com/excaliburjs/example-ts-webpack
diff --git a/docs/02-getting-started.md b/docs/02-getting-started.md
@@ -7,9 +7,19 @@ path: /docs/getting-started
 
 Review the [Installing Excalibur.js][docs-install] for instructions.
 
+## Global Namespace vs. Imports
+
+In this tutorial, we are using the global `ex.` namespace, which works within a browser environment. If you are using ES2015 modules, you would replace `ex.` with an import statement at the top of the file:
+
+```ts
+import * as ex from 'excalibur'
+```
+
+<docs-note>See [notes about ES2015 imports](/docs/installation#module-loaders-and-bundlers) with module loaders and bundlers.</docs-note>
+
 ## Build Your Game Script
 
-Create a script in your project, here I’ve named it `game.js`. Excalibur games are built off of the `ex.Engine` container. It is important to start the engine once you are done building your game.
+Create a script in your project, here I’ve named it `game.js`. Excalibur games are built off of the [ex.Engine](/docs/intro) container. It is important to start the engine once you are done building your game.
 
 <docs-note>Call `game.start()` right away so you don’t forget</docs-note>
 
@@ -19,7 +29,7 @@ Create a script in your project, here I’ve named it `game.js`. Excalibur games
 // Create an instance of the engine.
 // I'm specifying that the game be 800 pixels wide by 600 pixels tall.
 // If no dimensions are specified the game will be fullscreen.
-var game = new ex.Engine({
+const game = new ex.Engine({
   width: 800,
   height: 600,
 })
@@ -33,13 +43,12 @@ Include your game script after the excalibur script.
 
 ```html
 <html>
-<head>
-</head>
-<body>
+  <head> </head>
+  <body>
     <!-- Include your script at the end of the body tag -->
     <script src="excalibur-version.js"></script>
     <script src="game.js"></script>
-</body>
+  </body>
 </html>
 ...
 ```
@@ -60,15 +69,15 @@ To do this Excalibur uses a primitive called an [Actor][docs-actor], and places
 // game.js
 
 // Create an instance of the engine.
-var game = new ex.Engine({
+const game = new ex.Engine({
   width: 800,
   height: 600,
 })
 
 // Create an actor with x position of 150px,
 // y position of 40px from the bottom of the screen,
 // width of 200px, height and a height of 20px
-var paddle = new ex.Actor(150, game.drawHeight - 40, 200, 20)
+const paddle = new ex.Actor(150, game.drawHeight - 40, 200, 20)
 
 // Let's give it some color with one of the predefined
 // color constants
@@ -93,7 +102,7 @@ That’s neat, but this game is way more fun if things move around. Let’s make
 
 ```js
 // Add a mouse move listener
-game.input.pointers.primary.on('move', function(evt) {
+game.input.pointers.primary.on('move', function (evt) {
   paddle.pos.x = evt.target.lastWorldPos.x
 })
 ```
@@ -102,7 +111,7 @@ What’s breakout without the ball? To make the ball bounce, Excalibur comes pre
 
 ```js
 // Create a ball
-var ball = new ex.Actor(100, 300, 20, 20)
+const ball = new ex.Actor(100, 300, 20, 20)
 
 // Set the color
 ball.color = ex.Color.Red
@@ -119,12 +128,12 @@ ball.collisionType = ex.CollisionType.Passive
 // "ex.CollisionType.Fixed - this means participate, but this object is unmovable"
 
 // On collision bounce the ball
-ball.on('precollision', function(ev) {
+ball.on('precollision', function (ev) {
   // reverse course after any collision
   // intersections are the direction body A has to move to not be clipping body B
   // `ev.intersection` is a vector `normalize()` will make the length of it 1
   // `negate()` flips the direction of the vector
-  var intersection = ev.intersection.normalize()
+  const intersection = ev.intersection.normalize()
 
   // The largest component of intersection is our axis to flip
   if (Math.abs(intersection.x) > Math.abs(intersection.y)) {
@@ -142,7 +151,7 @@ The ball will now bounce off of the paddle, but does not bounce with the side of
 
 ```js
 // Wire up to the postupdate event
-ball.on('postupdate', function() {
+ball.on('postupdate', function () {
   // If the ball collides with the left side
   // of the screen reverse the x velocity
   if (this.pos.x < this.width / 2) {
@@ -167,7 +176,7 @@ Don’t like square balls? Neither do we. You can create your own custom drawing
 
 ```js
 // Draw is passed a rendering context and a delta in milliseconds since the last frame
-ball.draw = function(ctx, delta) {
+ball.draw = function (ctx, delta) {
   // Optionally call original 'base' method
   // ex.Actor.prototype.draw.call(this, ctx, delta)
 
@@ -188,20 +197,20 @@ Breakout needs some bricks to break. To do this we calculate our brick layout an
 // Build Bricks
 
 // Padding between bricks
-var padding = 20 // px
-var xoffset = 65 // x-offset
-var yoffset = 20 // y-offset
-var columns = 5
-var rows = 3
+const padding = 20 // px
+const xoffset = 65 // x-offset
+const yoffset = 20 // y-offset
+const columns = 5
+const rows = 3
 
-var brickColor = [ex.Color.Violet, ex.Color.Orange, ex.Color.Yellow]
+const brickColor = [ex.Color.Violet, ex.Color.Orange, ex.Color.Yellow]
 
 // Individual brick width with padding factored in
-var brickWidth = game.drawWidth / columns - padding - padding / columns // px
-var brickHeight = 30 // px
-var bricks = []
-for (var j = 0; j < rows; j++) {
-  for (var i = 0; i < columns; i++) {
+const brickWidth = game.drawWidth / columns - padding - padding / columns // px
+const brickHeight = 30 // px
+const bricks = []
+for (let j = 0; j < rows; j++) {
+  for (let i = 0; i < columns; i++) {
     bricks.push(
       new ex.Actor(
         xoffset + i * (brickWidth + padding) + padding,
@@ -214,7 +223,7 @@ for (var j = 0; j < rows; j++) {
   }
 }
 
-bricks.forEach(function(brick) {
+bricks.forEach(function (brick) {
   // Make sure that bricks can participate in collisions
   brick.collisionType = ex.CollisionType.Active
 
@@ -227,7 +236,7 @@ When the ball collides with bricks, we want to remove them from the scene. Updat
 
 ```js
 // On collision remove the brick, bounce the ball
-ball.on('precollision', function(ev) {
+ball.on('precollision', function (ev) {
   if (bricks.indexOf(ev.other) > -1) {
     // kill removes an actor from the current scene
     // therefore it will no longer be drawn or updated
@@ -238,7 +247,7 @@ ball.on('precollision', function(ev) {
   // intersections are the direction body A has to move to not be clipping body B
   // `ev.intersection` is a vector `normalize()` will make the length of it 1
   // `negate()` flips the direction of the vector
-  var intersection = ev.intersection.normalize()
+  const intersection = ev.intersection.normalize()
 
   // The largest component of intersection is our axis to flip
   if (Math.abs(intersection.x) > Math.abs(intersection.y)) {
@@ -252,18 +261,21 @@ ball.on('precollision', function(ev) {
 Finally, if the ball leaves the screen, the player loses!
 
 ```js
-ball.on('exitviewport', function() {
+ball.on('exitviewport', function () {
   alert('You lose!')
 })
 ```
 
 ![Final Breakout screenshot](02-getting-started/breakout-final.png)
 
-Congratulations! You have just created your first game in Excalibur! Please review the documentation for more examples and an [API Reference][docs-api].
+Congratulations! You have just created your first game in Excalibur!
+
+It's time to [get introduced][docs-intro] to the engine for more examples or advanced users can browse the [API Reference][docs-api].
 
-<script async src="//jsfiddle.net/excaliburjs/s33mLjn3/embed/js,result/"></script>
+<iframe width="100%" height="700" src="//jsfiddle.net/excaliburjs/s33mLjn3/embedded/js,result/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>
 
 [docs-install]: /docs/installation
-[docs-actor]: /docs/api/edge/classes/_actor_.actor.html
-[docs-scene]: /docs/api/edge/classes/_scene_.scene.html
+[docs-intro]: /docs/intro
+[docs-actor]: /docs/actors
+[docs-scene]: /docs/scenes
 [docs-api]: /docs/api/edge
diff --git a/docs/03-features.md b/docs/03-features.md
@@ -3,26 +3,22 @@ title: Features
 path: /docs/features
 ---
 
-We are still pre-1.0 but Excalibur has many powerful features built-in already that make it simple
-to build and design your games:
+We are still pre-1.0 but Excalibur has many powerful features built-in already that let you focus on building and designing your games:
 
 - Built with [TypeScript](https://www.typescriptlang.org) first
 - [Fully-documented API](https://excaliburjs.com/docs/api/edge)
-- Works in all major browsers (Chrome, Firefox, IE11) and most mobile browsers (Android Chrome, Apple Safari). We strive to support the last two major versions.
-- HTML Canvas-based rendering engine
-- Full Web Audio support and fallback HTML5 audio support
-- Full HTML5 Gamepad API support
-- Full keyboard, mouse, and touch support using a unified Pointers API
-- Support for basic collisions
-- Support for [rigid body physics system](https://excaliburjs.com/docs/api/edge/classes/_physics_.physics.html)
-- Cross-platform support using [Electron](http://electron.atom.io/) or [Apache Cordova](https://cordova.apache.org/)
-- Simple `update`/`draw` pattern to keep logic and drawing separated
-- Simple `Actor` model with `Scenes`, Actions API, cameras, and more
-- Preloader API supporting resources like images, sounds, video, and generic resources
-- Basic primitives like sprites, spritesheets, animations, and textures
-- Sprite effects, particle emitters and post processor support
+- Works in all major browsers (Chrome, Firefox, Edge) and most mobile browsers (Android Chrome, Apple Safari). We strive to support the last two major versions.
+- HTML Canvas-based rendering engine (WebGL is coming in 1.0!)
+- [Actor model](/docs/actors) with [Scenes](/docs/scenes), cameras, and more
+- Designed to keep [logic and drawing separated](/docs/intro)
+- Asset loading for [images, sounds, video, and generic resources](/docs/assets)
+- Basic [drawing primitives](/docs/drawings) like sprites, spritesheets, animations, and textures
+- Support for [rigid body physics](/docs/physics)
+- Game input with [keyboard, mouse, and gamepads support](/docs/input)
 - Support for tile-based maps (with [Tiled support](https://github.com/excaliburjs/excalibur-tiled))
-- Logging API for debugging
-- Promises-based async API
-- Math API with `Vectors`, `Rays`, `Lines`, `Projections`, and more
+- [Sprite effects, particle emitters and post processor support](/docs/fx)
+- [Math API](/docs/math) with `Vectors`, `Rays`, `Lines`, `Projections`, and more
+- Publish games using [Electron](http://electron.atom.io/), [Apache Cordova](https://cordova.apache.org/), Ionic or anything else that supports a `WebView`
+- [Utilities](/docs/utilities) such as logging API for debugging
+- Promise-based async API
 - and much more!
Original file line number	Diff line number	Diff line change
Expand Up		@@ -6,3 +6,5 @@ path: /docs
		Excalibur is a simple, free game engine written in TypeScript for making 2D games in HTML5 canvas. Our goal with Excalibur is to make it _incredibly simple_ to create and write 2D HTML/JS games aimed at folks new to game development all the way up to more experienced game developers. We take care of all the boilerplate engine code, cross-platform targeting, and more so you don’t have to. Use as much or as little as you need!

		Excalibur is an open source project licensed under the 2-clause BSD license (this means you can use it in commercial projects!). It’s free and always will be. We welcome any feedback or contributions! If you make something with Excalibur, please [let us know](https://groups.google.com/forum/#!forum/excaliburjs) so we can feature you in our online gallery.

		Get started by [installing Excalibur](/docs/installation) in your project and [building your first game](/docs/getting-started), then dive in and learn [how to use Excalibur](/docs/intro). You can also check out the [examples](/examples) collection to see the engine in action with code samples!