# An Incredibly Easy-to-Learn Game Engine

<br>**Baby** is ridiculously easy to learn.  And incredibly powerful. 

<br><b>Baby</b> provides the easy-to-use animation model of <a href="http://alice.org">Alice3</a>, built on the powerful foundation of <a href="http://babylonjs.com">BabylonJS</a>. It is ideal for junior programmers writing simple 2D and 3d games, animations, and stories.  

Web-based, effortlessly multi-player, integrated physics engine, javascript/typescript, 3D, and much more.

Here's your first working program:

```javascript

let app = new Baby()

// create two cubes, change their colors, and move them in
// opposite directions (by default, actions take 1 second each)
app.floor(20,20,5) // 20x20 grid, highlight every 5 
let cube1 = app.cube().color('yellow').move('left',5)  
let cube2 = app.cube().color('blue').move('right',5)  

```

<video controls width="600">
    <source src="https://communityreading.org/babydocs/assets/4-line.webm"
            type="video/webm">
    Sorry, your browser doesn't support embedded videos.
</video>

<h2><i>Check out Tutorials and Docs</i></h2>

Find them <a href="https://communityreading.org/babydocs/index.html">here</a>


<h2><i>Built on BabylonJS</i></h2>

<img src="https://communityreading.org/babydocs/assets/babylon-logo.png" style="float:right;width:250px;" />

BabylonJS is awesome.  Best-in-class graphics, performance, and tools.  Supports
the latest WebGL, WebGPU, WebXR, WebAudio, etc.  
Check it out:  https://www.babylonjs.com/

Babylon is a sprawling empire, but it takes a long time to learn, even for experts with the math skills of Star Fleet Navigators.
You quickly get lost in the complexity and layers of possibilities, and
sometimes never actually write a game. <br><br><br>



<img src="https://communityreading.org/babydocs/assets/alice-logo.png" style="float:right;width:200px;" />

<h2><i>Animation Concepts from Alice</i></h2>

Alice is simple, intuitive, powerful, and fun. A beginner can write complex animations with breath-taking graphics in a few hours.
Check it out: https://www.alice.org/. Or even better, take the free
<a href="https://www.coursera.org/learn/introtoalice">Coursera Intro to Alice</a>
course from Duke University.

But Alice's Scratch-like building-blocks make
programmers pull their hair.  And there are severe limits to Alice
programs.  Alice will teach you programming and animation, but you likely won't write any games beyond the homework exercises.
<br><br>



<!--
<h2><i>What Does Baby Look Like?</i></h2>

Baby uses a simple 'functional' paradigm.  Create an Shape (Baby's name for
anything from simple geometric shape like 'cube', 'sphere', 'plane', to a fully rigged biped robot).  Then decorate it with functions until it is and does what you want.

    let myBox = new Shape('cube').size([1, 10, 1]).color('midnightblue')

Each Shape has its own orientation, with its own
sense of forward and backward, left and right, up and down.
Movements are relative to the Shape's orientation.

    myBox.move('Forward',10, 1)  // move forward 10 units in 1 second

There is a rich family of movements and turns:

myBox.moveToward(otherBox,10)
myBox.moveAwayFrom(otherBox,10)
myBox.moveToward(otherBox)
myBox.moveToPlace('leftOf',otherBox,10)


A turn amount is a fraction of all-the-way-around, so a quarter turn to the left
would be:

myBox.turn('left', .25)
myBox.orbit(otherBox,'Left',.25)

There are other moves that are frequently useful.

myBox.turnToFace(otherBox)
myBox.orientTo(otherBox)   // takes the other Box's orientation without moving
myBox.pointAt(otherBox)

Of course you can specify the duration and movement shape for all moves and turns.  And
for all resizing, coloring, and say/think commands too.

myBox.size(2)  // sets the size to twice the initial value

myBox.say(message)
myBox.think(message)

myBox.setPaint()
myBox.setOpacity()


/////////// what to do with ????  /////////
myBox.attachTo(otherBox)  // set vehicle to...   unset by empty param?

myBox.playAudio()
myBox.delay()
myBox.straightenOutJoints()

We use strings as parameters because Typescript's tooling support them nicely.




### Get started

I'm assuming you know how to use simple terminal commands and install software.

1. Install GIT on your machine from [here.](https://git-scm.com/)

2. Install NODE and NPM on your machine from [here.](https://nodejs.org/en/)

3. Install VSCODE on your machine from [here.](https://code.visualstudio.com/)


Probably worth while rebooting at this point.

Open VSCODE.  Press F1 and start typing "git clone ", press enter when it is your only choice.  Paste in the following "https://github.com/tom-berend/Baby.git".  Create a directory on your machine for this when asked.

Still in VSCODE, open a terminal.  CTRL+SHIFT+M to open a console panel in VSCODE, and click on 'terminal' from the choices at the top of that panel.

Either way, type **npm install** to import the tools and libraries that this package recommends for you.  Each package can pull in its own sub-list of packages and libraries quickly get out of date.  If **this** repository has been updated in the last few months then you can probably ignore warnings about deprecated packages from other repositories.

Still in the terminal panel, type **npm run dev**. and you should soon see a browser open with something game-like.  If it doesn't, open a browser and look at "localhost:8080"

### Running, testing, and packaging your code

For now, your code must be in the "index.ts" file in the "src" directory.  Soon there will be tools that let you program anywhere on your machine.



### Extensions for VSCODE

These are three extensions you absolutely must install into VSCODE for TypeScript.  For each one, copy the link, press CTRL+P and paste it in.

1.  tslint for linting: &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ext install ms-vscode.vscode-typescript-tslint-plugin
2.  tsfmt for formatting:  &nbsp;&nbsp;&nbsp;ext install eternalphane.tsfmt-vscode
3.  typescript importer:  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;ext install pmneo.tsimporter

When editing, you can interactively 'lint' your code by pressing F8, and reformat the file you are working in with CTRL+SHIFT+I. The importer works behind the scenes.

-->

