Merge branch 'adding-gif-examples' into 'master'

[FEAT][SDK-DOC]Adding gif examples

See merge request codingame/game-engine!165

Author: Builder

playground/graphics/graphics-2-entities.md

@@ -17,7 +17,9 @@ Every sprite, shape, text, etc are entities displayable in the viewer. They impl
 Circle circle = graphicEntityModule.createCircle()
 			.setRadius(50)
 			.setLineWidth(0)
-			.setFillColor(0x00FF00);
+			.setFillColor(0x00FF00)
+			.setX(70)
+			.setY(70);
 ```
 ## Moving a circle
 ```java
@@ -29,21 +31,34 @@ circle
 ### With a Curve
 ```java
 circle
-	.setX(player.getX(), Curve.LINEAR)
-	.setY(player.getY(), Curve.LINEAR);
+	.setX(player.getX(), Curve.EASE_IN_AND_OUT)
+	.setY(player.getY(), Curve.EASE_IN_AND_OUT);
 ```
+By default the `Curve.LINEAR` is used.
+
+It should look like this :
+![Example](resources/circles.gif)
+The first circle is not animated,
+the second is animated with the default curve
+and the last one is animated with the custom curve.
+
 ## Creating a group of sprites <a name="creating-a-group-of-sprites"></a>
 ```java
 Sprite planet1 = graphicEntityModule.createSprite()
-				.setImage("planet")
+				.setImage("planet0.png")
+				.setAnchorX(0.5)
+				.setAnchorY(0.5)
 				.setX(-20);
 Sprite planet2 = graphicEntityModule.createSprite()
-				.setImage("planet")
-				.setX(30);
+				.setImage("planet1.png")
+				.setAnchorX(0.5)
+				.setAnchorY(0.5)
+				.setX(30)
 				.setY(-10);
 Sprite planet3 = graphicEntityModule.createSprite()
-				.setImage("planet")
-				.setY(20);
+				.setImage("planet2.png")
+				.setAnchorX(0.5)
+				.setAnchorY(0.5);
 
 // The planets are around the point (960,540).
 Group system = graphicEntityModule.createGroup(planet1, planet2, planet3)
@@ -58,4 +73,6 @@ Group system = graphicEntityModule.createGroup(planet1, planet2, planet3)
 	planet3.setRotation(planet3.getRotation() + Math.PI / 16);
 
 	system.setRotation(system.getRotation() + Math.PI / 2);
-```
+```
+It should look like this :
+![Example](resources/planets.gif)

playground/graphics/graphics-3-states.md

@@ -39,6 +39,8 @@ graphicEntityModule.commitEntityState(0.9, circle);
 circle.setRadius(50);
 graphicEntityModule.commitEntityState(1, circle);
 ```
+It should look like this :
+![Example](resources/frames.gif)
 
 ## Animating several entities
 

playground/graphics/graphics-4-spritesheets.md

@@ -26,9 +26,24 @@ String[] seaweedSprites = graphicEntityModule.createSpriteSheetSplitter()
     .setImagesPerRow(4)
     .setName("seaweed")
     .split();
+
+//Creating an animation from the splitted spritesheet
+graphicEntityModule.createSpriteAnimation()
+    .setImages(seaweedSprites)
+    .setX(50)
+    .setY(50)
+    .setLoop(true);
+
+//Or a sprite from the 1st image of the spritesheet
+graphicEntityModule.createSprite()
+    .setImage(seaweedSprites[0])
+    .setX(250)
+    .setY(250);
 ```
 
-We can now use these images in Sprite entites as shown [here](graphics-2-entities.md#creating-a-group-of-sprites).
+It should look like this :
+![Example](resources/spritesheet.gif)
+
 
 ## Using JSON sprites resources as assets
 

playground/graphics/graphics-5-animations.md

@@ -9,10 +9,13 @@ graphicEntityModule.createSpriteAnimation()
     .setImages(heroSprites)
     .setX(hero.getX())
     .setY(hero.getY())
-    .setDuration(2000)
+    .setDuration(100)
     .setLoop(true)
     .setPlaying(true);
 ```
+It should look like this :
+![Example](resources/hero.gif)
+
 - `setImages(heroSprites)`: set a `String` array containing the filenames of the sprites.
 - `setX(hero.getX())`, `setY(hero.getY())`: set the position.
 - `setDuration(2000)`: set how long the whole animation takes to be played (in milliseconds).

playground/graphics/graphics-text.md

@@ -14,6 +14,8 @@ graphicEntityModule.createText("Hello World")
     .setFontSize(50)
     .setFillColor(0x000000); // Setting the text color to black
 ```
+![Example](resources/text1.png)
+
 The only font family values that will work are: 
 "Lato" and those that are available by default on all browsers.
 If the browser does not recognise the font family, it will be displayed in a fallback font chosen by the browser.
@@ -25,11 +27,12 @@ This class is used to display text using a bitmap font in your assets folder.
 ```java
 graphicEntityModule.createBitmapText()
     .setText("Hello World")
-    .setFontFamily("myCustomFont")
+    .setFont("myCustomFont")
     // Assuming that you have a working 'myCustomFont.fnt' and 'myCustomFont.png' in your assets folder
     .setFontSize(50)
     .setTint(0xff0000); // Tinting it in red
 ```
+![Example](resources/text-2.png)
 
 Extra tips :
 - A little help to turn fonts into bitmap fonts : http://kvazars.com/littera/