Category: Uncategorized

I put together a post summarizing my research on brain computer interfaces for my BuzzConf talk. This has links to some awesome videos – check it out at http://gooroo.io/GoorooThink/Article/16423/Brain-Computer-Interfaces

The last four months I have been a bit quiet blog and talk wise. This is because I have been hard at work developing a course for Pluralsight – Microsoft Edge for Developers which was released a few weeks ago!

But why should you care?

Well Edge is the default browser going forwards for Windows systems & devices so expect a large amount of your visitors to be Edge users – and you need to know how this browser could impact you and your sites and applications.

This is not a course on how to use browser developer tools (John Sonmez already has a great course on this) oh no this is a course exploring why Microsoft released Edge and focussing on the new functionality and changes just in Edge.

This course is 2hrs 37 minutes of quality Edge focussed content that is divided into 5 modules :

• Introduction to Microsoft Edge
• F12 Tools – Debugging
• F12 Tools – Performance
• What does Edge mean for you as a developer?
• Edge user features

In the course I cover the following:

• The motivations behind releasing Edge
• Depreciated technology & APIs
• New technology support
• New developer orientated features (F12 Tools)
• How to debug memory leaks & circular references
• Edge WebDriver support
• End user features such as Web Notes, Reading View and List and Cortana Integration

Thanks to the Microsoft Edge team for assisting me with a number of queries & in particular Ade Bateman.

Over the next few months in addition to this blog I’ll be writing a few posts for the guys over at Gooroo.io.

The Gooroo platform is a free set of tools designed at helping Software Developers manage their careers. DDD Melbourne attendees might remember Gooroo’s Terence Siganakis & Carl Joseph from their talk  “What we learnt analysing 1.5 million Tech Job Ads (and how we did it)”.

The first of these posts focuses on the Roslyn compiler covering the background & motivations behind the Roslyn project.

Head over to: https://gooroo.io/GoorooTHINK/Article/16253/Visual-Studio-2015-and-Roslyn-Compiler/latest to read the article.

.

Ill be conducting a free webinar for Pluralsight on the topics of WebGL & three.js.

The webinar will be held on Sat 23rd 8am Melbourne, Australia time which is Fri 24th 1pm PST  for US readers/viewers.

We will look at some of the advantages & disadvantages WebGL has over other web display technologies, some common gotchas & then putting together a simple car game (screenshot below) utilizing the physijs physics engine!

Headover to Pluralsight now to register for this (free) Webinar!

At Kiandra IT we are currently looking to hire .net devs, UX /designer developers, BA’s and system engineers.

Full job descriptions are available here: http://kiandra.com.au/join-us/.

But why would you want to work for Kiandra IT?

Well there are lots of benefits that the above link will tell you about but as a developer here are some of the things I like most about working at Kiandra:

• Great culture supporting innovation & learning. We have had a lunch time developer book club & a new games programming group is starting up shortly. We run company sponsored hackathons (last topic was big data & before that touch). Melbourne Alt.net is run in our office and we have a new user group called K-nights with shorter 15 min presentations. Most Fridays we have developer brown bag sessions to share the knowledge
• We use the best tools – Git Enterprise, Team city, Visual Studio 2013 & Resharper, Selenium and work with the best technologies – AngularJS, ASP.net MVC, Azure, AWS, NHibernate
• Colleagues that are passionate about their work – I think most devs at Kiandra have some sort of side project on the go from games development to start up projects to Pluralsight authoring
• Great working environment setup with a powerful desktop & 3 monitors for those who want them + an ergonomics guy to make sure this is adjusted just right..
• A range of breakfast is available in the office & there are always snacks & beer/wine available
• The work is predominantly based in the office unlike many consultancies (although you could have a more client facing role if you wish) & a central CBD location in new offices within easy reach of Southern Cross & Flagstaff stations

What you waiting for – don’t let the fact that you may work with me (or @larsklint for that matter) put you off & head over to  http://kiandra.com.au/join-us/ and apply now!

Please note at this time Kiandra IT do not sponsor visas.

For my turn based strategy game I envisaged players moving pieces over a map that would look similar to the Game of thrones intro. Unfortunately this would require awesome 3D modelling & graphics skills that are a little beyond what I currently possess but its something to aim for!

I tried a few different ways to generate a map for my game. Initially I tried using a couple of array’s to define where to create ground and the height the ground should be.

height: [
0, 0, 4, 1, 0, 0, 0, 0, 0, 0,
0, 0, 4, 1, 0, 0, 0, 0, 0, 0
],

groundType: [
0, 0, 1, 1, 0, 0, 0, 0, 0, 0,
0, 0, 1, 1, 0, 0, 0, 0, 0, 0
]

I then iterated through the arrays creating blocks dependent on the height & ground type. You need to do this backwards otherwise you get the inverse map relative to the array declaration:

var y = WorldData.initParams.startY,
colPosition = WorldData.initParams.rowSize,
rowPosition = 1;

for (var i = WorldData.initParams.groundType.length - 1; i > -1; i--) {

if (WorldData.initParams.groundType[i] > 0) {

addBlock({
arrayIndex: i,
colPosition: colPosition,
rowPosition: rowPosition,
y: y,
blockHeight: WorldData.initParams.height[i] * WorldData.initParams.blockHeight
});
}

colPosition--;

//end of row
if (colPosition === 0) {
colPosition = WorldData.initParams.rowSize;
rowPosition++;
}
}

As I create each square of ground I assigned meta data to it to easily identify its location in the environment and type of terrain.

Below is a screenshot of a typical result (the white & red cubes represent creatures):

Although I think this would work OK and allow me to manipulate the environment very easily (e.g. destroy a block of ground) it seemed very inefficient having a lot of cubes for a flat area of ground with surfaces that are never viewed. It also looked a bit Minecraft esq & not in such a good way so I started looking at other options!

Height and texture maps
I came across a cool post by Bjorn Sandvik who utilized realworld GIS data & three.js to produce a height and textured map of parts of Norway. Bjorn did a lot of work manipulating real world data  to produce a detailed texture & height map. This produced an awesome result but I don’t need something quite so complex.

At a high level my plan for creating terrain is:

• Create a bitmap to represent the games map (this has the added advantage that I dont need to create a level editor)
• Iterate through the bitmap’s pixels and assign a height value for each color (e.g. grey might represent mountains which are higher than trees)
• Output a JavaScript array of this data
• Use the array three.js to manipulate a plane’s vertexes to produce a height effect

Here is my very simple game bitmap enlarged (the original is 20 x 20 pixels):

I wrote a small C# program to iterate through the bitmap generate a JavaScript array string (note this is a slow way to do this and there is a faster way using LockBits method):

private string ParseBitmap(Bitmap bmp)
        {
            var sbHeightMap = new StringBuilder();

                for (var y = 0; y < bmp.Height; y++)
                {
                    for (var x = 0; x < bmp.Width; x++)
                    {
                        var clr = bmp.GetPixel(x, y);
                        var height = GetHeight(clr);
                        sbHeightMap.Append("," + height);
                    }
            }

            sbHeightMap.Remove(0, 1);

            return "[" + sbHeightMap + "]";
        }

I can then take the generated array and use it to manipulate a plane and then map the terrain image on top of it:

function loadNewTerrain() {

var geometry = new THREE.PlaneGeometry(WorldData.boardScreenWidth, WorldData.boardScreenWidth, WorldData.boardCells - 1, WorldData.boardCells - 1);

for (var i = 0, l = geometry.vertices.length-2; i++) {
geometry.vertices[i].z = WorldData.heightData[i];
}

var plane = new THREE.Mesh(geometry, WorldData.terrainTexture);

plane.material.side = THREE.DoubleSide;
plane.rotation.x = GameMath.de2ra(-90);
Game.newTerrain = plane;

Game.addObjectToScene(plane, 'ground');
}

This simple approach gives quite a pleasing affect with even a very simple image:

I tried this approach with a more complex 800×800 satellite photograph. The color to height mappings are not setup but it still produced a reasonable effect that shows the promise of this technique with a more detailed texture:

One issue this experiment brought up is how quickly game assets can get quite large – for example the height map of the above image is nearly 2mb and that I will need a good way of loading them hmm…