Monday, 23 February 2015

Dart Alive! - Part 1 : Top 10 Live Dart Websites

The most popular post on this blog by far is the 'Top 5 Live Websites Already Using The Dart Language' written all the way from 2013. This is an eternity in the world of computing, therefore it is about time for an update!

If you are arriving at this blog post a long time after it was published, check out this constantly updated list on the Dart Lang site.

The 10 chosen are a mix of a direct use of Dart or a company that uses in their products. Without further ado, let's dive in to the list - (no particular order):

1

Work Trail - Time tracking application with Web, iOS and Android clients. Includes a developer API and extensive reporting. Their blog often features 'behind the scenes' description of the technologies running the site including Dart.

2

Easy Insure - Insurance price comparison site. Quotes generation and Agent directory.

3

Montage Book - Montage Automagic photo book design.

4

Counties Power - New Zealand Power Company. Dart powered map application.

5

DartLab - is a mini-IDE for sharing runnable Dart applications similar to JSFiddle. Currently it compiles Dart client-side into Javascript.

6

fxSimulator - Trading simulator for for Forex Market. In live Beta now.

7

Anionu - Anionu is a cloud based security and surveillance solution.

8

DGLogik - Iot Solutions and data dashboards.

9

Soundtrap - Online collaborative music studio including recording and a community.

10

iFormBuilder - Cloud-connected custom form based data collection system. Focussed on mobile use.

In Part Two of this series, we will take a look at the 'Dog Food' situation - How does Google itself use Dart?

Thursday, 19 February 2015

Procedural Generation : Part Six : Release The Ninjas!

Last time we dealt with browser issues, this time we will put some characters into the dungeon map and let them run around.

The Ninjas will be similar to the player character. From a procedural generation point of view, we have to be careful where we initially place them. We don't want them stuck in a wall or sharing a space with another character! We also need something to tell the Ninja to move.

Placing the Ninja takes place after we have built the map. Each block has a member variable to track if something/someone is standing on that spot. This is separate from the list of items and is used only as a starting position as our characters will soon be mobile.


class Block {

  int base = VOID;
  int character = VOID;
  List items = null;

  Block(this.base);

  addItem(anobject)
  {
    if (items==null) items = new List();
    items.add(anobject);
  }
}

We can reuse the same class (RPGCharacter) for the Player for the Ninja. Yay - code reuse!

Movement of the Ninja is a simple affair. In the logic update for the game in main.dart (triggered by a recurring timer), each Ninja is moved 1 block in a random direction. In a real game, we would perhaps move them towards the player if they are close enough.


 
 ...

  Timer logup = new Timer.periodic(new Duration(milliseconds: 1000), gameLogicUpdate);
  window.animationFrame.then(gameLoop);

 ...

void gameLogicUpdate(e) {
  if (mymap != null) mymap.updatePlayer(p1, playSnd);

  ninjas.forEach((n) {
    int m = RND(4);
    if (m == 1) n.moveU();
    if (m == 2) n.moveD();
    if (m == 3) n.moveL();
    if (m == 4) n.moveR();
  });
}

I should repeat an important point from a previous post in this series, that if this was to be developed into a full game, it really should be split off into several packages to improve the structure. Save some pain! :-)

Code is available on Github and a live demo is available here. Use arrow keys to move!

The next part of this series we will take a break from dungeons and see if we can generate and entire world!

Friday, 6 February 2015

Procedural Generation - Part Five : Surprise (Browser-Compatibility) Monster Attack!

Surprise Attack! If you visited the previous dungeon examples in a non-Chrome browser, you may have noticed two issues. One was that the graphics looked all blurred and the other being that the sound didn't play. Let's roll a couple of D6's and see if we have the agility to overcome it!

Firstly, why is it blurry? This is due to browsers smoothing scaled images on the canvas by default. For pixel based art (blocky), we do not want this to happen so we have to use the property imageSmoothingEnabled of the drawing context object that we get from the canvas. Currently in Dart, this property doesn't cover the numerous variants. If we want the dungeon to work on IE, Firefox etc we need to use JavaScript.

Fortunately calling JS from Dart is very easy. We will add a simple class to the index.html page with a simple class called crossBrowserFilla with a single method called keepThingsBlocky.


    var crossBrowserFilla  = function (){

      this.keepThingsBlocky = function(){
        var canvas = document.getElementById("surface");
        var ctx = canvas.getContext("2d");
        ctx.mozImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
        ctx.msImageSmoothingEnabled = false;
        ctx.webkitImageSmoothingEnabled = false;
      }
    };
  

This is called in main.dart. Fairly easy!

import 'dart:js';

....

JsObject jsproxy = new JsObject(context['crossBrowserFilla']);
bool canvasConfigured = false;

...

    if (!canvasConfigured){
      jsproxy.callMethod('keepThingsBlocky');
      canvasConfigured = true;
    }

The second issue of sound has to navigate things a bit differently. The best format across browsers is MP3 currently, the downside being is that Dartium doesn't yet support the required codec as it is based on Chromium. This is short term (hopefully) once the Dart VM makes it into Chrome. Apart from changing the file extensions, there is not change required to the audio code.

Code is available on Github and a live demo is available here. Use arrow keys to move!

Next time we will REALLY REALLY WILL finish our dungeon adventures by putting some other characters in the dungeon. A wizard's promise!