├── .gitignore
├── Gruntfile.js
├── README.md
├── README_zh_CN.md
├── bower.json
├── examples
    ├── 01_helloWorld.html
    ├── 02_basicDisplayElements.html
    ├── 03_masking.html
    ├── 04_bouncingBall.html
    ├── 05_keyboardMovement.html
    ├── 06_pointerProperties.html
    ├── 07_parentsAndChildren.html
    ├── 08_scenesAndTweening.html
    ├── 09_keyframeAnimation.html
    ├── 10_keyframeAnimationImages.html
    ├── 11_textureAtlasAnimation.html
    ├── 12_animationStates.html
    ├── 13_particles.html
    ├── 14_particleEmitter.html
    ├── 15_tilingSprite.html
    ├── 16_buttons.html
    ├── 17_textureAtlasButton.html
    ├── 18_sounds.html
    ├── 19_dragAndDrop.html
    ├── 20_tweening.html
    ├── 21_followPaths.html
    ├── 22_shootingBullets.html
    ├── 23_spaceshipVehicle.html
    ├── 24_tankVehicle.html
    ├── 25_pointCollision.html
    ├── 26_circleCollision.html
    ├── 27_rectangleCollision.html
    ├── 28_rectangleCircleCollision.html
    ├── 29_pegs.html
    ├── 30_bricks.html
    ├── 31_marbles.html
    ├── 32_blockRectangles.html
    ├── 33_platforms.html
    ├── 34_breakout.html
    ├── 35_tiledEditorSupport.html
    ├── 36_scrollingWorldCamera.html
    ├── fonts
    │   ├── PetMe64.ttf
    │   └── puzzler.otf
    ├── images
    │   ├── animals.json
    │   ├── animals.png
    │   ├── blixyiiTileset.png
    │   ├── blixyiiUI.png
    │   ├── bloxyee
    │   │   ├── ball.png
    │   │   ├── bloxyee.json
    │   │   ├── bloxyee.png
    │   │   ├── blue.png
    │   │   ├── down.png
    │   │   ├── green.png
    │   │   ├── orange.png
    │   │   ├── over.png
    │   │   ├── paddle.png
    │   │   ├── red.png
    │   │   ├── star.png
    │   │   ├── title.png
    │   │   ├── up.png
    │   │   └── violet.png
    │   ├── button.png
    │   ├── button2.json
    │   ├── button2.png
    │   ├── buttonFairy.png
    │   ├── buttonFairy
    │   │   ├── 0.png
    │   │   ├── 1.png
    │   │   ├── 2.png
    │   │   └── 3.png
    │   ├── cat.png
    │   ├── fairy.json
    │   ├── fairy.png
    │   ├── fantasy.png
    │   ├── forest.png
    │   ├── hedgehog.png
    │   ├── marbles.png
    │   ├── platforms.png
    │   ├── rocket.png
    │   ├── star.png
    │   ├── tiger.png
    │   ├── tile.png
    │   ├── timeBombPanic.png
    │   └── walkcycle.png
    ├── maps
    │   ├── fantasy.json
    │   ├── fantasy.tmx
    │   ├── timeBombPanic.json
    │   └── timeBombPanic.tmx
    └── sounds
    │   ├── bounce.wav
    │   ├── explosion.wav
    │   ├── music.wav
    │   └── shoot.wav
├── ga.js
├── package.json
├── plugins.js
└── tutorials
    ├── 01_treasureHunter.html
    ├── 02_treasureHunterImages.html
    ├── 03_treasureHunterAtlas.html
    ├── 04_alienArmada.html
    ├── 05_flappyFairy.html
    ├── fonts
        └── emulogic.ttf
    ├── images
        ├── alienArmada.json
        ├── alienArmada.png
        ├── blob.png
        ├── door.png
        ├── dungeon.png
        ├── explorer.png
        ├── flappyFairy
        │   ├── 0.png
        │   ├── 1.png
        │   ├── 2.png
        │   ├── 3.png
        │   ├── down.png
        │   ├── finish.png
        │   ├── flappyFairy.json
        │   ├── flappyFairy.png
        │   ├── green.png
        │   ├── greenBlock.png
        │   ├── over.png
        │   ├── pink.png
        │   ├── sky.png
        │   ├── title.png
        │   ├── up.png
        │   ├── violet.png
        │   └── yellow.png
        ├── treasure.png
        ├── treasureHunter.json
        └── treasureHunter.png
    ├── screenshots
        ├── 01.png
        ├── 02.png
        ├── 03.png
        ├── 04.png
        ├── 05.png
        ├── 06.png
        ├── 07.png
        ├── 08.png
        ├── 09.png
        ├── 10.png
        ├── 11.png
        ├── 12.png
        ├── 13.png
        ├── 14.png
        ├── 15.png
        ├── 16.png
        ├── 17.png
        ├── 18.png
        ├── 19.png
        ├── 20.png
        ├── 21.png
        ├── 22.png
        ├── 23.png
        ├── 24.png
        ├── 25.png
        ├── 26.png
        ├── 27.png
        ├── 28.png
        ├── 29.png
        ├── gaLogo_Square.png
        └── logoAndIllustration.png
    ├── sounds
        ├── chimes.wav
        ├── explosion.mp3
        ├── music.mp3
        └── shoot.mp3
    └── texturePackerFiles
        └── flappyFairy.tps


/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | *.min.js
3 | *.map
4 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 |     grunt.loadNpmTasks('grunt-contrib-uglify');
 3 |     grunt.initConfig({
 4 |         uglify: {
 5 |             options: {
 6 |                 sourceMap: true
 7 |             },
 8 |             target1: {
 9 |                 src: 'ga.js',
10 |                 dest: 'ga.min.js'
11 |             },
12 |             target2: {
13 |                 src: 'plugins.js',
14 |                 dest: 'plugins.min.js'
15 |             }
16 |         }
17 |     });
18 |     grunt.registerTask('default', ['uglify']);
19 | };
20 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "ga",
 3 | 	"dependencies": {},
 4 | 	"devDependencies": {},
 5 | 	"main": [
 6 | 		"ga.js",
 7 | 		"plugins.js"
 8 | 	],
 9 | 	"ignore": [
10 | 		"**/.*",
11 | 		"tutorials",
12 | 		"examples",
13 | 		"src",
14 | 		"Gruntfile.js"
15 | 	]
16 | }
17 | 


--------------------------------------------------------------------------------
/examples/01_helloWorld.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Hello, world!</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script>
 7 | 
 8 | //Create a new GA instance, and start it.
 9 | var g = ga(256, 256, setup);
10 | g.start();
11 | 
12 | //A `setup` function that will run only once.
13 | //Use it for initialization tasks
14 | function setup() {
15 |   console.log("setup");
16 | 
17 |   //Change the state to `play`
18 |   g.state = play;  
19 | }
20 | 
21 | //The `play` function will run in a loop
22 | function play() {
23 |   console.log("play");
24 | }
25 | 
26 | </script>
27 | </body>
28 | 
29 | 


--------------------------------------------------------------------------------
/examples/02_basicDisplayElements.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Basic display elements</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | Learn all the basics you need to know to get
 11 | started quickly using Ga.
 12 | 
 13 | This file requires these convenience functions from `plugins.js`:
 14 | `followEase`
 15 | `followConstant`
 16 | `angle`
 17 | `rotatePoint`
 18 | */
 19 | 
 20 | //Create a new GA instance, and start it.
 21 | //Pre-load images in the array.
 22 | var g = ga(
 23 |   256, 256, setup, 
 24 |   [
 25 |     "images/platforms.png",
 26 |     "images/rocket.png",
 27 |     "fonts/puzzler.otf",
 28 |     "fonts/PetMe64.ttf",
 29 |     "images/animals.json"
 30 |   ]
 31 | );
 32 | g.start();
 33 | 
 34 | //Declare global sprites, objects, and variables
 35 | //that you want to access in all the game functions and states
 36 | var box, ball, line, message, cat, 
 37 |     pathA, pathB, rocket, star,
 38 |     pointerDisplay;
 39 | 
 40 | //A `setup` function that will run only once.
 41 | //Use it for initialization tasks
 42 | function setup() {
 43 | 
 44 |   //Set an optional fps for the game.
 45 |   //The frame rate will default to 60 fps is you don't set it
 46 |   //g.fps = 12;
 47 |   //Optionally hide the mouse pointer
 48 |   //g.hidePointer();
 49 |   //Optionally change the background color
 50 |   //g.backgroundColor = "DarkGray";
 51 |   //`rectangle` arguments: 
 52 |   //width, height, fillColor, strokeColor, lineWidth, x, y
 53 | 
 54 |   box = g.rectangle(32, 32, "cyan", "white", 4, 32, 32);
 55 |   box.rotation = 0.5;
 56 |   //You can optionally set the `pivotX` and `pivotY` properties of any
 57 |   //sprite to set the point around which the sprite should rotate.
 58 |   //0.5 is the default center point. Assign any percentage between
 59 |   //0.01 and 0.99 to shift the center of rotation.
 60 |   //box.pivotX = 0.25;
 61 |   //box.pivotY = 0.25;
 62 |   //`circle` argumenets:
 63 |   //diameter, fillstyle, stroketyle, lineWidth, x, y 
 64 | 
 65 |   ball = g.circle(42, "Plum", "PowderBlue", 8, 95, 45);
 66 |   //`text` arguments:
 67 |   //content, font, fillStyle, x, y
 68 |   //The font family name will be the same as the font's file name
 69 | 
 70 |   message = g.text("Hello World!", "14px puzzler", "white");
 71 |   message.x = 80;
 72 |   message.y = 10;
 73 | 
 74 |   //Create a sprite from a single image by supplying the 
 75 |   //image name as the first argument
 76 |   rocket = g.sprite("images/rocket.png");
 77 | 
 78 |   /*
 79 |   Use the `putCenter` convenience method to put the rocket
 80 |   in the center of the stage. The stage and all sprites can use
 81 |   `put` methods like this.
 82 |   `putCenter` arguments:
 83 |   sprite, xOffset, yOffset
 84 |   */
 85 | 
 86 |   g.stage.putCenter(rocket, 0, 40);
 87 | 
 88 |   /*
 89 |   You can also use `putLeft`, `putTop`, `putRight` and `putBottom`
 90 |   to precisely position a sprite around any other sprite.
 91 |   */
 92 |   
 93 |   //Optionally change the rocket's `width` and `height` 
 94 |   rocket.width = 50;
 95 |   rocket.height = 50;
 96 | 
 97 |   /*
 98 |   You can make a sprite using a frame JSON tileset file in 
 99 |   Texture Packer format. Just load the JSON file that contains the
100 |   frame and supply the frame name in the sprite's argument. (The
101 |   tileset image file will be loaded automatically when the JSON file
102 |   loads)
103 |   */
104 | 
105 |   tiger = g.sprite("tiger.png");
106 |   //Use `setPosition` to set the sprite's `x` and `y` values 
107 |   //with one line of code
108 | 
109 |   tiger.setPosition(10, 190);
110 |   //Use `scaleX` and `scaleY` to scale a sprite proportionately.
111 |   //tiger.scaleX = 0.5;
112 |   //tiger.scaleY = 0.5;
113 | 
114 |   tiger.width = 42;
115 |   tiger.height = 42;
116 | 
117 |   /*
118 |   You can access the tiger's tileset image like this:
119 |   
120 |       var tileset = g.image("images/animals.png");
121 |   
122 |   You can access the JSON data file like this:
123 |   
124 |       var json = g.json("images/animals.json");
125 |   You can access the specific JSON data for a tileset
126 |   frame like this:
127 |   
128 |       var frameData = g.json("tiger.png"));
129 |   */
130 | 
131 |   //You can also make a sprite from a tileset image by
132 |   //supplying a `frame` object as an argument to the sprite. 
133 |   //`frame` arguments:
134 |   //sourceImage, sourceX, sourceY, sourceWidth, sourceHeight
135 |   var starFrame = g.frame("images/platforms.png", 32, 0, 32, 32);
136 |   star = g.sprite(starFrame);
137 | 
138 |   //You can add `radius` and `diameter` properties
139 |   //to a sprite by setting its `circular` property
140 |   //to `true`.
141 |   star.circular = true;
142 |   console.log("star.radius: " + star.radius);
143 |   console.log("star.diameter: " + star.diameter);
144 | 
145 |   //Set `circular` back to `false` if you want to remove
146 |   //the `radius` and `diameter` properties.
147 |   //The game has a `pointer` object with a `x` and `y` property
148 |   //that tells you the position of the mouse or touch pointer.
149 |   //Here's how to display the pointer position with a `text` sprite:
150 |   pointerDisplay = g.text("", "8px PetMe64", "white");
151 |   pointerDisplay.x = 10;
152 |   pointerDisplay.y = 235;
153 | 
154 |   //Every time you create a sprite it's added to the
155 |   //`stage` object's `children` array.
156 |   console.log("stage.children: " + g.stage.children);
157 | 
158 |   //Make any sprite interactive by setting its 
159 |   //`interactive` property to `true`. You can then assign
160 |   //`press` and `release` actions to sprites. You can also
161 |   //access its `state` and `action` properties.
162 |   ball.interactive = true;
163 |   ball.press = function() {
164 | 
165 |     //An array of color names
166 |     var colors = ["Gold", "Lavender", "Crimson", "DarkSeaGreen"];
167 | 
168 |     //Set the ball's `fillStyle` and `strokeStyle` to a random color
169 |     //the `randomInt` method
170 |     ball.fillStyle = colors[g.randomInt(0, 3)];
171 |     ball.strokeStyle = colors[g.randomInt(0, 3)];
172 |   };
173 | 
174 |   //`line` arguments:
175 |   //strokeStyle, lineWidth, ax, ay, bx, by
176 |   line = g.line("Yellow", 4, 162, 52, 220, 94);
177 | 
178 |   //We're going to make the line's start and end points
179 |   //rotate in space. The line will need two new angle properties 
180 |   //to help us do this. both are initialized to 0
181 |   line.angleA = 0;
182 |   line.angleB = 0;
183 | 
184 |   //Change the game state to `play`
185 |   g.state = play;  
186 | }
187 | 
188 | //The `play` function will run in a loop
189 | function play() {
190 |   //Make the box rotate
191 |   box.rotation += 0.01;
192 | 
193 |   //Make the star ease towards the pointer.
194 |   //`followEase` arguments: follower, leader, speed
195 |   g.followEase(star, g.pointer, 0.1);
196 | 
197 |   //Alternatively, use the `followConstant` method if you want to 
198 |   //make a sprite follow at a constant speed. The third argument
199 |   //is the speed, which is the pixels/frame that the follower
200 |   //will move
201 |   //g.followConstant(star, g.pointer, 3);
202 | 
203 |   //Make the rocket rotate towards the star
204 |   //`angle` returns the angle between two sprites, in radians.
205 |   rocket.rotation = g.angle(rocket, star);
206 | 
207 |   //Make the star invisible if the pointer is "over"
208 |   //the ball or being pressed "down" on it
209 |   if (ball.state === "over" || ball.state === "down") {
210 |     star.visible = false;
211 |   } else {
212 |     star.visible = true;
213 |   }
214 | 
215 |   //Display the position of the pointer
216 |   pointerDisplay.content 
217 |     = "pointer.x: " + g.pointer.x + " "
218 |     + "pointer.y: " + g.pointer.y;
219 | 
220 |   //Make the line's `ax` and `ay` points rotate clockwise around
221 |   //point 162, 52. Use the `rotateAroundPoint` method to help you do this. 
222 |   //`rotatePoint` returns an object with `x` and `y` properties
223 |   //containing the point's new rotated position. Supply different
224 |   //rotationRadiusX/Y arguments if you want the rotation to be ellipical.
225 |   //`rotatePoint` arguments:
226 |   //pointX, pointY, rotationRadiusX, rotationRadiusY, angleOfRotation
227 |   line.angleA += 0.02;
228 |   var rotatingA = g.rotateAroundPoint(162, 52, 10, 10, line.angleA);
229 |   line.ax = rotatingA.x;
230 |   line.ay = rotatingA.y;
231 | 
232 |   //Make the line's `bx` and `by` point rotate counter
233 |   //clockwise around point 222, 94
234 |   line.angleB -= 0.03;
235 |   var rotatingB = g.rotateAroundPoint(220, 94, 10, 10, line.angleB);
236 |   line.bx = rotatingB.x;
237 |   line.by = rotatingB.y;
238 | }
239 | </script>
240 | </body>
241 | 


--------------------------------------------------------------------------------
/examples/03_masking.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Masking</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script src="../plugins.js"></script>
 7 | <script>
 8 | 
 9 | //Learn how to use square and circle shapes as a mask for other
10 | //sprites.
11 | 
12 | //Create a new GA instance, and start it.
13 | //Pre-load a texture atlas called `animals.json` from the `images`
14 | //folder.
15 | var g = ga( 256, 256, setup, ["images/animals.json"]);
16 | g.start();
17 | 
18 | //Declare global sprites, objects, and variables
19 | //that you want to access in all the game functions and states
20 | 
21 | var cat, hedgehog, roundMask, squareMask;
22 | 
23 | //A `setup` function that will run only once.
24 | //Use it for initialization tasks.
25 | function setup() {
26 | 
27 |   //1. Mask the cat sprite with a square shaped mask
28 | 
29 |   //Create a square shaped mask for the cat. Do this by creating
30 |   //an ordinary rectangle sprite, and setting its `mask` property
31 |   //to `true`.
32 |   squareMask = g.rectangle(64, 64);
33 |   squareMask.mask = true;
34 | 
35 |   //Create a `cat` sprite using a texture atlas frame.
36 |   cat = g.sprite("cat.png");
37 | 
38 |   //Add the cat as child of the mask
39 |   squareMask.addChild(cat);
40 | 
41 |   //Position the mask in the center of the stage, but offset it
42 |   //64 pixels to the left.
43 |   g.stage.putCenter(squareMask, -64);
44 | 
45 |   //2. Mask the hedgehog sprite with a round shaped mask
46 | 
47 |   //Create a circle shape and set its `mask` property to `true`.
48 |   roundMask = g.circle(128);
49 |   roundMask.mask = true;
50 | 
51 |   //Create a `hedgehog` sprite from the texture atlas.
52 |   hedgehog = g.sprite("hedgehog.png");
53 | 
54 |   //Add the hedgehog as child of the mask
55 |   roundMask.addChild(hedgehog);
56 | 
57 |   //Center the hedgehog in the middle of the mask
58 |   roundMask.putCenter(hedgehog);
59 | 
60 |   //Center the mask on the stage, but offset it 64 pixels to the right.
61 |   g.stage.putCenter(roundMask, 64);
62 | 
63 |   //Change the game state to `play`.
64 |   g.state = play;  
65 | }
66 | 
67 | //The `play` function will run in a loop... but it doesn't do anything
68 | //in this example
69 | function play() {
70 | 
71 |   //Add any optional game loop code here.
72 | }
73 | 
74 | </script>
75 | </body>
76 | 
77 | 


--------------------------------------------------------------------------------
/examples/04_bouncingBall.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Bouncing ball</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | Learn how to make a ball bounce around the canvas
 11 | with gravity, friction and mass.
 12 | 
 13 | This file requires these convenience functions from `plugins.js`:
 14 | `randomInt`
 15 | `contain``
 16 | */
 17 | 
 18 | //Create a new GA instance, and start it.
 19 | //Pre-load a texture atlas called `animals.json` from the `images`
 20 | //folder.
 21 | var g = ga(256, 256, setup);
 22 | g.start();
 23 | 
 24 | //Declare global sprites, objects, and variables
 25 | //that you want to access in all the game functions and states.
 26 | //In this example there's just one: `ball`.
 27 | 
 28 | var ball;
 29 | 
 30 | //A `setup` function that will run only once.
 31 | //Use it for initialization tasks.
 32 | function setup() {
 33 | 
 34 |   //Make a ball sprite.
 35 |   //circle arguments: diameter, fillStyle, strokeStyle, lineWidth, x, y
 36 |   ball = g.circle(32, "white", "none", 2, 96, 128); 
 37 | 
 38 |   //Set the ball's velocity to 0
 39 |   ball.vx = g.randomInt(5, 15);
 40 |   ball.vy = g.randomInt(5, 15);
 41 | 
 42 |   //Physics properties
 43 |   ball.gravity = 0.3;
 44 |   ball.frictionX = 1; 
 45 |   ball.frictionY = 0;
 46 |   ball.mass = 1.3;
 47 | 
 48 |   //Acceleration and friction properties
 49 |   ball.accelerationX = 0.2;
 50 |   ball.accelerationY = -0.2;
 51 |   ball.frictionX = 1;
 52 |   ball.frictionY = 1;
 53 | 
 54 |   //Change the game state to `play`.
 55 |   g.state = play;  
 56 | }
 57 | 
 58 | //The `play` function will run in a loop
 59 | function play() {
 60 | 
 61 |   //Apply gravity to the vertical velocity
 62 |   ball.vy += ball.gravity;
 63 |   
 64 |   //Apply friction. ball.frictionX will be 0.96 if the ball is
 65 |   //on the ground, and 1 if it's in the air
 66 |   ball.vx *= ball.frictionX;
 67 |   
 68 |   //Move the ball by applying the new calculated velocity
 69 |   //to the ball's x and y position
 70 |   ball.x += ball.vx;
 71 |   ball.y += ball.vy;
 72 |   
 73 |   //Use Ga's custom `contain` method to bounce the ball 
 74 |   //off the canvas edges and slow it to a stop:
 75 | 
 76 |   //1. Use the `contain` method to create a `collision` object 
 77 |   //that checks for a collision between the ball and the
 78 |   //rectangular area of the stage. Setting `contain`'s 3rd
 79 |   //argument to `true` will make the ball bounce off the 
 80 |   //stage's edges.
 81 |   var collision = g.contain(ball, g.stage.localBounds, true);
 82 | 
 83 |   //2. If the collision object has a value of "bottom", it means
 84 |   //the ball has hit the bottom of the stage. In that case, use
 85 |   //friction to slow it down.
 86 |   if (collision === "bottom") {
 87 | 
 88 |     //Slow the ball down if it hits the bottom of the stage.
 89 |     ball.frictionX = 0.96;
 90 |   } else {
 91 | 
 92 |     //If the ball isn't touching the bottom of the stage, it must
 93 |     //still be in the air. In that case,
 94 |     //give the ball a `frictionX` value of `1`, which essentially
 95 |     //means "don't apply friction" so that it moves freely.
 96 |     ball.frictionX = 1;
 97 |   }
 98 | 
 99 |   //You can optionally write the bounce code manually using the following 4 if
100 |   //statements.
101 |   //These if statements all work in the same way:
102 |   //If the ball crosses the canvas boundaries:
103 |   //1. It's repositioned inside the canvas.
104 |   //2. Its velocity is reversed to make it bounce, with
105 |   //the mass subtracted so that it looses force over time.
106 |   //3. If it's on the ground, friction is added to slow it down
107 |   /*
108 |   //Left
109 |   if (ball.x < 0) {
110 |     ball.x = 0;
111 |     ball.vx = -ball.vx / ball.mass;
112 |   }
113 |   //Right
114 |   if (ball.x + ball.diameter > canvas.width) {
115 |     ball.x = canvas.width - ball.diameter;
116 |     ball.vx = -ball.vx / ball.mass;
117 |   }
118 |   //Top
119 |   if (ball.y < 0) {
120 |     ball.y = 0;
121 |     ball.vy = -ball.vy / ball.mass;
122 |   }
123 |   //Bottom
124 |   if(ball.y + ball.diameter > canvas.height) {
125 | 
126 |     //Position the ball inside the canvas
127 |     ball.y = canvas.height - ball.diameter;
128 | 
129 |     //Reverse its velocity to make it bounce, and dampen the effect with mass
130 |     ball.vy = -ball.vy / ball.mass;
131 | 
132 |     //Add some friction if it's on the ground
133 |     ball.frictionX = 0.96;
134 |   } else {
135 | 
136 |     //Remove friction if it's not on the ground
137 |     ball.frictionX = 1;
138 |   }
139 |   */
140 | 
141 |   //Add any extra optional game loop code here.
142 | }
143 | 
144 | </script>
145 | </body>
146 | 
147 | 
148 | 


--------------------------------------------------------------------------------
/examples/05_keyboardMovement.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Keyboard movement</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | This file requires these convenience functions from `plugins.js`:
 11 | `move`
 12 | `contain`
 13 | `keyControlFourWay`
 14 | */
 15 | 
 16 | //Create a new GA instance, and start it.
 17 | //Pre-load images in the array.
 18 | 
 19 | var g = ga(256, 256, setup, ["images/platforms.png"]);
 20 | g.start();
 21 | 
 22 | //Declare global sprites, objects, and variables
 23 | //that you want to access in all the game functions and states
 24 | 
 25 | var cat, message;
 26 | 
 27 | //A `setup` function that will run only once.
 28 | //Use it for initialization tasks
 29 | function setup() {
 30 | 
 31 |   //Make the background white and add a border to the canvas
 32 |   g.backgroundColor = "white";
 33 |   g.canvas.style.border = "1px black dashed";
 34 | 
 35 |   //Make a sprite from a tileset
 36 |   cat = g.sprite(g.frame("images/platforms.png", 32, 32, 32, 32));
 37 | 
 38 |   //Center the cat
 39 |   g.stage.putCenter(cat);
 40 | 
 41 |   //The above code is the equivalent to this:
 42 |   //cat.x = g.canvas.width / 2 - cat.halfWidth;
 43 |   //cat.y = g.canvas.height / 2 - cat.halfHeight;
 44 | 
 45 |   /*
 46 |   Use the `keyControlFourWay` convenience method to make the cat
 47 |   move up, right, down and left at a speed of 2 pixels per second when
 48 |   the arrow keys are pressed. It also adds a `direction` property to
 49 |   the sprite which is a string that tells you the direction the
 50 |   sprite is moving in: "up", "right", "down" or "left"
 51 |   `keyControlFourWay` arguments:
 52 |   sprite, speed, upCode, rightCode, downCode, leftCode
 53 |   (You can remember the order of the key codes because they're listed
 54 |   clockwise from top.)
 55 |   */
 56 | 
 57 |   g.fourKeyController(cat, 2, 38, 39, 40, 37);
 58 | 
 59 |   /*
 60 |   That's quick and easy, but for most games you'll need a lot more
 61 |   control over how your keys are assigned and what they do.
 62 |   The game engine has a built-in `key` object with keyboard bindings
 63 |   to the arrow keys and space bar. Access them like this:
 64 |   `key.leftArray`, `key.rightArrow`, `key.upArrow`, `key.downArrow`,
 65 |   `key.space`. All these keys have `press` and
 66 |   `release` methods that you can define. Here's how to create you own
 67 |   custom key:
 68 | 
 69 |       var customKey = g.keyboard(asciiCode);
 70 | 
 71 |   Here's how to customize the `press` and `release` methods of   
 72 |   Ga's pre-defined arrow keys to control an on-screen game character: 
 73 |   */
 74 | 
 75 |   /*
 76 |   //Assign key `press` methods
 77 |   g.key.leftArrow.press = function() {
 78 |     //Change the cat's velocity when the key is pressed
 79 |     cat.vx = -2;
 80 |     cat.vy = 0;
 81 |     cat.direction = "left";
 82 |   };
 83 |   g.key.leftArrow.release = function() {
 84 |     //If the left arrow has been released, and the right arrow isn't down,
 85 |     //and the cat isn't moving vertically: 
 86 |     //Stop the cat
 87 |     if (!g.key.rightArrow.isDown && cat.vy === 0) {
 88 |       cat.vx = 0;
 89 |     }
 90 |   };
 91 |   g.key.upArrow.press = function() {
 92 |     cat.vy = -2;
 93 |     cat.vx = 0;
 94 |     cat.direction = "up";
 95 |   };
 96 |   g.key.upArrow.release = function() {
 97 |     if (!g.key.downArrow.isDown && cat.vx === 0) {
 98 |       cat.vy = 0;
 99 |     }
100 |   };
101 |   g.key.rightArrow.press = function() {
102 |     cat.vx = 2;
103 |     cat.vy = 0;
104 |     cat.direction = "right";
105 |   };
106 |   g.key.rightArrow.release = function() {
107 |     if (!g.key.leftArrow.isDown && cat.vy === 0) {
108 |       cat.vx = 0;
109 |     }
110 |   };
111 |   g.key.downArrow.press = function() {
112 |     cat.vy = 2;
113 |     cat.vx = 0;
114 |     cat.direction = "down";
115 |   };
116 |   g.key.downArrow.release = function() {
117 |     if (!g.key.upArrow.isDown && cat.vx === 0) {
118 |       cat.vy = 0;
119 |     }
120 |   };
121 |   */
122 | 
123 |   //Have a look at the `animationStates` for details on
124 |   //assigning your own custom key bindings
125 | 
126 |   //Add some text to display messages
127 |   message = g.text("Use the arrow keys to move...", "16px sans-serif", "black");
128 |     
129 |   //Change the state to `play`
130 |   g.state = play;  
131 | }
132 | 
133 | //The `play` function will run in a loop
134 | function play() {
135 | 
136 |   /*
137 |   Use the `move` convenience method to move the cat. This just updates
138 |   the cat's `x` and `y` position with its velocity (`vx` and `vy`)
139 |   each frame. If you have a lot of sprites inside an array, you can
140 |   move them all the same time by supply the array as an argument, like this:
141 | 
142 |       g.move(arrayOfSprites);
143 | 
144 |   Or, just move one sprite at a time, like this:
145 |   */
146 | 
147 |   g.move(cat);
148 | 
149 |   //Of course you can also move a sprite the good old-fashioned way if
150 |   //really want to!
151 |   //cat.x += cat.vx;
152 |   //cat.y += cat.vy;
153 | 
154 |   //If the cat is moving, display its direction
155 |   if (Math.abs(cat.vx) > 0 || Math.abs(cat.vy) > 0) {
156 |     message.content = "The cat is going: " + cat.direction;
157 |   } else {
158 |     message.content = "Use the arrow keys to move...";
159 |   }
160 | 
161 |   /*
162 |   Contain the cat inside the canvas.
163 |   'contain` constrains the sprite's movement to a rectangular space
164 |   defined by the `localBounds` property of any object.
165 |   (`localBounds` returns an object with `x`, `y`, `width` and `height`
166 |   properties). 
167 |   If the sprite hits the edges of
168 |   that space, `contain` returns a useful a string that will tell you which
169 |   side the sprite hit: "left", "right". "top" or "bottom".
170 |   */
171 | 
172 |   var catHitsEdges = g.contain(cat, g.stage.localBounds);
173 | 
174 |   //Display the edge of canvas that the cat hit
175 |   if (catHitsEdges) {
176 |     message.content 
177 |       = "The cat hit the " + catHitsEdges + " of the canvas";
178 |   }
179 | }
180 | 
181 | </script>
182 | </body>
183 | 


--------------------------------------------------------------------------------
/examples/06_pointerProperties.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Pointer properties</title>
 4 | <body>
 5 | 
 6 | <!-- Create an `output` HTML element -->
 7 | <p id="output"></p>
 8 | 
 9 | <script src="../ga.js"></script>
10 | <script src="../plugins.js"></script>
11 | <script>
12 | 
13 | /*
14 | Learn how to make use and access Ga's built in universal `pointer`
15 | that works with both touch and the mouse.
16 | */
17 | 
18 | //Create a new GA instance, and start it.
19 | //Pre-load a texture atlas called `animals.json` from the `images`
20 | //folder.
21 | var g = ga(256, 256, setup);
22 | g.start();
23 | 
24 | //Declare global sprites, objects, and variables
25 | //that you want to access in all the game functions and states.
26 | 
27 | var output;
28 | 
29 | //A `setup` function that will run only once.
30 | //Use it for initialization tasks.
31 | function setup() {
32 | 
33 |   //Get a reference to the output <p> tag 
34 |   output = document.querySelector("p");
35 | 
36 |   //Add a custom `press` method
37 |   g.pointer.press = function(){console.log("The pointer was pressed");}
38 | 
39 |   //Add a custom `release` method
40 |   g.pointer.release = function(){console.log("The pointer was released");}
41 | 
42 |   //Add a custom `tap` method
43 |   g.pointer.tap = function(){console.log("The pointer was tapped");}
44 | 
45 |   //Change the game state to `play`.
46 |   g.state = play;  
47 | }
48 | 
49 | //The `play` function will run in a loop
50 | function play() {
51 |  
52 |   //Display the pointer properties in the 
53 |   //HTML <p> tag called `output`
54 |   output.innerHTML
55 |     = "Pointer properties: " + "<br>"
56 |     + "pointer.x: " + g.pointer.x + "<br>"
57 |     + "pointer.y: " + g.pointer.y + "<br>"
58 |     + "pointer.isDown: " + g.pointer.isDown + "<br>"
59 |     + "pointer.isUp: " + g.pointer.isUp + "<br>"
60 |     + "pointer.tapped: " + g.pointer.tapped
61 |     + "<br><br>"
62 |     + "Open the console window to see the result of the `press`, " 
63 |     + "`release` and `tap` methods.";
64 | 
65 |   //Add any extra optional game loop code here.
66 | }
67 | 
68 | </script>
69 | </body>
70 | 
71 | 
72 | 
73 | 


--------------------------------------------------------------------------------
/examples/07_parentsAndChildren.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Parents and children</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | This file requires these convenience functions from `plugins.js`:
 11 | `move`
 12 | `contain`
 13 | `rotateSprite`
 14 | */
 15 | 
 16 | //Create a new GA instance, and start it.
 17 | //Pre-load images in the array.
 18 | 
 19 | var g = ga(256, 256, setup, ["images/platforms.png"]);
 20 | g.start();
 21 | 
 22 | //Declare global sprites, objects, and variables
 23 | //that you want to access in all the game functions and states
 24 | 
 25 | var cat, star, square, message, star, ball, line, 
 26 |     localMessage, globalMessage, collisionMessage;
 27 | 
 28 | //A `setup` function that will run only once.
 29 | //Use it for initialization tasks
 30 | function setup() {
 31 | 
 32 |   /*
 33 |   This example illustrates how you can use `addChild` and
 34 |   `removeChild` to make sprites the children of other sprites.
 35 |   All sprites have local and global x and y coordinates. The local
 36 |   coordinates, `x` and `y`, are relative to the top left corner of the
 37 |   sprite's parent. The global coordinates, `gx` and `gy` are relative
 38 |   to the top left corner of the `stage`. (The `stage` is the root
 39 |   container that contains all the sprites in the game.)
 40 |   */
 41 | 
 42 |   //Make the background white and add a border to the canvas
 43 |   g.backgroundColor = "white";
 44 |   g.canvas.style.border = "1px black dashed";
 45 | 
 46 |   //Make a square, position it, and give it a drop shadow
 47 |   square = g.rectangle(128, 128, "lightblue", "black", 1);
 48 |   square.shadow = true;
 49 | 
 50 |   //Use the stage's `putCenter` method to put the square
 51 |   //in the center of the stage. You can also use `putTop`,
 52 |   //`putRight`, `putBottom` and `putLeft`. If you want to offset
 53 |   //the position, use x and y offset values as the second and third
 54 |   //arguments: `sprite.putTop(anySprite, -10, -5)` 
 55 |   g.stage.putCenter(square);
 56 | 
 57 |   //Make the cat sprite from a tileset
 58 |   cat = g.sprite(g.frame("images/platforms.png", 32, 32, 32, 32));
 59 |   cat.shadow = true;
 60 | 
 61 |   //Control the cat with the keyboard
 62 |   g.fourKeyController(cat, 2, 38, 39, 40, 37);
 63 | 
 64 |   //Add the cat as a child of the square, and put it at the bottom of
 65 |   //the square
 66 |   square.addChild(cat);
 67 |   square.putBottom(cat, 0, -cat.height);
 68 | 
 69 |   //Create some text that we'll use to display the cat's local position
 70 |   localMessage = g.text("", "11px sans-serif", "black");
 71 | 
 72 |   //Add the text as a child of the square
 73 |   square.addChild(localMessage);
 74 | 
 75 |   //Use the text's local `x` and local `y` values to set its top left
 76 |   //corner position relative to the square's top left corner
 77 |   localMessage.x = 4;
 78 |   localMessage.y = 2;
 79 | 
 80 |   //Make a star sprite and add it as a child of the cat
 81 |   star = g.sprite(g.frame("images/platforms.png", 32, 0, 32, 32));
 82 | 
 83 |   //Scale the star's size down to 50%
 84 |   star.scaleX = 0.5;
 85 |   star.scaleY = 0.5;
 86 | 
 87 |   //Add the star to the cat and position it to the right of the cat  
 88 |   cat.addChild(star);
 89 |   cat.putRight(star);
 90 | 
 91 |   //Add an `angle` property to the star that we'll use to 
 92 |   //help make the star rotate around the cat
 93 |   star.angle = 0;
 94 | 
 95 |   //Create some text that will display the cat's global position
 96 |   globalMessage = g.text("This is some text to start", "11px sans-serif", "black");
 97 |   g.stage.putBottom(globalMessage, 0, -20);
 98 | 
 99 |   //Add some text to display the side on which
100 |   //the cat is colliding with the edges of the square
101 |   collisionMessage = g.text("Use the arrow keys to move...", "16px sans-serif", "black");
102 | 
103 |   //Yes, circles and lines work too!
104 |   /*
105 |   ball = g.circle(32, "LightPink");
106 |   ball.shadow = true;
107 |   square.addChild(ball);
108 |   ball.x = 32;
109 |   ball.y = 32;
110 | 
111 |   line = g.line("black", 4, 0, 0, 32, 32);
112 |   star.addChild(line);
113 |   line.x = 0;
114 |   line.y = 0;
115 |   */
116 |     
117 |   //If you change the square's `alpha`, the child sprites inside it will
118 |   //be similarly affected
119 |   //square.alpha = 0.2;
120 | 
121 |   //Change the state to `play`
122 |   g.state = play;  
123 | }
124 | 
125 | //The `play` function will run in a loop
126 | function play() {
127 |  
128 |   //Move the cat
129 |   g.move(cat);
130 | 
131 |   //You can also move a sprite the good old-fashioned way
132 |   //cat.x += cat.vx;
133 |   //cat.y += cat.vy;
134 |   
135 |   //Rotate the square
136 |   square.rotation += 0.005;
137 | 
138 |   //Display the cat's local `x` and local `y` coordinates. These are
139 |   //relative to the square's top left corner. (The square is the cat's
140 |   //parent.)
141 |   localMessage.content 
142 |     = "cat.x: " + cat.x + ", " 
143 |     + "cat.y: " + cat.y;
144 | 
145 |   //Display the cat's global `gx` and global `gy` coordinates. These are
146 |   //relative to the `stage`, which is the root container for all the
147 |   //sprites and groups.
148 |   globalMessage.content 
149 |     = "cat.gx: " + cat.gx + ", " 
150 |     + "cat.gy: " + cat.gy;
151 | 
152 |   //Contain the cat inside the square's boundary
153 |   var catHitsEdges = g.contain(cat, square.localBounds);
154 | 
155 |   //Display the edge of canvas that the cat hit
156 |   if (catHitsEdges) {
157 |     collisionMessage.content 
158 |       = "The cat hit the " + catHitsEdges + " of the square";
159 |   }
160 | 
161 |   //Make the star rotate
162 |   star.rotation += 0.2;
163 | 
164 |   //Update the star's angle and make it rotate around the cat
165 |   star.angle += 0.05;
166 |   g.rotateAroundSprite(star, cat, 32, star.angle);
167 | }
168 | 
169 | 
170 | </script>
171 | </body>
172 | 
173 | 


--------------------------------------------------------------------------------
/examples/08_scenesAndTweening.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Basic display elements</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | This is a quick introduction on how to make game scenes and
 11 | use Ga's tweening effects. (For more details on how to use
 12 | tweening effects, see the `tweening.html` example file.)
 13 | 
 14 | This file requires these convenience functions from `plugins.js`:
 15 | `slide`
 16 | `pulse`
 17 | `fadeIn`
 18 | `wait`
 19 | */
 20 | 
 21 | //Create a new GA instance, and start it.
 22 | //Pre-load images in the array.
 23 | var g = ga(
 24 |   256, 256, setup, 
 25 |   [
 26 |     "fonts/puzzler.otf"
 27 |   ]
 28 | );
 29 | g.start();
 30 | 
 31 | //Declare global sprites, objects, and variables
 32 | //that you want to access in all the game functions and states
 33 | 
 34 | var sceneOne,
 35 |     blackSquare,
 36 |     messageOne,
 37 |     sceneTwo,
 38 |     blueSquare,
 39 |     messageTwo,
 40 |     oneTween,
 41 |     twoTween;
 42 | 
 43 | //A `setup` function that will run only once.
 44 | //Use it for initialization tasks
 45 | function setup() {
 46 | 
 47 |   g.backgroundColor = "white";
 48 |   g.canvas.style.border = "1px black dashed";
 49 | 
 50 |   //Make a black square and some text
 51 |   blackSquare = g.rectangle(128, 128, "black");
 52 |   messageOne = g.text("One", "16px puzzler", "white");
 53 | 
 54 |   //Use `setPosition` to set the `x` and `y` 
 55 |   //value with one line of code
 56 |   messageOne.setPosition(40, 52);
 57 | 
 58 |   /*
 59 |   Create a `group` called `sceneOne` and add the
 60 |   `blackSquare` and `messageOne` to it.
 61 |   Groups are empty containers for sprites. You can think of them
 62 |   as a special kind of sprite that doesn't display its own image. a
 63 |   group's job is 
 64 |   just to display the sprites that are inside it. Groups have the
 65 |   all same properties as ordinary sprites, so any changes that you
 66 |   make the parent, such as its size, position or visibility, will
 67 |   affect the child sprites that it contains. The `width` and
 68 |   `height` of the group is determined by the size and position of
 69 |   the sprites inside it. Whenever you use `addChild` or `removeChild` to 
 70 |   add or remove a sprite from a group, the group's `width` and `height`
 71 |   is recalculated based on what it contains
 72 |   */
 73 | 
 74 |   sceneOne = g.group(blackSquare, messageOne);
 75 | 
 76 |   //Alternatively, you could first create an empty group and 
 77 |   //use `addChild` to add the sprites, like this:
 78 |   /*
 79 |   sceneOne = g.group();
 80 |   sceneOne.addChild(blackSquare);
 81 |   sceneOne.addChild(messageOne);
 82 |   */
 83 | 
 84 |   //Make a blue square and some text.
 85 |   blueSquare = g.rectangle(128, 128, "cyan");
 86 |   messageTwo = g.text("Two", "16px puzzler", "red");
 87 |   messageTwo.setPosition(40, 52);
 88 | 
 89 |   //Create a `sceneTwo` group and add `blueSquare` and
 90 |   //`messageTwo`
 91 |   sceneTwo = g.group(blueSquare, messageTwo);
 92 |   sceneTwo.x = 128;
 93 |   sceneTwo.y = 128;
 94 | 
 95 |   //You can change the depth layers of sprites
 96 |   //or groups or sprites using the `layer` property
 97 |   //sceneOne.layer = 1;
 98 |   //sceneTwo.layer = 2;
 99 | 
100 |   /*
101 |   Tweening
102 |   Use one of Ga's many built in tween functions to make the 
103 |   scene groups move. Here's how to use the `slide` method to 
104 |   make the scenes move, in a continuous loop, between the top and
105 |   bottom corners of the screen. There's a delay of 2000 milliseconds
106 |   between each repetition of the tween.
107 |   `slide` arguments: sprite, endX, endY, durationInFrames,
108 |   easingType, yoyo?, delayInMilleseconsBeforeRepeating
109 |   (Only the first 3 arguments are required, the rest are optional and
110 |   default to sensible values.)
111 |   The easing type (the 5th argument) can be any of the following
112 |   string values:
113 | 
114 |     "linear"
115 |     "smoothstep" (the default value)
116 |     "smoothstepSquared"
117 |     "smoothstepCubed"
118 |     "acceleration"
119 |     "accelertationCubed"
120 |     "deceleration"
121 |     "decelerationCubed"
122 |     "sine"
123 |     "sineSquared"
124 |     "sineCubed"
125 |     "inverseSine"
126 |     "inverseSineSquared"
127 |     "inverseSineCubed"
128 | 
129 |   Experiment by assigning different easing types and observe the
130 |   effect.
131 |     
132 |   If you don't what the effect to repeat in a continuous loop, just
133 |   set `yoyo` (the 6th argument) to `false`.
134 |   */
135 | 
136 |   oneTween = g.slide(sceneOne, 128, 128, 60, "smoothstep", true, 2000); 
137 |   twoTween = g.slide(sceneTwo, 0, 0, 60, "smoothstep", true, 2000); 
138 | 
139 |   /*
140 |   There are many more tween effects you can use, including `pulse`,
141 |   `breathe`, `fadeIn`, `fadeOut`, `scale`, `wobble`, and `strobe`.
142 |   (See the `tweening.html file for more examples.)
143 |   */
144 | 
145 |   //All tween objects have a user-definable `onComplete` methods that
146 |   //will be called automatically when tweens are finished. 
147 |   oneTween.onComplete = function(){
148 | 
149 |     //Write a message to the console that the tween is finished
150 |     console.log("Slide finished");
151 | 
152 |     //Here's a neat effect. Use the stage's (the root container's)
153 |     //`swapChildren` method to swap the scene depth layers when 
154 |     //the `slide` is finished. This makes it look like the scenes
155 |     //are circling above and below each other in shallow 3D space.
156 |     g.stage.swapChildren(sceneOne, sceneTwo);
157 |   };
158 | 
159 |   /*
160 |   You can combine tween effects so that one sprite can have multiple
161 |   effects acting on it at any one time. Here's how you can use Ga's
162 |   built-in `wait` method to wait for for 5 seconds (5000 milliseconds)
163 |   and then run a `pulse` tween on `sceneOne`:
164 |   */
165 | 
166 |   //Wait for 5 seconds
167 |   g.wait(5000, function(){
168 | 
169 |     //... then use `pulse` to make a sprite fade in and out, in a
170 |     //continuous loop.
171 |     //`pulse` arguments: sprite, durationInFrames, minimumAlphaValue
172 |     g.pulse(sceneOne, 30, 0.3);    
173 |   });
174 | 
175 |   /*
176 |   You can use `fadeIn` and `fadeOut` if you just want the fade effect
177 |   to happen once. Here's the format those methods use:
178 |   var spriteFade = g.fadeIn(sprite, durationInFrames);
179 |   */
180 | }
181 | 
182 | 
183 | </script>
184 | </body>
185 | 


--------------------------------------------------------------------------------
/examples/09_keyframeAnimation.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Keyframe animation</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | This file requires these convenience functions from `plugins.js`:
 11 | `followEase`
 12 | */
 13 | 
 14 | //Create a new GA instance, and start it.
 15 | //Pre-load images in the array.
 16 | var g = ga(
 17 |   256, 256, setup, 
 18 |   [
 19 |     "images/buttonFairy.png"
 20 |   ]
 21 | );
 22 | g.start();
 23 | 
 24 | //Declare global sprites, objects, and variables
 25 | //that you want to access in all the game functions and states
 26 | 
 27 | var fairy;
 28 | 
 29 | //A `setup` function that will run only once.
 30 | //Use it for initialization tasks
 31 | function setup() {
 32 | 
 33 |   g.backgroundColor = "white";
 34 |   g.canvas.style.border = "1px black dashed";
 35 | 
 36 |   /*
 37 |   Ga has three way that you can make sprites with animation frames.
 38 |   The first, lower level way, is to use the `frames` method. `frames`
 39 |   lets you list an array of x/y positions on an image that refer to
 40 |   each sub-image that you wan to use. Here's how to use it:
 41 |   */   
 42 | 
 43 |   //Create the fairy's animation frames using the `frames` method
 44 |   var fairyFrames = g.frames(
 45 |     "images/buttonFairy.png", //The tileset image
 46 |     [[0,0],[48,0],[96,0]],    //The `x` and `y` positions of frames
 47 |     48, 32                    //The `width` and `height` of each frame
 48 |   );
 49 | 
 50 |   //Make a sprite using the frames
 51 |   fairy = g.sprite(fairyFrames);
 52 | 
 53 |   //You can also make a sprite with multiple frames by supplying the
 54 |   //sprite with an array of image file names. See the next example file
 55 |   //if you want to find out how to do that.
 56 |   //But the best way to make a sprite with multiple frames is to use
 57 |   //a texture atlas. Another example file ahead will show you how. But 
 58 |   //no matter how you add frames to a sprite, you control those frames
 59 |   //same way, which you'll learn next.
 60 | 
 61 |   //Use the `play` method to play the fairy's frames.
 62 |   //The animation will loop unless you set the sprite's `loop`
 63 |   //property to `false`. Change the frame-rate with the
 64 |   //`fps` property (it's default value is `12`)
 65 |   fairy.fps = 24;
 66 |   fairy.play();
 67 | 
 68 |   //Use the `stop` method to stop an animation.
 69 |   //Here's an example of how you could stop the
 70 |   //fairy from flapping her wings after 3 seconds
 71 |   /*
 72 |   g.wait(3000, function(){
 73 |      fairy.stop(); 
 74 |   });
 75 |   */
 76 | 
 77 |   //You can use `gotoAndStop` to go to a specific frame number
 78 |   //fairy.gotoAndStop(2);
 79 | 
 80 |   //You can also use the `show` method to display
 81 |   //a specific frame. This is usually better to use than `gotoAndStop`
 82 |   //because its more tightly integrated into the sprite's 
 83 |   //state and animation manager.
 84 |   //fairy.show(1);
 85 | 
 86 |   //Use `playSequence` to play a range of frames. 
 87 |   //fairy.fps = 1;
 88 |   //fairy.playSequence([0, 1]);
 89 | 
 90 |   g.state = play;    
 91 | }
 92 | 
 93 | //The `play` function will run in a loop
 94 | function play() {
 95 |  
 96 |   //Make the fairy ease towards the pointer.
 97 |   //`followEase` arguments: follower, leader, speed
 98 |   g.followEase(fairy, g.pointer, 0.1);
 99 | 
100 | }
101 | 
102 | </script>
103 | </body>
104 | 


--------------------------------------------------------------------------------
/examples/10_keyframeAnimationImages.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Keyframe animation</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | This example shows how to make a sprite with multiple frames using
 11 | a series of individual image files.
 12 | 
 13 | This file requires these convenience functions from `plugins.js`:
 14 | `followEase`
 15 | */
 16 | 
 17 | //Create a new GA instance, and start it.
 18 | //Pre-load images in the array.
 19 | var g = ga(
 20 |   256, 256, setup, 
 21 |   [
 22 |     "images/buttonFairy/0.png",
 23 |     "images/buttonFairy/1.png",
 24 |     "images/buttonFairy/2.png"
 25 |   ]
 26 | );
 27 | g.start();
 28 | 
 29 | //Declare global sprites, objects, and variables
 30 | //that you want to access in all the game functions and states
 31 | 
 32 | var fairy;
 33 | 
 34 | //A `setup` function that will run only once.
 35 | //Use it for initialization tasks
 36 | function setup() {
 37 | 
 38 |   g.backgroundColor = "white";
 39 |   g.canvas.style.border = "1px black dashed";
 40 | 
 41 |   /*
 42 |   Ga has three main way that you can make sprites with animation frames.
 43 |   The first, lower level way, is to use the `frames` method. `frames`
 44 |   lets you list an array of x/y positions on an image that refer to
 45 |   each sub-image that you wan to use. The previous example showed you
 46 |   how to do that.
 47 |   You can also make animation frames from individual images files.
 48 |   Just feed the sprite any array containing the image files that you
 49 |   want to use for each frame.
 50 |   (The best way to make a sprite with multiple frames is to use a 
 51 |   texture atlas - see the next example.)
 52 |   */   
 53 | 
 54 | 
 55 |   //You can make a sprite from an array of images, like this:
 56 |   fairy = g.sprite([
 57 |     "images/buttonFairy/0.png",
 58 |     "images/buttonFairy/1.png",
 59 |     "images/buttonFairy/2.png"
 60 |   ]);
 61 |   
 62 |   //You can control the sprites using the same methods and properties
 63 |   //you learned in the previous example.
 64 | 
 65 |   //Use the `play` method to play the fairy's frames.
 66 |   //The animation will loop unless you set the sprite's `loop`
 67 |   //property to `false`. Change the frame-rate with the
 68 |   //`fps` property (it's default value is `12`)
 69 |   fairy.fps = 24;
 70 |   fairy.play();
 71 | 
 72 |   //Use the `stop` method to stop an animation.
 73 |   //Here's an example of how you could stop the
 74 |   //fairy from flapping her wings after 3 seconds
 75 |   /*
 76 |   g.wait(3000, function(){
 77 |      fairy.stop(); 
 78 |   });
 79 |   */
 80 | 
 81 |   //You can use `gotoAndStop` to go to a specific frame number
 82 |   //fairy.gotoAndStop(2);
 83 | 
 84 |   //You can also use the `show` method to display
 85 |   //a specific frame. This is usually better to use than `gotoAndStop`
 86 |   //because its more tightly integrated into the sprite's 
 87 |   //state and animation manager.
 88 |   //fairy.show(1);
 89 | 
 90 |   //Use `playSequence` to play a range of frames. 
 91 |   //fairy.fps = 1;
 92 |   //fairy.playSequence([0, 1]);
 93 | 
 94 |   g.state = play;    
 95 | }
 96 | 
 97 | //The `play` function will run in a loop
 98 | function play() {
 99 |  
100 |   //Make the fairy ease towards the pointer.
101 |   //`followEase` arguments: follower, leader, speed
102 |   g.followEase(fairy, g.pointer, 0.1);
103 | 
104 | }
105 | 
106 | </script>
107 | </body>
108 | 


--------------------------------------------------------------------------------
/examples/11_textureAtlasAnimation.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Texture atlas animation</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | This file requires these convenience functions from `plugins.js`:
 11 | `ease`
 12 | */
 13 | 
 14 | //Create a new GA instance, and start it.
 15 | //Pre-load images in the array.
 16 | var g = ga(
 17 |   256, 256, setup, 
 18 |   [
 19 |     "images/fairy.json"
 20 |   ]
 21 | );
 22 | g.start();
 23 | 
 24 | //Declare global sprites, objects, and variables
 25 | //that you want to access in all the game functions and states
 26 | 
 27 | var fairy;
 28 | 
 29 | //A `setup` function that will run only once.
 30 | //Use it for initialization tasks
 31 | function setup() {
 32 | 
 33 |   g.backgroundColor = "white";
 34 |   g.canvas.style.border = "1px black dashed";
 35 |  
 36 |   /*
 37 |   An easier way to create animated sprites is to use a texture atlas,
 38 |   made with a software tool like Texture Packer. Save the PNG and JSON 
 39 |   files that Texture Packer
 40 |   produces in the same "images" folder. Then load the JSON file when you
 41 |   initialize Ga, as you can see at the beginning of this file. Next, create an array that
 42 |   lists the frame id names of all the images from the texture atlas
 43 |   that you want your sprite to contain. 
 44 |   */
 45 | 
 46 |   var fairyFrames = ["0.png", "1.png", "2.png"];
 47 | 
 48 |   //Finally, initialize the sprite using the array of frames.
 49 | 
 50 |   fairy = g.sprite(fairyFrames);
 51 | 
 52 |   //That's a lot easier than the previous example!
 53 |   //You can now control the animation just like you did in the
 54 |   //previous example
 55 | 
 56 |   //Use the `play` method to play the fairy's frames.
 57 |   //The animation will loop unless you set the sprite's `loop`
 58 |   //property to `false`. Change the frame-rate with the
 59 |   //`fps` property (it's default value is `12`)
 60 | 
 61 |   fairy.fps = 24;
 62 |   fairy.play();
 63 | 
 64 |   //Use the `stop` method to stop an animation.
 65 |   //Here's an example of how you could stop the
 66 |   //fairy from flapping her wings after 3 seconds
 67 |   /*
 68 |   g.wait(3000, function(){
 69 |      fairy.stop(); 
 70 |   });
 71 |   */
 72 | 
 73 |   //You can use `gotoAndStop` to go to a specific frame number
 74 |   //fairy.gotoAndStop(2);
 75 | 
 76 |   /*
 77 |   You can also use the `show` method to display
 78 |   a specific frame. This is usually better to use than `gotoAndStop`
 79 |   because its more tightly integrated into the sprite's 
 80 |   state and animation manager.
 81 |   
 82 |       fairy.show(1);
 83 | 
 84 |   Or, use the frame id string of the frame you want to display
 85 | 
 86 |       fairy.show("1.png");
 87 | 
 88 |   */
 89 | 
 90 |   //Use `playSequence` to play a range of frames. 
 91 |   //fairy.fps = 1;
 92 |   //fairy.playSequence([0, 1]);
 93 | 
 94 |   g.state = play;    
 95 | }
 96 | 
 97 | //The `play` function will run in a loop
 98 | function play() {
 99 |  
100 |   //Make the fairy ease towards the pointer.
101 |   //`followEase` arguments: follower, leader, speed
102 |   g.followEase(fairy, g.pointer, 0.1);
103 | 
104 | }
105 | 
106 | </script>
107 | </body>
108 | 


--------------------------------------------------------------------------------
/examples/12_animationStates.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Animtation states</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script>
  7 | 
  8 | //Create a new GA instance, and start it.
  9 | //Pre-load images in the array.
 10 | var g = ga(
 11 |   256, 256, setup, 
 12 |   [
 13 |     "images/forest.png",
 14 |     "images/walkcycle.png"
 15 |   ]
 16 | );
 17 | g.start();
 18 | 
 19 | //Declare global sprites, objects, and variables
 20 | //that you want to access in all the game functions and states
 21 | 
 22 | var elf, forest, leftArrow, upArrow, downArrow, rightArrow;
 23 | 
 24 | //A `setup` function that will run only once.
 25 | //Use it for initialization tasks
 26 | function setup() {
 27 | 
 28 |   //Make the forest background
 29 |   forest = g.sprite("images/forest.png");
 30 | 
 31 |   /*
 32 |   If you have a complex animation made up of sequential 
 33 |   tileset frames in a single image,  you can use 
 34 |   `filmStrip` to automatically create an array of x,y
 35 |   coordinates for each animation frame.
 36 |   `filmStrip` arguments:
 37 |   imageName, frameWidth, frameHeight, spacing
 38 |   (Use the final optional `spacing` argument if there is any default
 39 |   spacing (padding) around tileset frame images)
 40 |   */
 41 | 
 42 |   var walkingAnimation = g.filmstrip("images/walkcycle.png", 64, 64);
 43 | 
 44 |   //Now initialize the sprite with the film strip to create a sprite
 45 |   elf = g.sprite(walkingAnimation);
 46 | 
 47 |   //The sprite is now loaded up with all 36 frames of the animation
 48 | 
 49 |   //Set the elf's x and y position
 50 |   elf.setPosition(32, 128);
 51 | 
 52 |   /*
 53 |   Define the elf's animation states. These are names that correspond
 54 |   to frames and frame sequences in the elf's animation frames. It's
 55 |   entirely up to you to decide what you want to call these states.
 56 |   Define animation sequences as a 2-value array:
 57 | 
 58 |       wallkleft: [startFrame, endFrame]
 59 | 
 60 |   The first value is the frame number that the sequence should start
 61 |   at, and the second value is the frame number that the sequence
 62 |   should end at.
 63 |   */
 64 | 
 65 |   elf.states = {
 66 |     up: 0,
 67 |     left: 9,
 68 |     down: 18,
 69 |     right: 27,
 70 |     walkUp: [0, 8],
 71 |     walkLeft: [10, 17],
 72 |     walkDown: [19, 26],
 73 |     walkRight: [28, 35]
 74 |   };
 75 | 
 76 |   //Use the `show` method to display the elf's `right` state
 77 |   elf.show(elf.states.right);
 78 |  
 79 |   //Create some keyboard objects
 80 |   leftArrow = g.keyboard(37);
 81 |   upArrow = g.keyboard(38);
 82 |   rightArrow = g.keyboard(39);
 83 |   downArrow = g.keyboard(40);
 84 |   
 85 |   //Assign key `press` and release methods that
 86 |   //show and play the elf's different states
 87 |   leftArrow.press = function() {
 88 |     elf.playSequence(elf.states.walkLeft);
 89 |     elf.vx = -1;
 90 |     elf.vy = 0;
 91 |   };
 92 |   leftArrow.release = function() {
 93 |     if (!rightArrow.isDown && elf.vy === 0) {
 94 |       elf.vx = 0;
 95 |       elf.show(elf.states.left);
 96 |     }
 97 |   };
 98 |   upArrow.press = function() {
 99 |     elf.playSequence(elf.states.walkUp);
100 |     elf.vy = -1;
101 |     elf.vx = 0;
102 |   };
103 |   upArrow.release = function() {
104 |     if (!downArrow.isDown && elf.vx === 0) {
105 |       elf.vy = 0;
106 |       elf.show(elf.states.up);
107 |     }
108 |   };
109 |   rightArrow.press = function() {
110 |     elf.playSequence(elf.states.walkRight);
111 |     elf.vx = 1;
112 |     elf.vy = 0;
113 |   };
114 |   rightArrow.release = function() {
115 |     if (!leftArrow.isDown && elf.vy === 0) {
116 |       elf.vx = 0;
117 |       elf.show(elf.states.right);
118 |     }
119 |   };
120 |   downArrow.press = function() {
121 |     elf.playSequence(elf.states.walkDown);
122 |     elf.vy = 1;
123 |     elf.vx = 0;
124 |   };
125 |   downArrow.release = function() {
126 |     if (!upArrow.isDown && elf.vx === 0) {
127 |       elf.vy = 0;
128 |       elf.show(elf.states.down);
129 |     }
130 |   };
131 | 
132 |   //Set the game state to `play`
133 |   g.state = play;    
134 | }
135 | 
136 | //The `play` function will run in a loop
137 | function play() {
138 |   //Move the elf and constrain it to the canvas boundaries
139 |   //(-18 and +18 are to compensate for image padding around the sprite)
140 |   elf.x = Math.max(-18, Math.min(elf.x + elf.vx, g.canvas.width - elf.width + 18)); 
141 |   elf.y = Math.max(64, Math.min(elf.y + elf.vy, g.canvas.height - elf.height));
142 | }
143 | 
144 | </script>
145 | </body>
146 | 


--------------------------------------------------------------------------------
/examples/13_particles.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Particles</title>
  4 | <body>
  5 | <p>Click the canvas to make stars
  6 | <script src="../ga.js"></script>
  7 | <script src="../plugins.js"></script>
  8 | <script>
  9 | /*
 10 | Create particles with a versatile function called function called
 11 | `particleEffect`. It's all you'll need for most 2D action games.
 12 | Here's an example of how to use it to 
 13 | produce a starburst effect at the pointer's x and y position.
 14 | 
 15 |     g.particleEffect(
 16 |       g.pointer.x,                             //The particle’s starting x position
 17 |       g.pointer.y,                             //The particle’s starting y position
 18 |       function(){                              //Particle function
 19 |         return g.sprite("images/star.png");
 20 |       },
 21 |       20,                                      //Number of particles
 22 |       0.1,                                     //Gravity
 23 |       true,                                    //Random spacing
 24 |       0, 6.28,                                 //Min/max angle
 25 |       12, 24,                                  //Min/max size
 26 |       1, 2,                                    //Min/max speed
 27 |       0.005, 0.01,                             //Min/max scale speed
 28 |       0.005, 0.01,                             //Min/max alpha speed
 29 |       0.05, 0.1                                //Min/max rotation speed
 30 |     );
 31 | 
 32 | You can see that most of those arguments describe range between 
 33 | the minimum and maximum values that should be used to change 
 34 | the sprites’ speed, rotation, scale and alpha.
 35 | You can also assign the number of particles that should be created,
 36 | and add optional gravity. 
 37 | 
 38 | You can make particles using any sprites by customizing the third argument. 
 39 | Just supply a function that returns the kind of sprite you want to use for each particle:
 40 | 
 41 |     function(){                              
 42 |       return g.sprite("images/star.png");
 43 |     },
 44 | 
 45 | If you supply a sprite that has multiple frames, the particleEffect 
 46 | function will automatically choose a random frame for each particle.
 47 | 
 48 | The minimum and maximum angle values are important for defining the 
 49 | circular spread of particles as they radiate out from the origin point. 
 50 | For a completely circular explosion effect, use a minimum angle 
 51 | of 0, and a maximum angle for 6.28.
 52 | 
 53 |     0, 6.28
 54 | 
 55 | (These numbers values are radians; the equivalent in degrees is 0 and 360.) 
 56 | 0 starts at the 3 o’clock position, pointing directly to the right. 3.14 
 57 | is the 9 o’clock position, and 6.28 takes you around back to 0 again.
 58 | 
 59 | If you want to constrain the particles to a narrower angle range, just supply 
 60 | the minimum and maximum values that describe that range. Here are values 
 61 | you could use to constrain the angle to a pizza-slice with the crust pointing left.
 62 | 
 63 | 2.4, 3.6
 64 | 
 65 | You could use a constrained angle range like this to create a particle stream, 
 66 | like a fountain or rocket engine flames. By carefully choosing the sprite for 
 67 | the particle and finely adjusting each parameter, you can use this 
 68 | all-purpose `particleEffect` function to simulate everything from liquid to fire. 
 69 | */
 70 | 
 71 | //Create a new GA instance, and start it.
 72 | //Pre-load images in the array.
 73 | var g = ga(256, 256, setup, ["images/star.png"]);
 74 | g.start();
 75 | 
 76 | //A `setup` function that will run only once.
 77 | //Use it for initialization tasks
 78 | function setup() {
 79 | 
 80 |   g.pointer.press = function(){
 81 |     g.particleEffect(
 82 |       g.pointer.x,                             //start x position
 83 |       g.pointer.y,                             //start y position
 84 |       function(){                              //Particle function
 85 |         return g.sprite("images/star.png");
 86 |       }, 
 87 |       20,                                      //Number of particles
 88 |       0.1,                                     //Gravity
 89 |       true,                                    //Random spacing
 90 |       0, 6.28,                                 //Min/max angle
 91 |       12, 24,                                  //Min/max size
 92 |       1, 2,                                    //Min/max speed
 93 |       0.005, 0.01,                             //Min/max scale speed
 94 |       0.005, 0.01,                             //Min/max alpha speed
 95 |       0.05, 0.1                                //Min/max rotation speed
 96 |     );
 97 |   };
 98 | 
 99 |   //Set the game state to `play`
100 |   g.state = play;    
101 | }
102 | 
103 | //The `play` function will run in a loop
104 | function play() {
105 |   //Not used in this example
106 | }
107 | 
108 | </script>
109 | </body>
110 | 
111 | 


--------------------------------------------------------------------------------
/examples/14_particleEmitter.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Particle emitter</title>
 4 | <body>
 5 | <p>Click and hold to emit a constant particle stream
 6 | <script src="../ga.js"></script>
 7 | <script src="../plugins.js"></script>
 8 | <script>
 9 | /*
10 | Use the `emitter` function to create a constant stream of particles
11 | at fixed intervals. The emitter is a simple timer that calls the 
12 | `particleEffect` function repeatedly at intervals in milliseconds that
13 | you define. Use the emitter's `play` and `stop` methods to start and 
14 | stop the particle stream.
15 | */
16 | 
17 | //Create a new GA instance, and start it.
18 | //Pre-load images in the array.
19 | var g = ga(256, 256, setup, ["images/star.png"]);
20 | g.start();
21 | 
22 | //A `setup` function that will run only once.
23 | //Use it for initialization tasks
24 | function setup() {
25 | 
26 |   //Create the particle emitter that emits star sprites
27 |   //a 100ms intervals
28 |   var particleStream = g.emitter(
29 |     100,                                           //The interval
30 |     function(){
31 |       return g.particleEffect(                     //The particle function
32 |         g.pointer.x,                               //x position
33 |         g.pointer.y,                               //y position
34 |         function(){                                //Particle sprite
35 |           return g.sprite("images/star.png");
36 |         }, 
37 |         10,                                        //Number of particles
38 |         0.1,                                       //Gravity
39 |         false,                                     //Random spacing
40 |         3.14, 6.28,                                //Min/max angle
41 |         16, 32,                                    //Min/max size
42 |         2, 5                                       //Min/max speed
43 |       );
44 |     }
45 |   );
46 | 
47 |   //Play the particle stream when the pointer is pressed
48 |   g.pointer.press = function(){
49 |     particleStream.play();
50 |     console.log(particleStream.playing)
51 |   };
52 | 
53 |   //Stop the particle stream when the pointer is released
54 |   g.pointer.release = function(){
55 |     particleStream.stop();
56 |     console.log(particleStream.playing)
57 |   };
58 |   
59 |   //Set the game state to `play`
60 |   g.state = play;    
61 | }
62 | 
63 | //The `play` function will run in a loop
64 | function play() {
65 |   //Not used in this example
66 | }
67 | 
68 | </script>
69 | </body>
70 | 
71 | 


--------------------------------------------------------------------------------
/examples/15_tilingSprite.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Tiling sprites</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script src="../plugins.js"></script>
 7 | <script>
 8 | /*
 9 | Use the `emitter` function to create a constant stream of particles
10 | at fixed intervals. The emitter is a simple timer that calls the 
11 | `particleEffect` function repeatedly at intervals in milliseconds that
12 | you define. Use the emitter's `play` and `stop` methods to start and 
13 | stop the particle stream.
14 | */
15 | 
16 | //Create a new GA instance, and start it.
17 | //Pre-load images in the array.
18 | var g = ga(256, 256, setup, 
19 |   [
20 |     "images/tile.png", 
21 |     "images/animals.json"
22 |   ]
23 | );
24 | g.start();
25 | 
26 | //Declare global sprites, objects, and variables
27 | //that you want to access in all the game functions and states
28 | var box;
29 | 
30 | //A `setup` function that will run only once.
31 | //Use it for initialization tasks
32 | function setup() {
33 | 
34 |   box = g.tilingSprite(128, 128, "images/tile.png");
35 | 
36 |   //It also works with texture atlas frames
37 |   //box = g.tilingSprite(128, 128, "cat.png");
38 | 
39 |   g.stage.putCenter(box);
40 |   
41 |   //Set the game state to `play`
42 |   g.state = play;    
43 | }
44 | 
45 | //The `play` function will run in a loop
46 | function play() {
47 |   
48 |   //Scroll the sprite's tile pattern using the 
49 |   //`tileX` and `tileY` properties
50 |   box.tileX += 1;
51 |   box.tileY += 1;
52 | 
53 |   //box.rotation += 0.01;
54 | }
55 | 
56 | </script>
57 | </body>
58 | 
59 | 


--------------------------------------------------------------------------------
/examples/16_buttons.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Buttons</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script>
 7 | 
 8 | /*
 9 | Learn how to make an interactive button with three
10 | states: up, over and down.
11 | */
12 | 
13 | //Create a new GA instance, and start it.
14 | //Pre-load images in the array.
15 | var g = ga(
16 |   256, 256, setup, 
17 |   [
18 |     "images/button.png",
19 |     "fonts/puzzler.otf"
20 |   ]
21 | );
22 | g.start();
23 | 
24 | //Declare global sprites, objects, and variables
25 | //that you want to access in all the game functions and states
26 | 
27 | var button, stateMessage, actionMessage;
28 | 
29 | //A `setup` function that will run only once.
30 | //Use it for initialization tasks
31 | function setup() {
32 | 
33 |   g.backgroundColor = "white";
34 |   g.canvas.style.border = "1px black dashed";
35 | 
36 |   //Create the button's three image states using the `frames` method
37 |   var buttonFrames = g.frames(
38 |     "images/button.png",       //The tileset image
39 |     [[0,0],[0,96],[0,192]],    //The `x` and `y` positions of frames
40 |     192, 96                    //The `width` and `height` of each frame
41 |   );
42 | 
43 |   //Make a `button` using the frames.
44 |   button = g.button(buttonFrames);
45 | 
46 |   //Assign the button's optional and customizable `press`, `release`, 
47 |   //`over`, `out` and `tap` actions
48 |   button.press = function() {
49 |     console.log("pressed");
50 |   };
51 |   button.release = function() {
52 |     console.log("released");
53 |   };
54 |   button.over = function() {
55 |     console.log("over");
56 |   };
57 |   button.out = function() {
58 |     console.log("out");
59 |   };
60 |   button.tap = function() {
61 |     console.log("tapped");
62 |   };
63 | 
64 |   //Position the button
65 |   button.x = g.canvas.width / 2 - 96;
66 |   button.y = g.canvas.height / 2 - 48;
67 | 
68 |   //Some text to display the button's state and action
69 |   stateMessage = g.text("State not set", "14px puzzler", "black");
70 |   stateMessage.x = 12;
71 |   stateMessage.y = 12;
72 | 
73 |   actionMessage = g.text("Action not set", "14px puzzler", "black");
74 |   actionMessage.x = 12;
75 |   actionMessage.y = 32;
76 | 
77 |   //Buttons remain interactive even if there's no game loop running.
78 |   g.state = play;    
79 | }
80 | 
81 | //The `play` function will run in a loop
82 | function play() {
83 |   stateMessage.content = "State: " + button.state;
84 |   actionMessage.content = "Action: " + button.action;
85 | }
86 | 
87 | </script>
88 | </body>
89 | 


--------------------------------------------------------------------------------
/examples/17_textureAtlasButton.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Texture atlas buttons</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script>
 7 | 
 8 | //Create a new GA instance, and start it.
 9 | //Pre-load images in the array.
10 | var g = ga(
11 |   256, 256, setup, 
12 |   [
13 |     "images/button2.json",
14 |     "fonts/puzzler.otf"
15 |   ]
16 | );
17 | g.start();
18 | 
19 | //Declare global sprites, objects, and variables
20 | //that you want to access in all the game functions and states
21 | 
22 | var button, stateMessage, actionMessage;
23 | 
24 | //A `setup` function that will run only once.
25 | //Use it for initialization tasks
26 | function setup() {
27 | 
28 |   g.backgroundColor = "white";
29 |   g.canvas.style.border = "1px black dashed";
30 | 
31 |   /*
32 |   The easier way to make a button is to use a texture atlas. Create an
33 |   array that lists the id names of each frame in the atlas, and then
34 |   initialize the sprite using that array.
35 |   */
36 | 
37 |   var buttonFrames = ["up.png", "over.png", "down.png"];
38 | 
39 |   //Make a `button` using the frames.
40 |   button = g.button(buttonFrames);
41 | 
42 |   //That's so easy!
43 | 
44 |   //Assign the button's `press` and `release` actions
45 |   button.press = function() {
46 |     console.log("pressed");
47 |   };
48 |   button.release = function() {
49 |     console.log("released");
50 |   };
51 | 
52 |   //Position the button
53 |   button.x = g.canvas.width / 2 - 96;
54 |   button.y = g.canvas.height / 2 - 48;
55 | 
56 |   //Some text to display the button's state and action
57 |   stateMessage = g.text("State not set", "14px puzzler", "black");
58 |   stateMessage.x = 12;
59 |   stateMessage.y = 12;
60 | 
61 |   actionMessage = g.text("Action not set", "14px puzzler", "black");
62 |   actionMessage.x = 12;
63 |   actionMessage.y = 32;
64 | 
65 |   //Buttons remain interactive even if there's no game loop running.
66 |   g.state = play;    
67 | }
68 | 
69 | //The `play` function will run in a loop
70 | function play() {
71 |   stateMessage.content = "State: " + button.state;
72 |   actionMessage.content = "Action: " + button.action;
73 | }
74 | 
75 | </script>
76 | </body>
77 | 
78 | 


--------------------------------------------------------------------------------
/examples/18_sounds.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Sounds</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | This file is a working example of how to use sounds in Ga.
 11 | Ga implements the latest version of "Sound for Games" under the
 12 | hood.
 13 | Check out the "Sound for Games" repository for full details on how
 14 | to control and generate sounds:
 15 | 
 16 | https://github.com/kittykatattack/soundForGames
 17 | 
 18 | The only difference in Ga's implementation is that you can pre-load sounds inside Ga's assets
 19 | array, in the same way that you can pre-load images and data files.
 20 | Also, after sounds have loaded you can access them like this:
 21 | 
 22 |     g.sound("sounds/anySound.mp3")
 23 | 
 24 | Let's find out how it all works:
 25 | */
 26 | 
 27 | //First, create a new GA instance, and start it.
 28 | //Pre-load sounds in the constructor array.
 29 | var g = ga(
 30 |   256, 350, setup, 
 31 |   [
 32 |     "sounds/shoot.wav",
 33 |     "sounds/music.wav",
 34 |     "sounds/explosion.wav",
 35 |     "fonts/PetMe64.ttf"
 36 |   ]
 37 | );
 38 | g.start();
 39 | 
 40 | //A `setup` function that will run only once.
 41 | //Use it for initialization tasks
 42 | function setup() {
 43 | 
 44 |   //First, create some sound objects
 45 |   //Use the `sounds` method to create sound objects. The `sound`
 46 |   //method takes one argument: a string that describes the sound file path
 47 |   var shoot = g.sound("sounds/shoot.wav"),
 48 |       explosion = g.sound("sounds/explosion.wav"),
 49 |       music = g.sound("sounds/music.wav");
 50 | 
 51 |   //Next, setup the sounds
 52 | 
 53 |   //Make the music loop
 54 |   music.loop = true;
 55 | 
 56 |   //Set the pan
 57 |   shoot.pan = 0.8;
 58 |   music.pan = -0.8;
 59 | 
 60 |   //Set the volume
 61 |   shoot.volume = 0.5;
 62 |   music.volume = 0.3;
 63 | 
 64 |   //Create the keyboard objects to play the sounds
 65 |   var one = g.keyboard(49),
 66 |       a = g.keyboard(65),
 67 |       b = g.keyboard(66),
 68 |       c = g.keyboard(67),
 69 |       d = g.keyboard(68),
 70 |       e = g.keyboard(69),
 71 |       f = g.keyboard(70),
 72 |       gee = g.keyboard(71),
 73 |       h = g.keyboard(72),
 74 |       i = g.keyboard(73),
 75 |       j = g.keyboard(74);
 76 | 
 77 |   //Create `press` actions for each sound 
 78 |   one.press = function(){
 79 |     shoot.play();
 80 |   };
 81 |   a.press = function(){
 82 |     //Allow the music to start playing only once
 83 |     if (!music.playing) music.play(); 
 84 |   };
 85 |   b.press = function(){
 86 |     music.pause();
 87 |   };
 88 |   c.press = function(){
 89 |     music.restart();
 90 |   };
 91 |   d.press = function(){
 92 |     music.playFrom(10);
 93 |   };
 94 |   e.press = function(){
 95 |     music.fadeOut(3);
 96 |   };
 97 |   f.press = function(){
 98 |     music.fadeIn(3);
 99 |   };
100 | 
101 |   //You can also generate sound effects from scratch using Ga's
102 |   //versatile `soundEffect` function.
103 | 
104 |   //First, define your sounds as re-usable functions
105 | 
106 |   //The shoot sound
107 |   function shootSound() {
108 |     g.soundEffect(
109 |       1046.5,           //frequency
110 |       0,                //attack
111 |       0.3,              //decay
112 |       "sawtooth",       //waveform
113 |       1,                //Volume
114 |       -0.8,             //pan
115 |       0,                //wait before playing
116 |       1200,             //pitch bend amount
117 |       false,            //reverse bend
118 |       0,                //random pitch range
119 |       25,               //dissonance
120 |       [0.2, 0.2, 2000], //echo: [delay, feedback, filter]
121 |       undefined         //reverb: [duration, decay, reverse?]
122 |     );
123 |   }
124 | 
125 |   //The jump sound
126 |   function jumpSound() {
127 |     g.soundEffect(
128 |       523.25,       //frequency
129 |       0.05,         //attack
130 |       0.2,          //decay
131 |       "sine",       //waveform
132 |       3,            //volume
133 |       0.8,          //pan
134 |       0,            //wait before playing
135 |       600,          //pitch bend amount
136 |       true,         //reverse
137 |       100,          //random pitch range
138 |       0,            //dissonance
139 |       undefined,    //echo: [delay, feedback, filter]
140 |       undefined     //reverb: [duration, decay, reverse?]
141 |     );
142 |   }
143 | 
144 |   //The explosion sound
145 |   function explosionSound() {
146 |     g.soundEffect(
147 |       16,          //frequency
148 |       0,           //attack
149 |       1,           //decay
150 |       "sawtooth",  //waveform
151 |       1,           //volume
152 |       0,           //pan
153 |       0,           //wait before playing
154 |       0,           //pitch bend amount
155 |       false,       //reverse
156 |       0,           //random pitch range
157 |       50,          //dissonance
158 |       undefined,   //echo: [delay, feedback, filter]
159 |       undefined    //reverb: [duration, decay, reverse?]
160 |     );
161 |   }
162 | 
163 |   //The bonus points sound
164 |   function bonusSound() {
165 |     //D
166 |     g.soundEffect(587.33, 0, 0.2, "square", 1, 0, 0);
167 |     //A
168 |     g.soundEffect(880, 0, 0.2, "square", 1, 0, 0.1);
169 |     //High D
170 |     g.soundEffect(1174.66, 0, 0.3, "square", 1, 0, 0.2);
171 |   }
172 |  
173 |   //Program keyboard keys to play the sounds.
174 |   gee.press = function(){ shootSound() };
175 |   h.press = function(){ jumpSound() };
176 |   i.press = function(){ explosionSound() };
177 |   j.press = function(){ bonusSound() };
178 | 
179 |   //Ga doesn't have multi-line support for text (yet!) so let's
180 |   //do it caveman-style for now:
181 | 
182 |   //Define the font and color
183 |   var f = "10px PetMe64";
184 |   var c = "YellowGreen";
185 | 
186 |   //Create each line of text
187 |   g.text("To shoot, press 1", f, c, 10, 10);
188 |   g.text("To control music:", f, c, 10, 50);
189 |   g.text("a - Play", f, c, 10, 70);
190 |   g.text("b - Pause", f, c, 10, 90);
191 |   g.text("c - Restart", f, c, 10, 110);
192 |   g.text("d - Go to 10 sec. mark", f, c, 10, 130);
193 |   g.text("e - Fade out", f, c, 10, 150);
194 |   g.text("f - Fade in", f, c, 10, 170);
195 |   g.text("Generated sound effects:", f, c, 10, 210);
196 |   g.text("g - Shoot sound", f, c, 10, 230);
197 |   g.text("h - Jump sound", f, c, 10, 250);
198 |   g.text("i - Explosion sound", f, c, 10, 270);
199 |   g.text("j - Bonus sound", f, c, 10, 290);
200 | 
201 |   //g.state = play;    
202 | }
203 | 
204 | //The `play` function will run in a loop
205 | function play() {
206 |   //...but we don't need a game loop in this example, yay! :)
207 | }
208 | 
209 | </script>
210 | </body>
211 | 


--------------------------------------------------------------------------------
/examples/19_dragAndDrop.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Drag and drop</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script>
 7 | 
 8 | //Create a new GA instance, and start it.
 9 | //Pre-load images in the array.
10 | var g = ga(
11 |   256, 256, setup, 
12 |   [
13 |     "images/cat.png",
14 |     "images/tiger.png",
15 |     "images/hedgehog.png",
16 |   ]
17 | );
18 | g.start();
19 | 
20 | //Declare global sprites, objects, and variables
21 | //that you want to access in all the game functions and states
22 | 
23 | var cat, hedgehog, tiger;
24 | 
25 | //A `setup` function that will run only once.
26 | //Use it for initialization tasks
27 | function setup() {
28 | 
29 |   g.backgroundColor = "white";
30 |   g.canvas.style.border = "1px black dashed";
31 | 
32 |   //Create three sprites from images and set their `draggable` property to `true`
33 |   cat = g.sprite("images/cat.png");
34 |   cat.draggable = true;
35 | 
36 |   tiger = g.sprite("images/tiger.png");
37 |   tiger.draggable = true;
38 |   tiger.setPosition(64, 64);
39 | 
40 |   hedgehog = g.sprite("images/hedgehog.png");
41 |   hedgehog.draggable = true;
42 |   hedgehog.setPosition(128, 128);
43 | 
44 |   //If you ever need to disable drag and drop, set Ga's 
45 |   //`dragAndDrop` property to `false`, like this:
46 |   //g.dragAndDrop = false;
47 |   //`dragAndDrop` is set to `true` automatically whenever set a
48 |   //sprite's `draggable` property to `true`
49 |   
50 |   //Buttons remain interactive even if there's no game loop running.
51 |   //g.state = play;    
52 | }
53 | 
54 | //The `play` function will run in a loop...
55 | function play() {
56 |   //... but we don't need a game loop in this example, yay again!
57 | }
58 | 
59 | </script>
60 | </body>
61 | 


--------------------------------------------------------------------------------
/examples/20_tweening.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Tweening</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | Ga has a suite of easy-to-use and versatile tweening
 11 | effects for games. See the code below to find out how 
 12 | to use them.
 13 | */
 14 | 
 15 | //Create a new GA instance, and start it.
 16 | //Pre-load images in the array.
 17 | var g = ga(
 18 |   1024, 512, setup, 
 19 |   [
 20 |     "images/animals.json"
 21 |   ]
 22 | );
 23 | g.start();
 24 | 
 25 | //A `setup` function that will run only once.
 26 | //Use it for initialization tasks
 27 | function setup() {
 28 | 
 29 |   g.backgroundColor = "white";
 30 |   g.canvas.style.border = "1px black dashed";
 31 | 
 32 |   //Create some sprites 
 33 |   var cat1 = g.sprite("cat.png");
 34 |     text1 = g.text("slide", "20px Futura", "black");
 35 |     tiger1 = g.sprite("tiger.png"),
 36 |     tiger1.setPosition(128, 128),
 37 |     text2 = g.text("slide with bounce", "20px Futura", "black"),
 38 |     hedgehog1 = g.sprite("hedgehog.png"),
 39 |     hedgehog1.setPosition(0, 300),
 40 |     text3 = g.text("pulse", "20px Futura", "black"),
 41 |     cat2 = g.sprite("cat.png"),
 42 |     cat2.setPosition(192, 300),
 43 |     text4 = g.text("breathe", "20px Futura", "black"),
 44 |     tiger2 = g.sprite("tiger.png"),
 45 |     tiger2.setPosition(384, 300),
 46 |     text5 = g.text("strobe", "20px Futura", "black"),
 47 |     hedgehog2 = g.sprite("hedgehog.png"),
 48 |     hedgehog2.setPosition(576, 300),
 49 |     text6 = g.text("wobble", "20px Futura", "black");
 50 | 
 51 |   //Add the text to the sprites
 52 |   cat1.addChild(text1);
 53 |   cat1.putRight(text1, 32);
 54 |   tiger1.addChild(text2);
 55 |   tiger1.putRight(text2, 32);
 56 |   hedgehog1.addChild(text3);
 57 |   hedgehog1.putBottom(text3, -8, 16);
 58 |   cat2.addChild(text4);
 59 |   cat2.putBottom(text4, -16, 16);
 60 |   tiger2.addChild(text5);
 61 |   tiger2.putBottom(text5, -8, 16);
 62 |   hedgehog2.addChild(text6);
 63 |   hedgehog2.putBottom(text6, -8, 16);
 64 | 
 65 |   /*Slide effects*/
 66 | 
 67 |   /*
 68 |   Make the cat move back and forth. Create a new tween object
 69 |   using the `slide` method.
 70 | 
 71 |   `slide` arguments: sprite, endX, endY, durationInFrames,
 72 |   easingType, yoyo?, delayInMilleseconsBeforeRepeating
 73 | 
 74 |   If you want the effect to repeat in a continuous loop, just
 75 |   set `yoyo` (the 6th argument) to `true`.
 76 | 
 77 |   (Only the first 3 arguments are required, the rest are optional.)
 78 |   The easing type (the 5th argument) can be any of the following
 79 |   string values:
 80 | 
 81 |     "linear"
 82 |     "smoothstep" (the default value)
 83 |     "smoothstepSquared"
 84 |     "smoothstepCubed"
 85 |     "acceleration"
 86 |     "accelertationCubed"
 87 |     "deceleration"
 88 |     "decelerationCubed"
 89 |     "sine"
 90 |     "sineSquared"
 91 |     "sineCubed"
 92 |     "inverseSine"
 93 |     "inverseSineSquared"
 94 |     "inverseSineCubed"
 95 | 
 96 |   Try using different easing types to see the effect.
 97 |   */
 98 | 
 99 |   var catSlide = g.slide(cat1, 400, 0, 60, "smoothstep", true, 0);
100 | 
101 |   //Tween objects have an `onComplete` callback function that you can
102 |   //define. It will run when the tween is finished. Use it like this:
103 | 
104 |   //catSlide.onComplete = function() {console.log("Cat slide complete")};
105 | 
106 |   //A special easing type (the 5th argument) called "bounce" has two
107 |   //additional values you can assign: a start magnitude and an end
108 |   //magnitude. This gives the tween a bit of extra bounce at its start
109 |   //and end points. "5" and "-5" are good values to start, but
110 |   //experiment with different values
111 |   var tigerSlide = g.slide(tiger1, 528, tiger1.y, 120, "bounce 5 -5", true, 0);
112 | 
113 |   /* Fade effects */
114 | 
115 |   //Use `pulse` to make a sprite fade in and out.
116 |   //`pulse` arguments: sprite, durationInFrames, minimumAlphaValue
117 |   var hedgehogPulse = g.pulse(hedgehog1, 120, 0.3); 
118 | 
119 |   //Optionally, find out when the each portion of the tween has
120 |   //completed by using an `onComplete` method.
121 |   //hedgehogPulse.onComplete = function() {console.log("Hedgehog fade complete")};
122 | 
123 |   /*
124 |   You can also use `fadeIn` and `fadeOut`, using this format:
125 |   var spriteFade = g.fadeIn(sprite, durationInFrames);
126 |   */
127 | 
128 |   /* Scale effects */
129 | 
130 |   //Use `breathe` to scale a sprite in and out in a simulated
131 |   //breathing effect.
132 |   //`breathe` arguments: sprite, finalXScale, finalYScale, 
133 |   //durationInFrames, delayInMillsecondsBeforeRepeating
134 |   var catBreathe = g.breathe(cat2, 1.2, 1.2, 60, true, 300);
135 | 
136 |   /*
137 |   You can also use `scale` to smoothly scale a sprite by a fixed
138 |   scaled amount. Use this format:
139 |   var spriteScale = g.scale(sprite, finalScaleX, finalScaleY, frames);
140 |   */
141 | 
142 |   //Use `strobe` to create a flashing effect.
143 |   //`strobe` arguments: sprite, scaleFactor, startMagnitude, endMagnitude, 
144 |   //frames, yoyo?, delayInMillisecondsBeforeRepeating
145 |   var tigerStrobe = g.strobe(tiger2, 1.3, 10, 20, 10);
146 | 
147 |   //Use `wobble` to make a sprite wobble like a plate of jelly.
148 |   //Use the default values, or experiment with your own values
149 |   //to find an effect you like.
150 |   //`wobble` arguments: sprite, scaleFactorX, scaleFactorY, frames,
151 |   //xStartMagnitude, xEndMagnitude, yStartMagnitude, yEndMagnitude,
152 |   //friction, yoyo, delayBeforeRepeat
153 |   
154 |   var hedgehogWobble = g.wobble(hedgehog2, 1.2, 1.2);
155 | 
156 |   //Tweens are updated independently in Ga's internal 
157 |   //game engine loop, so there's no need to update them in
158 |   //your own `play` state to make them work.
159 |   //g.state = play;    
160 | }
161 | 
162 | //The `play` function will run in a loop...
163 | function play() {
164 |   //... but we don't need a game loop in this example, yay!
165 | }
166 | 
167 | </script>
168 | </body>
169 | 


--------------------------------------------------------------------------------
/examples/21_followPaths.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Tweening</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script src="../plugins.js"></script>
 7 | <script>
 8 | 
 9 | /*
10 | Use `walkPath` or `walkCurve` to make a sprite follow a
11 | path between a series of connected waypoints.
12 | */
13 | 
14 | //Create a new GA instance, and start it.
15 | //Pre-load images in the array.
16 | var g = ga(
17 |   512, 600, setup, 
18 |   [
19 |     "images/animals.json"
20 |   ]
21 | );
22 | g.start();
23 | 
24 | //A `setup` function that will run only once.
25 | //Use it for initialization tasks
26 | function setup() {
27 | 
28 |   g.backgroundColor = "white";
29 |   g.canvas.style.border = "1px black dashed";
30 | 
31 |   //The cat sprite
32 |   var cat = g.sprite("cat.png"); 
33 |   cat.setPosition(32, 32);
34 | 
35 |   //Use `walkPath` to make the cat follow a straight path 
36 |   //between a series of connected waypoints. Here's how to use it:
37 | 
38 |   var catPath = g.walkPath(
39 |     cat,                   //The sprite
40 | 
41 |     //An array of x/y waypoints to connect in sequence
42 |     [
43 |       [32, 32],            //First x/y point
44 |       [32, 128],           //Next x/y point
45 |       [300, 128],          //Next x/y point
46 |       [300, 32],           //Next x/y point
47 |       [32, 32]             //Last x/y point
48 |     ], 
49 | 
50 |     300,                   //Total duration, in frames
51 |     "smoothstep",          //Easing type
52 |     true,                  //Should the path loop?
53 |     true,                  //Should the path reverse?
54 |     1000                   //Delay in milliseconds between segments
55 |   ); 
56 | 
57 |   //The hedgehog sprite
58 |   hedgehog = g.sprite("hedgehog.png"); 
59 |   hedgehog.setPosition(32, 256);
60 | 
61 |   //Use `walkCurve` to make the hedgehog follow a curved path 
62 |   //between a series of connected waypoints. Here's how to use it:
63 | 
64 |   var hedgehogPath = g.walkCurve(
65 |     hedgehog,              //The sprite
66 | 
67 |     //An array of Bezier curve points that 
68 |     //you want to connect in sequence
69 |     [
70 |       [[hedgehog.x, hedgehog.y],[75, 500],[200, 500],[300, 300]],
71 |       [[300, 300],[250, 100],[100, 100],[hedgehog.x, hedgehog.y]]
72 |     ],
73 | 
74 |     300,                   //Total duration, in frames
75 |     "smoothstep",          //Easing type
76 |     true,                  //Should the path loop?
77 |     true,                  //Should the path yoyo?
78 |     1000                   //Delay in milliseconds between segments
79 |   );
80 | 
81 |   //Tweens are updated independently in Ga's internal 
82 |   //game engine loop, so there's no need to update them in
83 |   //your own `play` state to make them work.
84 |   //g.state = play;    
85 | }
86 | 
87 | //The `play` function will run in a loop...
88 | function play() {
89 |   //... but we don't need a game loop in this example, yay!
90 | }
91 | 
92 | </script>
93 | </body>
94 | 


--------------------------------------------------------------------------------
/examples/22_shootingBullets.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Shooting bullets</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | Learn how to use the keyboard to control a player character.
 11 | 
 12 | This file requires these convenience functions from `plugins.js`:
 13 | `shoot`
 14 | `move`
 15 | `angle`
 16 | `outsideBounds`
 17 | */
 18 | 
 19 | //Create a new GA instance, and start it.
 20 | 
 21 | var g = ga(256, 256, setup);
 22 | g.start();
 23 | 
 24 | //Declare global sprites, objects, and variables
 25 | //that you want to access in all the game functions and states
 26 | 
 27 | var box, turret, bullets, message;
 28 | 
 29 | //A `setup` function that will run only once.
 30 | //Use it for initialization tasks
 31 | function setup() {
 32 | 
 33 |   //Make the background white and add a border to the canvas
 34 |   g.backgroundColor = "white";
 35 |   g.canvas.style.border = "1px black dashed";
 36 | 
 37 |   //Make a square and center it in the stage
 38 |   box = g.rectangle(32, 32, "gray", "black", 2);
 39 |   g.stage.putCenter(box);
 40 | 
 41 |   //Make a turret by drawing a red, 4 pixel wide line that's 32 pixels
 42 |   //long
 43 |   turret = g.line("red", 4, 0, 0, 32, 0);
 44 | 
 45 |   //Add the line as a child of the box and place its
 46 |   //start point at the box's center
 47 |   box.addChild(turret);
 48 |   turret.x = 16;
 49 |   turret.y = 16;
 50 | 
 51 |   //Make an array to store the bullets
 52 |   bullets = [];
 53 | 
 54 |   //Make the stage interactive and give it a `press` action. Every
 55 |   //time the player clicks or taps the stage a bullet will be fired
 56 |   //from the turret
 57 |   g.stage.interactive = true;
 58 |   g.stage.press = function() {
 59 |     g.shoot(
 60 |       box,           //The shooter
 61 |       box.rotation,  //The angle at which to shoot
 62 |       32,            //The bullet's offset from the center
 63 |       7,             //The bullet's speed (pixels per frame)
 64 |       bullets,        //The array used to store the bullets
 65 |       //A function that returns the sprite that should
 66 |       //be used to make each bullet
 67 |       function() {
 68 |         return g.circle(8, "red");
 69 |       }
 70 |     );
 71 |   };
 72 | 
 73 |   //Add some text 
 74 |   message = g.text(
 75 |     "Click or tap to shoot", 
 76 |     "16px sans-serif",
 77 |     "black", 10, 10
 78 |   );
 79 |     
 80 |   //Change the state to `play`
 81 |   g.state = play;  
 82 | }
 83 | 
 84 | //The `play` function will run in a loop
 85 | function play() {
 86 | 
 87 |   //Make the box and turret angle towards the pointer
 88 |   box.rotation = g.angle(box, g.pointer);
 89 | 
 90 |   //Id you just want to move all the bullets without removing them
 91 |   //they hit the screen boundaries, you can just use the help of the `move` method
 92 |   //g.move(bullets);
 93 |  
 94 |   //Remove the bullets if they cross the screen boundaries
 95 |   //Loop through the bullets using `filter` so that we can remove
 96 |   //the bullet easily
 97 |   bullets = bullets.filter(function(bullet) {
 98 |     //Move the bullet
 99 |     g.move(bullet);
100 |     //Check for a collision with the stage boundary
101 |     var collision = g.outsideBounds(bullet, g.stage.localBounds);
102 |     //If there's a collision, display the side that the collision
103 |     //happened on, remove the bullet sprite and filter it out of 
104 |     //the `bullets` array
105 |     if(collision) {
106 |       message.content = "The bullet hit the " + collision; 
107 |       //The `remove` function will remove a sprite for its parent.
108 |       g.remove(bullet); 
109 |       //Remove the bullet from the `bullets` array
110 |       return false;
111 |     } 
112 |     //If the bullet hasn't hit the edge of the screen,
113 |     //keep it in the `bullets` array
114 |     return true;
115 |   });
116 | }
117 | </script>
118 | </body>
119 | 
120 | 


--------------------------------------------------------------------------------
/examples/23_spaceshipVehicle.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Spaceship vehicle</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | Learn how to create a generic spaceship vehicle.
 11 | */
 12 | 
 13 | //Create a new GA instance, and start it.
 14 | 
 15 | var g = ga(256, 256, setup, ["fonts/puzzler.otf"]);
 16 | g.start();
 17 | 
 18 | //Declare global sprites, objects, and variables
 19 | //that you want to access in all the game functions and states
 20 | 
 21 | var ship, message;
 22 | 
 23 | //A `setup` function that will run only once.
 24 | //Use it for initialization tasks
 25 | function setup() {
 26 | 
 27 |   //Make the background white and add a border to the canvas
 28 |   g.backgroundColor = "white";
 29 |   g.canvas.style.border = "1px black dashed";
 30 | 
 31 |   //Make the box and turret
 32 |   var box = g.rectangle(32, 32, "gray"),
 33 |       turret = g.line("red", 4, 0, 0, 32, 0);
 34 |   turret.x = 16;
 35 |   turret.y = 16;
 36 | 
 37 |   //Group them together as a composite sprite called `ship`
 38 |   ship = g.group(box, turret);
 39 |   g.stage.putCenter(ship);
 40 | 
 41 |   //Add some physics properties
 42 |   ship.vx = 0;
 43 |   ship.vy = 0;
 44 |   ship.accelerationX = 0.2;
 45 |   ship.accelerationY = 0.2;
 46 |   ship.frictionX = 0.96;
 47 |   ship.frictionY = 0.96;
 48 | 
 49 |   //The speed at which the ship should rotate,
 50 |   //initialized to 0
 51 |   ship.rotationSpeed = 0;
 52 | 
 53 |   //Whether or not the ship should move forward
 54 |   ship.moveForward = false;
 55 |   
 56 |   //Set the ship's `rotationSpeed` to -0.1 (to rotate left) if the
 57 |   //left arrow key is being pressed
 58 |   g.key.leftArrow.press = function() {
 59 |     ship.rotationSpeed = -0.1;
 60 |   };
 61 | 
 62 |   //If the left arrow key is released and the right arrow
 63 |   //key isn't being pressed down, set the `rotationSpeed` to 0
 64 |   g.key.leftArrow.release = function() {
 65 |     if (!g.key.rightArrow.isDown) ship.rotationSpeed = 0;
 66 |   };
 67 | 
 68 |   //Do the same for the right arrow key, but set
 69 |   //the `rotationSpeed` to 0.1 (to rotate right)
 70 |   g.key.rightArrow.press = function() {
 71 |     ship.rotationSpeed = 0.1;
 72 |   };
 73 | 
 74 |   g.key.rightArrow.release = function() {
 75 |     if (!g.key.leftArrow.isDown) ship.rotationSpeed = 0;
 76 |   };
 77 | 
 78 |   //Set `ship.moveForward` to `true` if the up arrow key is
 79 |   //pressed, and set it to `false` if it's released
 80 |   g.key.upArrow.press = function() {
 81 |     ship.moveForward = true;
 82 |   };
 83 |   g.key.upArrow.release = function() {
 84 |     ship.moveForward = false;
 85 |   };
 86 | 
 87 |   //Make a text sprite
 88 |   message = g.text("", "12px puzzler", "black", 8, 8);
 89 | 
 90 |   //Change the state to `play`
 91 |   g.state = play;  
 92 | }
 93 | 
 94 | //The `play` function will run in a loop
 95 | function play() {
 96 | 
 97 |   //Use the `rotationSpeed` to set the ship's rotation
 98 |   ship.rotation += ship.rotationSpeed;
 99 | 
100 |   //If `ship.moveForward` is `true`, use acceleration  with a 
101 |   //bit of basic trigonometry to make the ship move in the
102 |   //direction of its rotation
103 |   if (ship.moveForward) {
104 |     ship.vx += ship.accelerationX * Math.cos(ship.rotation);
105 |     ship.vy += ship.accelerationY * Math.sin(ship.rotation);
106 |   } 
107 |   
108 |   //If `ship.moveForward` is `false`, use 
109 |   //friction to slow the ship down
110 |   else {
111 |     ship.vx *= ship.frictionX;
112 |     ship.vy *= ship.frictionY;
113 |   }
114 | 
115 |   //Apply the ship's velocity to its position to make the ship move
116 |   ship.x += ship.vx;
117 |   ship.y += ship.vy;
118 | 
119 |   //Display the ship's angle of rotation
120 |   message.content = ship.rotation;
121 | 
122 | }
123 | </script>
124 | </body>
125 | 
126 | 


--------------------------------------------------------------------------------
/examples/24_tankVehicle.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Tank vehicle</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | Learn how to create a generic tank vehicle.
 11 | */
 12 | 
 13 | //Create a new GA instance, and start it.
 14 | 
 15 | var g = ga(256, 256, setup, ["fonts/puzzler.otf"]);
 16 | g.start();
 17 | 
 18 | //Declare global sprites, objects, and variables
 19 | //that you want to access in all the game functions and states
 20 | 
 21 | var tank, message;
 22 | 
 23 | //A `setup` function that will run only once.
 24 | //Use it for initialization tasks
 25 | function setup() {
 26 | 
 27 |   //Make the background white and add a border to the canvas
 28 |   g.backgroundColor = "white";
 29 |   g.canvas.style.border = "1px black dashed";
 30 | 
 31 |   //Make the box and turret
 32 |   var box = g.rectangle(32, 32, "gray"),
 33 |       turret = g.line("red", 4, 0, 0, 32, 0);
 34 |   turret.x = 16;
 35 |   turret.y = 16;
 36 | 
 37 |   //Group them together as a composite sprite called `tank`
 38 |   tank = g.group(box, turret);
 39 |   g.stage.putCenter(tank);
 40 | 
 41 |   //Add some physics properties
 42 |   tank.vx = 0;
 43 |   tank.vy = 0;
 44 |   tank.accelerationX = 0.2;
 45 |   tank.accelerationY = 0.2;
 46 |   tank.rotationSpeed = 0;
 47 |   tank.friction = 0.96;
 48 |   tank.speed = 0;
 49 | 
 50 |   //The speed at which the tank should rotate,
 51 |   //initialized to 0
 52 |   tank.rotationSpeed = 0;
 53 | 
 54 |   //Whether or not the tank should move forward
 55 |   tank.moveForward = false;
 56 |   
 57 |   //Set the tank's `rotationSpeed` to -0.1 (to rotate left) if the
 58 |   //left arrow key is being pressed
 59 |   g.key.leftArrow.press = function() {
 60 |     tank.rotationSpeed = -0.1;
 61 |   };
 62 | 
 63 |   //If the left arrow key is released and the right arrow
 64 |   //key isn't being pressed down, set the `rotationSpeed` to 0
 65 |   g.key.leftArrow.release = function() {
 66 |     if (!g.key.rightArrow.isDown) tank.rotationSpeed = 0;
 67 |   };
 68 | 
 69 |   //Do the same for the right arrow key, but set
 70 |   //the `rotationSpeed` to 0.1 (to rotate right)
 71 |   g.key.rightArrow.press = function() {
 72 |     tank.rotationSpeed = 0.1;
 73 |   };
 74 | 
 75 |   g.key.rightArrow.release = function() {
 76 |     if (!g.key.leftArrow.isDown) tank.rotationSpeed = 0;
 77 |   };
 78 | 
 79 |   //Set `tank.moveForward` to `true` if the up arrow key is
 80 |   //pressed, and set it to `false` if it's released
 81 |   g.key.upArrow.press = function() {
 82 |     tank.moveForward = true;
 83 |   };
 84 |   g.key.upArrow.release = function() {
 85 |     tank.moveForward = false;
 86 |   };
 87 | 
 88 |   //Make a text sprite
 89 |   message = g.text("", "12px puzzler", "black", 8, 8);
 90 | 
 91 |   //Change the state to `play`
 92 |   g.state = play;  
 93 | }
 94 | 
 95 | //The `play` function will run in a loop
 96 | function play() {
 97 | 
 98 |   //Use the `rotationSpeed` to set the tank's rotation
 99 |   tank.rotation += tank.rotationSpeed;
100 | 
101 |   //If `tank.moveForward` is `true`, increase the speed
102 |   if (tank.moveForward) {
103 |     tank.speed += 0.1;
104 |   } 
105 |     
106 |   //If `tank.moveForward` is `false`, use 
107 |   //friction to slow the tank down
108 |   else {
109 |     tank.speed *= tank.friction;
110 |   }
111 | 
112 |   //Use the `speed` value to figure out the acceleration in the
113 |   //direction of the tank’s rotation
114 |   tank.accelerationX = tank.speed * Math.cos(tank.rotation);
115 |   tank.accelerationY = tank.speed * Math.sin(tank.rotation);
116 | 
117 |   //Apply the acceleration to the tank's velocity
118 |   tank.vx = tank.accelerationX;
119 |   tank.vy = tank.accelerationY;
120 | 
121 |   //Apply the tank's velocity to its position to make the tank move
122 |   tank.x += tank.vx;
123 |   tank.y += tank.vy;
124 | 
125 |   //Display the tank's angle of rotation
126 |   message.content = tank.rotation;
127 | 
128 | }
129 | </script>
130 | </body>
131 | 
132 | 
133 | 


--------------------------------------------------------------------------------
/examples/25_pointCollision.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Point collision</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script src="../plugins.js"></script>
 7 | <script>
 8 | 
 9 | /*
10 | This file requires these convenience functions from `plugins.js`:
11 | `hitTestPoint`
12 | */
13 | 
14 | //Create a new GA instance, and start it.
15 | 
16 | var g = ga(256, 256, setup);
17 | g.start();
18 | 
19 | //Declare global sprites, objects, and variables
20 | //that you want to access in all the game functions and states
21 | 
22 | var box, ball;
23 | 
24 | //A `setup` function that will run only once.
25 | //Use it for initialization tasks
26 | function setup() {
27 | 
28 |   //Make the background white and add a border to the canvas
29 |   g.backgroundColor = "white";
30 |   g.canvas.style.border = "1px black dashed";
31 | 
32 |   //Make a square
33 |   box = g.rectangle(64, 64, "blue");
34 |   g.stage.putCenter(box, box.halfWidth + 16, box.halfHeight + 16);
35 |   
36 |   //Make a circle
37 |   ball = g.circle(64, "red");
38 |   g.stage.putCenter(ball, -ball.radius - 16, -ball.radius -16);
39 | 
40 |   //Add some text 
41 |   message = g.text(
42 |     "No collision...", 
43 |     "16px sans-serif",
44 |     "black", 10, 10
45 |   );
46 |     
47 |   //Change the state to `play`
48 |   g.state = play;  
49 | }
50 | 
51 | //The `play` function will run in a loop
52 | function play() {
53 | 
54 |   //Set the default message content 
55 |   message.content = "No collision...";
56 | 
57 |   /*
58 |   Check for a collision between the pointer and the 
59 |   ball and box. The collision variables will be `true`
60 |   if there's a collision and `false` if there isn't.
61 |   Use the univeral `hit` method to do the collision check.
62 |   `hit` arguments (only the first two are required):
63 |   spriteA, spriteB, reactToCollision?, bounce?, useGlobalCoordinates?
64 |   actionWhenCollisionOccurs
65 |   */
66 | 
67 |   var boxCollision = g.hit(g.pointer, box);
68 |   var ballCollision = g.hit(g.pointer, ball);
69 | 
70 |   //You can alternatively use the lower-level `hitTestPoint` method
71 |   //`hitTestPoint` arguments:
72 |   //pointObject, sprite
73 |   /*
74 |   var boxCollision = g.hitTestPoint(g.pointer.position, box),
75 |       ballCollision = g.hitTestPoint(g.pointer.position, ball);
76 |   */
77 | 
78 |   //Change the message if there's a collision with the box
79 |   if(boxCollision) {
80 |     message.content = "Box!"; 
81 |   }
82 | 
83 |   //Change the message if there's a collision with the ball
84 |   if(ballCollision) {
85 |     message.content = "Ball!"; 
86 |   }
87 | }
88 | </script>
89 | </body>
90 | 
91 | 


--------------------------------------------------------------------------------
/examples/26_circleCollision.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Circle collision</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script src="../plugins.js"></script>
 7 | <script>
 8 | 
 9 | /*
10 | This file requires these convenience functions from `plugins.js`:
11 | `hitTestCircle`
12 | */
13 | 
14 | //Create a new GA instance, and start it.
15 | 
16 | var g = ga(256, 256, setup);
17 | g.start();
18 | 
19 | //Declare global sprites, objects, and variables
20 | //that you want to access in all the game functions and states
21 | 
22 | var blue, red;
23 | 
24 | //A `setup` function that will run only once.
25 | //Use it for initialization tasks
26 | function setup() {
27 | 
28 |   //Make the background white and add a border to the canvas
29 |   g.backgroundColor = "white";
30 |   g.canvas.style.border = "1px black dashed";
31 | 
32 |   //Make a blue circle
33 |   blue = g.circle(64, "blue");
34 |   g.stage.putCenter(blue, blue.halfWidth + 16, blue.halfHeight +16);
35 |   blue.draggable = true;
36 |   
37 |   //Make a red circle
38 |   red = g.circle(64, "red");
39 |   g.stage.putCenter(red, -red.radius -16, -red.radius -16);
40 |   red.draggable = true;
41 | 
42 |   //Add some text 
43 |   message = g.text(
44 |     "No collision...", 
45 |     "16px sans-serif",
46 |     "black", 10, 10
47 |   );
48 |     
49 |   //Change the state to `play`
50 |   g.state = play;  
51 | }
52 | 
53 | //The `play` function will run in a loop
54 | function play() {
55 | 
56 |   //Set the default message content 
57 |   message.content = "No collision...";
58 | 
59 |   //Check for a collision between the blue and red circles using
60 |   //the universal `hit` method.
61 |   //The collision variable will be `true`
62 |   //if there's a collision and `false` if there isn't
63 |   var collision = g.hit(blue, red);
64 | 
65 |   //Alternatively, you can use the lower-level `hitTestCircle` method.
66 |   //`hitTestCircle` arguments:
67 |   //sprite, sprite
68 |   //var collision = g.hitTestCircle(blue, red);
69 |   
70 |   //Change the message if there's a collision between the circles
71 |   if(collision) {
72 |     message.content = "Collision!"; 
73 |   }
74 | }
75 | </script>
76 | </body>
77 | 
78 | 


--------------------------------------------------------------------------------
/examples/27_rectangleCollision.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Rectangle collision</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script src="../plugins.js"></script>
 7 | <script>
 8 | 
 9 | /*
10 | This file requires these convenience functions from `plugins.js`:
11 | `hitTestRectangle`
12 | */
13 | 
14 | //Create a new GA instance, and start it.
15 | 
16 | var g = ga(256, 256, setup);
17 | g.start();
18 | 
19 | //Declare global sprites, objects, and variables
20 | //that you want to access in all the game functions and states
21 | 
22 | var blue, red, message;
23 | 
24 | //A `setup` function that will run only once.
25 | //Use it for initialization tasks
26 | function setup() {
27 | 
28 |   //Make the background white and add a border to the canvas
29 |   g.backgroundColor = "white";
30 |   g.canvas.style.border = "1px black dashed";
31 | 
32 |   //Make a blue square
33 |   blue = g.rectangle(64, 64, "blue");
34 |   g.stage.putCenter(blue, blue.halfWidth + 16, blue.halfHeight + 16);
35 |   blue.draggable = true;
36 |   
37 |   //Make a red square
38 |   red = g.rectangle(64, 64, "red");
39 |   g.stage.putCenter(red, -red.halfWidth -16, -red.halfWidth -16);
40 |   red.draggable = true;
41 | 
42 |   //Add some text 
43 |   message = g.text(
44 |     "No collision...", 
45 |     "16px sans-serif",
46 |     "black", 10, 10
47 |   );
48 |     
49 |   //Change the state to `play`
50 |   g.state = play;  
51 | }
52 | 
53 | //The `play` function will run in a loop
54 | function play() {
55 | 
56 |   //Set the default message content 
57 |   message.content = "No collision...";
58 | 
59 |   //Check for a collision between the blue and red squares.
60 |   //The collision variable will be `true`
61 |   //if there's a collision and `false` if there isn't
62 |   var collision = g.hit(blue, red);
63 | 
64 |   //Alternatively, you can use the lower-leve hitTestRectangle method.
65 |   //`hitTestRectangle` arguments:
66 |   //spriteOne, spriteTwo
67 |   //var collision = g.hitTestRectangle(blue, red);
68 |   
69 |   //Change the message if there's a collision between the rectangles
70 |   if(collision) {
71 |     message.content = "Collision!"; 
72 |   }
73 | }
74 | </script>
75 | </body>
76 | 
77 | 


--------------------------------------------------------------------------------
/examples/28_rectangleCircleCollision.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Rectangle circle collision</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script src="../plugins.js"></script>
 7 | <script>
 8 | 
 9 | /*
10 | This file requires these convenience functions from `plugins.js`:
11 | `hitTestCircleRectangle`
12 | */
13 | 
14 | //Create a new GA instance, and start it.
15 | 
16 | var g = ga(256, 256, setup);
17 | g.start();
18 | 
19 | //Declare global sprites, objects, and variables
20 | //that you want to access in all the game functions and states
21 | 
22 | var blue, red, message;
23 | 
24 | //A `setup` function that will run only once.
25 | //Use it for initialization tasks
26 | function setup() {
27 | 
28 |   //Make the background white and add a border to the canvas
29 |   g.backgroundColor = "white";
30 |   g.canvas.style.border = "1px black dashed";
31 | 
32 |   //Make a blue square
33 |   blue = g.rectangle(64, 64, "blue");
34 |   g.stage.putCenter(blue, blue.halfWidth + 16, blue.halfHeight + 16);
35 |   blue.draggable = true;
36 |   
37 |   //Make a red circle
38 |   red = g.circle(64, "red");
39 |   g.stage.putCenter(red, -red.halfWidth -16, -red.halfWidth -16);
40 |   red.draggable = true;
41 | 
42 |   //Add some text 
43 |   message = g.text(
44 |     "No collision...", 
45 |     "16px sans-serif",
46 |     "black", 10, 10
47 |   );
48 |     
49 |   //Change the state to `play`
50 |   g.state = play;  
51 | }
52 | 
53 | //The `play` function will run in a loop
54 | function play() {
55 | 
56 |   //Set the default message content 
57 |   message.content = "No collision...";
58 | 
59 |   //Check for a collision between the blue and red squares.
60 |   //The collision variable will be `true`
61 |   //if there's a collision and `false` if there isn't
62 |   var collision = g.hit(red, blue);
63 | 
64 |   //Alternatively, you can use the lower-leve hitTestRectangle method.
65 |   //`hitTestCircleRectangle` arguments:
66 |   //circularSprite, rectangularSprite
67 |   //var collision = g.hitTestCircleRectangle(red, blue);
68 |   
69 |   //Change the message if there's a collision between the rectangles
70 |   if(collision) {
71 |     message.content = "Collision!"; 
72 |   }
73 | }
74 | </script>
75 | </body>
76 | 
77 | 
78 | 


--------------------------------------------------------------------------------
/examples/29_pegs.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Pegs</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | This file requires these convenience functions from `plugins.js`:
 11 | `random`
 12 | `grid`
 13 | `move`
 14 | `contain`
 15 | `circleCollision`
 16 | */
 17 | 
 18 | //Create a new GA instance, and start it.
 19 | 
 20 | var g = ga(256, 256, setup);
 21 | g.start();
 22 | 
 23 | //Declare global sprites, objects, and variables
 24 | //that you want to access in all the game functions and states
 25 | 
 26 | var ball, pegs;
 27 | 
 28 | //A `setup` function that will run only once.
 29 | //Use it for initialization tasks
 30 | function setup() {
 31 | 
 32 |   //Make the background white and add a border to the canvas
 33 |   g.backgroundColor = "white";
 34 |   g.canvas.style.border = "1px black dashed";
 35 | 
 36 |   //Figure out a random diameter for the falling ball
 37 |   var randomDiameter = g.randomInt(8, 32);
 38 |  
 39 |   //Create the ball using the random diameter
 40 |   ball = g.circle(randomDiameter, "red");
 41 | 
 42 |   //Position the ball randomly somewhere across the top of the canvas
 43 |   ball.x = g.randomInt(0, g.canvas.width - ball.diameter);
 44 |   ball.y = 0;
 45 | 
 46 |   //Set the ball's velocity
 47 |   ball.vx = g.randomInt(-3, 6);
 48 |   ball.vy = 0;
 49 | 
 50 |   //Set the ball's gravity, friction and mass
 51 |   ball.gravity = 0.4;
 52 |   ball.frictionX = 1;
 53 |   ball.frictionY = 0;
 54 | 
 55 |   //Set the mass based on the ball's diameter
 56 |   ball.mass = 0.75 + (ball.diameter / 32);
 57 | 
 58 |   //An array of colors that will be chosen randomly for each
 59 |   //circular peg in the grid
 60 |   var colors = [
 61 |     "#FFABAB", "#FFDAAB", "#DDFFAB", "#ABE4FF", "#D9ABFF"
 62 |   ];
 63 |   
 64 |   /*
 65 |   Create the grid of pegs using the `grid` function. `grid` returns a
 66 |   `group` sprite object that contains a sprite for every cell in the
 67 |   grid. You can define the rows and columns in the grid, whether or
 68 |   not the sprites should be centered inside each cell, or what their offset from the
 69 |   top left corner of each cell should be. Supply a function that
 70 |   returns the sprite that you want to make for each cell. You can
 71 |   supply an optional final function that runs any extra code after
 72 |   each sprite has been created. Here's the format for creating a grid:
 73 | 
 74 |       gridGroup = grid(
 75 | 
 76 |         //Set the grid's properties
 77 |         rows, columns, cellWidth, cellHeight, 
 78 |         areSpirtesCentered?, xOffset, yOffset,
 79 | 
 80 |         //A function that returns a sprite
 81 |         function() {return g.circle(16, "blue");},
 82 | 
 83 |         //A optional final function that runs some extra code
 84 |         function() {console.log("extra!");}
 85 |       );
 86 |   */
 87 | 
 88 |   pegs = g.grid(
 89 |     //Set the grid's properties
 90 |     5, 4, 48, 48, 
 91 |     true, 0, 0,
 92 |     //A function that describes how to make each peg in the grid
 93 |     function() {
 94 |       var peg = g.circle(g.randomInt(8, 32), "blue");
 95 |       peg.fillStyle = colors[g.randomInt(0, 4)];
 96 |       return peg;
 97 |     },
 98 |     //Run any extra code after each peg is made, if you want to
 99 |     function() {console.log("extra!");}
100 |   );
101 | 
102 |   //Position the grid of pegs
103 |   pegs.setPosition(8, 48);
104 | 
105 |   //Change the state to `play`
106 |   g.state = play;  
107 | }
108 | 
109 | //The `play` function will run in a loop
110 | function play() {
111 |   //Apply gravity to the ball's vertical velocity
112 |   ball.vy += ball.gravity;
113 |   
114 |   //Apply friction. ball.frictionX will be 0.96 if the ball is
115 |   //on the ground, and 1 if it's in the air
116 |   ball.vx *= ball.frictionX;
117 | 
118 |   //Move the ball by applying the new calculated velocity
119 |   //to the ball's x and y position
120 |   g.move(ball);
121 | 
122 |   //Check for a collision with the ball and the stage's boundary, and
123 |   //make the ball bounce by setting setting the last argument 
124 |   //in the `contain` method to `true`
125 |   var stageCollision = g.contain(ball, g.stage.localBounds, true);
126 | 
127 |   //If the ball hit the bottom of the stage, add some so
128 |   //that the ball gradually rolls to a stop
129 |   if(stageCollision === "bottom") {
130 |     ball.frictionX = 0.96;
131 |   } else {
132 |     ball.frictionX = 1;
133 |   }
134 | 
135 |   //Check for a collision between the ball and the pegs using the
136 |   //universal `hit` method.
137 |   //arguments: circle, arrayOfCircles, reactToCollision?,
138 |   //bounceApart?, useGlobalPosition? 
139 |   g.hit(ball, pegs.children, true, true, true);
140 | 
141 |   //Alternatively, use a `forEach` loop and the lower-level
142 |   //`circleCollision` method
143 |   /*
144 |   pegs.children.forEach(function(peg) {
145 |     
146 |     //Make the ball bounce if it hits any of the pegs. Use the 
147 |     //`circleCollision` function to check for collisions between
148 |     //a moving circle and a stationary circle. Set the third argument to
149 |     //`false` to prevent the circles from bouncing, and set the fourth
150 |     //argument to `false` if you want to use the circle's local x/y
151 |     //coordinates. (The global coordinates will be used by default)
152 |     //`circleCollision` arguments:
153 |     //movingCircle, stationaryCircle, bounce?, globalCoordinates?
154 |     
155 |     g.circleCollision(ball, peg);
156 |   });
157 |  */
158 | 
159 | }
160 |  
161 | </script>
162 | </body>
163 | 
164 | 


--------------------------------------------------------------------------------
/examples/30_bricks.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Bricks</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | Learn how to make a make a circle bounce off rectangles. 
 11 | 
 12 | This file requires these convenience functions from `plugins.js`:
 13 | `random`
 14 | `grid`
 15 | `move`
 16 | `contain`
 17 | `circleCollision`
 18 | */
 19 | 
 20 | //Create a new GA instance, and start it.
 21 | 
 22 | var g = ga(256, 256, setup);
 23 | g.start();
 24 | 
 25 | //Declare global sprites, objects, and variables
 26 | //that you want to access in all the game functions and states
 27 | 
 28 | var ball, bricks;
 29 | 
 30 | //A `setup` function that will run only once.
 31 | //Use it for initialization tasks
 32 | function setup() {
 33 | 
 34 |   //Make the background white and add a border to the canvas
 35 |   g.backgroundColor = "white";
 36 |   g.canvas.style.border = "1px black dashed";
 37 | 
 38 |   //Figure out a random diameter for the falling ball
 39 |   var randomDiameter = g.randomInt(8, 32);
 40 |  
 41 |   //Create the ball using the random diameter
 42 |   ball = g.circle(randomDiameter, "red");
 43 | 
 44 |   //Position the ball randomly somewhere across the top of the canvas
 45 |   ball.x = g.randomInt(0, g.canvas.width - ball.diameter);
 46 |   ball.y = 0;
 47 | 
 48 |   //Set the ball's velocity
 49 |   ball.vx = g.randomInt(-3, 6);
 50 |   ball.vy = 0;
 51 | 
 52 |   //Set the ball's gravity, friction and mass
 53 |   ball.gravity = 0.4;
 54 |   ball.frictionX = 1;
 55 |   ball.frictionY = 0;
 56 | 
 57 |   //Set the mass based on the ball's diameter
 58 |   ball.mass = 0.75 + (ball.diameter / 32);
 59 | 
 60 |   //An array of colors that will be chosen randomly for each
 61 |   //circular peg in the grid
 62 |   var colors = [
 63 |     "#FFABAB", "#FFDAAB", "#DDFFAB", "#ABE4FF", "#D9ABFF"
 64 |   ];
 65 |   
 66 |   /*
 67 |   Create the grid of pegs using the `grid` function. `grid` returns a
 68 |   `group` sprite object that contains a sprite for every cell in the
 69 |   grid. You can define the rows and columns in the grid, whether or
 70 |   not the sprites should be centered inside each cell, or what their offset from the
 71 |   top left corner of each cell should be. Supply a function that
 72 |   returns the sprite that you want to make for each cell. You can
 73 |   supply an optional final function that runs any extra code after
 74 |   each sprite has been created. Here's the format for creating a grid:
 75 | 
 76 |       gridGroup = grid(
 77 | 
 78 |         //Set the grid's properties
 79 |         rows, columns, cellWidth, cellHeight, 
 80 |         areSpirtesCentered?, xOffset, yOffset,
 81 | 
 82 |         //A function that returns a sprite
 83 |         function() {return g.circle(16, "blue");},
 84 | 
 85 |         //A optional final function that runs some extra code
 86 |         function() {console.log("extra!");}
 87 |       );
 88 |   */
 89 | 
 90 |   bricks = g.grid(
 91 | 
 92 |     //Set the grid's properties
 93 |     5, 4, 48, 48, 
 94 |     true, 0, 0,
 95 | 
 96 |     //A function that describes how to make each brick in the grid
 97 |     function() {
 98 |       var brick = g.rectangle(g.randomInt(8, 32), g.randomInt(8, 32));
 99 |       brick.fillStyle = colors[g.randomInt(0, 4)];
100 |       return brick;
101 |     },
102 | 
103 |     //Run any extra code after each peg is made, if you want to
104 |     function() {console.log("extra!");}
105 |   );
106 | 
107 |   //Position the grid of pegs
108 |   bricks.setPosition(8, 48);
109 | 
110 |   //Change the state to `play`
111 |   g.state = play;  
112 | }
113 | 
114 | //The `play` function will run in a loop
115 | function play() {
116 | 
117 |   //Apply gravity to the ball's vertical velocity
118 |   ball.vy += ball.gravity;
119 |   
120 |   //Apply friction. ball.frictionX will be 0.96 if the ball is
121 |   //on the ground, and 1 if it's in the air
122 |   ball.vx *= ball.frictionX;
123 | 
124 |   //Move the ball by applying the new calculated velocity
125 |   //to the ball's x and y position
126 |   g.move(ball);
127 | 
128 |   //Check for a collision with the ball and the stage's boundary, and
129 |   //make the ball bounce by setting setting the last argument 
130 |   //in the `contain` method to `true`
131 |   var stageCollision = g.contain(ball, g.stage.localBounds, true);
132 | 
133 |   //If the ball hit the bottom of the stage, add some so
134 |   //that the ball gradually rolls to a stop
135 |   if(stageCollision === "bottom") {
136 |     ball.frictionX = 0.96;
137 |   } else {
138 |     ball.frictionX = 1;
139 |   }
140 | 
141 |   //Check for a collision between the ball and the pegs using the
142 |   //universal `hit` method.
143 |   //arguments: circle, arrayOfCircles, reactToCollision?,
144 |   //bounceApart?, useGlobalPositions?
145 |   g.hit(ball, bricks.children, true, true, true);
146 | 
147 |   //Alternatively, use a `forEach` loop and the lower-level
148 |   //`circleRectangleCollision` method
149 |   /*
150 |   bricks.children.forEach(function(brick) {
151 |     
152 |     //Make the ball bounce if it hits any of the pegs. Use the 
153 |     //`circleCollision` function to check for collisions between
154 |     //a moving circle and a stationary circle. Set the third argument to
155 |     //`false` to prevent the circles from bouncing, and set the fourth
156 |     //argument to `false` if you want to use the circle's local x/y
157 |     //coordinates. (The global coordinates will be used by default)
158 |     //`circleRectangleCollision` arguments:
159 |     //movingCircle, stationaryCircle, bounce?, globalCoordinates?
160 |     
161 |     g.circleRectangleCollision(ball, brick, true, true);
162 |   });
163 |   */
164 | 
165 | }
166 |  
167 | </script>
168 | </body>
169 | 
170 | 
171 | 


--------------------------------------------------------------------------------
/examples/31_marbles.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Marbles</title>
  4 | <body>
  5 | <p>Press, drag and release to shoot a marble
  6 | <script src="../ga.js"></script>
  7 | <script src="../plugins.js"></script>
  8 | <script>
  9 | 
 10 | /*
 11 | This file requires these convenience functions from `plugins.js`:
 12 | `random`
 13 | `grid`
 14 | `move`
 15 | `contain`
 16 | `circleCollision`
 17 | `multipleCircleCollision`
 18 | `angle`
 19 | `distance`
 20 | */
 21 | 
 22 | //Create a new GA instance, and start it.
 23 | 
 24 | var g = ga(320, 320, setup, ["images/marbles.png"]);
 25 | g.start();
 26 | 
 27 | //Declare global sprites, objects, and variables
 28 | //that you want to access in all the game functions and states
 29 | 
 30 | var sling, marbles, capturedMarble;
 31 | 
 32 | //A `setup` function that will run only once.
 33 | //Use it for initialization tasks
 34 | function setup() {
 35 | 
 36 |   //Make the background white and add a border to the canvas
 37 |   //g.backgroundColor = "white";
 38 |   g.canvas.style.border = "1px black dashed";
 39 | 
 40 |   /*
 41 |   Create the grid of marbles using the `grid` function. `grid` returns a
 42 |   `group` sprite object that contains a sprite for every cell in the
 43 |   grid. You can define the rows and columns in the grid, whether or
 44 |   not the sprites should be centered inside each cell, or what their offset from the
 45 |   top left corner of each cell should be. Supply a function that
 46 |   returns the sprite that you want to make for each cell. You can
 47 |   supply an optional final function that runs any extra code after
 48 |   each sprite has been created. Here's the format for creating a grid:
 49 | 
 50 |       gridGroup = grid(
 51 | 
 52 |         //Set the grid's properties
 53 |         columns, rows, cellWidth, cellHeight, 
 54 |         areSpirtesCentered?, xOffset, yOffset,
 55 | 
 56 |         //A function that returns a sprite
 57 |         function() {return g.circle(16, "blue");},
 58 | 
 59 |         //An optional final function that runs some extra code
 60 |         function() {console.log("extra!");}
 61 |       );
 62 | 
 63 |   */
 64 |   marbles = g.grid(
 65 |     //Set the grid's properties
 66 |     5, 5, 64, 64, 
 67 |     true, 0, 0,
 68 |     //A function that describes how to make each peg in the grid
 69 |     function() {
 70 |       var frames = g.filmstrip("images/marbles.png", 32, 32)
 71 |       var marble = g.sprite(frames);
 72 |       marble.show(g.randomInt(0, 5));
 73 |       marble.circular = true;
 74 |       var sizes = [8, 12, 16, 20, 24, 28, 32];
 75 |       marble.diameter = sizes[g.randomInt(0, 6)];
 76 |       marble.vx = g.randomInt(-10, 10);
 77 |       marble.vy = g.randomInt(-10, 10);
 78 |       marble.frictionX = 0.99;
 79 |       marble.frictionY = 0.99;
 80 |       marble.mass = 0.75 + (marble.diameter / 32);
 81 |       return marble;
 82 |     },
 83 |     //Run any extra code after each peg is made, if you want to
 84 |     function() {console.log("extra!");}
 85 |   );
 86 | 
 87 |   //Create the "sling" which is a line that will connect
 88 |   //the pointer to the marbles
 89 |   sling = g.line("Yellow", 4);
 90 |   sling.visible = false;
 91 | 
 92 |   //A variable to store the captured marble
 93 |   capturedMarble = null;
 94 | 
 95 |   //Change the state to `play`
 96 |   g.state = play;  
 97 | }
 98 | 
 99 | //The `play` function will run in a loop
100 | function play() {
101 |   
102 |   //If a marble has been captured, draw the 
103 |   //sling (the yellow line) between the pointer and
104 |   //the center of the captured marble
105 |   if (capturedMarble !== null) {
106 |     sling.visible = true;
107 |     sling.ax = capturedMarble.centerX;
108 |     sling.ay = capturedMarble.centerY;
109 |     sling.bx = g.pointer.x; 
110 |     sling.by = g.pointer.y;
111 |   }
112 | 
113 |   //Shoot the marble if the pointer has been released 
114 |   if (g.pointer.isUp) { 
115 |     sling.visible = false;
116 |     if (capturedMarble !== null) {
117 |       //Find out how long the sling is
118 |       sling.length = g.distance(capturedMarble, g.pointer);
119 |       //Get the angle between the center of the marble and the pointer
120 |       sling.angle = g.angle(g.pointer, capturedMarble);
121 |       //Shoot the marble away from the pointer with a velocity
122 |       //proportional to the sling's length
123 |       capturedMarble.vx = Math.cos(sling.angle) * sling.length / 5;
124 |       capturedMarble.vy = Math.sin(sling.angle) * sling.length / 5;
125 |       //Release the captured marble
126 |       capturedMarble = null;
127 |     }
128 |   }
129 | 
130 | 
131 |   marbles.children.forEach(function(marble) {
132 |     //Check for a collision with the pointer and marble
133 |     if (g.pointer.isDown && capturedMarble === null) {
134 |       if (g.hit(g.pointer, marble)) {
135 |         //If there's a collision, capture the marble
136 |         capturedMarble = marble;
137 |         capturedMarble.vx = 0;
138 |         capturedMarble.vy = 0;
139 |       }
140 |     }
141 | 
142 |     //Apply friction
143 |     marble.vx *= marble.frictionX;
144 |     marble.vy *= marble.frictionY;
145 | 
146 |     //Move the marble by applying the new calculated velocity
147 |     //to the marble's x and y position
148 |     g.move(marble);
149 | 
150 |     //Contain the marble inside the stage and make it bounce
151 |     //off the edges
152 |     g.contain(marble, g.stage.localBounds, true);
153 |   });
154 | 
155 |   //Make each circle in the `marbles.children` array
156 |   //bounce off another circle in the same array
157 |   g.multipleCircleCollision(marbles.children);
158 | 
159 |   /*
160 |   //You can alternatively check for for multiple circle collisions
161 |   //the good old fashioned way, like this:
162 | 
163 |   for (var i = 0; i < marbles.children.length; i++) {
164 |     //The first marble to use in the collision check 
165 |     var c1 = marbles.children[i];
166 |     for (var j = i + 1; j < marbles.children.length; j++) {
167 |       //The second marble to use in the collision check 
168 |       var c2 = marbles.children[j];
169 |       //Check for a collision and bounce the marbles apart if
170 |       //they collide. Use an optional mass property on the sprite
171 |       //to affect the bounciness of each marble
172 |       g.movingCircleCollision(c1, c2);
173 |     }
174 |   }
175 |   */
176 | }
177 |  
178 | </script>
179 | </body>
180 | 
181 | 


--------------------------------------------------------------------------------
/examples/32_blockRectangles.html:
--------------------------------------------------------------------------------
 1 | <!doctype html> 
 2 | <meta charset = "utf-8"> 
 3 | <title>Block rectangles</title>
 4 | <body>
 5 | <script src="../ga.js"></script>
 6 | <script src="../plugins.js"></script>
 7 | <script src="custom.js"></script>
 8 | <script>
 9 | 
10 | /*
11 | This file requires these convenience functions from `plugins.js`:
12 | `rectangleCollision`
13 | */
14 | 
15 | //Create a new GA instance, and start it.
16 | 
17 | var g = ga(256, 256, setup);
18 | g.start();
19 | 
20 | //Declare global sprites, objects, and variables
21 | //that you want to access in all the game functions and states
22 | 
23 | var blue, red, message;
24 | 
25 | //A `setup` function that will run only once.
26 | //Use it for initialization tasks
27 | function setup() {
28 | 
29 |   //Make the background white and add a border to the canvas
30 |   g.backgroundColor = "white";
31 |   g.canvas.style.border = "1px black dashed";
32 | 
33 |   //Make a blue square
34 |   blue = g.rectangle(64, 64, "blue");
35 |   g.stage.putCenter(blue, blue.halfWidth + 16, blue.halfHeight + 16);
36 |   blue.draggable = true;
37 |   
38 |   //Make a red square
39 |   red = g.rectangle(64, 64, "red");
40 |   g.stage.putCenter(red, -red.halfWidth -16, -red.halfWidth -16);
41 |   red.draggable = true;
42 | 
43 |   //Add some text 
44 |   message = g.text(
45 |     "No collision...", 
46 |     "16px sans-serif",
47 |     "black", 10, 10
48 |   );
49 |     
50 |   //Change the state to `play`
51 |   g.state = play;  
52 | }
53 | 
54 | //The `play` function will run in a loop
55 | function play() {
56 | 
57 |   /*
58 |   Use the universal `hit` method to prevent two rectangles from
59 |   overlapping. It returns a `collision` variable that tells you the side on which
60 |   the first rectangle touched the second rectangle. (The `collision`
61 |   variable will be `undefined` if there's no collision.). The second
62 |   sprite in the argument will block the movement of the first sprite.
63 |   The second sprite in the argument can push the first sprite.
64 |   //`hit` arguments:
65 |   //spriteOne, spriteTwo, reactToCollision?, bounceApart?
66 |   */
67 |   var collision = g.hit(blue, red, true, false);
68 | 
69 |   /*
70 |   You can alternatively use the lower-level `rectangleCollision`
71 |   method
72 |   `rectangleCollision` arguments:
73 |   sprite1, sprite2, bounce?, useGlobalCoordinates?
74 |   (the third and fourth arguments default to `true`);
75 |   */
76 |   //var collision = g.rectangleCollision(blue, red);
77 |   
78 |   //Change the message if there's a collision between the rectangles
79 |   if(collision) {
80 |     message.content = "Collision on: " + collision; 
81 |   } else {
82 |     message.content = "No collision...";
83 |   }
84 | }
85 | </script>
86 | </body>
87 | 
88 | 
89 | 


--------------------------------------------------------------------------------
/examples/35_tiledEditorSupport.html:
--------------------------------------------------------------------------------
  1 | <!doctype html> 
  2 | <meta charset = "utf-8"> 
  3 | <title>Tiled editor support</title>
  4 | <body>
  5 | <script src="../ga.js"></script>
  6 | <script src="../plugins.js"></script>
  7 | <script>
  8 | 
  9 | /*
 10 | This file requires these convenience functions from `plugins.js`:
 11 | `move`
 12 | `contain`
 13 | `hitTestTile`
 14 | `getIndex`
 15 | `getPoints`
 16 | `makeTiledWorld`
 17 | */
 18 | 
 19 | /*
 20 | Ga supports game maps and levels created using the popular Tiled
 21 | Editor level designer:
 22 | 
 23 | www.mapeditor.org
 24 |    
 25 | To prepare your Tiled Editor game world for use in Ga, give any significant thing a
 26 | `name` property. Anything with a `name` property in Tiled Editor can 
 27 | be accessed in your code by its string name, as you'll see ahead. Tiled Editor layers have a 
 28 | `name` property by default, and you can assign custom `name`
 29 | properties to tiles and objects.
 30 | 
 31 | Open `maps/timeBomPanic.tmx` file in Tiled Editor and take a careful
 32 | look at how it's been structured. Notice how sprites have been
 33 | organized into layers, and how those layers have been named and
 34 | stacked. Also, notice that the tileset images of the alien and bomb 
 35 | both have custom `name` properties: "alien" and "bomb".
 36 | 
 37 | */
 38 | 
 39 | //Create a new GA instance, and start it.
 40 | //Load the tileset PNG and the Tiled Editor JSON file
 41 | 
 42 | var g = ga(512, 512, setup, 
 43 |   [
 44 |     "images/timeBombPanic.png",
 45 |     "maps/timeBombPanic.json"
 46 |   ]
 47 | );
 48 | g.start();
 49 | 
 50 | //Declare global sprites, objects, and variables
 51 | //that you want to access in all the game functions and states
 52 | 
 53 | var world, alien, message, wallMapArray,
 54 |     bombMapArray, bombSprites, bombLayer;
 55 | 
 56 | //A `setup` function that will run only once.
 57 | //Use it for initialization tasks
 58 | function setup() {
 59 | 
 60 |   g.backgroundColor = "white";
 61 | 
 62 |   //Make the world from the Tiled JSON data and the tileset PNG image
 63 |   world = g.makeTiledWorld(
 64 |     "maps/timeBombPanic.json", 
 65 |     "images/timeBombPanic.png"
 66 |   );
 67 |     
 68 |   /*
 69 |   Get a reference to the `alien` sprite.
 70 |   Use `world.getObject` to do this. `getObject` searches for and
 71 |   returns and sprite in the `world` that has a `name` property that
 72 |   matches the string in the argument.
 73 |   */
 74 |   alien = world.getObject("alien");
 75 | 
 76 |   /*
 77 |   Each Tiled Editor layer has a `name` that can be accessed in your
 78 |   game code using
 79 |   `world.getObject` Tiled Editor's `tilelayers` have a `data` property
 80 |   that is an array containing all the grid index numbers (`gid`) of
 81 |   the tiles in that array. In this example we want to access all the
 82 |   wall sprites. In Tiled Editor, all the wall sprites were added to 
 83 |   a tile layer called `wallLayer`. We can access the `wallLayer`'s
 84 |   `data` array of sprites like this: 
 85 |   */
 86 | 
 87 |   wallMapArray = world.getObject("wallLayer").data;
 88 | 
 89 |   /*
 90 |   We also need a reference to the bomb layer. All Tiled Editor layers are 
 91 |   created as `groups` by Ga's `makeTiledWorld` method. That means they
 92 |   all have a `children` array that lets' you access all the sprites on
 93 |   that layer, if you even need to do that. 
 94 |   */
 95 | 
 96 |   bombLayer = world.getObject("bombLayer");
 97 | 
 98 |   //Get a reference to the level's bomb layer array. This is the
 99 |   //bomb layer's `data` array
100 | 
101 |   bombMapArray = bombLayer.data;
102 | 
103 |   /*
104 |   You can use `world.getObjects` (with an "s") to get an array of all
105 |   the things in the world that have the same `name` properties. There
106 |   are 5 bombs in the world, all which have share the same `name`
107 |   property: "bomb". Here's how you can access to all of them in an
108 |   array:
109 |   */
110 | 
111 |   bombSprites = world.getObjects("bomb");
112 | 
113 |   //`bombSprites` is now an array that contains all the bomb sprites
114 |   //in the world
115 | 
116 |   //Give the `alien` a `direction` property
117 |   alien.direction = "";
118 | 
119 |   //Configure Ga's built in arrow keys to assign the alien a direction
120 |   g.key.leftArrow.press = function() {alien.direction = "left"}; 
121 |   g.key.upArrow.press = function() {alien.direction = "up"}; 
122 |   g.key.rightArrow.press = function() {alien.direction = "right"}; 
123 |   g.key.downArrow.press = function() {alien.direction = "down"}; 
124 | 
125 |   //Change the game state to `play`
126 |   g.state = play;  
127 | }
128 | 
129 | //The `play` function will run in a loop
130 | function play() {
131 |   //Change the alien's direction only if it's at an intersection
132 |   //(This keeps it aligned to the grid cells. You don't have to do
133 |   //this but it's a nice effect that you might want to use in your
134 |   //own games at some point.)
135 | 
136 |   if(Math.floor(alien.x) % world.tilewidth === 0
137 |   && Math.floor(alien.y) % world.tileheight === 0) {
138 |     switch (alien.direction) {
139 |       case "up":
140 |         alien.vy = -4;
141 |         alien.vx = 0;
142 |         break;
143 |       case "down":
144 |         alien.vy = 4;
145 |         alien.vx = 0;
146 |         break;
147 |       case "left":
148 |         alien.vx = -4;
149 |         alien.vy = 0;
150 |         break;
151 |       case "right":
152 |         alien.vx = 4;
153 |         alien.vy = 0;
154 |         break;
155 |       case "none":
156 |         alien.vx = 0;
157 |         alien.vy = 0;
158 |         break;
159 |     }
160 |   }
161 |   
162 |   //Move the alien
163 |   g.move(alien);
164 | 
165 |   //Keep the alien contained inside the canvas
166 |   g.contain(alien, g.stage.localBounds);
167 | 
168 |   /*
169 |   Prevent the alien from walking through walls using the 
170 |   versatile `hitTestTile` method. `hitTestTile` checks for a
171 |   collision between a sprite and a tile in any map array that you
172 |   specify. It returns a `collision` object. 
173 |   `collision.hit` is a Boolean that tells you if a sprite is colliding
174 |   with the tile that you're checking. `collision.index` tells you the
175 |   map array's index number of the colliding sprite. You can check for
176 |   a collision with the tile against "every" corner point on the
177 |   sprite, "some" corner points, or the sprite's "center" point. (Each
178 |   of these three options has a different and useful effect, so experiment with
179 |   them.)
180 | 
181 |   `hitTestTile` arguments:
182 |   sprite, array, collisionTileGridIdNumber, worldObject, spritesPointsToCheck 
183 | 
184 |   The `world` object (the 4th argument) has to have these properties:
185 |   `tileheight`, `tilewidth`, `widthInTiles`.
186 | 
187 |   `hitTestTile` will work for any map array, not just those made with
188 |   Tiled Editor. So you can use it with your own game maps in the same way.
189 | 
190 |   */
191 |   var alienVsFloor = g.hitTestTile(alien, wallMapArray, 0, world, "every");
192 | 
193 |   //If every corner point on the alien isn't touching a floor tile (array gridIDNumber: 0) then
194 |   //prevent the alien from moving
195 |   if (!alienVsFloor.hit) {
196 |     //To prevent the alien from moving, subtract its velocity from its position
197 |     alien.x -= alien.vx;
198 |     alien.y -= alien.vy;
199 |     alien.vx = 0;
200 |     alien.vy = 0;
201 |   }
202 | 
203 |   //Let the alien pick up bombs
204 |   var alienVsBomb = g.hitTestTile(alien, bombMapArray, 5, world, "every");
205 | 
206 |   //Find out if the alien's position in the bomb array matches a bomb gid number
207 |   if (alienVsBomb.hit) {
208 |     //If it does, filter through the bomb sprites and find the one
209 |     //that matches the alien's position
210 |     bombSprites = bombSprites.filter(function(bomb) {
211 |       //Does the bomb sprite have the same index number as the alien?
212 |       if (bomb.index === alienVsBomb.index) {
213 |         //If it does, remove the bomb from the 
214 |         //`bombMapArray` by setting its gid to `0`
215 |         bombMapArray[bomb.index] = 0;
216 |         //Remove the bomb sprite from its container group
217 |         g.remove(bomb);
218 |         //Alternatively, remove the bomb with `removeChild` on
219 |         //the `bombLayer` group
220 |         //bombLayer.removeChild(bomb);
221 |         //Filter the bomb out of the `bombSprites` array
222 |         return false;
223 |       } else {
224 |         //Keep the bomb in the `bombSprites` array if it doesn't match
225 |         return true;
226 |       }
227 |     });
228 |   }
229 | 
230 | }
231 | 
232 | </script>
233 | </body>
234 | 


--------------------------------------------------------------------------------
/examples/fonts/PetMe64.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/fonts/PetMe64.ttf


--------------------------------------------------------------------------------
/examples/fonts/puzzler.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/fonts/puzzler.otf


--------------------------------------------------------------------------------
/examples/images/animals.json:
--------------------------------------------------------------------------------
 1 | {"frames": {
 2 | 
 3 | "cat.png":
 4 | {
 5 | 	"frame": {"x":2,"y":262,"w":128,"h":128},
 6 | 	"rotated": false,
 7 | 	"trimmed": false,
 8 | 	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
 9 | 	"sourceSize": {"w":128,"h":128}
10 | },
11 | "hedgehog.png":
12 | {
13 | 	"frame": {"x":2,"y":132,"w":128,"h":128},
14 | 	"rotated": false,
15 | 	"trimmed": false,
16 | 	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
17 | 	"sourceSize": {"w":128,"h":128}
18 | },
19 | "tiger.png":
20 | {
21 | 	"frame": {"x":2,"y":2,"w":128,"h":128},
22 | 	"rotated": false,
23 | 	"trimmed": false,
24 | 	"spriteSourceSize": {"x":0,"y":0,"w":128,"h":128},
25 | 	"sourceSize": {"w":128,"h":128}
26 | }},
27 | "meta": {
28 | 	"app": "http://www.codeandweb.com/texturepacker ",
29 | 	"version": "1.0",
30 | 	"image": "animals.png",
31 | 	"format": "RGBA8888",
32 | 	"size": {"w":256,"h":512},
33 | 	"scale": "1",
34 | 	"smartupdate": "$TexturePacker:SmartUpdate:f74fa155840ae7739785137739d5e23d:06a75246a1a4b65f2beacae47a5e81d7:b00d48b51f56eb7c81e25100fcce2828$"
35 | }
36 | }
37 | 


--------------------------------------------------------------------------------
/examples/images/animals.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/animals.png


--------------------------------------------------------------------------------
/examples/images/blixyiiTileset.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/blixyiiTileset.png


--------------------------------------------------------------------------------
/examples/images/blixyiiUI.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/blixyiiUI.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/ball.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/ball.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/bloxyee.json:
--------------------------------------------------------------------------------
  1 | {"frames": {
  2 | 
  3 | "ball.png":
  4 | {
  5 | 	"frame": {"x":2,"y":2,"w":18,"h":18},
  6 | 	"rotated": false,
  7 | 	"trimmed": false,
  8 | 	"spriteSourceSize": {"x":0,"y":0,"w":18,"h":18},
  9 | 	"sourceSize": {"w":18,"h":18},
 10 | 	"pivot": {"x":0.5,"y":0.5}
 11 | },
 12 | "blue.png":
 13 | {
 14 | 	"frame": {"x":254,"y":2,"w":64,"h":64},
 15 | 	"rotated": false,
 16 | 	"trimmed": false,
 17 | 	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 18 | 	"sourceSize": {"w":64,"h":64},
 19 | 	"pivot": {"x":0.5,"y":0.5}
 20 | },
 21 | "down.png":
 22 | {
 23 | 	"frame": {"x":2,"y":68,"w":192,"h":96},
 24 | 	"rotated": false,
 25 | 	"trimmed": false,
 26 | 	"spriteSourceSize": {"x":0,"y":0,"w":192,"h":96},
 27 | 	"sourceSize": {"w":192,"h":96},
 28 | 	"pivot": {"x":0.5,"y":0.5}
 29 | },
 30 | "green.png":
 31 | {
 32 | 	"frame": {"x":320,"y":2,"w":64,"h":64},
 33 | 	"rotated": false,
 34 | 	"trimmed": false,
 35 | 	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 36 | 	"sourceSize": {"w":64,"h":64},
 37 | 	"pivot": {"x":0.5,"y":0.5}
 38 | },
 39 | "orange.png":
 40 | {
 41 | 	"frame": {"x":122,"y":2,"w":64,"h":64},
 42 | 	"rotated": false,
 43 | 	"trimmed": false,
 44 | 	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 45 | 	"sourceSize": {"w":64,"h":64},
 46 | 	"pivot": {"x":0.5,"y":0.5}
 47 | },
 48 | "over.png":
 49 | {
 50 | 	"frame": {"x":2,"y":166,"w":192,"h":96},
 51 | 	"rotated": false,
 52 | 	"trimmed": false,
 53 | 	"spriteSourceSize": {"x":0,"y":0,"w":192,"h":96},
 54 | 	"sourceSize": {"w":192,"h":96},
 55 | 	"pivot": {"x":0.5,"y":0.5}
 56 | },
 57 | "paddle.png":
 58 | {
 59 | 	"frame": {"x":386,"y":2,"w":96,"h":18},
 60 | 	"rotated": false,
 61 | 	"trimmed": false,
 62 | 	"spriteSourceSize": {"x":0,"y":0,"w":96,"h":18},
 63 | 	"sourceSize": {"w":96,"h":18},
 64 | 	"pivot": {"x":0.5,"y":0.5}
 65 | },
 66 | "red.png":
 67 | {
 68 | 	"frame": {"x":56,"y":2,"w":64,"h":64},
 69 | 	"rotated": false,
 70 | 	"trimmed": false,
 71 | 	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 72 | 	"sourceSize": {"w":64,"h":64},
 73 | 	"pivot": {"x":0.5,"y":0.5}
 74 | },
 75 | "star.png":
 76 | {
 77 | 	"frame": {"x":22,"y":2,"w":32,"h":32},
 78 | 	"rotated": false,
 79 | 	"trimmed": false,
 80 | 	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
 81 | 	"sourceSize": {"w":32,"h":32},
 82 | 	"pivot": {"x":0.5,"y":0.5}
 83 | },
 84 | "title.png":
 85 | {
 86 | 	"frame": {"x":2,"y":264,"w":512,"h":512},
 87 | 	"rotated": false,
 88 | 	"trimmed": false,
 89 | 	"spriteSourceSize": {"x":0,"y":0,"w":512,"h":512},
 90 | 	"sourceSize": {"w":512,"h":512},
 91 | 	"pivot": {"x":0.5,"y":0.5}
 92 | },
 93 | "up.png":
 94 | {
 95 | 	"frame": {"x":196,"y":68,"w":192,"h":96},
 96 | 	"rotated": false,
 97 | 	"trimmed": false,
 98 | 	"spriteSourceSize": {"x":0,"y":0,"w":192,"h":96},
 99 | 	"sourceSize": {"w":192,"h":96},
100 | 	"pivot": {"x":0.5,"y":0.5}
101 | },
102 | "violet.png":
103 | {
104 | 	"frame": {"x":188,"y":2,"w":64,"h":64},
105 | 	"rotated": false,
106 | 	"trimmed": false,
107 | 	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
108 | 	"sourceSize": {"w":64,"h":64},
109 | 	"pivot": {"x":0.5,"y":0.5}
110 | }},
111 | "meta": {
112 | 	"app": "http://www.codeandweb.com/texturepacker",
113 | 	"version": "1.0",
114 | 	"image": "bloxyee.png",
115 | 	"format": "RGBA8888",
116 | 	"size": {"w":516,"h":778},
117 | 	"scale": "1",
118 | 	"smartupdate": "$TexturePacker:SmartUpdate:69a3eaaa37bd3a4f6be32a8380412e0d:461b4362d2b33cf0a01bf854b06e5212:f264188b89db952e7958fe42d205b088$"
119 | }
120 | }
121 | 


--------------------------------------------------------------------------------
/examples/images/bloxyee/bloxyee.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/bloxyee.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/blue.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/down.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/green.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/orange.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/orange.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/over.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/over.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/paddle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/paddle.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/red.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/red.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/star.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/title.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/up.png


--------------------------------------------------------------------------------
/examples/images/bloxyee/violet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/bloxyee/violet.png


--------------------------------------------------------------------------------
/examples/images/button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/button.png


--------------------------------------------------------------------------------
/examples/images/button2.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "frames": {
 3 | 
 4 |     "down.png": {
 5 |       "frame": {
 6 |         "x": 2,
 7 |         "y": 2,
 8 |         "w": 192,
 9 |         "h": 96
10 |       },
11 |       "rotated": false,
12 |       "trimmed": false,
13 |       "spriteSourceSize": {
14 |         "x": 0,
15 |         "y": 0,
16 |         "w": 192,
17 |         "h": 96
18 |       },
19 |       "sourceSize": {
20 |         "w": 192,
21 |         "h": 96
22 |       }
23 |     },
24 |     "over.png": {
25 |       "frame": {
26 |         "x": 2,
27 |         "y": 100,
28 |         "w": 192,
29 |         "h": 96
30 |       },
31 |       "rotated": false,
32 |       "trimmed": false,
33 |       "spriteSourceSize": {
34 |         "x": 0,
35 |         "y": 0,
36 |         "w": 192,
37 |         "h": 96
38 |       },
39 |       "sourceSize": {
40 |         "w": 192,
41 |         "h": 96
42 |       }
43 |     },
44 |     "up.png": {
45 |       "frame": {
46 |         "x": 2,
47 |         "y": 198,
48 |         "w": 192,
49 |         "h": 96
50 |       },
51 |       "rotated": false,
52 |       "trimmed": false,
53 |       "spriteSourceSize": {
54 |         "x": 0,
55 |         "y": 0,
56 |         "w": 192,
57 |         "h": 96
58 |       },
59 |       "sourceSize": {
60 |         "w": 192,
61 |         "h": 96
62 |       }
63 |     }
64 |   },
65 |   "meta": {
66 |     "app": "http://www.codeandweb.com/texturepacker ",
67 |     "version": "1.0",
68 |     "image": "button2.png",
69 |     "format": "RGBA8888",
70 |     "size": {
71 |       "w": 256,
72 |       "h": 512
73 |     },
74 |     "scale": "1",
75 |     "smartupdate": "$TexturePacker:SmartUpdate:7a0343ada6d31f78511c0b77b8da6efa:879e99d58591d2495b4355ec40d3e079:c39245c3a59c1712d97d26c862b4cbc5$"
76 |   }
77 | }


--------------------------------------------------------------------------------
/examples/images/button2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/button2.png


--------------------------------------------------------------------------------
/examples/images/buttonFairy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/buttonFairy.png


--------------------------------------------------------------------------------
/examples/images/buttonFairy/0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/buttonFairy/0.png


--------------------------------------------------------------------------------
/examples/images/buttonFairy/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/buttonFairy/1.png


--------------------------------------------------------------------------------
/examples/images/buttonFairy/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/buttonFairy/2.png


--------------------------------------------------------------------------------
/examples/images/buttonFairy/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/buttonFairy/3.png


--------------------------------------------------------------------------------
/examples/images/cat.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/cat.png


--------------------------------------------------------------------------------
/examples/images/fairy.json:
--------------------------------------------------------------------------------
 1 | {"frames": {
 2 | 
 3 | "0.png":
 4 | {
 5 | 	"frame": {"x":2,"y":70,"w":48,"h":32},
 6 | 	"rotated": false,
 7 | 	"trimmed": false,
 8 | 	"spriteSourceSize": {"x":0,"y":0,"w":48,"h":32},
 9 | 	"sourceSize": {"w":48,"h":32}
10 | },
11 | "1.png":
12 | {
13 | 	"frame": {"x":2,"y":36,"w":48,"h":32},
14 | 	"rotated": false,
15 | 	"trimmed": false,
16 | 	"spriteSourceSize": {"x":0,"y":0,"w":48,"h":32},
17 | 	"sourceSize": {"w":48,"h":32}
18 | },
19 | "2.png":
20 | {
21 | 	"frame": {"x":52,"y":2,"w":48,"h":32},
22 | 	"rotated": false,
23 | 	"trimmed": false,
24 | 	"spriteSourceSize": {"x":0,"y":0,"w":48,"h":32},
25 | 	"sourceSize": {"w":48,"h":32}
26 | },
27 | "3.png":
28 | {
29 | 	"frame": {"x":2,"y":2,"w":48,"h":32},
30 | 	"rotated": false,
31 | 	"trimmed": false,
32 | 	"spriteSourceSize": {"x":0,"y":0,"w":48,"h":32},
33 | 	"sourceSize": {"w":48,"h":32}
34 | }},
35 | "meta": {
36 | 	"app": "http://www.codeandweb.com/texturepacker ",
37 | 	"version": "1.0",
38 | 	"image": "fairy.png",
39 | 	"format": "RGBA8888",
40 | 	"size": {"w":128,"h":128},
41 | 	"scale": "1",
42 | 	"smartupdate": "$TexturePacker:SmartUpdate:2a1b01ae9e710613d1f5f4854353eb16:8563fc1bba2d2eed346a0245aa1126ad:f30cbba2f5db7260871a5426cffc03ac$"
43 | }
44 | }
45 | 


--------------------------------------------------------------------------------
/examples/images/fairy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/fairy.png


--------------------------------------------------------------------------------
/examples/images/fantasy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/fantasy.png


--------------------------------------------------------------------------------
/examples/images/forest.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/forest.png


--------------------------------------------------------------------------------
/examples/images/hedgehog.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/hedgehog.png


--------------------------------------------------------------------------------
/examples/images/marbles.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/marbles.png


--------------------------------------------------------------------------------
/examples/images/platforms.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/platforms.png


--------------------------------------------------------------------------------
/examples/images/rocket.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/rocket.png


--------------------------------------------------------------------------------
/examples/images/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/star.png


--------------------------------------------------------------------------------
/examples/images/tiger.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/tiger.png


--------------------------------------------------------------------------------
/examples/images/tile.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/tile.png


--------------------------------------------------------------------------------
/examples/images/timeBombPanic.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/timeBombPanic.png


--------------------------------------------------------------------------------
/examples/images/walkcycle.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/images/walkcycle.png


--------------------------------------------------------------------------------
/examples/maps/fantasy.tmx:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <map version="1.0" orientation="orthogonal" width="24" height="24" tilewidth="32" tileheight="32" backgroundcolor="#ffffff">
 3 |  <tileset firstgid="1" name="fantasy" tilewidth="32" tileheight="32">
 4 |   <image source="../images/fantasy.png" width="192" height="192"/>
 5 |   <tile id="4">
 6 |    <properties>
 7 |     <property name="name" value="skull"/>
 8 |    </properties>
 9 |   </tile>
10 |   <tile id="5">
11 |    <properties>
12 |     <property name="name" value="marmot"/>
13 |    </properties>
14 |   </tile>
15 |   <tile id="11">
16 |    <properties>
17 |     <property name="name" value="heart"/>
18 |    </properties>
19 |   </tile>
20 |  </tileset>
21 |  <layer name="ground" width="24" height="24">
22 |   <data encoding="base64" compression="zlib">
23 |    eJxjZGBgYAJiRhrR7EDMQUOaVu4edf+o+0fdP+r+UfePun/U/cPX/QBplAoh
24 |   </data>
25 |  </layer>
26 |  <layer name="obstacles" width="24" height="24">
27 |   <data encoding="base64" compression="zlib">
28 |    eJzVlEsOgCAMRGerpxgj9z+jJFJjEMqniPElDQvoMLQNQJ7Fx6rsz0TzQh/bPCsXKU/EfC+1fSK+qVMLRL3HXQkXVgu5fOL0OEpf9GJcCKHU51jH6g/QezFCX6NXn6ibIU3/PkdOOWfRb4F4vuk+56lV6P3HU3e+mTeLuB5E3m+udi0a2t4fIMr+R52pxaol+Qe+2woJ
29 |   </data>
30 |  </layer>
31 |  <layer name="items" width="24" height="24">
32 |   <data encoding="base64" compression="zlib">
33 |    eJxjYBgFAw1YB9oBo2DQAJ6BdsAoGAWjYBRAAdtAO4DGAAB07AAY
34 |   </data>
35 |  </layer>
36 |  <objectgroup name="objects">
37 |   <object name="elf" x="287" y="350" width="64" height="64">
38 |    <properties>
39 |     <property name="texture" value="elfTextures"/>
40 |    </properties>
41 |   </object>
42 |  </objectgroup>
43 |  <layer name="wallTops" width="24" height="24">
44 |   <data encoding="base64" compression="zlib">
45 |    eJxjYKAOYAZiFiqZRS0wWNw0WNxBbyAExLJ4sBCF5ksQYT8lQJCAPMgPckh8UuNZnGQXkQaGs/nIaUsOjzpyzSeUtogB+NI+JelmuANSwgOX2tEwHQXEAACOHwN8
46 |   </data>
47 |  </layer>
48 |  <layer name="treeTops" width="24" height="24">
49 |   <data encoding="base64" compression="zlib">
50 |    eJzNlVcKwDAMQ3OBDuiAjvufs/4pBKM4XoUK9GerL87oUkpZyRt5L7IG8kieyHOn9tVBPskX+e7ULgYWD5uFJZNNwxhh+zMjz/Mytrh4npWxxxXdFy9XS3wO0TyujDMkCc3B865YhNbk/SbqQ2vyzlHbpz1PnDfjDnt4JUkZGfdGytCcg0iNZj68BmVZ3qe6H9WgLO9/Gim6Z3X/13oAvBYRUg==
51 |   </data>
52 |  </layer>
53 | </map>
54 | 


--------------------------------------------------------------------------------
/examples/maps/timeBombPanic.json:
--------------------------------------------------------------------------------
 1 | { "backgroundcolor":"#ffffff",
 2 |  "height":8,
 3 |  "layers":[
 4 |         {
 5 |          "data":[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],
 6 |          "height":8,
 7 |          "name":"backgroudLayer",
 8 |          "opacity":1,
 9 |          "type":"tilelayer",
10 |          "visible":true,
11 |          "width":8,
12 |          "x":0,
13 |          "y":0
14 |         }, 
15 |         {
16 |          "data":[2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 3, 0, 2, 2, 0, 3, 0, 0, 0, 0, 2, 2, 0, 3, 3, 0, 0, 3, 2, 2, 0, 0, 0, 0, 0, 0, 2, 2, 0, 3, 3, 0, 3, 0, 2, 2, 0, 0, 3, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2],
17 |          "height":8,
18 |          "name":"wallLayer",
19 |          "opacity":1,
20 |          "type":"tilelayer",
21 |          "visible":true,
22 |          "width":8,
23 |          "x":0,
24 |          "y":0
25 |         }, 
26 |         {
27 |          "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 0, 0, 0, 5, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
28 |          "height":8,
29 |          "name":"bombLayer",
30 |          "opacity":1,
31 |          "type":"tilelayer",
32 |          "visible":true,
33 |          "width":8,
34 |          "x":0,
35 |          "y":0
36 |         }, 
37 |         {
38 |          "data":[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, 4, 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],
39 |          "height":8,
40 |          "name":"alienLayer",
41 |          "opacity":1,
42 |          "type":"tilelayer",
43 |          "visible":true,
44 |          "width":8,
45 |          "x":0,
46 |          "y":0
47 |         }],
48 |  "orientation":"orthogonal",
49 |  "properties":
50 |     {
51 | 
52 |     },
53 |  "tileheight":64,
54 |  "tilesets":[
55 |         {
56 |          "firstgid":1,
57 |          "image":"..\/..\/chapter03\/images\/timeBombPanic.png",
58 |          "imageheight":419,
59 |          "imagewidth":320,
60 |          "margin":0,
61 |          "name":"timeBombPanic",
62 |          "properties":
63 |             {
64 | 
65 |             },
66 |          "spacing":0,
67 |          "tileheight":64,
68 |          "tileproperties":
69 |             {
70 |              "3":
71 |                 {
72 |                  "name":"alien"
73 |                 },
74 |              "4":
75 |                 {
76 |                  "name":"bomb"
77 |                 }
78 |             },
79 |          "tilewidth":64
80 |         }],
81 |  "tilewidth":64,
82 |  "version":1,
83 |  "width":8
84 | }


--------------------------------------------------------------------------------
/examples/maps/timeBombPanic.tmx:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8"?>
 2 | <map version="1.0" orientation="orthogonal" width="8" height="8" tilewidth="64" tileheight="64" backgroundcolor="#ffffff">
 3 |  <tileset firstgid="1" name="timeBombPanic" tilewidth="64" tileheight="64">
 4 |   <image source="../timeBombPanic.png" width="320" height="419"/>
 5 |   <tile id="3">
 6 |    <properties>
 7 |     <property name="name" value="alien"/>
 8 |    </properties>
 9 |   </tile>
10 |   <tile id="4">
11 |    <properties>
12 |     <property name="name" value="bomb"/>
13 |    </properties>
14 |   </tile>
15 |  </tileset>
16 |  <layer name="backgroudLayer" width="8" height="8">
17 |   <data encoding="csv">
18 | 1,1,1,1,1,1,1,1,
19 | 1,1,1,1,1,1,1,1,
20 | 1,1,1,1,1,1,1,1,
21 | 1,1,1,1,1,1,1,1,
22 | 1,1,1,1,1,1,1,1,
23 | 1,1,1,1,1,1,1,1,
24 | 1,1,1,1,1,1,1,1,
25 | 1,1,1,1,1,1,1,1
26 | </data>
27 |  </layer>
28 |  <layer name="wallLayer" width="8" height="8">
29 |   <data encoding="csv">
30 | 2,2,2,2,2,2,2,2,
31 | 2,0,0,0,0,3,0,2,
32 | 2,0,3,0,0,0,0,2,
33 | 2,0,3,3,0,0,3,2,
34 | 2,0,0,0,0,0,0,2,
35 | 2,0,3,3,0,3,0,2,
36 | 2,0,0,3,0,0,0,2,
37 | 2,2,2,2,2,2,2,2
38 | </data>
39 |  </layer>
40 |  <layer name="bombLayer" width="8" height="8">
41 |   <data encoding="csv">
42 | 0,0,0,0,0,0,0,0,
43 | 0,0,5,0,0,0,5,0,
44 | 0,0,0,0,0,0,0,0,
45 | 0,0,0,0,0,0,0,0,
46 | 0,0,0,5,0,0,0,0,
47 | 0,0,0,0,0,0,0,0,
48 | 0,5,0,0,0,5,0,0,
49 | 0,0,0,0,0,0,0,0
50 | </data>
51 |  </layer>
52 |  <layer name="alienLayer" width="8" height="8">
53 |   <data encoding="csv">
54 | 0,0,0,0,0,0,0,0,
55 | 0,0,0,0,0,0,0,0,
56 | 0,0,0,0,0,0,0,0,
57 | 0,0,0,0,4,0,0,0,
58 | 0,0,0,0,0,0,0,0,
59 | 0,0,0,0,0,0,0,0,
60 | 0,0,0,0,0,0,0,0,
61 | 0,0,0,0,0,0,0,0
62 | </data>
63 |  </layer>
64 | </map>
65 | 


--------------------------------------------------------------------------------
/examples/sounds/bounce.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/sounds/bounce.wav


--------------------------------------------------------------------------------
/examples/sounds/explosion.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/sounds/explosion.wav


--------------------------------------------------------------------------------
/examples/sounds/music.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/sounds/music.wav


--------------------------------------------------------------------------------
/examples/sounds/shoot.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/examples/sounds/shoot.wav


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Ga!",
 3 |   "version": "0.0.1",
 4 |   "description": "The world's tiniest, cutest and funnest game engine",
 5 |   "main": "ga.js",
 6 |   "directories": {
 7 |     "example": "examples"
 8 |   },
 9 |   "scripts": {
10 |     "test": "echo \"Error: no test specified\" && exit 1"
11 |   },
12 |   "keywords": [
13 |     "Javascript",
14 |     "Game Engine"
15 |   ],
16 |   "author": "Rex van der Spuy",
17 |   "license": "Ga is vehemently unlicenesed",
18 |   "bugs": "https://github.com/kittykatattack/ga/issues",
19 |   "repository": {
20 |     "type": "git",
21 |     "url": "https://github.com/kittykatattack/ga.git"
22 |   },
23 |   "devDependencies": {
24 |     "grunt": "^0.4.5",
25 |     "grunt-contrib-uglify": "^0.8.0"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/tutorials/01_treasureHunter.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <meta charset="utf-8">
  3 | <title>Treasure hunter enhanced</title>
  4 | <body>
  5 | <!-- Import the Ga game engine files -->
  6 | <script src="../ga.js"></script>
  7 | <script src="../plugins.js"></script>
  8 | <script>
  9 | 
 10 | //Create a new Ga instance, and start it.
 11 | //Pre-load images in the array.
 12 | var g = ga(
 13 |   512, 512, setup,
 14 |   [
 15 |     "sounds/chimes.wav"
 16 |   ]
 17 | );
 18 | 
 19 | //Start the Ga engine
 20 | g.start();
 21 | 
 22 | //Declare your global variables (global to this game)
 23 | var dungeon, player, treasure, enemies, chimes, exit,
 24 |     healthBar, message, gameScene, gameOverScene;
 25 | 
 26 | //The `setup` function will run only once.
 27 | //Use it for initialization tasks
 28 | function setup() {
 29 |   //Set the canvas border and background color
 30 |   g.canvas.style.border = "1px black dashed";
 31 |   g.backgroundColor = "white";
 32 | 
 33 |   //Create the `chimes` sound object
 34 |   chimes = g.sound("sounds/chimes.wav");
 35 | 
 36 |   //Create the `gameScene` group
 37 |   gameScene = g.group();
 38 |   //The exit door
 39 |   exit = g.rectangle(48, 48, "green");
 40 |   exit.x = 8;
 41 |   exit.y = 8;
 42 |   gameScene.addChild(exit);
 43 | 
 44 |   //The player sprite
 45 |   player = g.rectangle(32, 32, "blue");
 46 |   player.x = 68;
 47 |   player.y = g.canvas.height / 2 - player.halfHeight;
 48 |   gameScene.addChild(player);
 49 | 
 50 |   //Create the treasure
 51 |   treasure = g.rectangle(16, 16, "gold");
 52 | 
 53 |   //Position it next to the left edge of the canvas
 54 |   treasure.x = g.canvas.width - treasure.width - 10;
 55 |   treasure.y = g.canvas.height / 2 - treasure.halfHeight;
 56 | 
 57 |   //Alternatively, you could use Ga's built in convience method
 58 |   //called `putCenter` to postion the sprite like this:
 59 |   //g.stage.putCenter(treasure, 208, 0);
 60 | 
 61 |   //Create a `pickedUp` property on the treasure to help us Figure
 62 |   //out whether or not the treasure has been picked up by the player
 63 |   treasure.pickedUp = false;
 64 | 
 65 |   //Add the treasure to the `gameScene`
 66 |   gameScene.addChild(treasure);
 67 |   //Make the enemies
 68 |   var numberOfEnemies = 6,
 69 |       spacing = 48,
 70 |       xOffset = 150,
 71 |       speed = 2,
 72 |       direction = 1;
 73 | 
 74 |   enemies = [];
 75 | 
 76 |   //Make as many enemies as there are `numberOfEnemies`
 77 |   for (var i = 0; i < numberOfEnemies; i++) {
 78 | 
 79 |     //Each enemy is a red rectangle
 80 |     var enemy = g.rectangle(32, 32, "red");
 81 | 
 82 |     //Space each enemey horizontally according to the `spacing` value.
 83 |     //`xOffset` determines the point from the left of the screen
 84 |     //at which the first enemy should be added.
 85 |     var x = spacing * i + xOffset;
 86 | 
 87 |     //Give the enemy a random y position
 88 |     var y = g.randomInt(0, g.canvas.height - enemy.height);
 89 | 
 90 |     //Set the enemy's direction
 91 |     enemy.x = x;
 92 |     enemy.y = y;
 93 | 
 94 |     //Set the enemy's vertical velocity. `direction` will be either `1` or
 95 |     //`-1`. `1` means the enemy will move down and `-1` means the enemy will
 96 |     //move up. Multiplying `direction` by `speed` determines the enemy's
 97 |     //vertical direction
 98 |     enemy.vy = speed * direction;
 99 | 
100 |     //Reverse the direction for the next enemy
101 |     direction *= -1;
102 | 
103 |     //Push the enemy into the `enemies` array
104 |     enemies.push(enemy);
105 | 
106 |     //Add the enemy to the `gameScene`
107 |     gameScene.addChild(enemy);
108 |   }
109 |   //Create the health bar
110 |   var outerBar = g.rectangle(128, 16, "black"),
111 |       innerBar = g.rectangle(128, 16, "yellowGreen");
112 | 
113 |   //Group the inner and outer bars
114 |   healthBar = g.group(outerBar, innerBar);
115 | 
116 |   //Set the `innerBar` as a property of the `healthBar`
117 |   healthBar.inner = innerBar;
118 | 
119 |   //Position the health bar
120 |   healthBar.x = g.canvas.width - 148;
121 |   healthBar.y = 16;
122 | 
123 |   //Add the health bar to the `gameScene`
124 |   gameScene.addChild(healthBar);
125 | 
126 |   //Add some text for the game over message
127 |   message = g.text("Game Over!", "64px Futura", "black", 20, 20);
128 |   message.x = 120;
129 |   message.y = g.canvas.height / 2 - 64;
130 | 
131 |   //Create a `gameOverScene` group and add the message sprite to it
132 |   gameOverScene = g.group(message);
133 | 
134 |   //Make the `gameOverScene` invisible for now
135 |   gameOverScene.visible = false;
136 | 
137 |   //Assign the player's keyboard controllers
138 |   g.fourKeyController(player, 5, 38, 39, 40, 37);
139 | 
140 |   //You can also do it the long way, like this:
141 |   /*
142 |   //Left arrow key `press` method
143 |   g.key.leftArrow.press = function() {
144 |     //Change the player's velocity when the key is pressed
145 |     player.vx = -5;
146 |     player.vy = 0;
147 |   };
148 |   //Left arrow key `release` method
149 |   g.key.leftArrow.release = function() {
150 |     //If the left arrow has been released, and the right arrow isn't down,
151 |     //and the player isn't moving vertically:
152 |     //Stop the player
153 |     if (!g.key.rightArrow.isDown && player.vy === 0) {
154 |       player.vx = 0;
155 |     }
156 |   };
157 |   g.key.upArrow.press = function() {
158 |     player.vy = -5;
159 |     player.vx = 0;
160 |   };
161 |   g.key.upArrow.release = function() {
162 |     if (!g.key.downArrow.isDown && player.vx === 0) {
163 |       player.vy = 0;
164 |     }
165 |   };
166 |   g.key.rightArrow.press = function() {
167 |     player.vx = 5;
168 |     player.vy = 0;
169 |   };
170 |   g.key.rightArrow.release = function() {
171 |     if (!g.key.leftArrow.isDown && player.vy === 0) {
172 |       player.vx = 0;
173 |     }
174 |   };
175 |   g.key.downArrow.press = function() {
176 |     player.vy = 5;
177 |     player.vx = 0;
178 |   };
179 |   g.key.downArrow.release = function() {
180 |     if (!g.key.upArrow.isDown && player.vx === 0) {
181 |       player.vy = 0;
182 |     }
183 |   };
184 |   */ 
185 | 
186 |   //set the game state to `play`
187 |   g.state = play;
188 | }
189 | 
190 | //The `play` state
191 | function play() {
192 | 
193 |   //Move the player
194 |   g.move(player);
195 | 
196 |   //Keep the player contained inside the stage's area
197 |   g.contain(player, g.stage.localBounds);
198 | 
199 |   //Move the enemies and check for a collision
200 | 
201 |   //Set `playerHit` to `false` before checking for a collision
202 |   var playerHit = false;
203 | 
204 |   //Loop through all the sprites in the `enemies` array
205 |   enemies.forEach(function(enemy) {
206 | 
207 |     //Move the enemy
208 |     g.move(enemy);
209 | 
210 |     //Check the enemy's screen boundaries
211 |     var enemyHitsEdges = g.contain(enemy, g.stage.localBounds);
212 | 
213 |     //If the enemy hits the top or bottom of the stage, reverse
214 |     //its direction
215 |     if (enemyHitsEdges === "top" || enemyHitsEdges === "bottom") {
216 |       enemy.vy *= -1;
217 |     }
218 | 
219 |     //Test for a collision. If any of the enemies are touching
220 |     //the player, set `playerHit` to `true`
221 |     if(g.hitTestRectangle(player, enemy)) {
222 |      playerHit = true;
223 |     }
224 |   });
225 | 
226 |   //If the player is hit...
227 |   if(playerHit) {
228 |     //Make the player semi-transparent
229 |     player.alpha = 0.5;
230 |     //Reduce the width of the health bar's inner rectangle by 1 pixel
231 |     healthBar.inner.width -= 1;
232 |   } else {
233 |     //Make the player fully opaque (non-transparent) if it hasn't been hit
234 |     player.alpha = 1;
235 |   }
236 | 
237 |   //Check for a collision between the player and the treasure
238 |   if (g.hitTestRectangle(player, treasure)) {
239 | 
240 |     //If the treasure is touching the player, center it over the player
241 |     treasure.x = player.x + 8;
242 |     treasure.y = player.y + 8;
243 | 
244 |     if(!treasure.pickedUp) {
245 |       //If the treasure hasn't already been picked up,
246 |       //play the `chimes` sound
247 |       chimes.play();
248 |       treasure.pickedUp = true;
249 |     };
250 |   }
251 | 
252 |   //Check for the end of the game
253 | 
254 |   //Does the player have enough health? If the width of the `innerBar`
255 |   //is less than zero, end the game and display "You lost!"
256 |   if (healthBar.inner.width < 0) {
257 |     g.state = end;
258 |     message.content = "You lost!";
259 |   }
260 | 
261 |   //If the player has brought the treasure to the exit,
262 |   //end the game and display "You won!"
263 |   if (g.hitTestRectangle(treasure, exit)) {
264 |     g.state = end;
265 |     message.content = "You won!";
266 |   }
267 | }
268 | 
269 | function end() {
270 |   //Hide the `gameScene` and display the `gameOverScene`
271 |   gameScene.visible = false;
272 |   gameOverScene.visible = true;
273 | }
274 | 
275 | </script>
276 | </body>
277 | 


--------------------------------------------------------------------------------
/tutorials/02_treasureHunterImages.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <meta charset="utf-8">
  3 | <title>Treasure Hunter with Images</title>
  4 | <body>
  5 | <!-- Import the Ga game engine files -->
  6 | <script src="../ga.js"></script>
  7 | <script src="../plugins.js"></script>
  8 | <script>
  9 | 
 10 | //Create a new GA instance, and start it.
 11 | //Pre-load images in the array.
 12 | var g = ga(
 13 |   512, 512, setup,
 14 |   [
 15 |     "images/explorer.png",
 16 |     "images/dungeon.png",
 17 |     "images/blob.png",
 18 |     "images/treasure.png",
 19 |     "images/door.png",
 20 |     "sounds/chimes.wav"
 21 |   ]
 22 | );
 23 | g.start();
 24 | 
 25 | //Decelare your global variables (global to this game)
 26 | var dungeon, player, treasure, enemies, chimes, exit,
 27 |     healthBar, message, gameScene, gameOverScene;
 28 | 
 29 | //The `setup` function will run only once.
 30 | //Use it for initialization tasks
 31 | function setup() {
 32 | 
 33 |   //Set the canvas border and background color
 34 |   g.canvas.style.border = "1px black dashed";
 35 |   g.backgroundColor = "white";
 36 | 
 37 |   //Create the `chimes` sound object
 38 |   chimes = g.sound("sounds/chimes.wav");
 39 | 
 40 |   //The dungeon background
 41 |   dungeon = g.sprite("images/dungeon.png");
 42 | 
 43 |   //The exit door
 44 |   exit = g.sprite("images/door.png");
 45 |   exit.x = 32;
 46 | 
 47 |   //The player sprite
 48 |   player = g.sprite("images/explorer.png");
 49 |   player.x = 68;
 50 |   player.y = g.canvas.height / 2 - player.halfWidth;
 51 | 
 52 |   //Create the treasure
 53 |   treasure = g.sprite("images/treasure.png");
 54 | 
 55 |   //Position it next to the left edge of the canvas
 56 |   treasure.x = g.canvas.width - treasure.width - 32;
 57 |   treasure.y = g.canvas.height / 2 - treasure.halfHeight;
 58 |   
 59 |   //Alternatively, you could use Ga's built in convience method
 60 |   //called `putCenter` to postion the sprite like this:
 61 |   //g.stage.putCenter(treasure, 208, 0);
 62 | 
 63 |   //Create a `pickedUp` property on the treasure to help us Figure
 64 |   //out whether or not the treasure has been picked up by the player
 65 |   treasure.pickedUp = false;
 66 | 
 67 |   //Create the `gameScene` group and add the sprites
 68 |   gameScene = g.group(dungeon, exit, player, treasure);
 69 | 
 70 |   //Make the enemies
 71 |   var numberOfEnemies = 6,
 72 |       spacing = 48,
 73 |       xOffset = 150,
 74 |       speed = 2,
 75 |       direction = 1;
 76 | 
 77 |   enemies = [];
 78 | 
 79 |   //Make as many enemies as there are `numberOfEnemies`
 80 |   for (var i = 0; i < numberOfEnemies; i++) {
 81 | 
 82 |     //Each enemy is a red rectangle
 83 |     var enemy = g.sprite("images/blob.png");
 84 | 
 85 |     //Space each enemy horizontally according to the `spacing` value.
 86 |     //`xOffset` determines the point from the left of the screen
 87 |     //at which the first enemy should be added.
 88 |     var x = spacing * i + xOffset;
 89 | 
 90 |     //Give the enemy a random y position
 91 |     var y = g.randomInt(0, g.canvas.height - enemy.height);
 92 | 
 93 |     //Set the enemy's direction
 94 |     enemy.x = x;
 95 |     enemy.y = y;
 96 | 
 97 |     //Set the enemy's vertical velocity. `direction` will be either `1` or
 98 |     //`-1`. `1` means the enemy will move down and `-1` means the enemy will
 99 |     //move up. Multiplying `direction` by `speed` determines the enemy's
100 |     //vertical direction
101 |     enemy.vy = speed * direction;
102 | 
103 |     //Reverse the direction for the next enemy
104 |     direction *= -1;
105 | 
106 |     //Push the enemy into the `enemies` array
107 |     enemies.push(enemy);
108 | 
109 |     //Add the enemy to the `gameScene`
110 |     gameScene.addChild(enemy);
111 |   }
112 | 
113 |   //Create the health bar
114 |   var outerBar = g.rectangle(128, 8, "black"),
115 |       innerBar = g.rectangle(128, 8, "red");
116 | 
117 |   //Group the inner and outer bars
118 |   healthBar = g.group(outerBar, innerBar);
119 | 
120 |   //Set the `innerBar` as a property of the `healthBar`
121 |   healthBar.inner = innerBar;
122 | 
123 |   //Position the health bar
124 |   healthBar.x = g.canvas.width - 164;
125 |   healthBar.y = 4;
126 | 
127 |   //Add the health bar to the `gameScene`
128 |   gameScene.addChild(healthBar);
129 | 
130 |   //Add some text for the game over message
131 |   message = g.text("Game Over!", "64px Futura", "black", 20, 20);
132 |   message.x = 120;
133 |   message.y = g.canvas.height / 2 - 64;
134 | 
135 |   //Create a `gameOverScene` group and add the message sprite to it
136 |   gameOverScene = g.group(message);
137 | 
138 |   //Make the `gameOverScene` invisible for now
139 |   gameOverScene.visible = false;
140 | 
141 |   //Assign the player's keyboard controllers
142 |   g.fourKeyController(player, 5, 38, 39, 40, 37);
143 | 
144 |   //You can also do it the long way, like this:
145 |   /*
146 |   //Assign key `press` methods
147 |   g.key.leftArrow.press = function() {
148 |     //Change the player's velocity when the key is pressed
149 |     player.vx = -5;
150 |     player.vy = 0;
151 |   };
152 |   g.key.leftArrow.release = function() {
153 |     //If the left arrow has been released, and the right arrow isn't down,
154 |     //and the player isn't moving vertically:
155 |     //Stop the player
156 |     if (!g.key.rightArrow.isDown && player.vy === 0) {
157 |       player.vx = 0;
158 |     }
159 |   };
160 |   g.key.upArrow.press = function() {
161 |     player.vy = -5;
162 |     player.vx = 0;
163 |   };
164 |   g.key.upArrow.release = function() {
165 |     if (!g.key.downArrow.isDown && player.vx === 0) {
166 |       player.vy = 0;
167 |     }
168 |   };
169 |   g.key.rightArrow.press = function() {
170 |     player.vx = 5;
171 |     player.vy = 0;
172 |   };
173 |   g.key.rightArrow.release = function() {
174 |     if (!g.key.leftArrow.isDown && player.vy === 0) {
175 |       player.vx = 0;
176 |     }
177 |   };
178 |   g.key.downArrow.press = function() {
179 |     player.vy = 5;
180 |     player.vx = 0;
181 |   };
182 |   g.key.downArrow.release = function() {
183 |     if (!g.key.upArrow.isDown && player.vx === 0) {
184 |       player.vy = 0;
185 |     }
186 |   };
187 |   */
188 | 
189 |   //set the game state to `play`
190 |   g.state = play;
191 | }
192 | 
193 | //The `play` state
194 | function play() {
195 | 
196 |   //Move the player
197 |   g.move(player);
198 | 
199 |   //Keep the player contained inside the stage's area
200 |   g.contain(
201 |     player,
202 |     {
203 |       x: 32, y: 16,
204 |       width: g.canvas.width - 32,
205 |       height: g.canvas.height - 32
206 |     }
207 |   );
208 | 
209 |   //Move the enemies and check for a collision
210 | 
211 |   //Set `playerHit` to `false` before checking for a collision
212 |   var playerHit = false;
213 | 
214 |   //Loop through all the enemy sprites
215 |   enemies.forEach(function(enemy) {
216 | 
217 |     //Move the enemy
218 |     g.move(enemy);
219 | 
220 |     //Check the enemy's screen boundaries
221 |     var enemyHitsEdges = g.contain(
222 |       enemy,
223 |       {
224 |         x: 32, y: 16,
225 |         width: g.canvas.width - 32,
226 |         height: g.canvas.height - 32
227 |       }
228 |     );
229 | 
230 |     //If the enemy hits the top or bottom of the stage, reverse
231 |     //its direction
232 |     if (enemyHitsEdges === "top" || enemyHitsEdges === "bottom") {
233 |       enemy.vy *= -1;
234 |     }
235 | 
236 |     //Test for a collision. If any of the enemies are touching
237 |     //the player, set `playerHit` to `true`
238 |     if(g.hitTestRectangle(player, enemy)) {
239 |      playerHit = true;
240 |     }
241 |   });
242 | 
243 |   //If the player is hit...
244 |   if(playerHit) {
245 |     //Make the player semi-transparent
246 |     player.alpha = 0.5;
247 |     //Reduce the width of the health bar's inner rectangle by 1 pixel
248 |     healthBar.inner.width -= 1;
249 |   } else {
250 |     //Make the player fully opaque (non-transparent) if it hasn't been hit
251 |     player.alpha = 1;
252 |   }
253 | 
254 |   //Check for a collision between the player and the treasure
255 |   if (g.hitTestRectangle(player, treasure)) {
256 | 
257 |     //If the treasure is touching the player, center it over the player
258 |     treasure.x = player.x + 8;
259 |     treasure.y = player.y + 8;
260 |     if(!treasure.pickedUp) {
261 |         //If the treasure hasn't already been picked up,
262 |         //play the `chimes` sound
263 |         chimes.play();
264 |         treasure.pickedUp = true;
265 |     };
266 |   }
267 | 
268 |   //Check for the end of the game
269 | 
270 |   //Does the player have enough health? If the width of the `innerBar`
271 |   //is less than zero, end the game and display "You lost!"
272 |   if (healthBar.inner.width < 0) {
273 |     g.state = end;
274 |     message.content = "You lost!";
275 |   }
276 | 
277 |   //If the player has brought the treasure to the exit,
278 |   //end the game and display "You won!"
279 |   if (g.hitTestRectangle(treasure, exit)) {
280 |     g.state = end;
281 |     message.content = "You won!";
282 |   }
283 | }
284 | 
285 | function end() {
286 |   //Hide the `gameScene` and display the `gameOverScene`
287 |   gameScene.visible = false;
288 |   gameOverScene.visible = true;
289 | }
290 | 
291 | </script>
292 | </body>
293 | 
294 | 


--------------------------------------------------------------------------------
/tutorials/03_treasureHunterAtlas.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <meta charset="utf-8">
  3 | <title>Treasure Hunter using a Texture Atlas</title>
  4 | <body>
  5 | <!-- Import the Ga game engine files -->
  6 | <script src="../ga.js"></script>
  7 | <script src="../plugins.js"></script>
  8 | <script>
  9 | 
 10 | //Create a new GA instance, and start it.
 11 | //Pre-load images in the array.
 12 | var g = ga(
 13 |   512, 512, setup,
 14 |   [
 15 |     "images/treasureHunter.json",
 16 |     "sounds/chimes.wav"
 17 |   ]
 18 | );
 19 | g.start();
 20 | 
 21 | //Decelare your global variables (global to this game)
 22 | var dungeon, player, treasure, enemies, chimes, exit,
 23 |     healthBar, message, gameScene, gameOverScene;
 24 | 
 25 | //The `setup` function will run only once.
 26 | //Use it for initialization tasks
 27 | function setup() {
 28 | 
 29 |   //Set the canvas border and background color
 30 |   g.canvas.style.border = "1px black dashed";
 31 |   g.backgroundColor = "white";
 32 | 
 33 |   //Create the `chimes` sound object
 34 |   chimes = g.sound("sounds/chimes.wav");
 35 | 
 36 |   //The dungeon background
 37 |   dungeon = g.sprite("dungeon.png");
 38 | 
 39 |   //The exit door
 40 |   exit = g.sprite("door.png");
 41 |   exit.x = 32;
 42 | 
 43 |   //The player sprite
 44 |   player = g.sprite("explorer.png");
 45 |   player.x = 68;
 46 |   player.y = g.canvas.height / 2 - player.halfWidth;
 47 | 
 48 |   //Create the treasure
 49 |   treasure = g.sprite("treasure.png");
 50 | 
 51 |   //Position it next to the left edge of the canvas
 52 |   treasure.x = g.canvas.width - treasure.width - 32;
 53 |   treasure.y = g.canvas.height / 2 - treasure.halfHeight;
 54 | 
 55 |   //Create a `pickedUp` property on the treasure to help us Figure
 56 |   //out whether or not the treasure has been picked up by the player
 57 |   treasure.pickedUp = false;
 58 | 
 59 |   //Create the `gameScene` group and add the sprites
 60 |   gameScene = g.group(dungeon, exit, player, treasure);
 61 | 
 62 |   //Make the enemies
 63 |   var numberOfEnemies = 6,
 64 |       spacing = 48,
 65 |       xOffset = 150,
 66 |       speed = 2,
 67 |       direction = 1;
 68 | 
 69 |   enemies = [];
 70 | 
 71 |   //Make as many enemies as there are `numberOfEnemies`
 72 |   for (var i = 0; i < numberOfEnemies; i++) {
 73 | 
 74 |     //Each enemy is a red rectangle
 75 |     var enemy = g.sprite("blob.png");
 76 | 
 77 |     //Space each enemy horizontally according to the `spacing` value.
 78 |     //`xOffset` determines the point from the left of the screen
 79 |     //at which the first enemy should be added.
 80 |     var x = spacing * i + xOffset;
 81 | 
 82 |     //Give the enemy a random y position
 83 |     var y = g.randomInt(0, g.canvas.height - enemy.height);
 84 | 
 85 |     //Set the enemy's direction
 86 |     enemy.x = x;
 87 |     enemy.y = y;
 88 | 
 89 |     //Set the enemy's vertical velocity. `direction` will be either `1` or
 90 |     //`-1`. `1` means the enemy will move down and `-1` means the enemy will
 91 |     //move up. Multiplying `direction` by `speed` determines the enemy's
 92 |     //vertical direction
 93 |     enemy.vy = speed * direction;
 94 | 
 95 |     //Reverse the direction for the next enemy
 96 |     direction *= -1;
 97 | 
 98 |     //Push the enemy into the `enemies` array
 99 |     enemies.push(enemy);
100 | 
101 |     //Add the enemy to the `gameScene`
102 |     gameScene.addChild(enemy);
103 |   }
104 | 
105 |   //Create the health bar
106 |   var outerBar = g.rectangle(128, 8, "black"),
107 |       innerBar = g.rectangle(128, 8, "red");
108 | 
109 |   //Group the inner and outer bars
110 |   healthBar = g.group(outerBar, innerBar);
111 | 
112 |   //Set the `innerBar` as a property of the `healthBar`
113 |   healthBar.inner = innerBar;
114 | 
115 |   //Position the health bar
116 |   healthBar.x = g.canvas.width - 164;
117 |   healthBar.y = 4;
118 | 
119 |   //Add the health bar to the `gameScene`
120 |   gameScene.addChild(healthBar);
121 | 
122 |   //Add some text for the game over message
123 |   message = g.text("Game Over!", "64px Futura", "black", 20, 20);
124 |   message.x = 120;
125 |   message.y = g.canvas.height / 2 - 64;
126 | 
127 |   //Create a `gameOverScene` group and add the message sprite to it
128 |   gameOverScene = g.group(message);
129 | 
130 |   //Make the `gameOverScene` invisible for now
131 |   gameOverScene.visible = false;
132 | 
133 |   //Assign the player's keyboard controllers
134 |   g.fourKeyController(player, 5, 38, 39, 40, 37);
135 | 
136 |   //You can also do it the long way, like this:
137 |   /*
138 |   //Assign key `press` methods
139 |   g.key.leftArrow.press = function() {
140 |     //Change the player's velocity when the key is pressed
141 |     player.vx = -5;
142 |     player.vy = 0;
143 |   };
144 |   g.key.leftArrow.release = function() {
145 |     //If the left arrow has been released, and the right arrow isn't down,
146 |     //and the player isn't moving vertically:
147 |     //Stop the player
148 |     if (!g.key.rightArrow.isDown && player.vy === 0) {
149 |       player.vx = 0;
150 |     }
151 |   };
152 |   g.key.upArrow.press = function() {
153 |     player.vy = -5;
154 |     player.vx = 0;
155 |   };
156 |   g.key.upArrow.release = function() {
157 |     if (!g.key.downArrow.isDown && player.vx === 0) {
158 |       player.vy = 0;
159 |     }
160 |   };
161 |   g.key.rightArrow.press = function() {
162 |     player.vx = 5;
163 |     player.vy = 0;
164 |   };
165 |   g.key.rightArrow.release = function() {
166 |     if (!g.key.leftArrow.isDown && player.vy === 0) {
167 |       player.vx = 0;
168 |     }
169 |   };
170 |   g.key.downArrow.press = function() {
171 |     player.vy = 5;
172 |     player.vx = 0;
173 |   };
174 |   g.key.downArrow.release = function() {
175 |     if (!g.key.upArrow.isDown && player.vx === 0) {
176 |       player.vy = 0;
177 |     }
178 |   };
179 |   */
180 | 
181 |   //set the game state to `play`
182 |   g.state = play;
183 | }
184 | 
185 | //The `play` state
186 | function play() {
187 | 
188 |   //Move the player
189 |   g.move(player);
190 | 
191 |   //Keep the player contained inside the stage's area
192 |   g.contain(
193 |     player,
194 |     {
195 |       x: 32, y: 16,
196 |       width: g.canvas.width - 32,
197 |       height: g.canvas.height - 32
198 |     }
199 |   );
200 | 
201 |   //Move the enemies and check for a collision
202 | 
203 |   //Set `playerHit` to `false` before checking for a collision
204 |   var playerHit = false;
205 | 
206 |   //Loop through all the enemy sprites
207 |   enemies.forEach(function(enemy) {
208 | 
209 |     //Move the enemy
210 |     g.move(enemy);
211 | 
212 |     //Check the enemy's screen boundaries
213 |     var enemyHitsEdges = g.contain(
214 |       enemy,
215 |       {
216 |         x: 32, y: 16,
217 |         width: g.canvas.width - 32,
218 |         height: g.canvas.height - 32
219 |       }
220 |     );
221 | 
222 |     //If the enemy hits the top or bottom of the stage, reverse
223 |     //its direction
224 |     if (enemyHitsEdges === "top" || enemyHitsEdges === "bottom") {
225 |       enemy.vy *= -1;
226 |     }
227 | 
228 |     //Test for a collision. If any of the enemies are touching
229 |     //the player, set `playerHit` to `true`
230 |     if(g.hitTestRectangle(player, enemy)) {
231 |      playerHit = true;
232 |     }
233 |   });
234 | 
235 |   //If the player is hit...
236 |   if(playerHit) {
237 |     //Make the player semi-transparent
238 |     player.alpha = 0.5;
239 |     //Reduce the width of the health bar's inner rectangle by 1 pixel
240 |     healthBar.inner.width -= 1;
241 |   } else {
242 |     //Make the player fully opaque (non-transparent) if it hasn't been hit
243 |     player.alpha = 1;
244 |   }
245 | 
246 |   //Check for a collision between the player and the treasure
247 |   if (g.hitTestRectangle(player, treasure)) {
248 | 
249 |     //If the treasure is touching the player, center it over the player
250 |     treasure.x = player.x + 8;
251 |     treasure.y = player.y + 8;
252 |     if(!treasure.pickedUp) {
253 |         //If the treasure hasn't already been picked up,
254 |         //play the `chimes` sound
255 |         chimes.play();
256 |         treasure.pickedUp = true;
257 |     };
258 |   }
259 | 
260 |   //Check for the end of the game
261 | 
262 |   //Does the player have enough health? If the width of the `innerBar`
263 |   //is less than zero, end the game and display "You lost!"
264 |   if (healthBar.inner.width < 0) {
265 |     g.state = end;
266 |     message.content = "You lost!";
267 |   }
268 | 
269 |   //If the player has brought the treasure to the exit,
270 |   //end the game and display "You won!"
271 |   if (g.hitTestRectangle(treasure, exit)) {
272 |     g.state = end;
273 |     message.content = "You won!";
274 |   }
275 | }
276 | 
277 | function end() {
278 |   //Hide the `gameScene` and display the `gameOverScene`
279 |   gameScene.visible = false;
280 |   gameOverScene.visible = true;
281 | }
282 | 
283 | </script>
284 | </body>
285 | 
286 | 
287 | 


--------------------------------------------------------------------------------
/tutorials/fonts/emulogic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/fonts/emulogic.ttf


--------------------------------------------------------------------------------
/tutorials/images/alienArmada.json:
--------------------------------------------------------------------------------
 1 | {"frames": {
 2 | 
 3 | "alien.png":
 4 | {
 5 | 	"frame": {"x":54,"y":2,"w":32,"h":32},
 6 | 	"rotated": false,
 7 | 	"trimmed": false,
 8 | 	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
 9 | 	"sourceSize": {"w":32,"h":32},
10 | 	"pivot": {"x":0.5,"y":0.5}
11 | },
12 | "background.png":
13 | {
14 | 	"frame": {"x":2,"y":36,"w":480,"h":320},
15 | 	"rotated": false,
16 | 	"trimmed": false,
17 | 	"spriteSourceSize": {"x":0,"y":0,"w":480,"h":320},
18 | 	"sourceSize": {"w":480,"h":320},
19 | 	"pivot": {"x":0.5,"y":0.5}
20 | },
21 | "bullet.png":
22 | {
23 | 	"frame": {"x":2,"y":2,"w":16,"h":16},
24 | 	"rotated": false,
25 | 	"trimmed": false,
26 | 	"spriteSourceSize": {"x":0,"y":0,"w":16,"h":16},
27 | 	"sourceSize": {"w":16,"h":16},
28 | 	"pivot": {"x":0.5,"y":0.5}
29 | },
30 | "cannon.png":
31 | {
32 | 	"frame": {"x":20,"y":2,"w":32,"h":32},
33 | 	"rotated": false,
34 | 	"trimmed": false,
35 | 	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
36 | 	"sourceSize": {"w":32,"h":32},
37 | 	"pivot": {"x":0.5,"y":0.5}
38 | },
39 | "explosion.png":
40 | {
41 | 	"frame": {"x":88,"y":2,"w":32,"h":32},
42 | 	"rotated": false,
43 | 	"trimmed": false,
44 | 	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
45 | 	"sourceSize": {"w":32,"h":32},
46 | 	"pivot": {"x":0.5,"y":0.5}
47 | }},
48 | "meta": {
49 | 	"app": "http://www.codeandweb.com/texturepacker",
50 | 	"version": "1.0",
51 | 	"image": "alienArmada.png",
52 | 	"format": "RGBA8888",
53 | 	"size": {"w":484,"h":358},
54 | 	"scale": "1",
55 | 	"smartupdate": "$TexturePacker:SmartUpdate:16b18becd02b596aef94399796a6b6d5:0ab1b4c981f378c96b70d514e3ca748a:628d142d38afb2c4157433c90a55ef2b$"
56 | }
57 | }
58 | 


--------------------------------------------------------------------------------
/tutorials/images/alienArmada.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/alienArmada.png


--------------------------------------------------------------------------------
/tutorials/images/blob.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/blob.png


--------------------------------------------------------------------------------
/tutorials/images/door.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/door.png


--------------------------------------------------------------------------------
/tutorials/images/dungeon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/dungeon.png


--------------------------------------------------------------------------------
/tutorials/images/explorer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/explorer.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/0.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/0.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/1.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/2.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/3.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/down.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/down.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/finish.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/finish.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/flappyFairy.json:
--------------------------------------------------------------------------------
  1 | {"frames": {
  2 | 
  3 | "0.png":
  4 | {
  5 | 	"frame": {"x":2,"y":2,"w":48,"h":32},
  6 | 	"rotated": false,
  7 | 	"trimmed": false,
  8 | 	"spriteSourceSize": {"x":0,"y":0,"w":48,"h":32},
  9 | 	"sourceSize": {"w":48,"h":32},
 10 | 	"pivot": {"x":0.5,"y":0.5}
 11 | },
 12 | "1.png":
 13 | {
 14 | 	"frame": {"x":52,"y":2,"w":48,"h":32},
 15 | 	"rotated": false,
 16 | 	"trimmed": false,
 17 | 	"spriteSourceSize": {"x":0,"y":0,"w":48,"h":32},
 18 | 	"sourceSize": {"w":48,"h":32},
 19 | 	"pivot": {"x":0.5,"y":0.5}
 20 | },
 21 | "2.png":
 22 | {
 23 | 	"frame": {"x":102,"y":2,"w":48,"h":32},
 24 | 	"rotated": false,
 25 | 	"trimmed": false,
 26 | 	"spriteSourceSize": {"x":0,"y":0,"w":48,"h":32},
 27 | 	"sourceSize": {"w":48,"h":32},
 28 | 	"pivot": {"x":0.5,"y":0.5}
 29 | },
 30 | "3.png":
 31 | {
 32 | 	"frame": {"x":152,"y":2,"w":48,"h":32},
 33 | 	"rotated": false,
 34 | 	"trimmed": false,
 35 | 	"spriteSourceSize": {"x":0,"y":0,"w":48,"h":32},
 36 | 	"sourceSize": {"w":48,"h":32},
 37 | 	"pivot": {"x":0.5,"y":0.5}
 38 | },
 39 | "down.png":
 40 | {
 41 | 	"frame": {"x":202,"y":2,"w":148,"h":148},
 42 | 	"rotated": false,
 43 | 	"trimmed": false,
 44 | 	"spriteSourceSize": {"x":0,"y":0,"w":148,"h":148},
 45 | 	"sourceSize": {"w":148,"h":148},
 46 | 	"pivot": {"x":0.5,"y":0.5}
 47 | },
 48 | "finish.png":
 49 | {
 50 | 	"frame": {"x":352,"y":2,"w":377,"h":128},
 51 | 	"rotated": false,
 52 | 	"trimmed": false,
 53 | 	"spriteSourceSize": {"x":0,"y":0,"w":377,"h":128},
 54 | 	"sourceSize": {"w":377,"h":128},
 55 | 	"pivot": {"x":0.5,"y":0.5}
 56 | },
 57 | "green.png":
 58 | {
 59 | 	"frame": {"x":731,"y":2,"w":32,"h":32},
 60 | 	"rotated": false,
 61 | 	"trimmed": false,
 62 | 	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
 63 | 	"sourceSize": {"w":32,"h":32},
 64 | 	"pivot": {"x":0.5,"y":0.5}
 65 | },
 66 | "greenBlock.png":
 67 | {
 68 | 	"frame": {"x":2,"y":152,"w":64,"h":64},
 69 | 	"rotated": false,
 70 | 	"trimmed": false,
 71 | 	"spriteSourceSize": {"x":0,"y":0,"w":64,"h":64},
 72 | 	"sourceSize": {"w":64,"h":64},
 73 | 	"pivot": {"x":0.5,"y":0.5}
 74 | },
 75 | "over.png":
 76 | {
 77 | 	"frame": {"x":68,"y":152,"w":148,"h":148},
 78 | 	"rotated": false,
 79 | 	"trimmed": false,
 80 | 	"spriteSourceSize": {"x":0,"y":0,"w":148,"h":148},
 81 | 	"sourceSize": {"w":148,"h":148},
 82 | 	"pivot": {"x":0.5,"y":0.5}
 83 | },
 84 | "pink.png":
 85 | {
 86 | 	"frame": {"x":218,"y":152,"w":32,"h":32},
 87 | 	"rotated": false,
 88 | 	"trimmed": false,
 89 | 	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
 90 | 	"sourceSize": {"w":32,"h":32},
 91 | 	"pivot": {"x":0.5,"y":0.5}
 92 | },
 93 | "sky.png":
 94 | {
 95 | 	"frame": {"x":252,"y":152,"w":512,"h":512},
 96 | 	"rotated": false,
 97 | 	"trimmed": false,
 98 | 	"spriteSourceSize": {"x":0,"y":0,"w":512,"h":512},
 99 | 	"sourceSize": {"w":512,"h":512},
100 | 	"pivot": {"x":0.5,"y":0.5}
101 | },
102 | "title.png":
103 | {
104 | 	"frame": {"x":2,"y":666,"w":505,"h":336},
105 | 	"rotated": false,
106 | 	"trimmed": false,
107 | 	"spriteSourceSize": {"x":0,"y":0,"w":505,"h":336},
108 | 	"sourceSize": {"w":505,"h":336},
109 | 	"pivot": {"x":0.5,"y":0.5}
110 | },
111 | "up.png":
112 | {
113 | 	"frame": {"x":509,"y":666,"w":148,"h":148},
114 | 	"rotated": false,
115 | 	"trimmed": false,
116 | 	"spriteSourceSize": {"x":0,"y":0,"w":148,"h":148},
117 | 	"sourceSize": {"w":148,"h":148},
118 | 	"pivot": {"x":0.5,"y":0.5}
119 | },
120 | "violet.png":
121 | {
122 | 	"frame": {"x":659,"y":666,"w":32,"h":32},
123 | 	"rotated": false,
124 | 	"trimmed": false,
125 | 	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
126 | 	"sourceSize": {"w":32,"h":32},
127 | 	"pivot": {"x":0.5,"y":0.5}
128 | },
129 | "yellow.png":
130 | {
131 | 	"frame": {"x":693,"y":666,"w":32,"h":32},
132 | 	"rotated": false,
133 | 	"trimmed": false,
134 | 	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
135 | 	"sourceSize": {"w":32,"h":32},
136 | 	"pivot": {"x":0.5,"y":0.5}
137 | }},
138 | "meta": {
139 | 	"app": "http://www.codeandweb.com/texturepacker",
140 | 	"version": "1.0",
141 | 	"image": "flappyFairy.png",
142 | 	"format": "RGBA8888",
143 | 	"size": {"w":766,"h":1004},
144 | 	"scale": "1",
145 | 	"smartupdate": "$TexturePacker:SmartUpdate:2906d3074cfcf68e96f1b18b53bc3b79:3c35f35b528dbbbfbb2b2c2b719ff35c:67241e3589c96882eb3778335ed29531$"
146 | }
147 | }
148 | 


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/flappyFairy.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/flappyFairy.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/green.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/greenBlock.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/greenBlock.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/over.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/over.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/pink.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/pink.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/sky.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/sky.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/title.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/title.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/up.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/up.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/violet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/violet.png


--------------------------------------------------------------------------------
/tutorials/images/flappyFairy/yellow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/flappyFairy/yellow.png


--------------------------------------------------------------------------------
/tutorials/images/treasure.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/treasure.png


--------------------------------------------------------------------------------
/tutorials/images/treasureHunter.json:
--------------------------------------------------------------------------------
 1 | {"frames": {
 2 | 
 3 | "blob.png":
 4 | {
 5 | 	"frame": {"x":55,"y":2,"w":32,"h":24},
 6 | 	"rotated": false,
 7 | 	"trimmed": false,
 8 | 	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":24},
 9 | 	"sourceSize": {"w":32,"h":24},
10 | 	"pivot": {"x":0.5,"y":0.5}
11 | },
12 | "door.png":
13 | {
14 | 	"frame": {"x":89,"y":2,"w":32,"h":32},
15 | 	"rotated": false,
16 | 	"trimmed": false,
17 | 	"spriteSourceSize": {"x":0,"y":0,"w":32,"h":32},
18 | 	"sourceSize": {"w":32,"h":32},
19 | 	"pivot": {"x":0.5,"y":0.5}
20 | },
21 | "dungeon.png":
22 | {
23 | 	"frame": {"x":2,"y":36,"w":512,"h":512},
24 | 	"rotated": false,
25 | 	"trimmed": false,
26 | 	"spriteSourceSize": {"x":0,"y":0,"w":512,"h":512},
27 | 	"sourceSize": {"w":512,"h":512},
28 | 	"pivot": {"x":0.5,"y":0.5}
29 | },
30 | "explorer.png":
31 | {
32 | 	"frame": {"x":2,"y":2,"w":21,"h":32},
33 | 	"rotated": false,
34 | 	"trimmed": false,
35 | 	"spriteSourceSize": {"x":0,"y":0,"w":21,"h":32},
36 | 	"sourceSize": {"w":21,"h":32},
37 | 	"pivot": {"x":0.5,"y":0.5}
38 | },
39 | "treasure.png":
40 | {
41 | 	"frame": {"x":25,"y":2,"w":28,"h":24},
42 | 	"rotated": false,
43 | 	"trimmed": false,
44 | 	"spriteSourceSize": {"x":0,"y":0,"w":28,"h":24},
45 | 	"sourceSize": {"w":28,"h":24},
46 | 	"pivot": {"x":0.5,"y":0.5}
47 | }},
48 | "meta": {
49 | 	"app": "http://www.codeandweb.com/texturepacker",
50 | 	"version": "1.0",
51 | 	"image": "treasureHunter.png",
52 | 	"format": "RGBA8888",
53 | 	"size": {"w":516,"h":550},
54 | 	"scale": "1",
55 | 	"smartupdate": "$TexturePacker:SmartUpdate:054907cddd8a283d72efe71df591d647:3923663e59fb40b578d66a492a2cda2d:9995f8b4db1ac3cb75651b1542df8ee2$"
56 | }
57 | }
58 | 


--------------------------------------------------------------------------------
/tutorials/images/treasureHunter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/images/treasureHunter.png


--------------------------------------------------------------------------------
/tutorials/screenshots/01.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/01.png


--------------------------------------------------------------------------------
/tutorials/screenshots/02.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/02.png


--------------------------------------------------------------------------------
/tutorials/screenshots/03.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/03.png


--------------------------------------------------------------------------------
/tutorials/screenshots/04.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/04.png


--------------------------------------------------------------------------------
/tutorials/screenshots/05.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/05.png


--------------------------------------------------------------------------------
/tutorials/screenshots/06.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/06.png


--------------------------------------------------------------------------------
/tutorials/screenshots/07.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/07.png


--------------------------------------------------------------------------------
/tutorials/screenshots/08.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/08.png


--------------------------------------------------------------------------------
/tutorials/screenshots/09.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/09.png


--------------------------------------------------------------------------------
/tutorials/screenshots/10.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/10.png


--------------------------------------------------------------------------------
/tutorials/screenshots/11.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/11.png


--------------------------------------------------------------------------------
/tutorials/screenshots/12.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/12.png


--------------------------------------------------------------------------------
/tutorials/screenshots/13.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/13.png


--------------------------------------------------------------------------------
/tutorials/screenshots/14.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/14.png


--------------------------------------------------------------------------------
/tutorials/screenshots/15.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/15.png


--------------------------------------------------------------------------------
/tutorials/screenshots/16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/16.png


--------------------------------------------------------------------------------
/tutorials/screenshots/17.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/17.png


--------------------------------------------------------------------------------
/tutorials/screenshots/18.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/18.png


--------------------------------------------------------------------------------
/tutorials/screenshots/19.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/19.png


--------------------------------------------------------------------------------
/tutorials/screenshots/20.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/20.png


--------------------------------------------------------------------------------
/tutorials/screenshots/21.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/21.png


--------------------------------------------------------------------------------
/tutorials/screenshots/22.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/22.png


--------------------------------------------------------------------------------
/tutorials/screenshots/23.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/23.png


--------------------------------------------------------------------------------
/tutorials/screenshots/24.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/24.png


--------------------------------------------------------------------------------
/tutorials/screenshots/25.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/25.png


--------------------------------------------------------------------------------
/tutorials/screenshots/26.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/26.png


--------------------------------------------------------------------------------
/tutorials/screenshots/27.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/27.png


--------------------------------------------------------------------------------
/tutorials/screenshots/28.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/28.png


--------------------------------------------------------------------------------
/tutorials/screenshots/29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/29.png


--------------------------------------------------------------------------------
/tutorials/screenshots/gaLogo_Square.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/gaLogo_Square.png


--------------------------------------------------------------------------------
/tutorials/screenshots/logoAndIllustration.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/screenshots/logoAndIllustration.png


--------------------------------------------------------------------------------
/tutorials/sounds/chimes.wav:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/sounds/chimes.wav


--------------------------------------------------------------------------------
/tutorials/sounds/explosion.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/sounds/explosion.mp3


--------------------------------------------------------------------------------
/tutorials/sounds/music.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/sounds/music.mp3


--------------------------------------------------------------------------------
/tutorials/sounds/shoot.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kittykatattack/ga/28e76ee9c727c71237da9e5deea5f2dc15a51fad/tutorials/sounds/shoot.mp3


--------------------------------------------------------------------------------
/tutorials/texturePackerFiles/flappyFairy.tps:
--------------------------------------------------------------------------------
  1 | <?xml version="1.0" encoding="UTF-8"?>
  2 | <data version="1.0">
  3 |     <struct type="Settings">
  4 |         <key>fileFormatVersion</key>
  5 |         <int>3</int>
  6 |         <key>texturePackerVersion</key>
  7 |         <string>3.6.0</string>
  8 |         <key>fileName</key>
  9 |         <string>/Users/rexvanderspuy/Drive/gitHub/up/ga/tutorials/texturePackerFiles/flappyFairy.tps</string>
 10 |         <key>autoSDSettings</key>
 11 |         <array>
 12 |             <struct type="AutoSDSettings">
 13 |                 <key>scale</key>
 14 |                 <double>1</double>
 15 |                 <key>extension</key>
 16 |                 <string></string>
 17 |                 <key>spriteFilter</key>
 18 |                 <string></string>
 19 |                 <key>acceptFractionalValues</key>
 20 |                 <false/>
 21 |                 <key>maxTextureSize</key>
 22 |                 <QSize>
 23 |                     <key>width</key>
 24 |                     <int>-1</int>
 25 |                     <key>height</key>
 26 |                     <int>-1</int>
 27 |                 </QSize>
 28 |             </struct>
 29 |         </array>
 30 |         <key>allowRotation</key>
 31 |         <true/>
 32 |         <key>premultiplyAlpha</key>
 33 |         <false/>
 34 |         <key>shapeDebug</key>
 35 |         <false/>
 36 |         <key>dpi</key>
 37 |         <uint>72</uint>
 38 |         <key>dataFormat</key>
 39 |         <string>json</string>
 40 |         <key>textureFileName</key>
 41 |         <filename>../images/flappyFairy.png</filename>
 42 |         <key>flipPVR</key>
 43 |         <false/>
 44 |         <key>pvrCompressionQuality</key>
 45 |         <enum type="SettingsBase::PvrCompressionQuality">PVR_QUALITY_NORMAL</enum>
 46 |         <key>mipMapMinSize</key>
 47 |         <uint>32768</uint>
 48 |         <key>etc1CompressionQuality</key>
 49 |         <enum type="SettingsBase::Etc1CompressionQuality">ETC1_QUALITY_LOW_PERCEPTUAL</enum>
 50 |         <key>dxtCompressionMode</key>
 51 |         <enum type="SettingsBase::DxtCompressionMode">DXT_PERCEPTUAL</enum>
 52 |         <key>jxrColorFormat</key>
 53 |         <enum type="SettingsBase::JpegXrColorMode">JXR_YUV444</enum>
 54 |         <key>jxrTrimFlexBits</key>
 55 |         <uint>0</uint>
 56 |         <key>jxrCompressionLevel</key>
 57 |         <uint>0</uint>
 58 |         <key>ditherType</key>
 59 |         <enum type="SettingsBase::DitherType">NearestNeighbour</enum>
 60 |         <key>backgroundColor</key>
 61 |         <uint>0</uint>
 62 |         <key>libGdx</key>
 63 |         <struct type="LibGDX">
 64 |             <key>filtering</key>
 65 |             <struct type="LibGDXFiltering">
 66 |                 <key>x</key>
 67 |                 <enum type="LibGDXFiltering::Filtering">Linear</enum>
 68 |                 <key>y</key>
 69 |                 <enum type="LibGDXFiltering::Filtering">Linear</enum>
 70 |             </struct>
 71 |         </struct>
 72 |         <key>shapePadding</key>
 73 |         <uint>2</uint>
 74 |         <key>jpgQuality</key>
 75 |         <uint>80</uint>
 76 |         <key>pngOptimizationLevel</key>
 77 |         <uint>0</uint>
 78 |         <key>webpQualityLevel</key>
 79 |         <uint>101</uint>
 80 |         <key>textureSubPath</key>
 81 |         <string></string>
 82 |         <key>textureFormat</key>
 83 |         <enum type="SettingsBase::TextureFormat">png</enum>
 84 |         <key>borderPadding</key>
 85 |         <uint>2</uint>
 86 |         <key>maxTextureSize</key>
 87 |         <QSize>
 88 |             <key>width</key>
 89 |             <int>2048</int>
 90 |             <key>height</key>
 91 |             <int>2048</int>
 92 |         </QSize>
 93 |         <key>fixedTextureSize</key>
 94 |         <QSize>
 95 |             <key>width</key>
 96 |             <int>-1</int>
 97 |             <key>height</key>
 98 |             <int>-1</int>
 99 |         </QSize>
100 |         <key>reduceBorderArtifacts</key>
101 |         <false/>
102 |         <key>algorithmSettings</key>
103 |         <struct type="AlgorithmSettings">
104 |             <key>algorithm</key>
105 |             <enum type="AlgorithmSettings::AlgorithmId">Basic</enum>
106 |             <key>freeSizeMode</key>
107 |             <enum type="AlgorithmSettings::AlgorithmFreeSizeMode">Best</enum>
108 |             <key>sizeConstraints</key>
109 |             <enum type="AlgorithmSettings::SizeConstraints">AnySize</enum>
110 |             <key>forceSquared</key>
111 |             <false/>
112 |             <key>forceWordAligned</key>
113 |             <false/>
114 |             <key>maxRects</key>
115 |             <struct type="AlgorithmMaxRectsSettings">
116 |                 <key>heuristic</key>
117 |                 <enum type="AlgorithmMaxRectsSettings::Heuristic">Best</enum>
118 |             </struct>
119 |             <key>basic</key>
120 |             <struct type="AlgorithmBasicSettings">
121 |                 <key>sortBy</key>
122 |                 <enum type="AlgorithmBasicSettings::SortBy">Best</enum>
123 |                 <key>order</key>
124 |                 <enum type="AlgorithmBasicSettings::Order">Ascending</enum>
125 |             </struct>
126 |         </struct>
127 |         <key>andEngine</key>
128 |         <struct type="AndEngine">
129 |             <key>minFilter</key>
130 |             <enum type="AndEngine::MinFilter">Linear</enum>
131 |             <key>packageName</key>
132 |             <string>Texture</string>
133 |             <key>wrap</key>
134 |             <struct type="AndEngineWrap">
135 |                 <key>s</key>
136 |                 <enum type="AndEngineWrap::Wrap">Clamp</enum>
137 |                 <key>t</key>
138 |                 <enum type="AndEngineWrap::Wrap">Clamp</enum>
139 |             </struct>
140 |             <key>magFilter</key>
141 |             <enum type="AndEngine::MagFilter">MagLinear</enum>
142 |         </struct>
143 |         <key>dataFileNames</key>
144 |         <map type="GFileNameMap">
145 |             <key>data</key>
146 |             <struct type="DataFile">
147 |                 <key>name</key>
148 |                 <filename>../images/flappyFairy.json</filename>
149 |             </struct>
150 |         </map>
151 |         <key>multiPack</key>
152 |         <false/>
153 |         <key>forceIdenticalLayout</key>
154 |         <false/>
155 |         <key>outputFormat</key>
156 |         <enum type="SettingsBase::OutputFormat">RGBA8888</enum>
157 |         <key>contentProtection</key>
158 |         <struct type="ContentProtection">
159 |             <key>key</key>
160 |             <string></string>
161 |         </struct>
162 |         <key>autoAliasEnabled</key>
163 |         <true/>
164 |         <key>trimSpriteNames</key>
165 |         <false/>
166 |         <key>prependSmartFolderName</key>
167 |         <false/>
168 |         <key>cleanTransparentPixels</key>
169 |         <true/>
170 |         <key>globalSpriteSettings</key>
171 |         <struct type="SpriteSettings">
172 |             <key>scale</key>
173 |             <double>1</double>
174 |             <key>scaleMode</key>
175 |             <enum type="ScaleMode">Smooth</enum>
176 |             <key>innerPadding</key>
177 |             <uint>0</uint>
178 |             <key>extrude</key>
179 |             <uint>0</uint>
180 |             <key>trimThreshold</key>
181 |             <uint>1</uint>
182 |             <key>trimMode</key>
183 |             <enum type="SpriteSettings::TrimMode">None</enum>
184 |             <key>heuristicMask</key>
185 |             <false/>
186 |             <key>pivotPoint</key>
187 |             <enum type="SpriteSettings::PivotPoint">Center</enum>
188 |         </struct>
189 |         <key>fileList</key>
190 |         <array>
191 |             <filename>../images/flappyFairy/0.png</filename>
192 |             <filename>../images/flappyFairy/1.png</filename>
193 |             <filename>../images/flappyFairy/2.png</filename>
194 |             <filename>../images/flappyFairy/3.png</filename>
195 |             <filename>../images/flappyFairy/down.png</filename>
196 |             <filename>../images/flappyFairy/finish.png</filename>
197 |             <filename>../images/flappyFairy/green.png</filename>
198 |             <filename>../images/flappyFairy/greenBlock.png</filename>
199 |             <filename>../images/flappyFairy/over.png</filename>
200 |             <filename>../images/flappyFairy/pink.png</filename>
201 |             <filename>../images/flappyFairy/title.png</filename>
202 |             <filename>../images/flappyFairy/up.png</filename>
203 |             <filename>../images/flappyFairy/violet.png</filename>
204 |             <filename>../images/flappyFairy/yellow.png</filename>
205 |             <filename>../images/flappyFairy/sky.png</filename>
206 |         </array>
207 |         <key>ignoreFileList</key>
208 |         <array/>
209 |         <key>replaceList</key>
210 |         <array/>
211 |         <key>ignoredWarnings</key>
212 |         <array/>
213 |         <key>commonDivisorX</key>
214 |         <uint>1</uint>
215 |         <key>commonDivisorY</key>
216 |         <uint>1</uint>
217 |     </struct>
218 | </data>
219 | 


--------------------------------------------------------------------------------