Go Do

A few words on how I built our app Go Do and what I learnt from that.  

Warning also contains some highly subjective ranting.

So a quick bit of background. Go Do is an app that allows you to find events in your local area. You can get it here www.justgo.doThere are only two of us working on Go Do. I did all the development and Carl did the design. All in all it took about 7 months to build and launch on both ios and android. We chopped and change the design quite a bit in that time as well. That also includes the time spent on the backend but here i’m only going to cover the front end.

React Native

Go Do is built using React Native. I choose to use React Native simply because I already knew React and Javascript. I did consider using xamarin for a bit mainly because its C#. I even considered trying it with F# but the end goal here was to build something before I ran out of cash and learning something new would have set me back.

So it turns out React Native is a really good bit of engineering generally speaking it just works and so far I have written no native code at all. I did create the IOS splash screen in Xcode but that is literally all I had to do. The app has only a few lines of platform specific code in it, mostly to do with the android back button. This ability to deliver on both platforms from a single code base is just awesome 

   Tom’s Tips – for a single code base app

  • If you can design your app so it’s the same on both platforms. You can potentially half your workload this way. Yes they have different design principles and guidelines so just stay within both. Plus the “experience” will be near identical which is what you want
  • Design your app so it’s scalable and works on any screen size. This does take some careful thought and you will need to compromise but you have to do this on android anyway so why not get iPad thrown in for free on iOS?

The other good bits about React Native  –

Live/Hot reloading – Not having to recompile all the time means you can constantly be tweaking and testing and believe me you will do a lot of that.

CSS – This is so much better than web development. I just declare my style objects in with my components and they are even type safe! If i need to share them I stick them in a module and import them.

Code push –  Allows you to push out updates over the wire to fix bugs and tweak the app without going back though approval. It has its limits and it’s a bit hard to get set up but it’s worth it.

Community – For a young tech there are a lot of good github projects. I’m using AirB&B’s maps 

Performance – The performance is amazing it feels like any native app. You do however need to understand how to optimise react

and the not so good bits –

Updating – this seems to cause lots of issues every time I do this I have to reinstall all the react native modules im using.

Changing the project name – I started the project with a different name and tried to change it half way though. It was so painful I gave up.

Hot reloading – somehow I broke this and never got it working again. Which is a shame as it’s awesome.

Gesture response – The performance is great but the way this works seem very unreactive and rather complicated. I’ll caveat this that I have no idea how they could do it better.

JavaScript! – Understand that writing javascript is my job but its 2017 we could do better!  When you program you are building your own maze. When you program in JS you don’t even get a match to find your way around.

  Tom’s Tips – for surviving JavaScript

  • Use Typescript or Flow it can be a pain to set up but it will give you semi decent tooling which will save you time in the long run.
  • Use functional programming principles as much as possible. You don’t need to know what a monad is but you should understand the concepts purity and immutability. If you like this makes your maze 2d not 3d.
  • Avoid using “this” wherever you can.

 

Architecture

First point you would do well to use stateless functional components wherever possible.  It makes you application easy to reason about. The ideal is you pass you view a single state object and it will render correctly. Keep that in mind and your on the right track.

For state management I don’t use redux. I have in the past but I have a few reasons for not using it on this project

  1. I don’t like making actions and dispatching them when I could just call the reducer function directly
  2. If you don’t use time travel or the redux dev tools you don’t need actions.
  3. It only does half the job. Setting state. Side effects are well.. side lined

Instead I use a modified version of this approach which is a JS implementation of the Elm architecture

It does more but with less boilerplate and I find it simpler. I also use Ramda a lot mainly for for mutating the state. I have used ImmutableJS in the past but i found it hard to debug and overly complex. It’s probably more efficient but in this app that’s never going to be the bottleneck. Ramda is great but it confuses the hell out of TypeScript at times.

In elm each “Action” is a pure function that takes the current app state – mutates it and returns it. However In addition it also can return an optional list of “Effects”. These are side effecty functions that return promises.

The beauty of this is approach is the core of you app is easy to test and reason about. As its only pure function that make up your app you can easily test that when this happens it should set the state to this and make this call to the server.

I started by using ramda a lot and just composing up functions. What I found however if that this mixed data structure of the app state and list of effects was not so easy to work with. The problem is you need to be able to compose pure “Mutators” that just act on the state on one level and “Actions” that also add effects on another. For example a “Load Data” action is both triggered directly from a refresh, or as part of the “Initialize App” Action

So I would end up with concise but hard to read code like this. Here the “Action” takes the app state but returns the state and a list of effects if any. 

 

const setLoadingStatusToLoading = (appModel:AppModel) => setLoadingStatus(Loading, appModel);
const loadEventResult = (model:AppModel) => makeResponse([loadEvents(model.mapLocation)],model);
export const loadEventsAction = pipe( setLoadingStatusToLoading, loadEventResult);

So instead I switched to a functor based approach. Don’t worry about the terminology the code is easy to read.


const setUserLocationAction = (location:Region):Action => (update) => {
   return update.map(setUserLocation(location))
       .map(setSearchLocation(location))
       .addEffect(setUserLocationWatch)
       .chain(setMapLocationAndLoadEvents(location))
}

Granted these don’t do the same job but stay with me and hopefully its enough to get the idea. Now “Actions” must always take and return an “Update” object. This has a few functions on it.

  • Map is just a mutation of the app state which i call model.
  • AddEffect adds an effect to the list by default this is always empty.
  • Chain is used to compose actions together.

I find this easier to read and follow

 

The Short

So to conclude I found React Native to be surprisingly trouble free. I would definitely recommend it. Yes its has a cost but it beats building the same app twice.  If you had something really technically complex you wanted to achieve then you may want to go native. Still I suspect even then a hybrid approach would save time.

Using a functional approach greatly simplifies things. It makes the code easier to follow and easy to change. Trust me I’ve built enough OOP MVC apps to know this.

And lastly the one size fits all approach to app design is a huge win if you can make it work.

 

So check out our app… oh and go and do something fun.

 

 

 

I’m going to start with a disclaimer this is not a fully fledged polished game engine more a proof of concept and hopefully something to show the way. If you want more features then please add them 🙂

So I wanted to create a little demo showing what Entity Systems can do for you and why you should care. Now they solve a lot of structural issues but also by there nature are data driven. This means by being a bit clever we can get automated serialisation. A fancy way of saying we can save the game state with out writing any special code. If we are a bit smarter still we can create an Editor that will magically work for any components we add. What’s more this editor works “in game” as you are playing you can tweak and save you levels. Arrow keys to move and E to bring up the editor.

This movie requires Flash Player 9

Obviously there is a lot missing both from the editor and the engine. But hopefully for those who don’t quite know where to start with Entity Systems this will be a nudge in the right direction.

The code for the demo is here on git hub. The code for engine is here and it uses Ember2

 

Well Its been a while but I’ve been busy in the back ground and finally have something to show for it all. In the shape of Ember 2 first up I need to acknowledge some major contributors. First Alec McEachran @alecmce and his take on things with xember. Second Richard Lord @richard_lord and his clever suggestions in how to get around the performance cost of removing items from a vector.

Although the new versions API is in many ways familiar although simplified it is a complete rebuild underneath with a much more test driven approach. Also while some of the changes are a bit more subtle there are two biggie’s. All in all I made the decision that it deserves the version 2 badge.

So the first big thing is Ember is now a Robotlegs2 extension. To pre-empt the reaction of some that robotlegs has no place in games it does. Its perfect for the UI and menu’s systems etc. the issue is that the MVC doesn’t fit real time game play which is where Ember steps onto the stage. For Ember2 I wanted something that solved the issues of integrating with the Robotlegs framework whilst still being able stand alone. I also wanted a way of being able to add any functionality required without having to bake it in. Lucky Robotlegs2 appeared and its new context where functionality is constructed from extensions rather than being built in was exactly what I wanted. So rather than doing It my self badly it made sense to use it and save me a lot of work.

Second on the list is some clever trickery. With some magic behind the scenes I have been able to ditch the cumbersome linked lists and still keep performance practically the same. The best part is the nodes are now in juicy vectors and they can now be injected directly into the systems. No casting and funny loops any more just inject and “for each” you way over them.

Other more minor changes are that Entities are now objects in them selves. This may sound like a minor thing but it allows for pooling of whole Entities which was previously impossible and can help performance. Also taken for Alec’s xember is the auto inspection of the node classes so there is now minimal typing required when creating your nodes. All these things add up to make Ember 2 simpler and neater so it can just get out of the way and allow you to get on and code. If you want to get started check out the bunnies demo code on github. Have fun.

 

Tink very kindly let me talk at the FLPUG last month about entity systems. Its now up online and you can watch it here.


http://www.lfpug.com/entity-systems-%E2%80%93-a-better-way-to-develop-games/

It was a pleasant surprise to meet people that other people are working with these ideas and even using there own versions of Ember. Hopefully I managed put it on the radar of at least a couple more.

 

The latest version of Ember comes with a huge increase in speed. The idea came when I was thinking about linked lists and I realised that I could also cache a pointer to the components in the list nodes. So we now have an Entity system with little in the way of processing overhead. In fact in benchmarks the performance difference compared to standard game engines is negligible.

Here are two benchmark demo’s complete with source code.

5500 bunny blitting Demo

55 per frame bunny fountain Demo

 

Note:I have stopped development on Ember. While it works fine the ideas have been refined in Richards Lords Ash I recommend you check that out.

the Game

If your new to entity systems then you may want to read my posts on Game Architecture and Entity Systems first to get an over view. You can download the code for this example GettingStarted

Ok so first step to making games on the Ember frame work is to create you games main class. This has the same role as an applications context in robotlegs.  Its main role is the initialization and tearing-down of you game.

package{
    import com.tomseysdavies.ember.base.Game;

    public class MyGame extends Game{
        override protected function startUp():void{

        }
    }
}

we can now launch the game from felx like so and pass it a reference to the display object that we want to become the games view.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
        <local:MyGame contextView="{gameView}" />
    </fx:Declarations>
    <mx:UIComponent id="gameView" />
</s:Application>

Components

So our game is now launching and has a reference to its view so we can now look at creating our first component. A component is a value object its highly portable and normal has no methods only data. For this tutorial we will need two.

package components
{
    public class PositionComponent
    {
        public var x:Number = 0;
        public var y:Number = 0;
    }
}
package components
{
    import flash.display.Bitmap;

    public class GraphicsComponent
    {
        public var asset:Bitmap;
    }
}

Entities

Now lets go back to our start up function. So here we first create that our components then next we create an entity and add our components to it. Think of an entity as an empty container to which we can add components. We create entities with the entityManager.

override protected function startUp():void{
    var positionComponent:PositionComponent = new PositionComponent();
    positionComponent.x = 100;
    positionComponent.y = 100; 
           
    var graphicsComponent:GraphicsComponent = new GraphicsComponent();
    graphicsComponent.asset = new Tree();
           
    var entity:IEntity = entityManager.createEntity();
    entity.addComponent(positionComponent);
    entity.addComponent(graphicsComponent);

}

Systems

The final building block in Ember is the systems these have all the logic for the game that acts on the entities data. Ember uses SwiftSuspenders for its dependency injection if you have used robotlegs then hopefully this should be familiar and its well documented there so I wont cover it into much detail. All systems must implement ISystem and the onRegister and destroy functions that come with that. Any initiation code needs to go in to onRegister which is automatically called after the injection has occurred. The destroy() function is used to clean up any event listeners etc. Have a quick look at the code bellow then I will explain it.

package systems
{
    import com.tomseysdavies.ember.base.EntityManager;
    import com.tomseysdavies.ember.core.IEntity;
    import com.tomseysdavies.ember.core.ISystem;
   
    import components.GraphicsComponent;
    import components.PositionComponent;
   
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.DisplayObjectContainer;
    import flash.geom.Point;
    import flash.geom.Rectangle;
   
    public class RenderingSystem implements ISystem
    {
        [Inject] public var contextView:DisplayObjectContainer;
        [Inject] public var entityManager:EntityManager;       
        private var _family:IFamily;
        private var _viewPort:Bitmap;
       
        public function onRegister():void{
            _family = entityManager.getEntityFamily(PositionComponent,GraphicsComponent);
            _family.iterator.add(renderEntity);
           
            _viewPort = new Bitmap()
            _viewPort.bitmapData = new BitmapData(400,400);
            contextView.addChild(_viewPort);
           
            render()
        }
       
        private function render():void{
            _viewPort.bitmapData.fillRect(new Rectangle(0,0,400,400),0xFFFFCC);
            _family.startIterator();
        }

        private function renderEntity(position:PositionComponent,graphics:GraphicsComponent):void{
            _viewPort.bitmapData.copyPixels(graphics.asset.bitmapData,graphics.asset.bitmapData.rect,new Point(position.x,position.y),null,null,true);
        }
       
        public function destroy():void  {
             _family.iterator.remove(renderEntity);
            _viewPort.bitmapData.dispose();
        }
    }
}

This system as it name suggests renders our entity to the screen. First we we set up a viewport where we will render our graphics (note contextview is again injected). Next the most important line in onRegister is this(note that the reference to the entityManager is injected above).

_family = entityManager.getEntityFamily(PositionComponent,GraphicsComponent);

This allows us to “look up” all entities from the entityManager that have all the specified components. Here we are asking for all entities that have both the PositionComponent and the GraphicsComponent. The entityManager returns a pointer to a family instance. We store a reference to this so we don’t have to request it every time we render the game. We can listen to signals dispatched by the family to see if entities have been added or removed or iterate over all entities in the family. We are going to add a handler to the iterator signal. we do that like this

_family.iterator.add(renderEntity);

Bellow is what that handler function looks like. Notice it accepts components as arguments in the same order as those that we asked for when we called getEntityFamily. If these don’t match you will get a runtime error.

private function renderEntity(position:PositionComponent,graphics:GraphicsComponent):void{
      _viewPort.bitmapData.copyPixels(graphics.asset.bitmapData,graphics.asset.bitmapData.rect,new Point(position.x,position.y),null,null,true);
}

Once iteration has been triggered this will be called once for each entity in the family. It uses the data in the position component to copy the asset in the graphics component to the screen. So now to trigger the iteration we just call

_family.startIterator();

Our final task is to add our system to the game. So at the end of our games start up function we add

systemManager.addSystem(RenderingSystem);

OK and that’s all we need to draw our asset to the screen. Not much use by its self but next post ill show how to send events between systems by injecting signals.

There are now upto date demos complete with source code here

 

Favour composition over inheritance

If you haven’t already read my previous post on the problems of traditional game architecture and why entity systems are needed. I’m going to cover the basics of an entity system before we look at 3 different implantations and the pro’s and con’s of each.

What is an entity?

An entity (sometimes called game object) represents something in the game. For every tree,tank or ninja we have an entity. An entity is container to which we can add components (behaviours) that define what it is. e.g In this rather conceptual example a Ninja gets a Renderer, Physics, Health and Stealth components which together make up a Ninja.

This is the basics of all Entity systems one of key feature is the ability to create entities and change there components at run time. So a Ninja could become a Tank! (that’s the hard sell done).

Spotter guide.

There are 3 main ways to implement an entity system I have seen and I’m going to quickly out line them all and take a critical look at the pro’s and con’s. I’m going to call them common, almost and true (yes I’m bias but I think they are appropriate names)

“Common”

Most common implantation you are going to come across. Its based on the strategy pattern and its the simplest to understand. The first time I built a entity system this is what I did. There are good example out there in flash like PushButton Engine.

How it works

All components have a common interface normal with a function update(). Calling update() on entity causes update() to be called on all its components. Components then update there data for example a render component may copy its graphics to a view port.

Pros

Simple and fast. Better than inheritance.

Cons

Scalability and flexibility (how easy it is to make changes). To explain the issue lets take an example. We have an entity with both renderer and physics components. Both need to know about the location of the entity in the world. So we have two options

  1. push the data up into the entity its self.  In complex games this can result inmore and more specialised data gets pushed up into the entity creating a god object.
  2. Allow components to access other components data. When one component depends on the data in another component we get a dependency. Component A can’t function unless component B exists. As a game grows so does the complexity of the dependencies.

There are work arounds to this issue for example automatically creating component B when A is added but then we need to give it the correct data. We start to lose the ability to mix and match components on the fly that makes an entity system so powerful. Entity to entity communication for example in collision detection is also difficult.

“Almost”

This was suggest to me by a friend I’m including it here as its hard to criticise and has a lot of positives points.

How it works

This gets the big leap correct it separates the data from the logic. In the common implementation both data and logic are combined in a component here they separated into

  1. Data – Components
  2. Logic – Systems(behaviours)

This is counter intuitive and contrary to what’s drilled into you about OOP. However it solves lots of issues.

A renderer system could require a spacial component (position in the world .etc) and a graphics component where as a physics system may require just the spacial component. Think of the components as the model and systems as the controller in MVC terms. Systems normally implement a common interface with a update() function

Pros

More scalable the systems have no dependencies on one another and can share data. Fast.

Cons

Systems are still dependent on an entity having specific components. This can be worked around to an extent by implementing it so that when we and a system to an entity any missing components are created automatically. This however means that we have to add a system before we can start setting the components data as they may not exist before that point. The main issue with this system come with entity to entity communication for example in collision detection. A collision system attached to an entity needs to check its self against all the others entities with collision systems this can be done with events but it also can be a lot simpler as we will see next.

“True”

A game is just a real time database with a graphical front end

– Dave Roderick

This is a blanket statment but its fundamentally true and this architecture is the closest fit to this statement I have found.

How it works

Again we separate out the logic and the data. However rather than adding systems to the individual entities we add the systems to the game its self. The systems can the do a real time look up and requests all entities that have the required components for processing. For instance a rendering system will ask every frame for all entities that have Spacial and Graphical components it will then run though the list drawing each one.

Pros

Scalable and easy to make change due to low dependences. Truly data driven. Simple. Collisions etc. are much easier to manage.

Cons

Slow(er) looking up the entities we need for each system every frame is going to effect performance. Counter-intuitive and requires you to rethink your approach to programming.

Conclusion

All these systems are better that a traditional inheritance hierarchy. I chose the “true” system for my frame work Ember as I think its pros out way its cons when it comes to the real issues of game development. It can also be implemented so that performance issues can become negligible. you can read how to get started using Ember here.

If you want to read more on entity systems its covered in some depth here by t-machine blogs.

Also check out Richard Lords post with a practical example here
http://www.richardlord.net/blog/what-is-an-entity-framework

Tagged with:
 

In all the games I have made I have never been that happy with the architecture. Using PureMVC and more recently Robotlegs on a more or less daily basis has shown me the benefits of a well designed common framework. The down side of MVC which both are based on is that its not suitable for game development it’s ideal for the into screens and menus and perhaps even the UI but its not designed for problems found in game development.

So what do you do? Well if you like me then you will probably come up with something like this.

OK details may vary but it should be familiar to most people who have built games. So we have a nice inheritance tree and its all looking pretty straight forward. But then may be you decide actually what your game needs is moveable platforms. OK no real problem just change Platform to inherit from Movable and were done. Well some still don’t move so we need a boolean to flag the movable ones but that not to difficult.

So what’s the issue? Well perhaps now we decide we need a enemy that doesn’t move. What’s the simple solution to that? The point I’m trying to make is inheritance sucks. Its fine if everything is predetermined and well designed but games are not like that. Even if you have designed you game by some freak in-site to the n’th degree when you start on you next game how much code are you going to be able to reuse? Finally what if you want to make these changes at run time with out having to recompile?

Let me put another way would it be better if you could pick and choose the attributes you want for each item in your game.

As you can see we could make a moveable platform just by sticking a tick in the correct box.

So this is the ideal how can we do this in practice. Well we can use an “Entity System” also called “Component Systems” and “ Entity Component Systems” and loads of other names. I’m going to use Entity System as Component has to many meaning especially in flash. As well as having many different names there are as many interpretations as to how to implement one. Not being happy with any I had come across implemented in flash I have created my own framework Ember and made it open source. In my next post I look at the various ways of implementing entity systems.

Read more:

Evlove your Heirarchy

T-Machines posts on entity systems

What is an entity framework

Why use an entity framework

Tagged with: