5. Tools and conventions

(sorry, this tutorial is not finished)

Coding Style

Make sure your code is JSLint compliant.

Sprites

Sprites in Bento are components that are attached to entities. An example:

bento.define('bunny', [
    'bento',
    'bento/math/vector2',
    'bento/math/rectangle',
    'bento/components/sprite',
    'bento/components/clickable',
    'bento/entity',
    'bento/eventsystem',
    'bento/utils',
    'bento/tween'
], function (
    Bento,
    Vector2,
    Rectangle,
    Sprite,
    Clickable,
    Entity,
    EventSystem,
    Utils,
    Tween
) {
    'use strict';
    return function () {
        var viewport = Bento.getViewport(),
            entity = Entity({
                z: 0,
                name: 'bunny',
                useHshg: false,
                position: Vector2(128, 128),
                originRelative: Vector2(0.5, 1), // bottom center origin
                components: [Sprite],
                family: ['player'],
                sprite: {
                    image: Bento.assets.getImage('bunny'), // a 'bunny' asset should be loaded
                    frameWidth: 32,
                    frameHeight: 32,
                    animations: {
                        "idle": {
                            "speed": 0,
                            "frames": [0]
                        },
                        "jump": {
                            "speed": 0,
                            "frames": [1]
                        },
                        "walk": {
                            "speed": 0.2,
                            "frames": [4, 5, 6, 7, 8, 9]
                        }
                    }
                }
            });

        return entity;
    };
});

The sprite settings require you to add an image (which you can get from Bento.assets), tell what the width and height is and how the animations are defined. Spritesheets should be divided into equal sized images like so:

The width and height of each frame is 32 x 32. In case you don't know the image width/height beforehand, you can also assign frameCountX and frameCountY. Which in this case would be 4 x 4. Use whichever method you need. 

From here you can define animations. The frames are counted starting from 0 (the top left). In this case, the top right would be 3. The frame number continues as 4 on the second row. In this bunny example, the walking animation are frames 4 to 9.

(To do: loading animations from multiple images)

Making levels in Tiled

Download Tiled and install. 
Make a new tileset and make sure the name is the same as the filename.
When placing objects: make a tilesheet for objects (or use an existing one). Right click on a tile for Tile Properties -> Add a custom property called "module". The value should be the name of the module you want to spawn there. 

Gulp

(not written yet)

Tweens

(not written yet)

Sublime Text Snippets

Remembering all the parameter names is quite a pain in the ass. Use these sublime snippets to make life easier: https://bitbucket.org/snippets/luckykat/xREop

In Sublime Text, go to Tools -> New Snippet... and copy paste the snippets. Type the following and press space in Sublime in order for the snippet to appear:

  • bento - creates a bento.define snippet. It writes the commonly used components and modules for you to use. Assumes you will write a game object so it prepares an entity for you to write.
  • entity - creates an Entity snippet. It writes an Entity with commonly used settings and the Sprite component. Just fill in the blanks.
  • tween - creates a Tween snippet. For quick use of the tween. 

(more snippets to come)