From c5c4e9a98d7e7600dbcf2ab32944402bee216ab4 Mon Sep 17 00:00:00 2001 From: Nithin Bekal Date: Sat, 10 Mar 2012 12:54:52 +0530 Subject: [PATCH 01/19] Crafty.randRange() has changed to Crafty.math.randomInt(). Updated this in tutorial. --- tutorial/bananabomber/graphics.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tutorial/bananabomber/graphics.md b/tutorial/bananabomber/graphics.md index cee5d3f..6e7aca7 100644 --- a/tutorial/bananabomber/graphics.md +++ b/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") From bd09d329c2f25b4c526d5c5366107740de160365 Mon Sep 17 00:00:00 2001 From: Jim Kirkbride Date: Sun, 11 Mar 2012 11:51:03 -0400 Subject: [PATCH 02/19] Spelling and grammar. --- tutorial/index.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/tutorial/index.md b/tutorial/index.md index a485a63..85e84e1 100644 --- a/tutorial/index.md +++ b/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,58 @@ 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 +* What and Why * -* Simple game +* Simple Game ## Events -* What and why +* What and Why * -* Simple game +* Simple Game ## Collision -* What and why +* What and Why * -* Simple game +* Simple Game ## Input * Mouse * Keyboard -* Simple game +* Simple Game ## Animation -* Sprite animation +* Sprite Animation * Tween * ## Viewport -* What and why +* What and Why * -* Simple game +* Simple Game -## Development techniques +## Development Techniques * Editors * Debugging -* Testing on mobile +* Testing On Mobile * Coffescript ## Mobile ## Modules -# Old tutorial site +# 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 :-) \ No newline at end of file +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 :-) From 2869dd75f4a05b6fc7947eec3c0c72e49494b456 Mon Sep 17 00:00:00 2001 From: Jim Kirkbride Date: Sun, 11 Mar 2012 11:54:40 -0400 Subject: [PATCH 03/19] Spelling and grammar. --- tutorial/getting-started/how-crafty-works.md | 21 ++++++++++---------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/tutorial/getting-started/how-crafty-works.md b/tutorial/getting-started/how-crafty-works.md index d0e944d..0ea192d 100644 --- a/tutorial/getting-started/how-crafty-works.md +++ b/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 \ No newline at end of file + From defaa23cafbe5dfb77ed05826527388c0c625ae5 Mon Sep 17 00:00:00 2001 From: Jim Kirkbride Date: Sun, 11 Mar 2012 11:56:04 -0400 Subject: [PATCH 04/19] Removed unnecessary list items. --- tutorial/index.md | 5 ----- 1 file changed, 5 deletions(-) diff --git a/tutorial/index.md b/tutorial/index.md index 85e84e1..5664932 100644 --- a/tutorial/index.md +++ b/tutorial/index.md @@ -18,19 +18,16 @@ The bananabomber chapter was written by sorenbs a while ago. I have updated it a ## Entities & Components * What and Why -* * Simple Game ## Events * What and Why -* * Simple Game ## Collision * What and Why -* * Simple Game ## Input @@ -43,12 +40,10 @@ The bananabomber chapter was written by sorenbs a while ago. I have updated it a * Sprite Animation * Tween -* ## Viewport * What and Why -* * Simple Game ## Development Techniques From 8113483e3f9a57eef3a295ff8b615624383bf609 Mon Sep 17 00:00:00 2001 From: Jim Kirkbride Date: Sun, 11 Mar 2012 12:12:01 -0400 Subject: [PATCH 05/19] More spelling and grammar. --- tutorial/bananabomber/create-a-game.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/tutorial/bananabomber/create-a-game.md b/tutorial/bananabomber/create-a-game.md index 8c0a13c..3d6d2c2 100644 --- a/tutorial/bananabomber/create-a-game.md +++ b/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) \ No newline at end of file +Next up is world generation in the article [Tiles, spritemap and animations](graphics) From 0d85700197bc018e93b31df56497f0f79b26880c Mon Sep 17 00:00:00 2001 From: Jim Kirkbride Date: Sun, 11 Mar 2012 12:18:07 -0400 Subject: [PATCH 06/19] Grammar --- tutorial/bananabomber/input-and-events.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/bananabomber/input-and-events.md b/tutorial/bananabomber/input-and-events.md index ad8fed3..34da58c 100644 --- a/tutorial/bananabomber/input-and-events.md +++ b/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: From 8fea3c9b525a1119b70aea6af522ed055cf6e7e3 Mon Sep 17 00:00:00 2001 From: Jim Kirkbride Date: Sun, 11 Mar 2012 12:23:58 -0400 Subject: [PATCH 07/19] Spelling. --- tutorial/bananabomber/.input-and-events.md.swp | Bin 0 -> 20480 bytes tutorial/bananabomber/input-and-events.md | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 tutorial/bananabomber/.input-and-events.md.swp diff --git a/tutorial/bananabomber/.input-and-events.md.swp b/tutorial/bananabomber/.input-and-events.md.swp new file mode 100644 index 0000000000000000000000000000000000000000..afd7bc6b2d894182fed8902b7797e54ae3f43f4e GIT binary patch literal 20480 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 Date: Sun, 18 Mar 2012 17:16:11 +0700 Subject: [PATCH 08/19] Fix small typo in tutorial index --- tutorial/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/index.md b/tutorial/index.md index a485a63..97ce076 100644 --- a/tutorial/index.md +++ b/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. From 1647e59e64b35eb2599d74920818b05dbd4b435f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Mon, 16 Apr 2012 12:51:53 +0200 Subject: [PATCH 09/19] first version of CraftyBoilerplate --- _layouts/tutorial.html | 2 +- tutorial/administrative/structure.md | 42 ++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 1 deletion(-) create mode 100644 tutorial/administrative/structure.md diff --git a/_layouts/tutorial.html b/_layouts/tutorial.html index f06a368..8641ad0 100644 --- a/_layouts/tutorial.html +++ b/_layouts/tutorial.html @@ -36,7 +36,7 @@
  • Administrative
    • diff --git a/tutorial/administrative/structure.md b/tutorial/administrative/structure.md new file mode 100644 index 0000000..c6ffb06 --- /dev/null +++ b/tutorial/administrative/structure.md @@ -0,0 +1,42 @@ +--- +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: + +``` +-- src +---- components -> Crafty componets files +---- entities -> Files with entities +---- 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 +---- baseEntity.js -> Base entity +---- config.js -> Game configuration +---- game.js -> Main file of the game +---- sprites.js -> Sprites definitions +-- index.html -> Game wrapper +``` + +You can find here (adres) a sample project that use CraftyBoilerplate. \ No newline at end of file From d99c475ce465d65f6781b5553e54b5502c2b7151 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Mon, 16 Apr 2012 12:56:33 +0200 Subject: [PATCH 10/19] add url for sample project repo --- tutorial/administrative/structure.md | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/tutorial/administrative/structure.md b/tutorial/administrative/structure.md index c6ffb06..13f9ae6 100644 --- a/tutorial/administrative/structure.md +++ b/tutorial/administrative/structure.md @@ -28,8 +28,7 @@ proposed structure tree: ---- libs -> Other libraries files -------- backbone -------- jquery --------- -modernizr +-------- modernizr -------- require-jquery -------- underscore ---- baseEntity.js -> Base entity @@ -39,4 +38,4 @@ modernizr -- index.html -> Game wrapper ``` -You can find here (adres) a sample project that use CraftyBoilerplate. \ No newline at end of file +You can find here (https://github.com/ahilles107/CraftyBoilerplate) a sample project that use CraftyBoilerplate. From ceaee5a68da7131122f7a4b787bc62ab8b3299a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Mon, 16 Apr 2012 20:50:08 +0300 Subject: [PATCH 11/19] Add web directory --- tutorial/administrative/structure.md | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/tutorial/administrative/structure.md b/tutorial/administrative/structure.md index 13f9ae6..cb02203 100644 --- a/tutorial/administrative/structure.md +++ b/tutorial/administrative/structure.md @@ -19,22 +19,25 @@ proposed structure tree: ``` -- src ----- components -> Crafty componets files +---- 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 +---- libs -> Other libraries files -------- backbone -------- jquery -------- modernizr -------- require-jquery -------- underscore ----- baseEntity.js -> Base entity ---- config.js -> Game configuration ---- game.js -> Main file of the game ---- sprites.js -> Sprites definitions +-- web +---- images -- index.html -> Game wrapper ``` From 26576b3039af448e52816390344ed0b3e8a5d329 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Mon, 16 Apr 2012 19:59:45 +0200 Subject: [PATCH 12/19] flexpi and crafty --- _layouts/tutorial.html | 17 ++++++-- tutorial/index.md | 11 ++++- .../integrations/flexpi/add-badge-for-user.md | 39 +++++++++++++++++ .../flexpi/custom-data-logging.md | 26 +++++++++++ tutorial/integrations/flexpi/introduction.md | 43 +++++++++++++++++++ .../flexpi/login-user-with-social.md | 31 +++++++++++++ .../flexpi/sell-premium-items-in-game.md | 33 ++++++++++++++ 7 files changed, 195 insertions(+), 5 deletions(-) create mode 100644 tutorial/integrations/flexpi/add-badge-for-user.md create mode 100644 tutorial/integrations/flexpi/custom-data-logging.md create mode 100644 tutorial/integrations/flexpi/introduction.md create mode 100644 tutorial/integrations/flexpi/login-user-with-social.md create mode 100644 tutorial/integrations/flexpi/sell-premium-items-in-game.md diff --git a/_layouts/tutorial.html b/_layouts/tutorial.html index f06a368..b4a04dc 100644 --- a/_layouts/tutorial.html +++ b/_layouts/tutorial.html @@ -29,18 +29,27 @@ Top-down game: Bananabomber
  • Administrative
    • - +
  • + Flexpi integration + +
    • diff --git a/tutorial/index.md b/tutorial/index.md index 5664932..b722502 100644 --- a/tutorial/index.md +++ b/tutorial/index.md @@ -57,8 +57,17 @@ The bananabomber chapter was written by sorenbs a while ago. I have updated it a ## Modules +## 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 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 :-) +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 :-) \ No newline at end of file diff --git a/tutorial/integrations/flexpi/add-badge-for-user.md b/tutorial/integrations/flexpi/add-badge-for-user.md new file mode 100644 index 0000000..4bb3ee2 --- /dev/null +++ b/tutorial/integrations/flexpi/add-badge-for-user.md @@ -0,0 +1,39 @@ +--- +layout: tutorial +title: Add badge for user - Flexpi integration +--- + +# Add badge for user + +* Dodaj odznaki do swojej aplikacji poprzez panel +* Daj odznake dla użytkownika +{% 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 %} + +* Pobierz dane o odznace i wyświetl ją dla uzytkownkia +{% highlight javascript %} +flex.badges.badge.get('badge_id', function(badgeData){ + // do something with badge data in res + // you will be have object with badge_id, name, desc and image (url) + // console.log(badgeData) +}); +{% endhighlight %} + +* Wygeneruj formularz płatności i pozwól użytkownikowi kupić przedmiot +{% highlight javascript %} +flex.payment.paypal.createFormView('my-div-id', 'Pay with PayPal'); +{% endhighlight %} + +* Pobierz status transakcji i przekaż przedmiot dla gracza. +{% highlight javascript %} +var cartId = flex.payment.cart.getId; +flex.payment.transactions.get(cartId, function(transaction){ + // give super item for User. +}) +{% endhighlight %} \ No newline at end of file diff --git a/tutorial/integrations/flexpi/custom-data-logging.md b/tutorial/integrations/flexpi/custom-data-logging.md new file mode 100644 index 0000000..9df9f19 --- /dev/null +++ b/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 %} \ No newline at end of file diff --git a/tutorial/integrations/flexpi/introduction.md b/tutorial/integrations/flexpi/introduction.md new file mode 100644 index 0000000..5903f7f --- /dev/null +++ b/tutorial/integrations/flexpi/introduction.md @@ -0,0 +1,43 @@ +--- +layout: tutorial +title: Introduction - Flexpi integration +--- + +# Introduction + +Flexpi is a set of tools (services platform) for HTML5 games developers. + +Flexpi currently consists of four services: + +* FlexStats - log your own variables (in-game stats) +* FlexSocial - log in user with social media platforms (like facebook), or another authorization mechanisms (BrowserID) +* FlexPayment - Integration with payment systems (PayPal) +* FlexBadges - Manage and give your user special game badge. + +To use Flexpi services you need to register on flexpi.com (http://flexpi.com/register) and create first app (http://flexpi.com/dashboard/apps/add) + +Each application has got "App id" - identification number. + +# Instalation + +* Add API into your application: + +{% highlight html %} + + + +... + +{% endhighlight %} + +* Next initiate API in your game: + +{% highlight javascript %} + flex.connect({ + app_id : 00000 // Your application "App id" + }, function(){ + // run code when connection is ready + }); +{% endhighlight %} + +Thats all - your app is now connected with flexpi.com \ No newline at end of file diff --git a/tutorial/integrations/flexpi/login-user-with-social.md b/tutorial/integrations/flexpi/login-user-with-social.md new file mode 100644 index 0000000..6c045cc --- /dev/null +++ b/tutorial/integrations/flexpi/login-user-with-social.md @@ -0,0 +1,31 @@ +--- +layout: tutorial +title: Login user with social - Flexpi integration +--- + +# Login user with social + +* Skonfiguruj FlexSocial dla Facebook +* W miejscu w którym chcesz dokonać zalogowania użytkonika dodaj: + +{% highlight javascript %} +flex.social.facebook.login(function(res){ + flex.social.facebook.getUser(function(userData){ + console.log(userData); + }); +}); +{% endhighlight %} + +For example: + +{% highlight javascript %} +entity + .bind('Click', function(e){ + flex.social.facebook.login(function(res){ + flex.social.facebook.getUser(function(userData){ + console.log(userData); + var userId = userData.id; + }); + }); + } +{% endhighlight %} \ No newline at end of file diff --git a/tutorial/integrations/flexpi/sell-premium-items-in-game.md b/tutorial/integrations/flexpi/sell-premium-items-in-game.md new file mode 100644 index 0000000..77ac36e --- /dev/null +++ b/tutorial/integrations/flexpi/sell-premium-items-in-game.md @@ -0,0 +1,33 @@ +--- +layout: tutorial +title: Sell premium items in game - Flexpi integration +--- + +# Sell premium items in game + +* Skonfiguruj FlexPayment dla PayPal w panelu aplikacji +* Zainicjuj obsługę FlexPayment +{% highlight javascript %} + // we have "userId" from FlexSocial integration. + flex.payment.init(function(){}, userId); +{% endhighlight %} + +* Dodaj przedmiot premium do koszyka sprzedającego: +{% highlight javascript %} +flex.payment.cart.add('super item', 5.99, 1, function(item){ + // do something with just added item +}); +{% endhighlight %} + +* Wygeneruj formularz płatności i pozwól użytkownikowi kupić przedmiot +{% highlight javascript %} +flex.payment.paypal.createFormView('my-div-id', 'Pay with PayPal'); +{% endhighlight %} + +* Pobierz status transakcji i przekaż przedmiot dla gracza. +{% highlight javascript %} +var cartId = flex.payment.cart.getId; +flex.payment.transactions.get(cartId, function(transaction){ + // give super item for User. +}) +{% endhighlight %} \ No newline at end of file From 6fb60d309ae2248668a1b9105b6aaca5fd685e53 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Mon, 16 Apr 2012 20:35:31 +0200 Subject: [PATCH 13/19] fix --- _layouts/tutorial.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_layouts/tutorial.html b/_layouts/tutorial.html index b4a04dc..940b4e5 100644 --- a/_layouts/tutorial.html +++ b/_layouts/tutorial.html @@ -36,7 +36,7 @@
  • Administrative
    • From 2c98b1b47de1dc29e5b0e2e358b0f1ea4261e59e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Mon, 16 Apr 2012 21:16:58 +0200 Subject: [PATCH 14/19] fix some typos, download-and-setup --- _layouts/tutorial.html | 6 ++++++ tutorial/getting-started/download-and-setup.md | 15 ++++++++++++++- tutorial/resources.md | 4 +++- 3 files changed, 23 insertions(+), 2 deletions(-) diff --git a/_layouts/tutorial.html b/_layouts/tutorial.html index f06a368..e572ae9 100644 --- a/_layouts/tutorial.html +++ b/_layouts/tutorial.html @@ -39,6 +39,12 @@
  • Structure
    • +
  • + Resources + +
    • diff --git a/tutorial/getting-started/download-and-setup.md b/tutorial/getting-started/download-and-setup.md index 479d81e..a9d68ee 100644 --- a/tutorial/getting-started/download-and-setup.md +++ b/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 \ No newline at end of file +# 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 %} + +{% endhighlight %} \ No newline at end of file diff --git a/tutorial/resources.md b/tutorial/resources.md index 2167161..820fbf9 100644 --- a/tutorial/resources.md +++ b/tutorial/resources.md @@ -1,5 +1,5 @@ --- -layout: tutorials +layout: tutorial title: Resources for javascript games --- @@ -35,6 +35,8 @@ title: Resources for javascript games [PlayerIO](http://playerio.com) multiplayer, payments, online storage [Flash-only] +[Flexpi](http://flexpi.com) log custom data, social integrations, payment integrations, badges management + ## Art and sound [Lots of art](http://opengameart.org/) From c7162941898be099301462c61780b1d685bef7ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Mon, 16 Apr 2012 21:35:54 +0200 Subject: [PATCH 15/19] add english translation --- .../flexpi/login-user-with-social.md | 18 +++++++++--------- .../flexpi/sell-premium-items-in-game.md | 18 +++++++++--------- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/tutorial/integrations/flexpi/login-user-with-social.md b/tutorial/integrations/flexpi/login-user-with-social.md index 6c045cc..ea6f433 100644 --- a/tutorial/integrations/flexpi/login-user-with-social.md +++ b/tutorial/integrations/flexpi/login-user-with-social.md @@ -1,16 +1,16 @@ --- layout: tutorial -title: Login user with social - Flexpi integration +title: Log in a user with social - Flexpi integration --- # Login user with social -* Skonfiguruj FlexSocial dla Facebook -* W miejscu w którym chcesz dokonać zalogowania użytkonika dodaj: +* Configure FlexSocial for facebook +* Place the following code in the place where you want log in a user: {% highlight javascript %} flex.social.facebook.login(function(res){ - flex.social.facebook.getUser(function(userData){ + flex.social.facebook.getUser(function(userData){ console.log(userData); }); }); @@ -22,10 +22,10 @@ For example: entity .bind('Click', function(e){ flex.social.facebook.login(function(res){ - flex.social.facebook.getUser(function(userData){ - console.log(userData); - var userId = userData.id; - }); - }); + flex.social.facebook.getUser(function(userData){ + console.log(userData); + var userId = userData.id; + }); + }); } {% endhighlight %} \ No newline at end of file diff --git a/tutorial/integrations/flexpi/sell-premium-items-in-game.md b/tutorial/integrations/flexpi/sell-premium-items-in-game.md index 77ac36e..5c2aa41 100644 --- a/tutorial/integrations/flexpi/sell-premium-items-in-game.md +++ b/tutorial/integrations/flexpi/sell-premium-items-in-game.md @@ -5,29 +5,29 @@ title: Sell premium items in game - Flexpi integration # Sell premium items in game -* Skonfiguruj FlexPayment dla PayPal w panelu aplikacji -* Zainicjuj obsługę FlexPayment +* Configure FlexPayment for PayPal in dashboard +* Initiate support for FlexPayment {% highlight javascript %} - // we have "userId" from FlexSocial integration. - flex.payment.init(function(){}, userId); +// we have "userId" from FlexSocial integration. +flex.payment.init(function(){}, userId); {% endhighlight %} -* Dodaj przedmiot premium do koszyka sprzedającego: +* Add the premium item into a users cart: {% highlight javascript %} flex.payment.cart.add('super item', 5.99, 1, function(item){ - // do something with just added item + // do something with added item }); {% endhighlight %} -* Wygeneruj formularz płatności i pozwól użytkownikowi kupić przedmiot +* Generate payment form, and let your user buy something {% highlight javascript %} flex.payment.paypal.createFormView('my-div-id', 'Pay with PayPal'); {% endhighlight %} -* Pobierz status transakcji i przekaż przedmiot dla gracza. +* Get the transaction status and give him an item. {% highlight javascript %} var cartId = flex.payment.cart.getId; flex.payment.transactions.get(cartId, function(transaction){ - // give super item for User. + // give user an item }) {% endhighlight %} \ No newline at end of file From d8fff8b1439924c7c5da76720f740e7d6f339e62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Mon, 16 Apr 2012 21:50:01 +0200 Subject: [PATCH 16/19] add missing translation, and fix cs --- .../integrations/flexpi/add-badge-for-user.md | 21 ++++--------------- .../flexpi/custom-data-logging.md | 6 +++--- .../flexpi/login-user-with-social.md | 2 +- 3 files changed, 8 insertions(+), 21 deletions(-) diff --git a/tutorial/integrations/flexpi/add-badge-for-user.md b/tutorial/integrations/flexpi/add-badge-for-user.md index 4bb3ee2..059f230 100644 --- a/tutorial/integrations/flexpi/add-badge-for-user.md +++ b/tutorial/integrations/flexpi/add-badge-for-user.md @@ -5,8 +5,8 @@ title: Add badge for user - Flexpi integration # Add badge for user -* Dodaj odznaki do swojej aplikacji poprzez panel -* Daj odznake dla użytkownika +* 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 @@ -16,24 +16,11 @@ flex.badges.user.set(userId, badge_id, function(res){ }); {% endhighlight %} -* Pobierz dane o odznace i wyświetl ją dla uzytkownkia +* 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 be have object with badge_id, name, desc and image (url) + // you will have object with badge_id, name, desc and image (url) // console.log(badgeData) }); -{% endhighlight %} - -* Wygeneruj formularz płatności i pozwól użytkownikowi kupić przedmiot -{% highlight javascript %} -flex.payment.paypal.createFormView('my-div-id', 'Pay with PayPal'); -{% endhighlight %} - -* Pobierz status transakcji i przekaż przedmiot dla gracza. -{% highlight javascript %} -var cartId = flex.payment.cart.getId; -flex.payment.transactions.get(cartId, function(transaction){ - // give super item for User. -}) {% endhighlight %} \ No newline at end of file diff --git a/tutorial/integrations/flexpi/custom-data-logging.md b/tutorial/integrations/flexpi/custom-data-logging.md index 9df9f19..43fcc26 100644 --- a/tutorial/integrations/flexpi/custom-data-logging.md +++ b/tutorial/integrations/flexpi/custom-data-logging.md @@ -9,9 +9,9 @@ title: Custom data logging - Flexpi integration * 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 - }); +flex.stats('your defined app key', 'your value to log', function(res){ + // response with status and status message +}); {% endhighlight %} For example: diff --git a/tutorial/integrations/flexpi/login-user-with-social.md b/tutorial/integrations/flexpi/login-user-with-social.md index ea6f433..838f493 100644 --- a/tutorial/integrations/flexpi/login-user-with-social.md +++ b/tutorial/integrations/flexpi/login-user-with-social.md @@ -10,7 +10,7 @@ title: Log in a user with social - Flexpi integration {% highlight javascript %} flex.social.facebook.login(function(res){ - flex.social.facebook.getUser(function(userData){ +flex.social.facebook.getUser(function(userData){ console.log(userData); }); }); From 392905e7ca8106afe72a5b629dfc594a0a9dda6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Tue, 17 Apr 2012 19:38:40 +0300 Subject: [PATCH 17/19] Fix hightlithing --- tutorial/administrative/structure.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tutorial/administrative/structure.md b/tutorial/administrative/structure.md index cb02203..acda9fa 100644 --- a/tutorial/administrative/structure.md +++ b/tutorial/administrative/structure.md @@ -17,7 +17,7 @@ To clean up the code and files, in this case we need to use backbone.js as wrapp proposed structure tree: -``` +{% highlight %} -- src ---- components -> Crafty components files ---- entities -> Files with entities @@ -39,6 +39,6 @@ proposed structure tree: -- web ---- images -- index.html -> Game wrapper -``` +{% endhighlight %} You can find here (https://github.com/ahilles107/CraftyBoilerplate) a sample project that use CraftyBoilerplate. From eb267b7cd8aefba9f65bd6cd228e7b4ca32dd364 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Tue, 17 Apr 2012 19:42:08 +0300 Subject: [PATCH 18/19] highlight fix #2 --- tutorial/administrative/structure.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/administrative/structure.md b/tutorial/administrative/structure.md index acda9fa..aace858 100644 --- a/tutorial/administrative/structure.md +++ b/tutorial/administrative/structure.md @@ -17,7 +17,7 @@ To clean up the code and files, in this case we need to use backbone.js as wrapp proposed structure tree: -{% highlight %} +{% highlight html %} -- src ---- components -> Crafty components files ---- entities -> Files with entities From 7fefcc8f3935cc7c93fd4090b3a8eb08ec1991e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Miko=C5=82ajczuk?= Date: Wed, 18 Apr 2012 10:15:12 +0300 Subject: [PATCH 19/19] Update tutorial/integrations/flexpi/introduction.md --- tutorial/integrations/flexpi/introduction.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tutorial/integrations/flexpi/introduction.md b/tutorial/integrations/flexpi/introduction.md index 5903f7f..0a66ec4 100644 --- a/tutorial/integrations/flexpi/introduction.md +++ b/tutorial/integrations/flexpi/introduction.md @@ -5,7 +5,7 @@ title: Introduction - Flexpi integration # Introduction -Flexpi is a set of tools (services platform) for HTML5 games developers. +Flexpi [http://flexpi.com](http://flexpi.com) is a set of tools (services platform) for HTML5 games developers. Flexpi currently consists of four services: @@ -40,4 +40,4 @@ Each application has got "App id" - identification number. }); {% endhighlight %} -Thats all - your app is now connected with flexpi.com \ No newline at end of file +Thats all - your app is now connected with http://flexpi.com \ No newline at end of file