Typos in documentation and comments (#71)

README.md

@@ -26,14 +26,14 @@ Support us by becoming a patron on Patreon
 
 ## External Modules
 
-Flame is modular, and you can always pick and choose. Some modules are extracted to separate plugins; some are bundled with flame, and some must be added separetly.
+Flame is modular, and you can always pick and choose. Some modules are extracted to separate plugins; some are bundled with flame, and some must be added separately.
 
 * [audioplayers](https://github.com/luanpotter/audioplayers) is the audio engine behind flame. It's included.
 * [tiled](https://github.com/feroult/tiled.dart) adds support for parsing and using TMX files from Tiled. It's included.
 * [box2d](https://github.com/feroult/box2d.dart) adds wrappers over Box2D for the physics engine. It's included.
 
 * [flame_gamepad](https://github.com/fireslime/flame_gamepad) adds support to gamepad. Android only. It's not included, add to your pubspec as desired.
-* [play_games](https://github.com/luanpotter/play_games) integrates to Google Play Games Servies (GPGS). Adds login, achievements, saved games and leaderboard. Android only. It's not included, add to your pubspec as desired. Be sure to check the instructions on how to configure, as it's not trivial.
+* [play_games](https://github.com/luanpotter/play_games) integrates to Google Play Games Services (GPGS). Adds login, achievements, saved games and leaderboard. Android only. It's not included, add to your pubspec as desired. Be sure to check the instructions on how to configure, as it's not trivial.
 
 ## Usage
 

doc/animation_widget_article/article.md

@@ -4,7 +4,7 @@
 
 Flutter provides lots of cool and slick animations out of the box, most related to movement and tweens (continuous changes in size, position, color, et cetera). However, one particular thing that it's really hard to do using only the native APIs is a simple sprite sheet animation. Or any sprite sheet handling, for that matter.
 
-A sprite sheet is a single image that has multiple images (Sprites) inside, each one being accessed via it's defining rectangle (x, y, width, and height). Maybe every sprite inside has the same size, like a tileset; for example:
+A sprite sheet is a single image that has multiple images (sprites) inside, each one being accessed via it's defining rectangle (x, y, width, and height). Maybe every sprite inside has the same size, like a tileset; for example:
 
 <p align="center"> 
     <img width="432" src="tileset-big.png" />
@@ -12,13 +12,13 @@ A sprite sheet is a single image that has multiple images (Sprites) inside, each
     <small>This is the Dunjo Tileset, it was created by <a href="https://arks.itch.io/dungeon-platform-tileset">arks</a>.</small>
 </p>
 
-Let's say you want to have several icons in your app. Instead of loading to memory dozens of small images, you can load a single one and use Sprites to refer to each icon. That's how fonts work under the hood (though normally those are SVG nowadays).
+Let's say you want to have several icons in your app. Instead of loading to memory dozens of small images, you can load a single one and use sprites to refer to each icon. That's how fonts work under the hood (though normally those are SVG nowadays).
 
 This practice is very common in web development, because of the infamous request overhead. Making a single request is (used to be? HTTP2 tries to solve this) way faster than several requests each with headers, wrappers, TCP/IP protocol packages and shenanigans you don't really see happening. But it's also very common in game development, and might be useful for your packaged mobile assets, because of how graphics cards work. Without digging too much into the topic, basically loading a single image is faster because the GPU doesn't need to keep switching the loaded images. Maybe some modern GPUs might even optimize this for multiple images, but having control over what gets bundled with what might be crucial if want to hit that sweet sweet 60 FPS mark.
 
 Finally, especially when talking about animations, images of the sort are all distributed in sprite sheet format, and it's easier to add to your folder structure, understand and maintain, than having hundreds of files mixed up and needing to keep adding entries to your pubspec.yaml.
 
-But I digress, this is an article about how to make Spritesheet animations, so if the title wasn't enough to encourage you to do so, nor this brief explanation of the concept, let's see if some graphics are.
+But I digress, this is an article about how to make sprite sheet animations, so if the title wasn't enough to encourage you to do so, nor this brief explanation of the concept, let's see if some graphics are.
 
 There are a lot of websites out there that provide a plethora of assets, some cheap, some free, some even free for commercial usage, assets being sprite sheets for animations, tilesets, icon sets and much more. One that I highly recommend is [itch.io](itch.io). It's an awesome community of people who really love indie gaming, and I do recommend to check it out rather than Steam next time you want a more innovative title to play. But not only complete and WIP games are cataloged, but also resources and assets. There is a large collection of commercially free sprite sheets, like the Dunjo Tileset of the image before.
 
@@ -35,19 +35,19 @@ I'm actually gonna crop and paste using imagemagick just the frames we are going
 <p align="center"> 
     <img src="minotaur.png" />
     <br />
-    <small>Spritesheet extract by me from the original files, available in the examples for the Flame repository. All credits to <a href="https://elthen.itch.io/">elthen</a>.</small>
+    <small>Sprite sheet extract by me from the original files, available in the examples for the Flame repository. All credits to <a href="https://elthen.itch.io/">elthen</a>.</small>
 </p>
 
 Now, how are we going to render this as an animation, updating the frames clockwork, to have a fluid, functional, sprite sheet animation? Enters [flame](https://github.com/luanpotter/flame), the modular game engine. Yes, it's a game engine, but it's very small and modular, so you can easily pick and choose. I'm assuming your app isn't an actual game, though if it's a more interactive style experience, with game loops, updates, and renderers, you should consider using 100% flame instead (or alongside) of Flutter widgets. For a tutorial on game development on Flame, I do recommend the more up-to-date article posted by the awesome folks at [GeekyAnts](https://blog.geekyants.com/@geekyants): [Building A 2D game in Flutter](https://blog.geekyants.com/building-a-2d-game-in-flutter-a-comprehensive-guide-913f647846bc).
 
 If you don't have a Flame game, don't worry. Flame allows you to embed complete and complex games right inside your widget tree from regular Flutter apps. And now there are some brand new helpers to allow you to easily do the most simple and request things flame provides: drawing sprite sheet animations. How come? Well, let's get right into it.
 
-## Importing the Spritesheet
+## Importing the sprite sheet
 
 First things off, get a hold of your sprite sheet. That can be most images format, but since this is pixel art, a PNG is a must. We have our minotaur sample, you can choose other of your liking. Wanna add a ticking clock with fancy effects or a bomb that goes off? You can find all those beautiful assets online. The simplest way is to have a row of sprites of the same size, in the animation order, though it's fully configurable. Firstly, the folder structure. Flutter expects you to have an `assets` folder on your project root, and Flame expects an `images` folder, because you might have audio, fonts and other sorts of assets. Inside, put your image files.
 
 <p align="center"> 
-    <img width="50%" src="folder_strucutre.png" />
+    <img width="50%" src="folder_structure.png" />
     <br />
     <small>This is the folder structure to create. `animation_widget` is the root folder (created by `flutter create`), inside an assets/images folder, and inside, all your assets.</small>
 </p>
@@ -124,7 +124,7 @@ How we do the magic then? Just add the following to your widget tree:
     Flame.util.animationAsWidget(Position(WIDTH, HEIGHT), animation.Animation.sequenced('minotaur.png', AMOUNT, textureWidth: FRAME_WIDTH))
 ```
 
-The first parameter's `WIDTH` and `HEIGHT` are the actual size of the widget on the screen. This does not need to match the sprite size, as Flame will scale it for you. You might, however, wanna keep the aspect, so things don't get distorted. In your case, the minotaur asset is a row of 96x96 pixels, so squares, therefore we can scale keeping `WIDTH/HEIGHT = 1`. We will choose the size as 256 px. The `sequenced` constructor is a helper that easily creates the animation assuming equal-sized frames in a row, in order. You can configure the start x, start y, texture width and height, but those will default gracefully to (0,0) and the actual width and height of the file. You can create your animation passing in the frame list, each frame with a different step time and Sprite (source rectangle).
+The first parameter's `WIDTH` and `HEIGHT` are the actual size of the widget on the screen. This does not need to match the sprite size, as Flame will scale it for you. You might, however, wanna keep the aspect, so things don't get distorted. In your case, the minotaur asset is a row of 96x96 pixels, so squares, therefore we can scale keeping `WIDTH/HEIGHT = 1`. We will choose the size as 256 px. The `sequenced` constructor is a helper that easily creates the animation assuming equal-sized frames in a row, in order. You can configure the start x, start y, texture width and height, but those will default gracefully to (0,0) and the actual width and height of the file. You can create your animation passing in the frame list, each frame with a different step time and sprite (source rectangle).
 
 In our case, we only need to set the `textureWidth` to 96.0, as the original width for the image is actually 19 x 96. Don't mix up texture coordinates, or source coordinates, that's the x, y inside the sprite sheet image and the size relating to that file, and the actual place and size the image/animation is going to be drawn on screen! Those are two very distinct things. We don't need to set the actual position as the widget tree will dictate that for us, we just provide the size as it's going to be a fixed size widget.
 

doc/components.md

@@ -50,7 +50,7 @@ This will create a simple three frame animation
     this.player = new AnimationComponent(64.0, 64.0, new Animation.spriteList(sprites, stepTime: 0.01));
 ```
 
-If you have a spritesheet, you can use the `sequenced` constructor, identical to the one provided by the `Animation` class (check more details in [the appropriate section](doc/images.md#Animation)):
+If you have a sprite sheet, you can use the `sequenced` constructor, identical to the one provided by the `Animation` class (check more details in [the appropriate section](doc/images.md#Animation)):
 
 ```dart
     this.player = new AnimationComponent.sequenced(64.0, 64.0, 'player.png', 2);

doc/examples/animation_widget/README.md

@@ -4,4 +4,4 @@ A sample Flame project to showcase the animationAsWidget method to render easy s
 
 ## Credits
 
-The awesome Minotaur spritesheet was obtained from itch.io's [elthen](https://elthen.itch.io/2d-pixel-art-minotaur-sprites). Thanks!
+The awesome Minotaur sprite sheet was obtained from itch.io's [elthen](https://elthen.itch.io/2d-pixel-art-minotaur-sprites). Thanks!

doc/images.md

@@ -26,7 +26,7 @@ You could also specify the coordinates in the original image where the sprite is
 
 The default values are `0.0` for `x` and `y` and `null` for `width` and `height` (meaning it will use the full width/height of the source image).
 
-The `Sprite` class has a `loaded` method that returns wether the image has been loaded, and a render method, that allows you to render the image into a `Canvas`:
+The `Sprite` class has a `loaded` method that returns whether the image has been loaded, and a render method, that allows you to render the image into a `Canvas`:
 
 ```dart
     Sprite block = new Sprite('block.png');

doc/palette.md

@@ -1,6 +1,6 @@
 # Palette
 
-Throught your game you are going to need to use colors in lots of places. There are two classes on `dart:ui` that can be used, `Color` and `Paint`.
+Throughout your game you are going to need to use colors in lots of places. There are two classes on `dart:ui` that can be used, `Color` and `Paint`.
 
 The `Color` class is nothing but a wrapper over a single simple ARGB color in hexadecimal integer format, so, to create a Color object, just pass in the color as an integer in the ARGB format.
 
@@ -22,7 +22,7 @@ You can create such a Paint like so:
   Paint green = new Paint()..color = const Color(0xFF00FF00);
 ```
 
-To help that and also keep your game's color palette consistent, Flame adds the Palette class. You can use it to both easily access Colors and Paints where needed and also to define as constants the colors your game use, so you don't get those mixe up.
+To help that and also keep your game's color palette consistent, Flame adds the Palette class. You can use it to both easily access Colors and Paints where needed and also to define as constants the colors your game use, so you don't get those mixed up.
 
 The `BasicPalette` class is an example of what a palette can look like, and adds black and white as colors. So to use black or white you can access those directly from the BasicPalette; for example, using `color`:
 

example/pubspec.yaml

@@ -4,7 +4,7 @@ description: A new Flutter project.
 version: 0.1.0
 
 environment:
-  sdk: ">=2.0.0-dev.68.0 <3.0.0"
+  sdk: ">=2.0.0 <3.0.0"
 
 dependencies:
   flame:

lib/animation.dart

@@ -58,7 +58,7 @@ class Animation {
   /// [textureWidth]: width of each frame (defaults to null, that is, full width of the sprite sheet)
   /// [textureHeight]: height of each frame (defaults to null, that is, full height of the sprite sheet)
   ///
-  /// For example, if you have a spritesheet where each row is an animation, and each frame is 32x32
+  /// For example, if you have a sprite sheet where each row is an animation, and each frame is 32x32
   ///     Animation.sequenced('sheet.png', 8, textureY: 32.0 * i, textureWidth: 32.0, textureHeight: 32.0);
   /// This will create the i-th animation on the 'sheet.png', given it has 8 frames.
   Animation.sequenced(
@@ -109,7 +109,7 @@ class Animation {
   /// Automatically creates an Animation Object using animation data provided by the json file
   /// provided by Aseprite
   ///
-  /// [imagePath]: Source of the spritesheet animation
+  /// [imagePath]: Source of the sprite sheet animation
   /// [dataPath]: Animation's exported data in json format
   static Future<Animation> fromAsepriteData(
       String imagePath, String dataPath) async {
@@ -160,14 +160,14 @@ class Animation {
     frames.forEach((frame) => frame.stepTime = stepTime);
   }
 
-  /// Resets the animation, like it'd just been created.
+  /// Resets the animation, like it would just have been created.
   void reset() {
     clock = 0.0;
     elapsed = 0.0;
     currentIndex = 0;
   }
 
-  /// Gets tha current [Sprite] that should be shown.
+  /// Gets the current [Sprite] that should be shown.
   ///
   /// In case it reaches the end:
   ///  * If [loop] is true, it will return the last sprite. Otherwise, it will go back to the first.
@@ -175,7 +175,7 @@ class Animation {
     return currentFrame.sprite;
   }
 
-  /// If [loop] is false, returns wether the animation is done (fixed in the last Sprite).
+  /// If [loop] is false, returns whether the animation is done (fixed in the last Sprite).
   ///
   /// Always returns false otherwise.
   bool done() {
@@ -207,7 +207,7 @@ class Animation {
     return Animation(frames.reversed.toList(), loop: loop);
   }
 
-  /// Wether all sprites composing this animation are loaded.
+  /// Whether all sprites composing this animation are loaded.
   bool loaded() {
     return frames.every((frame) => frame.sprite.loaded());
   }

lib/box2d/viewport.dart

@@ -15,7 +15,7 @@ class Viewport extends ViewportTransform {
 
   double worldAlignBottom(double height) => -(size.height / 2 / scale) + height;
 
-  /// Resizes the current view port.
+  /// Resizes the current viewport.
   void resize(Size size) {
     this.size = size;
     extents = Vector2.copy(Vector2(size.width / 2, size.height / 2));
@@ -24,7 +24,7 @@ class Viewport extends ViewportTransform {
 
   /// Computes the number of horizontal world meters of this viewport considering a percentage of its width.
   ///
-  /// @param percent percetage of the width in [0, 1] range.
+  /// @param percent percentage of the width in [0, 1] range.
   double worldWidth(double percent) {
     return percent * (size.width / scale);
   }
@@ -33,7 +33,7 @@ class Viewport extends ViewportTransform {
 
   double get height => size.height / scale / window.devicePixelRatio;
 
-  /// Computes the scroll percentage of total screen width of the current viwerport center position.
+  /// Computes the scroll percentage of total screen width of the current viewport center position.
   ///
   /// @param screens multiplies the visible screen with to create a bigger virtual screen.
   /// @return the percentage in the range of [0, 1]
@@ -45,7 +45,7 @@ class Viewport extends ViewportTransform {
     return x > 0 ? scroll : 1 - scroll;
   }
 
-  /// Follows the spececified body component using a sliding focus window defined as a percentage of the total viewport.
+  /// Follows the specified body component using a sliding focus window defined as a percentage of the total viewport.
   ///
   /// @param component to follow.
   /// @param horizontal percentage of the horizontal viewport. Null means no horizontal following.

lib/components/component.dart

@@ -10,7 +10,7 @@ import '../anchor.dart';
 
 /// This represents a Component for your game.
 ///
-/// Components can be bullets flying on the screen, a spaship or your player's fighter.
+/// Components can be bullets flying on the screen, a spaceship or your player's fighter.
 /// Anything that either renders or updates can be added to the list on [BaseGame]. It will deal with calling those methods for you.
 /// Components also have other methods that can help you out if you want to overwrite them.
 abstract class Component {
@@ -36,7 +36,7 @@ abstract class Component {
   /// Note that for a more consistent experience, you can pre-load all your assets beforehand with Flame.images.loadAll.
   bool loaded() => true;
 
-  /// Wether this should be destroyed or not.
+  /// Whether this should be destroyed or not.
   ///
   /// It will be called once per component per loop, and if it returns true, [BaseGame] will mark your component for deletion and remove it before the next loop.
   bool destroy() => false;

lib/position.dart

@@ -33,7 +33,7 @@ class Position {
 
   /// Creates using another [Position]; i.e., clones this position.
   ///
-  /// This is usefull because this class is mutable, so beware of mutability issues.
+  /// This is useful because this class is mutable, so beware of mutability issues.
   Position.fromPosition(Position position) : this(position.x, position.y);
 
   /// Creates using a [b2d.Vector2]

lib/util.dart

@@ -28,7 +28,7 @@ class Util {
     return SystemChrome.setPreferredOrientations([orientation]);
   }
 
-  /// Waits for the initial screen dimensions to be avaliable.
+  /// Waits for the initial screen dimensions to be available.
   ///
   /// Because of flutter's issue #5259, when the app starts the size might be 0x0.
   /// This waits for the information to be properly updated.