4. Entities and components

The Bento game engine uses a component-based model (not the Entity-Component-System (ECS) model). Entities hold a number of components that are managed by a scene graph. 

Inheritance vs composition

If you're used to inheritance and OOP, it may take a while to get used to component based programming. There's plenty of articles that go deeper into the inheritance vs composition model. Here is one interesting one about games: 
http://cowboyprogramming.com/2007/01/05/evolve-your-heirachy/ 

In Bento, entities are essentially nodes in a scene graph. The scene graph is not just for graphical purposes. Entities have an update and draw function. The Entity update and draw functions are not meant to be overwritten (as you would overwrite a virtual function in OOP), since Entity update and draw will call the children's update and draw. Instead, you are encouraged to attach a component that has an update and/or draw functions, if you want to write specific behaviors for the entity. 

In summary, an Entity/components scene graph looks like this:

Illustration of the entity scene graph. An entity contains many components, but can also attach other entities.

Illustration of the entity scene graph. An entity contains many components, but can also attach other entities.

How to attach components

When you want to add Bento components, there are 2 ways:

bento.define('example', [
    'bento',
    'bento/entity',
    'bento/components/sprite'
], function (
    Bento,
    Entity,
    Sprite
) {
    var entity1,
        entity2;
    // method 1: in the specs parameter
    entity1 = Entity({
        components: [Sprite],
        sprite: {
          // specify your sprite here
        }
    });

    // method 2, use the function
    entity2 = Entity();
    Sprite(entity2, {/*sprite specs here*/});
});

The Bento modules are written as functions for simpler Entity initialization like this. But all Bento modules eventually call entity.attach(), which is the way to attach a child object to the entity. You may attach your own components, either as a Bento style module, or simply attach it right away:

bento.define('example', [
    'bento',
    'bento/entity',
    'bento/components/sprite'
], function (
    Bento,
    Entity,
    Sprite
) {
    return function () {
        var exampleEntity = Entity({
            z: 0, // z-order
            name: 'example'
        });
        // attach some behavior!
        exampleEntity.attach({
            update: function () {
                // move right every tick
                var position = exampleEntity.getPosition();
                position.x += 1;
            }
        });
        return exampleEntity;
    };
});

Once you are done defining your entity, you can proceed to add it to the game. Adding it to the game involves calling the object manager in Bento. E.g:

require(['bento', 'example'], function (Bento, Example) {
    // spawn it
    var exampleEntity = Example();
    // add it
    Bento.objects.attach(exampleEntity);
});