Beginner's guide about the Dream-Engine

Do you wish to try the Dream-Engine ? If yes, you've come to the right place !
With this short guide, you will be able to do things like "this" with no efforts.
We are going to use GameObjects (with inheritance), SpriteRenderer, TextRenderer, Keyboard and Mouse Inputs, Gamepad API, Audio, and after all this, compile it all using Grunt.
By the end of this tutorial, you should be able to make your own complete game !
Let's get started then ?

Before coding, managing folders and files

Copy all the sample "kill-bubble" in a new folder (being the least filled folder that we have at our disposal). This is my personal way of doing it : "(grunt file, _dev folder, release folder)"
You can of course do as you please, but keep in mind that I will be using this template for the rest of the tutorial.
We are only going to work on the "_dev" so if you see something such as "Go in the 'js' folder", it will actually be "_dev/js".
Rename the balls.html if you want to as well as the title or other meta. You don't have to rename css/js files.

• The "custom" folder : I put everything that does not come from the engine.
• The "datas" folder : This is where you'll find all the default data files used by the engine, each of them is used to declare what you are going to use (images, audios, inputs, localisation etc...)
• The "ext_libs" folder : Contains only the required libraries but you can add new external libraries here if you need any.
• The "platforms" folder : Contains the files needed to compile on specific platforms (currently only w8).
• The "DreamEngine-min-require.js" is the compiled version of the engine.
• The "files.js" is the required config (that's where you have to write your custom files)
• The "main.js" will start the engine (and launch the game using it). You can set some parameters here but usually you can just everything as it is (simply give the init and start functions, custom gameLoop and the data files, you can change it if you want but it's not necessary).

Just open js/custom/Game.js to remove the current game. Remove from line 17 to 144 and add this :

Game.init = function() { console.log( "engine inited, init the game" ); } Game.start = function() { console.log( "engine start") // set the loading down allow to create all what you need before really start it (better feeling) setTimeout( function(){ DE.States.down( "isLoading" ); }, 200 ); }

If you encounter any difficulties or need additional help, you can check out the full sample source code available in your "samples" directory (little-shmup).

Customize the engine for your own game

First thing you need to do is have your Inputs, Images and Audios that you're going to need in your game.
Copy the folders "audio" and "img" from "sample/little-shmup/_dev" in your "_dev" folder.
Then go into your "js/datas" folder and open "audiosList.js", in the audioList's array, you have to put all the musics and FXs that you wish to use :

// args are: [ "name the engine use", "path to", [ audio formats in an array ], { an optional params object }, is eloquent I think I don't have to explain, if it's an FX set isMusic to false (otherwhise it'll go in musics library) // MUSICS [ "music", "audio/awake10_megaWall", [ 'ogg', 'mp3' ], { "preload": true, "loop": true, "isMusic": true } ] // FX ,[ "piew", "audio/piew", [ 'ogg', 'mp3' ], { "preload": true, "loop": false, "isMusic": false } ]

This is quite simple so I won't be spending any more time on it. Now proceed to open dictionary.js, if you want to use more languages, you can do so, but I personnaly made it for English and French so far.

var dictionary = { "en": { "loose" : "You are dead" ,"replay" : "Replay ?" ,"play" : "Play" ,"benchmark" : "Run benchmark" } , "fr" : { "loose" : "Vous êtes mort" ,"replay" : "Rejouer ?" ,"play" : "Jouer" ,"benchmark" : "Lancer le test" } };

Now set "imagesDatas.js", it's a little bit more complicated because there are a lot of options, and that's also where we'll be setting up the Quality Settings.

var datas = { // avalaible images sizes (engine will load optimisest images depends on user resolution) screenSizes: [ { "w": 1000, "h": 1080, "path": "" } ,{ "w": 666, "h": 720, "path": "", "notRatio": true } ,{ "w": 333, "h": 360, "path": "", "notRatio": true } ] // index of the used screen size during game conception , conceptionSizeIndex: 0 // images folder name , folderName: "img" // usage name, real name (can contain subpath), extension, parameters , imagesList: [ [ "ship", "ship", "png", { "load": true, "totalFrame": 10, "eachAnim": 40 , "isAnimated": false, "isLoop": false } ] ,[ "p-fire", "p-fire", "png", { "load": true, "totalFrame": 10, "eachAnim": 40 , "isAnimated": true, "isLoop": false } ] ,[ "enemies", "enemies", "png", { "load": true, "totalFrame": 4, "isAnimated": false, "isLoop": false } ] ,[ "reactor", "reactor", "png", { "load": true, "totalFrame": 4, "eachAnim": 40 , "isAnimated": true, "isLoop": true } ] ,[ "e-fire", "e-fire", "png", { "load": true, "totalFrame": 4, "eachAnim": 80 , "isAnimated": true, "isLoop": true } ] ,[ "heart", "heart", "png", { "load": true, "totalFrame": 1, "isAnimated": false } ] ,[ "btn", "btn", "png", { "load": true, "totalFrame": 3, "isAnimated": false } ] ] };

Now, let's take a look at some details.
First of all, screenSizes are the different available qualities for your game, you can have just one set up, but if you want to see your game running well on mobiles, and have a great quality on a desktop computer, you should use this file to make more than one.
You provide a width (w) and a height (h) and you can set a specific path for the quality. This path will be a suffix to the folderName.
There is also another way to have a good customization without having to resize all of your images and creating new folders. You can simply set the "notRatio" to true, and this will make it so that the given sizes aren't the native sizes for your images (this feature is currently work in progress).

You shoudln't set a path that's different from the original quality AND notRatio to true at the same time, because when you set notRatio, the Engine resizes images with the ratio from the original size and replace it with the current one.

conceptionSizeIndex is the index in the screenSizes array which you build the game in (in this case, we'll make the game based on 1000*1080, so it's 0, but I could put 1 if I were to make the game based on 666*720. You can of course set this as your default size, BUT you cannot set notRatio on the conceptionSizeIndex size attribute if you want to modify the conceptionSize. You have to manually resize all of your images for the given ratio.

folderName is the path to images

Now, to load your images, you have to use an array with the following parameters:

• The name you want to use in the code (current: ship)
• The Image name being the same one as the one in your folder (current: ship, but you should use my-super_awes0me.ship, you know you should)
• The Image's format
• Object parameters with the following options (keep in mind that all the options here are meant to save you some time when you create a SpriteRenderer, so use them wisely and you'll see a good use for them later on) :
  • {Boolean=true} load -> Used to load the image on the loading screen
  • {Int=1} totalFrame -> The total amount of frames in your image (only if it's a Spriteset). If you set this as 0 or 1, the engine will automatically set "isAnimated" to false, saving some calculating time
  • {Int=1} totalLine -> The total amount of lines in your image (only if it's a Spriteset)
  • {Int=0} eachAnim -> The delay between each frame (in milliseconds)
  • {Boolean=false} isReversed -> Used to have a reversed animation on the Sprite by default
  • {Boolean=false} isAnimated -> Used to automatically animate the Sprite by default
  • {Boolean=false} isPaused -> Used to pause the image by default when you use Sprites (and if you set isAnimated: true)
  • {Boolean=true} isLoop -> Used to loop animations by default if you use Sprites

Now, open inputsDatas.js, and you can see that this is another file that has many options. Try to do this as best as you can, trust me, it will save you a lot of trouble later on :)

var inputsList = { "left":{"keycodes":[ "K.left" , 'K.a', 'K.q' ] } ,"right":{"keycodes":[ "K.right" , 'K.d' ] } ,"up":{"keycodes":[ "K.up" , 'K.z', 'K.w' ] } ,"down":{"keycodes":[ "K.down" , 'K.s' ] } ,"haxe":{"keycodes":[ "G0.A.LHorizontal" ] } ,"vaxe":{"keycodes":[ "G0.A.LVertical" ] } ,"fire":{"keycodes":[ "K.space" , 'G0.B.A' ], "interval": 100 } ,"confirm":{"keycodes":[ 'K.enter', 'G0.B.A' ], "interval": 500 } ,"back":{"keycodes":[ 'K.escape', 'G0.B.B' ], "interval": 500 } };

Some details, here it's not an array because we want a name on our inputs.
I explain with the "fire" input.

• "fire" is the input name
• "keycodes" is an array with all inputs (keyboard or gamepad) that trigger this input.
  If you want use gamepad axes I suggest you to do it in an other input, then catch this events in an other handler because an axe value goes from -1 to 1 and a button is 0 to 1 (I did it here for left/right - up/down and haxe/vaxe, you'll see in the code)
  To see all inputs available open Inputs class starting at line 34
• then you can set "interval", the input will trigger each interval (milliseconds)
• isLongPress@Bool is a special parameters, if you set it to true, the input will trigger only after the given delay (when you call Inputs.key)
• stayOn@Bool make special effect to, if you set it to true, the input will trigger until you release the button (when you call Inputs.key)

Wooo, that's all for customizing the engine. As I said it's a little bit complicated, and sometimes it boring, but honestly this will save you to much time later

Custom files

We are making a shmup game, so we need a Player class, Enemy, and Bullet.
The Dreamengine is made to think inherits and architecture, I'm going to show you how to do this and make something maintainable.
So create in the js/custom folder the files Player.js Enemy.js Bullet.js and datas.js (to save all the custom datas of the game).
Add these files in js/files.js like this (there is already Game and customLoop):

,'Player' : 'custom/Player' ,'Enemy' : 'custom/Enemy' ,'Bullet' : 'custom/Bullet' ,'datas' : 'custom/datas'

Now we write the basic needs for RequireJS. In each custom files created write this

define( [ 'datas', 'DREAM_ENGINE' ] , function( datas, DE ) { var myFunction = function() { } return myFunction; } );

In js/custom/datas.js remove 'datas', 'DREAM_ENGINE' (and the same args in the function), datas don't need anybody, it's just json datas, and replace myFunction by datas = {} (it's not a function!)
In Player.js and Enemy.js add 'Bullet' in the define array and Bullet in function's arguments
The Game.js will create the player, the Enemies and he need the datas to know what to do. So add these files in the Game.js define (as we do it before) you should have this at the beginning of your Game.js

define( [ 'DREAM_ENGINE', 'Player', 'Enemy', 'datas' ], function( DE, Player, Enemy, datas )

Ok we are ready start

The basics, Scene, Render, GameObject

Before write Player or Enemy, we have to write the basics to see the engine running without problems (if you forget images, or do a mistake it'll not load).
We already wrote an empty Game.init and Game.start function. If you look in main.js you can see that we give at the engine theses functions.
In fact when the engine is ready it initialize dictionary, Inputs, ImageManager, SystemDetection (by default it's web only, we'll see this later), and load the loader (you need a loader.png in the base path you given) and when this loader is loaded, the engine call your init function than you gift before.
At this moment the engine start load custom Images and you should see the Dreamirl's loader.
When the engine finished to load it call your start function.

So in the init function, you can set some parameters (like debug), create Scenes or Renders but you can't make GameObjects using images here, you have to do this in the start function
The init is short:

Game.init = function() { DE.CONFIG.DEBUG_LEVEL = 1; // debug // create render "render" is the element id, fullScreen is the method you want to, if you don't want stretched, set a width and a height Game.render = new DE.Render( "render", { fullScreen: "ratioStretch" } ); Game.render.init(); // create scene - name it only Game.scene = new DE.Scene( "Test" ); // create your camera, cam size, and cam position in the Render, then options Game.camera = new DE.Camera( Game.screen.w, Game.screen.h, 0, 0, { 'name': "Test zoom 100%", 'backgroundColor': "rgb(50,50,200)" } ); // give a scene at the camera Game.camera.scene = Game.scene; // bind it on the render Game.render.add( Game.camera ); // launch the engine (it's not done by the engine because maybe you want launch it later) DE.start(); }

Add on the top the used sizes, we will need it to place the player, enemies, and if we change it it's only here. The size is the conceptionSizeIndex in the imagesDatas.

Game.screen = { "w": 1000, "h": 1080 };

With this you have the Render, the Scene and the Camera.
If you did well, you should get a blue screen after the loading by launching the html in your browser.

Before starting custom classes, we can already write a part of the start function by making the menu (very simple menu), in the Game.start (before the setTimeout, always before) add:

/** Game Button **/ var gameBtn = new DE.GameObject( { "x": Game.screen.w / 2, "y": Game.screen.h / 2 , "renderers": [ // to make a "good button" I recommend you to use a SpriteSet with 3 frame // and changing the currentFrame when trigger GameObject's mouse events // you can make a "Button GameObject class" of course (I have to re-write all Gui) new DE.SpriteRenderer( { "spriteName": "btn" } ) // an other way to do it without Sprite /*new DE.BoxRenderer( { "fillColor": "rgb(200,100,100)", "strokeColor": "white", "method": "fillAndStroke" }, 300, 100 )*/ , new DE.TextRenderer( { "fontSize": 32, "font": "Arial Black" // not a nice font but just to show you how to :) }, 500, 60, DE.LangSystem.get( "play" ) ) ] , "collider": new DE.FixedBoxCollider( 550, 70 ) } ); gameBtn.onMouseEnter = function( /*mouse*/ ){ this.renderers[ 0 ].setFrame( 1 ); } gameBtn.onMouseLeave = function(){ this.renderers[ 0 ].setFrame( 0 ); } gameBtn.onMouseUp = function() { this.renderers[ 0 ].setFrame( 0 ); Game.startGame(); } Game.gameBtn = gameBtn; Game.scene.add( Game.gameBtn ); // important, add the object otherwise you'll not see it /****/

I commented the code but, as resume:

• Make a GameObject with an optional params object
• Create a SpriteRenderer by giving at least the spriteName (here you can change parameters we have set in the imagesDatas, but we did well so nothing to change)
• Create a TextRenderer by providing a param object (can be empty), text, and buffer's sizes
• Make a FixedBoxCollider with height and width
• The pointers events are simple, "onMouse" + eventName and write a function. You can bind with a on() but it's slower, and don't provide the "this" in the right context (because it's again more slower).
  It's an architecture question only. If it's the object's event handler, you should use an intern method. If it's an extern listener, use on().
  Mouse events give a mouse attributes (not got here), you can stop the current event by returning true, and stop the propagation by using mouse.stopPropagation = true;

At this point you could see than we can already make a simple button plugin's with GameObjects, I'll do it when the Gui will be ready.
You can think "why we don't used the GUI", and the reason is simple. I'm refactoring this part of the engine.
But we will be able to use the GameObjects or DOM, so if you like this method (or to append GUI on a GameObject directly) this will work.
Okay if you launch the html file you should have a button "Play" in the middle of the screen (if you click you'll get an error obviously we didn't created the startGame function)

The Player

Important first step with the engine. Classe's inheritance.
I didn't make a "extend" method, I don't like that, you provide an object as constructor, you use "this" inside methods but not inside the constructor, and btw you can't make private methods because you are inside a json object.
Go in Player.js and replace the content by this, we can directly set custom attributes

// args are written with a _ because they become private (we use args later in methods) function Player( _screenSizes ) { DE.GameObject.call( this, { "x": _screenSizes.w / 2, "y": _screenSizes.h - 280, "zindex": 5, "tag": "player" ,"renderer": new DE.SpriteRenderer( { "spriteName": "ship", "scale": 0.7 } ) ,"collider": new DE.CircleCollider( 20 ) } ); var _self = this; // create the reactor as child directly this.add( new DE.GameObject( { "x": 0, "y": 120, "renderer": new DE.SpriteRenderer( { "spriteName": "reactor", "scale": 0.7 } ) } ) ); this.childrens[ 0 ].position.setRotation( Math.PI ); this.speed = 10; this.axes = { x: 0, y: 0 }; // useful for gamepad to do like this this.life = 3; } // inherits from GameObject, and get the supr Player.prototype = new DE.GameObject(); Player.prototype.constructor = Player; Player.prototype.supr = DE.GameObject.prototype; return Player;

We created a customized GameObject, first we call the GameObject, then you can write your attributes and methods inside the function or add them later in the prototype.
At the end, we make the rest of inheritance by setting the prototype, redirecting to the good constructor, and the super (to GameObject).
After this you can set prototyped method.

Create the Player and add it to the scene in Game.start before setTimeout (I won't say it next time :p)

Game.player = new Player( Game.screen ); Game.scene.add( Game.player );

Wooow, but that's not exciting yet.
Go back to Player.js, we are going to make it moving and firing!
Add inside the main Player scope (because we use private attributes) the following methods.

this.init = function() { this.life = 3; this.position.setPosition( _screenSizes.w / 2, _screenSizes.h - 280 ); for ( var i = 0; i < this.hearts.length; ++i ) this.hearts[ i ].enable = true; this.enable = true; } this.checkPos = function() { // I should make a middleware for this case maybe if ( this.position.x < this.collider.radius ) this.position.x = this.collider.radius; else if ( this.position.x > _screenSizes.w - this.collider.radius ) this.position.x = _screenSizes.w - this.collider.radius; if ( this.position.y < this.collider.radius ) this.position.y = this.collider.radius; else if ( this.position.y > _screenSizes.h - this.collider.radius ) this.position.y = _screenSizes.h - this.collider.radius; } this.checkInputs = function() { this.checkPos(); if ( this.flipping ) { this.translateX( this.speed * _lastDir ); return; } // translate along axes var axeH = this.axes.x; var axeV = this.axes.y; if ( DE.Inputs.key( "up" ) ) axeV = -1; else if ( DE.Inputs.key( "down" ) ) axeV = 1; if ( DE.Inputs.key( "left" ) ) axeH = -1; else if ( DE.Inputs.key( "right" ) ) axeH = 1; // keyboard can axe to 1-1 cut it to 1/2-1/2 like gamepad axe if ( Math.abs( axeV ) == 1 && Math.abs( axeH ) == 1 ) { axeV = axeV * 0.5; axeH = axeH * 0.5; } // little animation if ( axeH > 0 ) this.renderers[ 0 ].setFrame( 1 ); else if ( axeH < 0 ) this.renderers[ 0 ].setFrame( 9 ); else this.renderers[ 0 ].setFrame( 0 ); this.translate( { x: axeH * this.speed, y: axeV * this.speed } ); // here chek the fire button input (gamepad and keyboard) if ( DE.Inputs.key( "fire" ) ) this.fire(); } // make bullet this.fire = function( mouse, target ) { DE.AudioManager.fx.play( "piew" ); this.scene.add( new Bullet( _screenSizes, this ) ); } var _lastDir = 0, _lastFlip = Date.now(), _flipInterval = 600 , _flipDelay = 500, _lastCheck = Date.now(); this.flip = function( dir ) { if ( this.flipping ) return; dir = dir > 0 ? 1 : -1; var checkDir = _lastDir , checkTime = _lastCheck; _lastDir = dir; _lastCheck = Date.now(); if ( dir != checkDir || Date.now() - _lastFlip < _flipInterval || Date.now() - checkTime > _flipDelay ) return; _lastFlip = Date.now(); // do the flip var rd = this.renderers[ 0 ]; rd.isAnimated = true; rd.isReversed = dir < 0 ? true : false; rd.restartAnim(); this.flipping = true; } // on anim end kill the flip this.renderers[ 0 ].onAnimEnd = function() { _self.flipping = false; this.setFrame( 0 ); } this.lastDamage = Date.now(); this.damageInterval = 1000; this.hearts = []; this.createGui = function() { for ( var i = 0; i < this.life; ++i ) { var heart = new DE.GameObject( { "x": i * 65 + 40, "y": _screenSizes.h - 60, "zindex": 20 , "renderer": new DE.SpriteRenderer( { "spriteName": "heart", "scale": 0.6 } ) } ); this.hearts.push( heart ); this.scene.add( heart ); } // of for this part I don't recommend you to do like this if it's not the GameObject's Gui // so for menus I recommend you to make a independent singleton this.gui = new DE.GameObject( { "x": _screenSizes.w / 2, "y": _screenSizes.h / 2, "zindex": 25 } ); var loose = new DE.GameObject( { "renderer": new DE.TextRenderer( { "fontSize": 64, "font": "Arial Black" // not a nice font but just to show you how to :) }, 700, 100, DE.LangSystem.get( "loose" ) ) } ); this.gui.restartBtn = new DE.GameObject( { "y": 150 , "renderers": [ new DE.SpriteRenderer( { "spriteName": "btn" } ) , new DE.TextRenderer( { "fontSize": 32, "font": "Arial Black" }, 300, 60, DE.LangSystem.get( "replay" ) ) ] , "collider": new DE.FixedBoxCollider( 550, 70 ) } ); this.gui.restartBtn.onMouseEnter = function() { this.renderers[ 0 ].setFrame( 1 ); } this.gui.restartBtn.onMouseLeave = function() { this.renderers[ 0 ].setFrame( 0 ); } this.gui.restartBtn.onMouseUp = function() { this.parent.enable = false; this.renderers[ 0 ].setFrame( 0 ); _self.trigger( "restart" ); // use trigger method - Game will catch it } this.gui.add( loose ); this.gui.add( this.gui.restartBtn ); this.scene.add( this.gui ); this.gui.enable = false; } // register down keys to detect a flip intention DE.Inputs.on( "keyDown", "left", function(){ _self.flip( -1 ) } ); DE.Inputs.on( "keyDown", "right", function(){ _self.flip( 1 ) } ); // when menu is up, check gamePad keys DE.Inputs.on( "keyDown", "confirm", function(){ if ( _self.gui.enable ) _self.gui.restartBtn.onMouseUp(); } ); // register axes listeners - we use different than keyboard because keyboard is "left" "right" // with gamepad it's just h-axe or v-axe and get the force value DE.Inputs.on( "axeMoved", "haxe", function(val){ _self.updateAxes( val, undefined ); } ); DE.Inputs.on( "axeMoved", "vaxe", function(val){ _self.updateAxes( undefined, val ); } ); DE.Inputs.on( "axeStop", "haxe", function(){ _self.updateAxes( 0, undefined ); } ); DE.Inputs.on( "axeStop", "vaxe", function(){ _self.updateAxes( undefined, 0 ); } ); this.addAutomatism( "checkInputs", "checkInputs" );

And in the prototype

Player.prototype.getDamage = function() { if ( Date.now() - this.lastDamage < this.damageInterval ) return; this.lastDamage = Date.now(); this.life--; if ( this.life < 0 ) { // active loose gui this.gui.enable = true; // DE.AudioManager.fx.play( "kaboom" ); this.enable = false; return; } this.hearts[ this.life ].enable = false; } // here update axes, and flip intention Player.prototype.updateAxes = function( x, y ) { if ( x != 0 && Math.abs( this.axes.x ) < 0.7 && this.axes.y < 0.5 && Math.abs( x ) > 0.8 ) this.flip( x ); this.axes = { 'x': x !== undefined ? x : this.axes.x ,'y': y !== undefined ? y : this.axes.y }; }

Ok, it's time to explain.
We added the method init (when restart game), checkPos (provide area limits), checkInputs (to control the ship), fire, flip (little feature to dodge by flipping on the sides), createGui (create heart and restart button), getDamage in the prototype and updateAxes in the prototype.
Each function seems to me eloquent so I don't explain each of them (you knows JavaScript) but I explain the engine features.
Look at the last lines in the main scope:

• We registered events directly on Inputs. For gamepad's axes it's an other handler to catch forces and detect the flip depending on the value of this force (double tap to produce a flip)
• We registered an automatism, it's something that the GameObject will call each frame but you can precise an interval (the first argument is the name for the automatism, the type is the called method)

In the createGui method we created a button "restartBtn" that trigger a restart event on mouseUp.
Bind this in Game.js (after player creation) and disable the player to don't see it in the menu:

/* added previously Game.player = new Player( Game.screen ); Game.scene.add( Game.player );*/ Game.player.createGui(); Game.player.on( "restart", function(){ Game.startGame(); } ); Game.player.enable = false;

Set the fxs volume lower

DE.AudioManager.fx.setVolume( 10 );

At this point you can't see your "Player" because we didn't create the "StartGame "function, add after the start function.

Game.startGame = function() { Game.run = true; Game.gameBtn.enable = false; // clean the scene for ( var n = 0; n < Game.scene.gameObjects.length; ++n ) { if ( Game.scene.gameObjects[ n ].tag.match( "enemy|bullet" ) ) Game.scene.gameObjects[ n ].askToKill(); } // init player Game.player.init(); for ( var i in datas.waves ) datas.waves[ i ].readed = false; _firstCheck = false; // start the music DE.AudioManager.music.stopAllAndPlay( "music" ); }

Nothing exceptional here, we just used the music manager, and cleaned the scene by parsing all gameObjects by checking the tag (we have to create Bullet and Enemy still )

Now if you refresh and click "Play" you can control your ship with keyboard (and with gamepad if you use chrome)
tadaaam....

Hum ok, we have some work to do to finish this "game". But you already know lot of things to be able to make games.
In the following lines, we are going to see how to delete objects, it's very simple (just call askToKill) and make some collisions detection.

Enemy and Bullet - collisions, enemy's deletion

To move a bullet, we will use the "addAutomatism" method. It's very powerfull to make some IA, and you can remove an automatism (with removeAutomatism(name)) so you can make an automatism call an other, destroying himself, etc... it's like "co-routine" in C# but more easy and "clean" in my opinion :)
If the object is disabled, all automatisms are also disabled.

If you want you can copy Enemy.js, Bullet.js and datas.js from the custom folder in the sample, and this will be finished, anyway I paste code here.

Open Bullet.js

// args are written with a _ because they become private (we use args later in methods) // player reference is optionnal, only when it's an enemy instantiating a bullet function Bullet( _screenSizes, _parent, _player ) { DE.GameObject.call( this, { "x": _parent.position.x, "y": _parent.position.y, "zindex": _parent.zindex + 1 , "tag": _parent.tag == "player" ? "b-p" : "b-e" , "renderer": new DE.SpriteRenderer( { "spriteName": ( _parent.tag == "player" ? "p" : "e" ) + "-fire" , "scale": 0.7 } ) , "collider": new DE.CircleCollider( 30 ) } ); this.vector = { x: 0, y: 0 }; if ( _parent.tag == "player" ) { this.vector.y = -10; this.position.y -= 50; this.tag = "p-bullet"; this.renderers[ 0 ].onAnimEnd = function() { this.startFrame = 8; this.isLoop = true; this.restartAnim(); } } else { this.position.y += datas.enemies[ _parent.name ].bulletOffset; this.vector.y = 10; this.tag = "e-bullet"; } this.gameLogic = function() { this.translate( this.vector ); if ( this.position.y < -50 || this.position.y > _screenSizes.h + 50 ) this.askToKill(); if ( _player ) { if ( _player.enable && !_player.flipping && DE.CollisionSystem.circleCollision( this.collider, _player.collider ) ) { this.askToKill(); _player.getDamage(); } } else { // player bullets, checking collisions with all objects in the scene var gos = this.scene.gameObjects; for ( var n = 0, t = gos.length, g; n < t; ++n ) { g = gos[ n ]; if ( g.tag == "enemy" && DE.CollisionSystem.circleCollision( this.collider, g.collider ) ) { g.getDamage(); this.askToKill(); return; } } } } this.addAutomatism( "logic", "gameLogic" ); } Bullet.prototype = new DE.GameObject(); Bullet.prototype.constructor = Bullet; Bullet.prototype.supr = DE.GameObject.prototype; return Bullet;

Open Enemy.js

// optimising performances here by passing the player to check collisions only with this objects // (we don't need to search it inside all gameObjects, // and we will give the player's reference to Bullets to do the same) function Enemy( _screenSizes, params, _player ) { var _myd = datas.enemies[ params.name ]; DE.GameObject.call( this, { "x": params.x, "y": params.y, "name": params.name, "tag": "enemy" ,"renderer": new DE.SpriteRenderer( { "spriteName": _myd.spriteName , "startFrame": _myd.frame, "scale": _myd.scale || 1 } ) ,"collider": new DE.CircleCollider( _myd.radius || 50 , { "offsetX": _myd.colOffsetX || 0, "offsetY": _myd.colOffsetY || 0 } ) } ); this.lastFire = Date.now(); this.fireRate = _myd.fireRate; this.life = _myd.life; this.offsetFire = _myd.offsetFire || 0; this.speed = _myd.speed || 4; this.gameLogic = function() { if ( this.position.y > 1400 ) this.askToKill(); if ( _player.enable && !_player.flipping && DE.CollisionSystem.circleCollision( this.collider, _player.collider ) ) { this.askToKill(); _player.getDamage(); } this.translateY( this.speed ); this.fire(); } // very simple fire method, just a fireRate this.fire = function() { if ( !this.enable || !this.fireRate || Date.now() - this.lastFire < this.fireRate ) return; this.lastFire = Date.now(); this.scene.add( new Bullet( _screenSizes, this, _player ) ); } this.getDamage = function() { this.life--; if ( this.life <= 0 ) this.askToKill(); } this.addAutomatism( "IA", "gameLogic" ); }; Enemy.prototype = new DE.GameObject(); Enemy.prototype.constructor = Enemy; Enemy.prototype.supr = DE.GameObject.prototype; return Enemy;

As you can see in Enemy and Bullet, to test a collision, we call CollisionSystem and the needed method (here circleCollision) returning a boolean true if there is a collision and false if not.
This is not physics, trigger only, but enough for a Shoot'em up (and for lot of games).
In the Game.js at the end we add:

// simple waves spawner var _lastCheck = undefined, _firstCheck, _currentWave = undefined; Game.checkSpawns = function( time ) { if ( !Game.run ) return; if ( !_firstCheck ) _firstCheck = time; _lastCheck = time; var waveTime = ( ( _lastCheck - _firstCheck ) / 100 >> 0 ) * 100; _currentWave = datas.waves[ waveTime ]; if ( _currentWave && !_currentWave.readed ) { _currentWave.readed = true; for ( var i = 0, e; e = _currentWave.enemies[ i ]; ++i ) { Game.scene.add( new Enemy( Game.screen, e, Game.player ) ); } } }

And to make it work, don't forget to add it in the customLoop.js
The customLoop is like an automatism but it's general. Not for a specific object.
In the most cases, I didn't use the gameLoop because I do all my stuff with automatism

function gameLoop( time ) { Game.checkSpawns( time ); }

The datas to generate waves

In datas.js we create datas enemies, and datas waves. You can copy directly datas.js from the original sample

define( [] , function() { var datas = { "enemies": { "one": { "spriteName": "enemies", "frame": 0, "bulletOffset": 50, "fireRate": false, "life": 3 , "radius": 60, "colOffsetX": 0, "colOffsetY": 0, "offsetFire": 50, "scale": 0.4, "speed": 4 } ,"two": { "spriteName": "enemies", "frame": 1, "bulletOffset": 50, "fireRate": 1300, "life": 4 , "radius": 70, "colOffsetX": 0, "colOffsetY": 0, "offsetFire": 50, "scale": 0.4, "speed": 6 } ,"three": { "spriteName": "enemies", "frame": 2, "bulletOffset": 50, "fireRate": 1000, "life": 10 , "radius": 80, "colOffsetX": 0, "colOffsetY": 0, "offsetFire": 50, "scale": 0.4, "speed": 2 } ,"four": { "spriteName": "enemies", "frame": 3, "bulletOffset": 50, "fireRate": 600, "life": 4 , "radius": 60, "colOffsetX": 0, "colOffsetY": 0, "offsetFire": 50, "scale": 0.4, "speed": 7 } ,"bench": { "spriteName": "enemies", "frame": 2, "bulletOffset": 50, "fireRate": 100, "life": 4 , "radius": 60, "colOffsetX": 0, "colOffsetY": 0, "offsetFire": 50, "scale": 0.4, "speed": 2 } } , "waves": { "2000": { "enemies": [ { "x": 200, "y": -200, "name": "one" } ,{ "x": 800, "y": -200, "name": "one" } ] } ,"2800": { "enemies": [ { "x": 300, "y": -200, "name": "one" } ,{ "x": 700, "y": -200, "name": "one" } ] } ,"4000": { "enemies": [ { "x": 100, "y": -200, "name": "one" } ,{ "x": 500, "y": -200, "name": "two" } ,{ "x": 900, "y": -200, "name": "one" } ] } ,"5300": { "enemies": [ { "x": 300, "y": -200, "name": "two" } ,{ "x": 500, "y": -200, "name": "two" } ,{ "x": 400, "y": -200, "name": "two" } ] } ,"5900": { "enemies": [ { "x": 800, "y": -200, "name": "two" } ,{ "x": 700, "y": -200, "name": "two" } ,{ "x": 600, "y": -200, "name": "two" } ] } ,"7000": { "enemies": [ { "x": 350, "y": -200, "name": "three" } ,{ "x": 500, "y": -400, "name": "four" } ,{ "x": 650, "y": -200, "name": "three" } ] } ,"8000": { "enemies": [ { "x": 250, "y": -300, "name": "three" } ,{ "x": 500, "y": -200, "name": "three" } ,{ "x": 750, "y": -300, "name": "three" } ] } } }; return datas; } );

Here you have a great base to make a shoot'em up.
It's easy to make it better, some ideas if you want:

• Bind gamepad on menus (like in our Pongarena
• Make more complex pattern (a pattern for fires)
• Add background scrolling (use a GameObject's pool)

Hope this was useful, and it was giving you a good sketch about the engine possibilities and methodologies.
If I made mistakes please report it on Twitter/Fb/Reddit.
Good code and Have fun

Grunt the game

Nothing is most simple, get npm modules (look package.json) and launch:

• grunt: copy img, audio in the folder release/_common, grunt for the web, grunt for w8
• grunt web: grunt the game.js for the web in release/web
• grunt win8: grunt the game.js for Windows8 in release/win8

If you want add platforms, do as the same as I already do in compileSettings.json (and you have to create the customized files fot the platform, look in _dev/js/platforms/w8)