Well its been almost two weeks since [I declared the (tough) scheduled plan](https://www.mikecann.blog/myprojects/mr-nibbles-forever-getting-it-done/) for the release of Mr Nibbles Forever. In it I planned that last week was to be:



> 22nd-28th June
>
> 1. Design landing page for the game. This is important as I will need a place to put the trailer and to send people who are interested in the game. I have read several good resources on how this page should look. Some examples of other landing pages are: https://www.pixelprospector.com/list-of-websites-and-blogs-from-game-developers/. Once landing page is designed, run it pass some designer friends for help improving it.
>
> 2. Pester people for feedback on Alpha 8\. I need to get some real-world feedback for the game so I can fix bugs and improve the polish for release 9.
>
> 3. Contact some marketing people for help and advice.

Well I managed to do 1) and 2) but I decided that I didnt need to do 3) just yet, instead I made do with the excellent advice on these two pages:

https://vgamemarketing.com/
https://www.pixelprospector.com/

I may go back to 3) in a week or two if I need to.

As for 1) well I decided after an hour or two of messing around in Photoshop that it would be easier and faster to just buy an off-the-shelf WordPress theme and adjust that to my needs as I was intimately familiar with WordPress. The theme I chose was [Grizzly from Wegrass](https://themeforest.net/item/grizzly-responsive-app-showcase-corporate/1546240):

[![2015-07-03_07-33-47](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-33-47-300x231.png)](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-33-47.png)

It seemed to have all the features I needed for now and was responsive which is super important these days.

The next issue was what name should I call the "company". Up until now I had been going with the name "Nibblers" as that was the name that "Mr Nibbles" was published under too. "Nibblers" however is very specific to Mr Nibbles games and if I wanted to do non-nibbles games in the future it would sound a little odd so I needed a new name.

After much head scratching I decided I wanted to base the name around my favorite animal the Mantis Shrimp. If you dont know what it is, then checkout [the oatmeal's excellent bit on it](https://theoatmeal.com/comics/mantis_shrimp). The problem was that mantisshrimp.com is taken, also its difficult to tell someone the domain, as they either dont know how to spell it or are confused as to how many S'es there are in the middle.

So in the end I decided to go with something that was related and instead use the Mantis Shrimp in the logo. So I went with.... Epic Shrimp:

[![2015-07-03_07-41-32](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-41-32-1024x728.png)](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-41-32.png)

The site is still very much under development but at least I now have a good landing page for Mr Nibbles, Ectoplasm and Mr Nibbles Forever:

![2015-07-03_07-43-27](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-43-27.png)

So although last week was supposed to just be design, I decided to go the full-hog and implement too, which means that I have one more week free for development.

Speaking of development, this week we [supposed to be a bug-fixing and polish pass](https://www.mikecann.blog/myprojects/mr-nibbles-forever-getting-it-done/):

> 29th June – 5th July
>
> 1. Do bug-fixing and polish pass of the game. Push release 9 of the game to people for testing and feedback.

Its true that I did indeed fix some minor bugs...

![2015-07-03_07-46-39](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-46-39.png)

... this week was mostly dedicated to improving the high scores system in the game.

As a result of some feedback from people I decided that the game needs to be more in-your-face about the competitive aspect. Hopefully this will encourage people to return more often so that they can try to get higher up the leader boards.

I was unsatisfied with my current GameCentre and GoolgePlayServices implementation of the highscores so I decided to roll my own using my Parse.com experience. So now you will notice that next to the high-scores button that every each play you are given your daily rank:

[![2015-07-03_07-49-39](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-49-39-1024x772.png)](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-49-39.png)

Clicking the button will show you the top ranked players in each category:

[![2015-07-03_07-51-51](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-51-51-1024x768.png)](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-51-51.png)

You will notice that your name is "???" until you set your name:

[![2015-07-03_07-54-31](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-54-31-1024x763.png)](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-54-31.png)

Once done, all your old and new scores will now be saved under that name, this works across devices too.

[![2015-07-03_07-55-33](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-55-33-1024x773.png)](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-55-33.png)

I am also experimenting around with having a button next to any high score which also has a saved replay.

[![2015-07-03_07-57-26](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-57-26-1024x763.png)](https://www.mikecann.blog/wp-content/uploads/2015/07/2015-07-03_07-57-26.png)

Clicking the button will open Everyplay and show the recorded run for that highscore, which I think is pretty cool!

Well that's it for now, this weekend I am going to be extremely busy on something else (more in another blog post soon) so I wont have any more time, but hopefully next week will either be more bug fixing and polish and getting more feedback on the game.

As usual if you would like to try the game and are on iOS then just email me: mike.cann@gmail.com, or if you are Android then join this page: [https://plus.google.com/u/0/communities/100690884724496136044](https://plus.google.com/u/0/communities/100690884724496136044)

Until next week!

[![screenshot_01](/wp-content/uploads/2012/12/screenshot_01.png)](/posts/recursive-nuts-bolts-part-3-rendering-the-results-3-of-3/attachment/screenshot_01-7/)

**This is part two of my three part series on the internals of Recursive, an extension for Chrome. In the [first post](/posts/?p=2287) I talked about the general structure of Recursive and some of the lessons I learnt from dealing with Typescript. In the [second post](/posts/?p=2296) I discussed how Recursive goes about crawling and parsing the web. In this, the final post, i'm going to talk about how Recursive represents, lays out and renders that crawled data on the screen.**



### Code Structure

As mentioned in the first post in the series I have tried to keep the rendering logic as separate as possible from the actual crawling logic. This separation between the renderer and the crawler makes things simpler to understand in the code. The crawler is a model and the renderer is the view. The renderer simply displays whatever state the model contains.

### Representation

The question how to represent all the masses of data that the crawling process generates was tricky to decide upon and took quite a bit of tinkering before it ended up in its current form. I first toyed with the idea of displaying the data as a simple list of links where each list represents the next depth in the recurse, I demonstrated this concept in an early video:

<iframe src="https://www.youtube.com/embed/k4PD5yPLtp8" height="480" width="640" allowfullscreen="" frameborder="0"></iframe>

The problem, as can be seen in the above, is that there is still far too much data to display in that manner. I also wanted something that was more immediately visual, something that lets you see relative importance of nodes in the graph at a glance, simple lists of links couldn't provide this.

I remembered when I first launched Chrome Crawler a while back someone sent a video in which they had cleverly used Chrome Crawler and the open-source graphing program Gephi to great effect:

<iframe src="https://www.youtube.com/embed/C8P6ZttaZRo" height="360" width="640" allowfullscreen="" frameborder="0"></iframe>

When thinking about the problem of how to represent the data I was aware that a key difficulty was representing the relative importance of nodes and edges in the crawl graph but not to swamp the user with too much information. I eventually decided that grouping pages and files together under the domains that the crawler found them would be a good way of giving a sense of the relative size of each domain and the number and type of files found there.

[![screenshot_02](/wp-content/uploads/2012/12/screenshot_021.png)](/posts/recursive-nuts-bolts-part-3-rendering-the-results-3-of-3/attachment/screenshot_02-11/)

Nodes, I decided, would be joined by a single line from the parent domain that crawled it. This way there wouldn't be too many confusing lines on the render yet you could still see how various domains were connected.

### Layout

Once I had the idea how I was going to represent the data from the crawler it was then a matter of working out how to lay out the nodes. I knew that the nodes were going to be circles and I knew that I didn't want them to overlap, I also wanted a dynamic looking graph (like the one in Gephi video above).

To achieve this I decided to use Box2D the popular physics engine to take some of the difficulties with positioning away for me. Using Box2D each edge between the nodes is a distance joint and the nodes themselves are simple circle shapes. Then I just let the simulation run and the nodes move and naturally try to separate from each other.

[![screenshot_03](/wp-content/uploads/2012/12/screenshot_031.png)](/posts/recursive-nuts-bolts-part-3-rendering-the-results-3-of-3/attachment/screenshot_03-7/)

This solution worked in some situation however it was sub-optimal in others. The problem is that because each crawl is different you can end up in situations where there are many small nodes grouped about a parent or a few very large nodes:

[![ScreenHunter_01 Dec. 27 12.49](/wp-content/uploads/2012/12/ScreenHunter_01-Dec.-27-12.49.jpg)](/posts/recursive-nuts-bolts-part-3-rendering-the-results-3-of-3/attachment/screenhunter_01-dec-27-12-49/)

I spent a good long while trying to ‘frig’ it so that the length of the distance joints between the nodes were right in most instances so that the nodes didn't overlap. The code was starting to look really messy and complex incorporating rules that depended on the number of children / siblings, the relative size of the nodes, the total length of the sibling nodes, the area values with proportion to the total area and so on.

No matter how many times I multiplied here, divided here I couldn't hack it into a form that worked for every crawl. So I decided to go back to the drawing board and rethink the layout problem.

[![ScreenHunter_02 Dec. 27 12.54](/wp-content/uploads/2012/12/ScreenHunter_02-Dec.-27-12.54.jpg)](/posts/recursive-nuts-bolts-part-3-rendering-the-results-3-of-3/attachment/screenhunter_02-dec-27-12-54/)

After some scribbling I decided that what I needed to calculate was the total amount of space required for a node and the amount of space its parent had to allocate to fit it. Once I could correctly calculate those two it should be a relatively simple matter of spacing child nodes correctly about their parent.

I also noted that each node’s required area is simply the recursive sum of the space required by its children:

[![ScreenHunter_03 Dec. 27 12.59](/wp-content/uploads/2012/12/ScreenHunter_03-Dec.-27-12.59.jpg)](/posts/recursive-nuts-bolts-part-3-rendering-the-results-3-of-3/attachment/screenhunter_03-dec-27-12-59/)

At the smallest scale the total space required by a single node is just its radius. If you add a child to that node then total space required is the nodes radius plus a constant distance plus the diameter of the child.

[![ScreenHunter_04 Dec. 27 13.00](/wp-content/uploads/2012/12/ScreenHunter_04-Dec.-27-13.00.jpg)](/posts/recursive-nuts-bolts-part-3-rendering-the-results-3-of-3/attachment/screenhunter_04-dec-27-13-00/)

As you add more children however you run into the problem that there won't be enough space about the parent:

[![ScreenHunter_05 Dec. 27 13.02](/wp-content/uploads/2012/12/ScreenHunter_05-Dec.-27-13.02.jpg)](/posts/recursive-nuts-bolts-part-3-rendering-the-results-3-of-3/attachment/screenhunter_05-dec-27-13-02/)

So now you must layer those children into concentric rings so that there is definitely enough space for each child. So how to do that. Well that was the tricky part and required some trigonometry (just about the only thing I remembered from high school maths).

[![ScreenHunter_06 Dec. 27 13.13](/wp-content/uploads/2012/12/ScreenHunter_06-Dec.-27-13.13.jpg)](/posts/recursive-nuts-bolts-part-3-rendering-the-results-3-of-3/attachment/screenhunter_06-dec-27-13-13/)

Because we know the distance between the centre of the child and its parent and we know the radius of the child we can calculate the angle between two lines that extend from the parent and lie on points on the outside of the child’s radius and are perpendicular to the child's centre.

When we have this angle its a simple matter of looping through all of the (sorted smallest to largest) children adding up the angle required until you reach the maximum 360 degrees. Then you increase the distance between the parent by the diameter of the last node and start again on the second layer of children. This way you can guarantee that every child will have sufficient space about the parent.

[![ScreenHunter_01 Dec. 29 12.31](/wp-content/uploads/2012/12/ScreenHunter_01-Dec.-29-12.31.jpg)](/posts/recursive-nuts-bolts-part-3-rendering-the-results-3-of-3/attachment/screenhunter_01-dec-29-12-31/)

### Rendering

I knew that the graph would get very large and would be complex to render so performance was critical. I didn't want to spend ages messing around with WebGL, having done some before I knew that potentially it could take a lot longer than the relatively simple canvas2d. Because Chrome has a hardware accelerated canvas2d I reasoned that the performance should be okay.

Unfortunately even on a decent machine, the rendering is still rather slow, so that you usually cant crawl beyond about a depth of 3\. I tried all the common tips and tricks that can be found on the internet such as minimizing context switches when drawing lines and circles and caching commonly drawn things together in an image so that there are fewer draw calls. I even tried to assist chrome by putting the icons on one large image sheet, thinking it would be represented by a single texture behind the scenes thus minimise context switches when rendering to the GPU.

It seems however, that if you want performance in the browser you are going to have to go with WebGL.

### Improvements

Given more time it would be nice to explore swapping out the 2d rendering pipeline with a purely 3d one using WebGL, that should increase the speed of things a great deal. One idea is I could use point-sprite particles to render each icon within a 3d graph with wireframe lines to represent the edges between the nodes.

I did some work on point sprite particles in WebGL [a little while ago](/posts/hxaria-infinite-terrain-haxe-webgldat-gui/) so I know it should be possible to render millions (literally) of nodes and edges that way.

### Finally

Well thats the end of my series on the internals of Recursive, I hope you have enjoyed it. I haven't decided whether I want to release the source code just yet, I may return to the project in the future, but if you are interested in looking over the code send me an email: mike.cann@gmail.com

[![](/wp-content/uploads/2011/07/Gamescom-2010-From-Dust-First-Look-Preview.jpg "Gamescom-2010-From-Dust-First-Look-Preview")](/wp-content/uploads/2011/07/Gamescom-2010-From-Dust-First-Look-Preview.jpg)

Its not often these days that I post about games I have been playing, usually I leave that sort of stuff in the realms of [Twitter](https://twitter.com/mikeysee) or social networks.



For "From Dust" however ill make an exception. It's also not often these days that I see some tech in a game and wonder to myself "how the hell did they do that?" or just "wow I have never seen that done before". From Dust made me think both those things this week.

From Dust is a god game that follows in the heels of other god games such as Populus and Black and White. The reason why it has attracted my attention so much is the incredible tech that the game employs.

Check out this tech-demo / trailer for the game:

<iframe width="100%" height="400" src="https://www.youtube.com/embed/gSOQGazo7Oo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

When I watched that earlier in the week I was amazed but skeptical that everything shown was actually how it was in game. After downloading and playing it on xbox this week however I can confirm that everything shown in the above video is in game and more. Not only that its actually fun!

The water flows from the top of the mountains realistically, over time it erodes the landscape to form rivers. Water pressure builds up need harder rock causing bends in the river that threaten your villages. You have to think ahead about how to divert a river one way but making sure not to flood an area downstream. More often than not it takes several tries to get it right.

[![](/wp-content/uploads/2011/07/from-dust-04ded84c9de5b1-300x168.jpg "from-dust-04ded84c9de5b1")](/wp-content/uploads/2011/07/from-dust-04ded84c9de5b1.jpg)

Lava is great. Several missions have volcanoes that you must be swift to tame else they can easily threaten your villages. The great this however is that there are many ways you can choose to solve a particular problem.

You could just manually suck up all the lava and drop it somewhere else, a somewhat temporary solution. You could try to build a channel for the lava to follow however lava has a habit of melting through any channels you build. You could use one of the spells your villagers to supply to aid you. You could divert the course of a river to cool the lava as it nears your village. You could use a "water tree" to cool the oncoming flow of magma. The choice is yours.

I have been pondering over the tech and thinking how they managed to get such a complex liquid simulation to run in realtime. Infact, how they managed to get several complex liquid simulations to run in realtime. The sand, the water, the lava and the rock all act as liquids with different properties, however they all interact with each other in different ways. Not only is the liquid tech impressive, the vegetation propagation and the fire mechanics are all seamless, and from what I could tell not a single frame was dropped.

It must be a GPU based liquid simulation (particularly as the xbox CPU is weak), however I didn't think they were good enough to do something like this. Perhaps they are using some optimized Smooth Particle Hydrodynamics such as that employed by Fairlight from the scene: [https://directtovideo.wordpress.com/2011/05/03/numb-res/](https://directtovideo.wordpress.com/2011/05/03/numb-res/)

Anyways, the game is available for download right now on xbox or if you are like me and are pc-inclined then it should be available on [PC from the 17th of August](https://www.google.co.uk/url?sa=t&source=web&cd=2&ved=0CCMQFjAB&url=http%3A%2F%2Fwww.eurogamer.net%2Farticles%2F2011-07-25-from-dust-pc-release-date-pushed-back&ei=Yj41TvETh8GEB_DA7JAL&usg=AFQjCNFjEJouzN_BKbussaGnnmqeJBmCHQ).

Saw this [post on Gizmodo](https://gizmodo.com/5591613/incredible-physics-engine-yields-some-seriously-jaw+dropping-dirt) and thought I would share on my blog as I think its incredible.



Its a a physics engine called Lagoa and its by Thiago Costa, check it out:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="360" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="https://vimeo.com/moogaloop.swf?clip_id=13457383&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" /><embed type="application/x-shockwave-flash" width="640" height="360" src="https://vimeo.com/moogaloop.swf?clip_id=13457383&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=00ADEF&amp;fullscreen=1" allowscriptaccess="always" allowfullscreen="true"></embed></object>

[Lagoa Multiphysics 1.0 - Teaser](https://vimeo.com/13457383) from [Thiago Costa](https://vimeo.com/thiagocosta) on [Vimeo](https://vimeo.com).

Got sent this today by a friend who linked to Newgrounds [upload](https://www.newgrounds.com/portal/view/525347).



I think its actually quite genius:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="640" height="440" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="/wp-content/uploads/2010/02/525347_scale_of_universe_ng.swf" /><embed type="application/x-shockwave-flash" width="640" height="440" src="/wp-content/uploads/2010/02/525347_scale_of_universe_ng.swf"> </embed></object>

It reminds me old the old powers of 10 video:

<iframe width="100%" height="400" src="https://www.youtube.com/embed/A2cmlhfdxuY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>