Thursday, 29 October 2015

Last Few Days - Special Offer 'Dart By Example' - Get 50% Off The Ebook From Packt Pub

Just a few more days to go on this offer!

Special offer runs until the end of this month on the e-book 'Dart By Example'. Get your copy of the e-book with a massive 50% discount!

Monday, 26 October 2015

Collectibles - Simplegamelib Part Nine

This is the ninth part in an ongoing series where we will look at the package I am currently writing called simplegamelib. Development is usually a little ahead of the current blog post. The projects homepage is located here. There's been some refactoring going on, documentation being updated and general bug fixing. I have also started a Space Invaders/Galaxian game using the library though too soon to share!

This time we are looking at picking up items. A Collectible is a specialisation of the Sprite class that stores some extra information - the points and health delta (collectible items can have both a positive and negative effect!). The collectibles are added to the game by the createCollectibles function and the picking up in the collectibleDemo function.

If the Player's health or points change, we need to broadcast this message in order to update the game display. The function updateScorePanel is called by the Player class when one of these properties changes.

import 'dart:html';
import 'package:simplegamelib/simplegamelib.dart';

Sprite player;
AudioBank sounds = new AudioBank();
Game game = new Game("My Game", '#surface');

void main() {
  sounds.load('test', 'sounds/coin.mp3');
  player = game.createSprite('images/ninjadude.png', 48, 48);

  game
    ..player = new Player.withNotifications(updateScorePanel)
    ..player.sprite = player
    ..renderer.liveBackground.setImageBackground('images/background.png');

  createCollectibles();

  player
    ..position = new Point(0, 30)
    ..movement = new Point(0, 0);

  game.customUpdate = collectibleDemo;

  print('starting game...');
  game.setUpKeys();
  updateScorePanel(game.player);
  game.start();
}

void collectibleDemo() {
  List pickUps = game.collectiblesGroup.detectCollision(player);

  pickUps.forEach((Sprite pickup) {
    pickup.alive = false;
    game.collectiblesGroup.removeDead();
    sounds.play("test");
    game.player.apply(pickup);
  });
}

void createCollectibles() {
  Collectible heart = new Collectible.fromFilename('images/heart.png', 24, 24);
  heart
    ..position = new Point(100, 100)
    ..healthDelta = 15;

  game.collectiblesGroup.add(heart);

  Collectible diamond =
      new Collectible.fromFilename('images/diamond.png', 24, 24);
  diamond
    ..position = new Point(175, 100)
    ..scoreDelta = 1000;

  game.collectiblesGroup.add(diamond);
}

void updateScorePanel(Player p1) {
  DivElement statusPanel = querySelector("#gameStatus");
  statusPanel.innerHtml =
      "Health : ${p1.health}      Score : ${p1.score}";
}

Click here to see it in action. Use the cursor keys to pick up the objects.

Next time, we will look at Sprite's being hit by projectiles and expiring. Yikes!

Thursday, 22 October 2015

Dart SDK and Dartium 1.12.2 Chocolatey Packages for Windows

Chocolatey is a package manager for Windows similar to Linux's apt-get, based on Microsoft's Nuget tool and Powershell scripting language. It works from the command-line and from a WPF GUI interface.

Chocolatey still has a large moderation backlog - however you can install unmoderated versions by specifiying the install version during installation.

Command line installation:

choco uninstall dart-sdk

choco install -y dart-sdk  -version 1.12.2
To verify you have the right version on your path.
dart --version

Dart VM version: 1.12.2 (Wed Oct 21 07:10:52 2015) on "windows_x64"

Command line installation:

choco uninstall dartium

choco install -y dartium  -version 1.12.2

Tuesday, 20 October 2015

Special Offer 'Dart By Example' - Get 50% Off The Ebook From Packt Pub

Special offer runs until the end of this month on the e-book 'Dart By Example'. Get your copy of the e-book with a massive 50% discount!

Sunday, 18 October 2015

Obstacles - Simplegamelib Part Eight

This is the eighth part in an ongoing series where we will look at the package I am currently writing called simplegamelib. Development is usually a little ahead of the current blog post. The projects homepage is located here. There's been some refactoring going on, documentation being updated and general bug fixing.

This time we are looking making sprites solid to they don't just float over each other. This little ninja is going to hit a brick wall!

To achieve this, we set the obstacles property which is a SpriteGroup with anything the player is not allowed to walk over. The wall Sprite is created like any other and added to this group. That's it!

  Game game = new Game("My Game", '#surface');
  SpriteGroup walls = new SpriteGroup();
  player = game.createSprite("images/ninjadude.png", 48, 48);
  wall = game.createSprite("images/brick.png", 100, 100);

  game.player.sprite = player;
  walls.canvas = player.canvas;
  walls.add(wall);

  player
    ..position = new Point(0, 10)
    ..movement = Movements.none
    ..speed = 3
    ..obstacles = walls;

  wall..position = new Point(150, 0);

  print('starting game...');
  game
    ..setUpKeys()
    ..start();

Click here to see it in action. Use the cursor keys to bump into the wall.

Next time, we will look at creating some collectible items.

Friday, 16 October 2015

Sprite Speed and Limits - Simplegamelib Part Seven

This is the seventh part in an ongoing series where we will look at the package I am currently writing called simplegamelib. Development is usually a little ahead of the current blog post. The projects homepage is located here.

We have already seen how to get sprites on the screen moving about. Sometimes it is useful to speed up a particular Sprite, whilst this could be done with setting a higher movement value, it is also possible to set a speed value that acts as a multiplier. This is useful, for example, in a game where the Player picks up a speed up bonus. Once the power-up has run out the speed can be set back to 1 and we don't need to worry about direction either.

  Game game = new Game("My Game", '#surface');

  player = game.createSprite("images/ninjadude.png", 48, 48);
  dude = game.createSprite("images/ninjadude.png", 48, 48);

  player
    ..position = new Point(0, 10)
    ..movement = Movements.east
    ..speed = 3;

  dude
    ..position = new Point(10, 10)
    ..movement = new Point(1, 1)
    ..limits = new Rectangle(0, 0, 133, 133);

  print('starting game...');

  game.start();

The other aspect we want to address is limiting a Sprite's position on the screen. Imagine a Space Invaders type game where the player's sprite is restricted to the lower portion of the screen. To achieve this for one of our ninja's, we set the limit property to desired rectangular area.

Click here to see it in action. Hit reload to start again. One Ninja will zoom off never to be seen again. The other will head diagonally down the screen until it hits an invisible wall. These things happen to ninjas.

Next time, we will look at making sprites solid to they don't just float over each other.

Wednesday, 14 October 2015

Unit Testing - Simplegamelib Part Six

In this post, we take a step back and look at how the Simplegamelib is tested. Sorry no ninjas this time!

The awesome test package allows unit tests to be created and run. For example:

    test('Check empty', () {
      SpriteGroup sg = createSpriteGroup(4);
      expect(sg.empty, equals(false));
      sg.reset();
      expect(sg.empty, equals(true));
    });

The unit tests (20 or so) can be found on GitHub. In contrast to other command line apps, it can run code that imports dart:html which saves splitting of packages to remove browser dependencies. This is hugely useful and a real plus point for Dart Unit Testing. It has certainly helped in the development of this little package!! :-)

These can be run using the command:

pub run test .\test\simplegamelib_test.dart -p dartium

Providing the system has a binary called dartiumon the path. The Dart content shell is another possibility but as dartium worked first time I have tried anything else locally.

This is all great for running unit tests when I want to but how about getting them running every time a change goes into the GitHub repository? Turns out the continuous integration service Travis CI supports Dart. The claim to be set up in minutes turns out to be true! All you need to add is a small YML file to the GitHub repository and it will monitor the repo for changes and even email you the results. The current implementation is focussed on the old unittest package but I hear it is to be move to test very soon!

language: dart
dart:
  - stable
  - dev
sudo: false
with_content_shell: true
before_install:
  - export DISPLAY=:99.0
  - sh -e /etc/init.d/xvfb start
script: pub run test -p content-shell -p firefox

This time we use the content shell and firefox. As a bonus, we can run the tests on Dart STABLE and DEV.

You can see the test reports for the Simplegamelib package here.

Next time, we will get back to a traditional demo and look at adding some speed to our sprites.

Saturday, 10 October 2015

Background and Sound - Simplegamelib Part Five

This is the fifth part in an ongoing series where we will look at the package I am currently writing called simplegamelib. Development is usually a little ahead of the current blog post. The projects homepage is located here.

This demo is our most complicated so far. First change is that the white background is replaced by an image. The ninja will still be movable via the cursor keys but will be able to pick up the collectible hearts (ninja's need love too!) which emit a little sound when collected.

To set the background, the Renderer must be told of the image to be used. The Audiobank class loads a mp3 file which is given the name 'test' which is used to request that sound to play later on. Three heart sprites are created and added to the collectables list in the Game object. In the update method, the player is checked for collision with any of the hearts. If there is a collision, the heart is set to alive = false, the SpriteGroup is cleared of dead entries and the sound is played.

Remember Dartium does not play MP3 files so run from another browser!

Sprite player;
AudioBank sounds = new AudioBank();
Game game = new Game("My Game", '#surface');

void main() {

  sounds.load('test', 'sounds/coin.mp3');
  player = game.createSprite('images/ninjadude.png');
  game.player.sprite = player;
  game.renderer.liveBackground.setImageBackground('images/background.png');

  for (int i = 0; i < 3; i++) {
    Sprite heart = new Sprite.fromFilename('images/heart.png');
    heart
      ..position = new Point(100 + (i * 75), 100)
      ..width = 24
      ..height = 24;
    heart.updatePos();
    game.collectablesGroup.add(heart);
  }

  player
    ..position = new Point(0, 30)
    ..movement = new Point(0, 0)
    ..width = 48
    ..height = 48;

  game.customUpdate = soundDemo;

  print('starting game...');
  game.setUpKeys();
  game.start();
}

void soundDemo() {
  List pickedHearts = game.collectablesGroup.detectCollision(player);

  pickedHearts.forEach((Sprite heart) {
    heart.alive = false;
    game.collectablesGroup.removeDead();
    sounds.play("test");
  });
}

Click here to see it in action.

Next time, we will look behind the scenes at the unit testing for this package!

Thursday, 8 October 2015

Sprite Keyboard Movement - Simplegamelib Part Four

This is the fourth part in an ongoing series where we will look at the package I am currently writing called simplegamelib. Development is usually a little ahead of the current blog post. The projects homepage is located here.

This time we will be able to move the ninja around using the arrow/cursor keys. Game controls are specific to each game but for getting started simplegamelib provides basic movement of the player sprite. We have to tell the Game object which sprite is the player for this to work. When writing a larger game is is likely that you would sub-class or replace entirely the Game object.

Sprite player;
Game game = new Game("My Game", '#surface');

void main() {
  player = game.createSprite("images/ninjadude.png");
  game.player.sprite = player;

  player
    ..position = new Point(0, 30)
    ..movement = new Point(0, 0);

  print('starting game...');
  game.setUpKeys();
  game.start();
}

Click here to see it in action.

Next time, we will look at adding a background and some sound to liven things up!

Monday, 5 October 2015

Sprite Priority - Simplegamelib Part Three

This is the third part in an ongoing series where we will look at the package called simplegamelib

This time we will create a little forest of trees to walk down the middle of. Two trees will be in the foreground and two in the background. This is achieved by placing the ninja sprite in the SpriteGroup after the background sprites but before the foreground. When the ninja goes off screen, the order of the sprites is reversed by calling the reverse method. The display will not look as good the second time around as the foreground will be drawn first but it does clearly show the order the drawing of the sprites SpriteGroup.

Sprite player;
Sprite backTree, backTree2;
Sprite foreTree, foreTree2;
Game game = new Game("My Game", '#surface');

void main() {

  backTree = game.createSprite("images/ftree.png");
  backTree2 = game.createSprite("images/ftree.png");
  player = game.createSprite("images/ninjadude.png");
  foreTree = game.createSprite("images/ftree.png");
  foreTree2 = game.createSprite("images/ftree.png");

  player
    ..position = new Point(0, 30)
    ..movement = Movements.east;

  backTree.position = new Point(200, 20);
  backTree2.position = new Point(20, 20);

  foreTree.position = new Point(180, 60);
  foreTree2.position = new Point(40, 60);

  game.customUpdate = priorityDemo;
  print('starting game...');

  game.start();
}

void priorityDemo() {
  if (player.x > 333) {
    player.x = -50;
    game.spriteGroup.reverse();
  }
}

Click here to see it in action.

Next time, we will look at adding some keyboard controls so we can start getting interactive!

Friday, 2 October 2015

Sprite Collisions - Simplegamelib Part Two

This is the second part in an ongoing series where we will look a Dart package I am developing for simple Canvas based sprites games. I have written a couple of little games in Dart and always thought it would be an idea to split off all the general code into a reusable package.

The library is called simplegamelib and is heavily inspired by PyGame. The source is on GitHub here and the package is on pub. My personal aims are to write a Space Invaders type game and have really understandable library so it can be used to learn Dart. The code (so far!) is on GitHub and the project's homepage is here on blogger.

This time we will create a simple scene and again have a familiar looking sprite move from one side of the screen to the other. This time they will bump into another ninja so we add another sprite.

void main() {
  Game game = new Game("My Game", '#surface');

  player = game.createSprite("images/ninjadude.png");

  player
    ..position = new Point(0, 10)
    ..movement = Movements.east;

  dude = game.createSprite("images/ninjadude.png");

  dude..position = new Point(200, 20);

  dude.height = 48;
  dude.width = 48;
  player.height = 48;
  player.width = 48;

  game.customUpdate = collisionDemo;

  print('starting game...');

  game.start();
}

// Custom detection routine.
void collisionDemo() {
  document.body.style.backgroundColor =
      player.detectCollision(dude) ?  "#ffcc00" : "cornflowerblue";
  if (player.x > 333) {
    player.x = -50;
  }
}

This time around we create another sprite and both are set to a width and height of 48 pixels. This area for each ninja is used to detect whether they overlap. This type of collision detection can be used in all sorts of games. We take advantage of a hook in the Game object customUpdate that is called after each update. Here we can check if the two sprites collide and change the colour of the page accordingly. If the moving player sprite goes out of view it is set back to just off screen on the left. Click here to see it in action.

Next time, we will look at Sprite drawing priority!

Thursday, 1 October 2015

Simple Sprite Based Web Games In Dart - Part One

This is a new series where we will look a Dart package I am developing for simple Canvas based sprites games. I have written a couple of little games in Dart and always thought it would be an idea to split off all the general code into a reusable package.

The library is called simplegamelib and is heavily inspired by PyGame. The source is on GitHub here and the package is on pub. My personal aims are to write a Space Invaders type game and have really understandable library so it can be used to learn Dart. The code (so far!) is on GitHub and the project's homepage is here on blogger.

Yes it is time to get around to our 'Hello World'. We will create a simple scene and have a familiar looking sprite move from one side of the screen to the other.

import 'dart:html';
import 'package:simplegamelib/simplegamelib.dart';

void main() {
  Game game = new Game("My Game", '#surface');
  Sprite player = game.createSprite("images/ninjadude.png");

  player
    ..position = new Point(0, 10)
    ..movement = Movements.east;
  print('starting game...');

  game.start();
}

As you can see it is easy to get started with just a few lines of code. Click here to see it in action. Hit reload to start again.

Next time, we will look at adding more than one sprite and collision detection!