entityjs 0.2.2 → 0.3.0

data/templates/arrow_keys/tests/input/controls_test.js

@@ -0,0 +1,32 @@
+module('controls');
+
+var controls = re.e('controls');
+
+test('addArrow', function(){
+  
+  var old = re('arrow').length;
+  
+  //should call addarrow
+  expectCall(controls, 'addArrow');
+  
+  //press space
+  keypress('space');
+  
+  //check that a new arrow was created
+  equal(re('arrow').length, old+1);
+  
+});
+
+test('removeArrow', function(){
+  
+  var old = re('arrow').length;
+  
+  expectCall(controls, 'removeArrow');
+  
+  //press r
+  keypress('r');
+  
+  //check that a new arrow was removed
+  equal(re('arrow').length, old-1);
+  
+});

data/templates/arrow_keys/tests/scenes/load_test.js

@@ -0,0 +1,16 @@
+module('load');
+
+test('load assets', function(){
+  
+  //replace re.scene('home').enter with start()
+  stub(re.scene('home'), 'enter', function(){  start(); });
+  
+  //go into the load scene
+  re.scene('load').enter();
+  
+  //it should be loading the assets
+  //stop until it finishes and enters the new home scene
+  //the home scene should then call start()
+  stop();
+  
+});

data/templates/blank/config.yml

@@ -0,0 +1,22 @@
+# Configure your game settings
+
+width: 500
+height: 400
+canvas-id: game-canvas
+
+#files to ignore in /scripts
+scripts-ignore:
+  
+#specify files to be loaded first in /scripts
+order:
+  
+#components to ignore in the entityjs source
+#reduce file size by ignoring unused components
+entity-ignore:
+  socket
+  wait
+  group
+
+#ignore tests in /tests
+tests-ignore:
+  

data/templates/blank/readme.txt

@@ -0,0 +1,79 @@
+------------- EntityJS Gem ----------------------
+
+The EntityJS Gem lets you quickly create HTML5 javascript games.
+
+# Directory Structure
+
+## /assets 
+Contains all sounds, images and data files. Place all sounds in the sounds directory
+and all the images in the images directory. These directories will be looked at
+and an asset array will be created for easy asset loading (see scripts/scenes/load.js)
+
+Creating any other directory or placing files in the levels directory will be seen
+as data files and will be read and automatically put in js files.
+
+For example, if I have a directory like /assets/animations/monster.json.
+
+The file will automatically be read upon calling 'entityjs refresh' and will be turned into this:
+
+re.e('monster.json animation')
+.attr(**Animation JSON here**);
+
+Which means you can edit files in different programs and not worry about copying and pasting
+the contents. Just run entityjs refresh.
+
+At the moment JSON, XML and TMX is supported but in the future, YAML, and CSV will be supported.
+TMX is a special XML format for a tile map editor called tiled.
+
+## /builds
+
+Contains assets and minified code for the game.
+
+## /scripts
+
+Contains javascripts for the game.
+
+## /tests
+
+Contains tests for the game. It is good practice to keep this structured exactly the same as the scripts
+directory.
+
+## config.yml
+
+A configuration file in yaml. This can be edited in any text editor.
+
+## readme.txt
+
+Good practice to make one for every game to help other people.
+
+# Commands
+
+## create a new entityjs game
+entityjs new [project_name]
+
+- example
+entityjs new alien_shooter
+
+- create game with arrow_keys template
+entityjs new alien_shooter alien arrow_keys
+
+## create a new component
+entityjs comp [component_name]
+
+- example
+entityjs comp hero
+
+## build game
+entityjs build
+
+Exports game in builds directory
+
+## build game with custom name
+entityjs build release1
+
+## Run server
+entityjs server
+or
+entityjs s
+
+Navigate to localhost:2345 to play the game.

data/templates/platform/assets/levels/level1.tmx

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<map version="1.0" orientation="orthogonal" width="20" height="16" tilewidth="25" tileheight="25">
+ <tileset firstgid="1" name="tiles" tilewidth="25" tileheight="25">
+  <image source="../images/tiles.png" width="200" height="25"/>
+ </tileset>
+ <tileset firstgid="9" name="Hero" tilewidth="25" tileheight="25">
+  <image source="../images/hero.png" width="225" height="50"/>
+ </tileset>
+ <tileset firstgid="27" name="items" tilewidth="25" tileheight="25">
+  <image source="../images/items.png" width="250" height="50"/>
+ </tileset>
+ <layer name="Base" width="20" height="16">
+  <data encoding="csv">
+0,0,0,0,0,0,0,0,0,0,0,0,0,7,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,7,8,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,7,0,0,0,7,7,0,0,0,0,0,
+0,0,0,0,0,0,0,0,7,0,0,0,7,0,8,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
+0,0,0,0,0,0,0,0,0,0,7,0,0,0,0,0,0,0,0,0,
+5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,7,0,0,
+1,2,2,5,0,0,0,0,7,0,0,0,6,2,5,0,0,0,0,0,
+1,1,1,3,0,0,6,2,2,5,0,6,1,1,1,5,0,0,0,0,
+1,1,1,3,0,6,1,1,1,1,2,1,1,1,1,1,5,0,0,0,
+1,1,1,1,2,1,1,1,1,1,1,1,1,1,1,1,1,2,2,2,
+1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1
+</data>
+ </layer>
+ <objectgroup color="#5e3ea4" name="Hero" width="20" height="16">
+  <object gid="9" x="0" y="25"/>
+ </objectgroup>
+ <objectgroup name="Items" width="20" height="16">
+  <object gid="41" x="350" y="150"/>
+  <object gid="41" x="275" y="300"/>
+  <object gid="41" x="125" y="225"/>
+  <object gid="41" x="425" y="250"/>
+  <object gid="39" x="175" y="300"/>
+  <object gid="39" x="225" y="150"/>
+  <object gid="41" x="125" y="75"/>
+ </objectgroup>
+</map>

data/templates/platform/config.yml

@@ -0,0 +1,22 @@
+# Configure your game settings
+
+width: 500
+height: 400
+canvas-id: game-canvas
+
+#files to ignore in /scripts
+scripts-ignore:
+  
+#specify files to be loaded first in /scripts
+order:
+  
+#components to ignore in the entityjs source
+#reduce file size by ignoring unused components
+entity-ignore:
+  socket
+  wait
+  group
+
+#ignore tests in /tests
+tests-ignore:
+  

data/templates/platform/readme.txt

@@ -0,0 +1,87 @@
+------------- EntityJS Gem ----------------------
+
+The EntityJS Gem lets you quickly create HTML5 javascript games.
+
+# Directory Structure
+
+## /assets 
+Contains all sounds, images and data files. Place all sounds in the sounds directory
+and all the images in the images directory. These directories will be looked at
+and an asset array will be created for easy asset loading (see scripts/scenes/load.js)
+
+Creating any other directory or placing files in the levels directory will be seen
+as data files and will be read and automatically put in js files.
+
+For example, if I have a directory like /assets/animations/monster.json.
+
+The file will automatically be read upon calling 'entityjs refresh' and will be turned into this:
+
+re.e('monster.json animation')
+.attr(**Animation JSON here**);
+
+Which means you can edit files in different programs and not worry about copying and pasting
+the contents. Just run entityjs refresh.
+
+At the moment only JSON is supported but in the future, XML, YAML, CSV and TMX will be supported.
+TMX is a special XML format for a tile map editor.
+
+## /builds
+
+Contains assets and minified code for the game.
+
+## /scripts
+
+Contains javascripts for the game.
+
+## /tests
+
+Contains tests for the game. It is good practice to keep this structured exactly the same as the scripts
+directory.
+
+## /tmp
+
+Contains temporary files generated by EntityJS Gem. Usually don't have to touch this.
+Might be removed and replaced in the future.
+
+## config.yml
+
+A configuration file in yaml. This can be edited in any text editor.
+
+## play.html
+
+The current game. If its missing files, run 'entityjs r'
+
+# Commands
+
+## create a new entityjs game
+entityjs new [project_name] [comps]+
+
+- example
+entityjs new alien_shooter
+
+- example with components
+entityjs new alien_shooter alien hero lazer
+
+This will create a new game called 'alien_shooter'
+with three components, alien, hero, lazer
+
+## create a new component
+entityjs comp [component_name]
+
+- example
+entityjs comp hero
+
+## build game
+entityjs build
+
+Exports game in builds directory
+
+## build game with custom name
+entityjs build release1
+
+## refresh sources
+entityjs refresh
+or
+entityjs r
+
+Creates a file called game.debug.js inside /tmp

data/templates/platform/scripts/display/bit.js

@@ -0,0 +1,12 @@
+/*
+The bit component defines an image text to draw text on screen.
+*/
+re.c('bit')
+.requires('imgtext bit.png align')
+.defines({
+  //defines the width of each character
+  imgtext:[
+8,4,8,12,10,12,12,4,6,6,8,8,6,8,4,12,10,6,10,10,10,10,10,10,10,10,4,4,8,8,8,10,
+12,10,10,8,10,8,8,10,10,8,10,10,8,12,10,10,10,10,10,10,8,10,10,12,10,10,8,6,12,
+6,8,10,6,10,10,8,10,10,8,10,10,4,6,10,4,12,10,10,10,10,8,10,8,10,10,12,8,10,10,8,4,8]
+});

data/templates/platform/scripts/display/hero.js

@@ -0,0 +1,77 @@
+re.c('hero')
+.requires('hero.png tsprite update force flicker body')
+.defines({
+  
+  speed:40 * re.sys.stepSize,
+  
+  friX:0.75,
+  friY:0.95,
+  
+  padX:6,
+  
+  bodyX:24,
+  bodyY:24,
+  
+  jumpSpeed:480 * re.sys.stepSize,
+  jump:false,
+  ground:true,
+  
+  update:function(){
+    
+    //jump
+    if(this.ground && !this.jump && re.pressed('w')){
+      this.forceJump();
+    }
+    
+    //walk back and fourth
+    if(re.pressed('a')){
+      this.velX -= this.speed;
+      this.scaleX = -1;
+      
+      if(!this.jump) this.flicker('run');
+    }
+    
+    if(re.pressed('d')){
+      this.velX += this.speed;
+      this.scaleX = 1;
+      
+      if(!this.jump) this.flicker('run');
+    }
+    
+    //switch back to idle animation if stopped moving
+    if(this.isIdle(0.3)) this.flicker('idle');
+    
+  },
+  
+  forceJump:function(){
+    this.jump = true;
+    this.velY -= this.jumpSpeed;
+    
+    this.flicker('jump');
+  },
+  
+  jumpReset:function(x, y, tx, ty){
+    //check if a hit happened on the y axis
+    if(y){
+      this.jump = false;
+      this.ground = (ty >= this.posY);
+    }
+  }
+  
+})
+.init(function(){
+  
+  //add animations
+  this.addFlicker({
+	  idle:[-1, 600, [0, 1]],
+	  run:[-1, 800, [2, 3]],
+	  jump:[1, 500, [4, 5, 4]],
+	  ladder:[-1, 500, [6, 7]]
+	});
+  
+  this.on({
+    update:this.update,
+    aftermath:this.jumpReset
+  });
+  
+});

data/templates/platform/scripts/display/tile.js

@@ -0,0 +1,2 @@
+re.c('tile')
+.requires('tsprite tiles.png');

data/templates/platform/scripts/display/tsprite.js

@@ -0,0 +1,17 @@
+/*
+The tsprite component is a simple extension to sprite that defaults the size attributes.
+*/
+re.c('tsprite')
+.requires('sprite')
+.init(function(){
+  this.sizeX = re.tile.sizeX;
+  this.sizeY = re.tile.sizeY;
+  
+  this.bodyX = re.tile.sizeX;
+  this.bodyY = re.tile.sizeY;
+  
+  //setup registration point
+  this.regX = this.sizeX * 0.5;
+  this.regY = this.sizeY * 0.5;
+  
+});

data/templates/platform/scripts/init.js

@@ -0,0 +1,7 @@
+re.ready(function(){
+  
+  re.sys.init(re.canvas).start();
+  
+  re.scene('load').enter();
+  
+});

data/templates/platform/scripts/items/coin.js

@@ -0,0 +1,27 @@
+re.c('coin')
+.requires('item flicker')
+.defines({
+  
+  touch:function(){
+    this.collect();
+  },
+  
+  collect:function(){
+    this.sfx.play();
+    this.trigger('collect');
+    this.dispose();
+  }
+  
+})
+.init(function(){
+  //add comp for searchability
+  this.comp('coin');
+  
+  this.sfx = re.e('sound coin.sfx');
+  
+	this.addFlicker('glow', -1, 1800, '14 15 15');
+	this.flicker('glow');
+})
+//accepted tile frames in items.png which will become coins
+.alias('t14')
+.alias('t15');

data/templates/platform/scripts/items/item.js

@@ -0,0 +1,41 @@
+re.c('item')
+.requires('tsprite update hit items.png')
+.namespaces({
+  
+  update:function(t){
+		
+		if(this.hero.hitBody(this.posX, this.posY, this.sizeX, this.sizeY, 10, 0)){
+			this.touching = true;
+			this.touch(t);
+			
+		} else if(this.touching){
+			
+			this.touching = false;
+			
+			this.untouch(t);
+		}
+		
+	}
+  
+})
+.defaults({
+  touching:false,
+  
+  touch:function(){
+    
+  },
+  
+  untouch:function(){
+    
+  }
+})
+.init(function(){
+  this.hero = re('hero')[0];
+  
+  this.on('update', this.item_update);
+  
+  this.updateBefore(this.hero);
+})
+.dispose(function(){
+  this.off();
+});

data/templates/platform/scripts/items/spring.js

@@ -0,0 +1,25 @@
+re.c('spring')
+.requires('item flicker')
+.defines({
+  
+  touch:function(){
+    this.hero.velY = -5;
+		
+		if(re.pressed('w')){
+			this.hero.velY = -25;
+			this.flicker('bounce');
+		}
+  }
+  
+})
+.init(function(){
+  //add animation, can also send a string instead of an array
+  this.addFlicker('bounce', 1, 300, '13 12');
+	
+	this.frame(12);
+  
+  this.comp('spring');
+})
+//used to place it in level.js
+.alias('t12')
+.alias('t13');

data/templates/platform/scripts/scenes/home.js

@@ -0,0 +1,10 @@
+re.scene('home')
+.enter(function(){
+  
+  re.scene('play').enter('level1');
+  
+})
+.exit(function(){
+  
+  
+});

data/templates/platform/scripts/scenes/load.js

@@ -0,0 +1,27 @@
+re.scene('load')
+.enter(function(){
+  
+  re.tile.sizeX = re.tile.sizeY = 25;
+  
+  re.sys.clearColor = '#D6F8FA';
+  
+  //setup gravity
+  re.force.graY = 30 * re.sys.stepSize;
+  
+  re.load(re.assets)
+  .complete(function(){
+    
+    //move to home
+    re.scene('home').enter();
+  })
+  .error(function(e){
+    
+  })
+  .progress(function(i){
+    
+  });
+  
+})
+.exit(function(){
+  //exit load scene
+});

data/templates/platform/scripts/scenes/play.js

@@ -0,0 +1,31 @@
+re.scene('play')
+.enter(function(level){
+  
+  //offset screen because all tiles are centered..
+  //checkout tsprite.js
+  re.screen.pos(-re.tile.sizeX * 0.5, -re.tile.sizeY * 0.5);
+  
+  //display coin text
+  var counter = this.counter = re.e('counter');
+  
+  //find level
+  this.level = re(level+'.tmx')[0];
+  
+  //load it
+  this.level.build();
+  
+  //let the player collect coins
+  //listen for collect events from all coins
+  re('coin').on('collect', function(){
+    counter.add(1);
+  });
+  
+})
+.exit(function(){
+  
+  this.counter.dispose();
+  
+  //teardown level
+  this.level.teardown();
+  
+});

data/templates/platform/scripts/util/counter.js

@@ -0,0 +1,34 @@
+re.c('counter')
+.defines({
+  
+  _count:0,
+  
+  add:function(value){
+    if(re.is(value)){
+      this._count += value;
+      this.coinText.text("Coins: "+this._count);
+      
+      return this;
+    }
+    
+    return this._count;
+  }
+  
+})
+.init(function(){
+  
+  //define text
+  this.coinText = re.e('bit')
+  .alignLeft(5)
+  .alignTop(5)
+  //ignore screen coordinates
+  .attr('screenable', false);
+  
+  //set default text
+  this.add(0);
+})
+.dispose(function(){
+  
+  this.coinText.dispose();
+  
+});