Merge branch 'master' of github.com:craftyjs/craftyjs.github.com

_layouts/tutorial.html

@@ -29,18 +29,33 @@
 			Top-down game: Bananabomber
 			<ul>
 				<li><a href='/tutorial/bananabomber/create-a-game'>Create a game</a></li>
-				<li><a href='/tutorial/bananabomber/graphics'>sprites and animations</a></li>
-				<li><a href='/tutorial/bananabomber/input-and-events'>movement, controls, events</a></li>
+				<li><a href='/tutorial/bananabomber/graphics'>Sprites and animations</a></li>
+				<li><a href='/tutorial/bananabomber/input-and-events'>Movement, controls, events</a></li>
 			</ul>
 		</li>
 		<li>
 			Administrative
 			<ul>
-				<li><a href='/tutorial/index'>Structure</a></li>
+				<li><a href='/tutorial/administrative/structure'>Structure</a></li>
+			</ul>
+		</li>
+		<li>
+			Resources
+			<ul>
+				<li><a href='/tutorial/resources'>Resources list</a></li>
 			</ul>
 		</li>
 
-
+		<li>
+			Flexpi integration
+			<ul>
+				<li><a href='/tutorial/integrations/flexpi/introduction'>Introduction</a></li>
+				<li><a href='/tutorial/integrations/flexpi/custom-data-logging'>Custom data logging</a></li>
+				<li><a href='/tutorial/integrations/flexpi/login-user-with-social'>Login user with social</a></li>
+				<li><a href='/tutorial/integrations/flexpi/sell-premium-items-in-game'>Sell premium items in game</a></li>
+				<li><a href='/tutorial/integrations/flexpi/add-badge-for-user'>Add badge for user</a></li>
+			</ul>
+		</li>
 	</ul>
 </div>
 <div id='doc-content'>

tutorial/administrative/structure.md

@@ -0,0 +1,44 @@
+---
+layout: tutorial
+title: Structure
+---
+
+# Introduction
+
+What we will use in CraftyBoilerplate:
+
+* Crafty (latest release)
+* Modernizr (2.5.3)
+* Backbone (0.9.2)
+* Underscore (1.3.4)
+* RequireJquery
+
+To clean up the code and files, in this case we need to use backbone.js as wrapper for entities and require.js for loading files when requests. 
+
+proposed structure tree:
+
+{% highlight html %}
+-- src
+---- components -> Crafty components files
+---- entities -> Files with entities
+-------- base
+------------ baseEntity.js -> Base entity
+---- interfaces -> We keep here files with interface entities
+---- levels -> Configuration files for levels
+---- scenes -> Files with scenes declarations
+---- windows -> Files with logic for interface windows
+---- libs -> Other libraries files
+-------- backbone
+-------- jquery
+-------- modernizr
+-------- require-jquery
+-------- underscore
+---- config.js -> Game configuration
+---- game.js -> Main file of the game
+---- sprites.js -> Sprites definitions
+-- web
+---- images
+-- index.html -> Game wrapper
+{% endhighlight %} 
+
+You can find here (https://github.com/ahilles107/CraftyBoilerplate) a sample project that use CraftyBoilerplate.

tutorial/bananabomber/create-a-game.md

@@ -41,13 +41,13 @@ window.onload = function () {
 {% endhighlight %}
 
 If you are familiar with javascript you will recognize this way of declaring a function that will get executed when the browser is done loading the page. In that way Crafty is no different from any other javascript you would write.
-Crafty.init(with, height) is where Crafty does it's initialization stuff that is needed before the game can run.
-We are going to create a tile-based game so the with and height is set to multiples of 16 which is the size of the tiles.
+Crafty.init(width, height) is where Crafty does it's initialization stuff that is needed before the game can run.
+We are going to create a tile-based game so the width and height is set to multiples of 16, which is the size of the tiles.
 
 There are two ways of getting images onto the screen: 
 
 * Using a canvas element that is like a big square of screen estate that you get to draw pixels on or 
-* using normal dom elements that you can manipulate using css and javascript but is drawn to the screen by the browser. 
+* using normal DOM elements that you can manipulate using css and javascript but is drawn to the screen by the browser. 
 
 It turns out that the DOM method is fastest in most cases, but if you want to use canvas you need to call Crafty.canvas.init() first. As you will see later Crafty abstracts away most differences between DOM and canvas, so it is a matter of changing a single variable if you decide to change later.
 
@@ -92,11 +92,11 @@ The first thing to do in the game scene is to populate the world with background
 
 ## Components
 
-In programming it is quite usual to use an approach called Object Oriented Programming, OOP where code is organised in hierarchies of classes that can inherit functionality from ancestors while providing new functionality itself. Flash adopted this approach with AS3 released some years ago. This way of organizing code has some problems though and hence Crafty takes a different approach.
+In programming it is quite usual to use an approach called Object-Oriented Programming, or OOP, where code is organised in hierarchies of classes that can inherit functionality from ancestors while providing new functionality itself. Flash adopted this approach with AS3 released some years ago. This way of organizing code has some problems though and hence Crafty takes a different approach.
 
 Crafty provides a system very similar to what is known as mixins, multiple inheritance or traits depending on the specific language. An easy way to think about this is that an entity (like say the player or an enemy) is composed of many reusable components that enhance the entity with some new functionality. One way to add components to an entity is to call Crafty.e(string) which will create a new entity with the functionality provided by the comma-separated list of components specified in the string parameter. 
 
-So what we did in the loading scene to get the background is we created an entity with the components 2D, DOM and Text. 2D provides functionality around positioning in 2d space(x, y, etc.). DOM provides functionality that will automatically draw the entity to the screen using dom elements, and Text... i think you guessed it. These components are defined in the crafty.js file and you can go have a look if you are curious, but we will get back to how these components are created in a later article.
+So what we did in the loading scene to get the background is we created an entity with the components 2D, DOM and Text. 2D provides functionality around positioning in 2d space(x, y, etc.). DOM provides functionality that will automatically draw the entity to the screen using dom elements, and Text... I think you guessed it. These components are defined in the crafty.js file and you can go have a look if you are curious, but we will get back to how these components are created in a later article.
 
 
-Next up is world generation in the article [Tiles, spritemap and animations](graphics)
+Next up is world generation in the article [Tiles, spritemap and animations](graphics)

tutorial/bananabomber/graphics.md

@@ -44,7 +44,7 @@ function generateWorld() {
         for (var j = 0; j < 21; j++) {
 
             //place grass on all tiles
-            grassType = Crafty.randRange(1, 4);
+            grassType = Crafty.math.randomInt(1, 4);
             Crafty.e("2D, DOM, grass" + grassType)
                 .attr({ x: i * 16, y: j * 16, z:1 });
 {% endhighlight %}
@@ -56,7 +56,7 @@ To provide a closed playing field for the game we add some bushes around the edg
 {% highlight javascript %}
 //create a fence of bushes
 if(i === 0 || i === 24 || j === 0 || j === 20)
-    Crafty.e("2D, DOM, solid, bush" + Crafty.randRange(1, 2))
+    Crafty.e("2D, DOM, solid, bush" + Crafty.math.randomInt(1, 2))
     .attr({ x: i * 16, y: j * 16, z: 2 });
 {% endhighlight %}
 
@@ -65,7 +65,7 @@ Let's get some more interesting stuff on the stage. Like flowers dancing in the
 {% highlight javascript %}
 //generate some nice flowers within the boundaries of the outer bushes
 if (i > 0 && i < 24 && j > 0 && j < 20
-        && Crafty.randRange(0, 50) > 30
+        && Crafty.math.randomInt(0, 50) > 30
         && !(i === 1 && j >= 16)
         && !(i === 23 && j <= 4)) {
     var f = Crafty.e("2D, DOM, flower, solid, SpriteAnimation, explodable")

tutorial/bananabomber/input-and-events.md

@@ -3,7 +3,7 @@ layout: tutorial
 title: "Keyboard input and binding to events"
 ---
 
-Events is how components in Crafty talk to each other. In this article we will bind to events from Craftys Keyboard component to make it possible for a player to control the main character.
+Events are how components in Crafty talk to each other. In this article we will bind to events from Craftys Keyboard component to make it possible for a player to control the main character.
 
 The following code will create the player entity. The Ape component provides collision handling and some nice walking animations. We shall create this component in a moment. The LeftControls component will handle keyboard input and BombDropper will give out hero the ability to throw bombs. You may recall from the last article that we defined a sprite component called player:
 
@@ -95,7 +95,7 @@ We use this to change the animation accordingly. You bind to an event by providi
 })
 {% endhighlight %}
 
-## Collision detection
+## Collision Detection
 
 The next part of the Ape component deals with collision detection to prevent the user from walking through solid tiles. You might recall that when generating the world we marked bushes and flowers with a fictive component called solid.
 
@@ -136,7 +136,7 @@ In the next article we will build a bombDropper component. this last bit of the
 {% endhighlight %}
 
 
-Let's put two players on the map by extendign the main scene a bit:
+Let's put two players on the map by extending the main scene a bit:
 
 {% highlight javascript %}
 Crafty.scene("main", function () {

tutorial/getting-started/download-and-setup.md

@@ -3,4 +3,17 @@ layout: tutorial
 title: Download and Setup
 ---
 
-Show simple html and game javascript files as on http://craftyjs.github.com/tutorial/bananabomber/create-a-game
+# Download:
+
+You can get crafty in several ways:
+
+* Main page - http://craftyjs.com
+* CraftyComponents page - http://craftycomponents.com/components/single/8/crafty
+* Crafty source on Github - https://github.com/craftyjs/Crafty
+
+# Setup
+
+You don't need setup anything - just include crafty to your app:
+{% highlight html %}
+<script type="text/javascript" src="http://cdn.craftycomponents.com/crafty-release.js"></script>
+{% endhighlight %}

tutorial/getting-started/how-crafty-works.md

@@ -7,26 +7,25 @@ title: How Crafty Works
 
 # Introduction
 
-Crafty is a game javascript library that can help you create games in a structured way...
+Crafty is a JavaScript game library that can help you create games in a structured way...
 
-Key features: 
+Key Features: 
 
 * Entities & Components - A clean and decoupled way to organize game elements. No inheritance needed!
-* Canvas or DOM - Choose the technology to render your entities, it will look exactly the same.
-* Eventbinding - Event system for custom events that can be triggered whenever, whatever and bound just as easy. 
+* Canvas or DOM - Choose the technology to render your entities; it will look exactly the same.
+* Eventbinding - Event system for custom events that can be triggered whenever, whatever and bound just as easily. 
 
-Other goodies:
+Other Goodies:
 
-* Thriving community - Help is eradibly available in the forum.
-* Community modules - A constantly growing collection of user generated code you can use.
-* Pure javascript - No magic. Works in all major browsers and can be combined with your favorite js library
+* Thriving community - Help is readily available in the forum.
+* Community modules - A constantly growing collection of user-generated code you can use.
+* Pure JavaScript - No magic. Works in all major browsers and can be combined with your favorite js library.
 
-# What parts does a Crafty game consist of
+# What does a Crafty game consist of
 
 Explain events, entities, sprites etc.
 
 
-
 A simple game of pong
 
 {% highlight javascript %}
@@ -85,4 +84,4 @@ And the result
 
 <iframe width="600" height="300" src="/tutorial/games/pong/pong.html">
 	This is an iframe. sorry.
-</iframe>
+</iframe>

tutorial/index.md

@@ -3,7 +3,7 @@ layout: tutorial
 title: What we need
 ---
 
-Welcome to the Crafty tutorail section. This is very much a work in progress. You can find already written chapters to the left. Please help out by [forking](https://github.com/craftyjs/craftyjs.github.com)
+Welcome to the Crafty tutorial section. This is very much a work in progress. You can find already written chapters to the left. Please help out by [forking](https://github.com/craftyjs/craftyjs.github.com)
 
 
 The proposed way to structure the tutorials is to explain only one topic in each chapter. If other (perhaps more advanced) parts of Crafty are required to aid in examples and text, a reference should be given to a chapter explaining the topic in detail, and a simple explanation can be given in place.
@@ -12,58 +12,62 @@ The bananabomber chapter was written by sorenbs a while ago. I have updated it a
 
 ## Getting started
 
-* How Crafty works
-* Download and setup
+* How Crafty Works
+* Download and Setup
 
 ## Entities & Components
 
-* What and why
-*
-* Simple game
+* What and Why
+* Simple Game
 
 ## Events
 
-* What and why
-*
-* Simple game
+* What and Why
+* Simple Game
 
 ## Collision
 
-* What and why
-*
-* Simple game
+* What and Why
+* Simple Game
 
 ## Input
 
 * Mouse
 * Keyboard
-* Simple game
+* Simple Game
 
 ## Animation
 
-* Sprite animation
+* Sprite Animation
 * Tween
-*
 
 ## Viewport
 
-* What and why
-*
-* Simple game
+* What and Why
+* Simple Game
 
-## Development techniques
+## Development Techniques
 
 * Editors
 * Debugging
-* Testing on mobile
+* Testing On Mobile
 * Coffescript
 
 ## Mobile
 
 ## Modules
 
-# Old tutorial site
+## Flexpi integration
+
+* introduction
+* instalation
+* custom data logging
+* login user with social or browserid
+* sell premium items in game
+* add badge for user
+
+# Old Tutorial Site
 
 The old tutorial page is available at http://craftyjs.com/tutorials.php
 
-Please have in mind that a lot has happened in the last year and as such code presented in old articles are of little use. If you need help and are not using the latest version pf Crafty, the first thing we will help you with is to update :-)
+Please keep in mind that a lot has happened in the last year and as such code presented in old articles are of little use. If you need help and are not using the latest version pf Crafty the first thing we will help you with is to update :-)

tutorial/integrations/flexpi/add-badge-for-user.md

@@ -0,0 +1,26 @@
+---
+layout: tutorial
+title: Add badge for user - Flexpi integration
+---
+
+# Add badge for user
+
+* Add badges into your application using dashboard
+* Give user a badge
+{% highlight javascript %}
+// we have "userId" from FlexSocial integration.
+// get badge_id from your badges config in dashboard
+flex.badges.user.set(userId, badge_id, function(res){
+    // do something with res
+    // console.log(res);
+});
+{% endhighlight %}
+
+* Get Data about a badge and give user that badge. 
+{% highlight javascript %}
+flex.badges.badge.get('badge_id', function(badgeData){
+    // do something with badge data in res
+    // you will have object with badge_id, name, desc and image (url)
+    // console.log(badgeData)
+});
+{% endhighlight %}

tutorial/integrations/flexpi/custom-data-logging.md

@@ -0,0 +1,26 @@
+---
+layout: tutorial
+title: Custom data logging - Flexpi integration
+---
+
+# Custom data logging with FlexStats
+
+* Define variables for FlexStats in your app (in dashboard)
+* Place the following code in the place where you want login variable:
+
+{% highlight javascript %}
+flex.stats('your defined app key', 'your value to log', function(res){
+	// response with status and status message
+});
+{% endhighlight %}
+
+For example:
+
+{% highlight javascript %}
+entity
+.onHit('ufo', function(e){
+	flex.stats('ufo-crashed', 'Ufo was crashed at a height of '+entity.h+'.', function(res){
+		// response with status and status message
+	});
+}
+{% endhighlight %}