creatine

Ludum Dare is great! Not just because it motivates me to create (and finish) a new game, but also because I use it to update Creatine. So, as usual, after the compo I’m releasing another version creatine, now the release 1.0.0!

This version is big. It has a lot of new stuff and a lot of changes for the old features. But before talking about the modifications and additions to the library, let me talk about how I was felling about creatine 0.2…

To be honest, I wasn’t happy about the previous version, I added several classes to handle storage, sound, layout, scenes, among other things. But they weren’t working together, there were some annoying bugs (in special with transitions) and I was spending a good time rewriting the same base structure for new games, over and over.  So I decided to rethink some things: how can I make my development easier and faster? My conclusions and desires after that:

  • I want to use a visual editor to build my scenes, something like Overlap2D or one tool of my own.
  • I need more flexibility for fast prototypes (sometimes I just want to test some idea).
  • Modularity is cool, but is not a great deal. A class that controls all modules would be more useful and would save some time by eliminating the base common structure that I was rewriting every project.
  • I need more fluffy things, more juice, which means that have to be easy to add particles and visual or sound effects to the game.
  • I want to have a physic system and other predefined behaviors easy to use in my games (such as a platform system, or 2d top-down movement and collision system).
  • Other details that I don’t remember right now (it is Sunday 11PM, give me a break!).

With these things in mind, I started to update creatine.

Game

The main addition to creatine is the Game object. The game is now the core of my library, because it is the responsible to create and initialize all game systems. For example: it is the game that creates the canvas element; the game also stores all creatine helpers (now called managers), such as the director (SceneManager), the device,  display and many others.

The game class is based on Phaser core, so if you know Phaser you may find this familiar. A game has 5 states: ”boot”, “preload”, “create”, “update” and “draw”. In the boot state you can initialize 3th-party libraries and some configuration of the engine. In preload, you will set which files should be loaded by the engine and may be show a preload scene. In the create state you will create and initialize all game objects, including scenes and object pools. The update and draw states are the main loop, and are executed every tick. You can use these state by passing functions to the game:

var game = new tine.Game(null, {
  boot    : function() {},
  preload : function() {},
  create  : function() {},
  update  : function() {},
  draw    : function() {}
})

The first argument of the Game class is the configuration object. This could be only an url to a JSON file containing the configuration. Notice that, with this, I will try to keep all engine data-driven, so you will be able to configure everything using this parameter. Right now, it has the following default values:

{
  project          : 'creatine_game',
  width            : 800,
  height           : 600,
  container        : null,
  framerate        : 60,
  background_color : '#000',
  resources        : {
    base_path : './',
    manifest  : []
  }
}

To set configuration you can do:

var game = new tine.Game({framerate:30, width:300, height:500});

or yet:

var game = new tine.Game('myconfig.json')

where ‘myconfig.json’ is the json file containing the configuration values.

Resources and Factories

Creatine now have an interface to PreloadJS (the ResourceManager) and a factory manager. The resource manager helps you to load general assets in a more pleasant way and also helps you to load specific assets (such as spritesheets and audiosprites) in an easier way. For example, now you can set which files you want to preload in the preload state:

var game = new tine.Game(null, {
  preload: function() {
    game.load.image('id', 'src.png');
    game.load.spritesheet('id2', 'src.png', data);
    game.load.json('id3', 'data.json');
    ...
  }
});

Or you could define these assets in the manifest (pretty much like how you do with PreloadJS):

var game = new tine.Game({resources: {
  manifest: [
    {id:'id', src:'src.png'},
    {id:'id2', src:'src.png', data:{stuff here}, type:'spritesheet'},
    ...
  ]
}});

With your stuff loaded, you can create objects easier:

var game = new tine.Game(null, {
  preload: function() { ... },

  create: function() {
    var bitmap = game.create.bitmap('id', {x:100, y:400, regX:'center', regY:'bottom'});
    var sprite = game.create.sprite('id2', 'animation');
    var map = game.create.tilemap('id3');
  }
});

 

Scenes and Transitions

Scenes now have some default method that you should override to use, such as “enter”, “pause”, “resume”… To create a scene, you must define a new class inheriting the scene class, an easy way to do that is by using the new shortcut:

var MyScene = tine._scene({
  initialize: function() { ... },
  enter: function() { ... },
  update: function() { ... },
  ...
});

You can also create your scenes before starting the application and register them to the director, using an unique identifier:

var game = new tine.Game(null, {
  create: function() {
    // Create scenes here
    ...

    // Add your scenes to the director
    game.director.add('menu', new MyMenuScene());
    game.director.add('level', new MyLevelScene());

    // Run a scene
    game.director.replace('menu')
  }
});

Transitions are now working as they should be! You can use any transition in any function (replace, push or pop), repeatedly, or without having to wait the current transition.

Input handlers

We have input now! Keyboard, gamepads, mouse and touch. They don’t work together yet, but they are pretty cool already. Instead of putting code here, I suggest that you take a look into the creatine example folder and into the API documentation.

In the next releases I want to create a common Input or Control object that group all type of inputs together. So instead of checking the state of the keyboard, mouse and touch, you could simply check game.control.isDown(‘action a’) . Moreover, you should be able to redefine the input commands.

Particles!

Particles are so so so so cool! Creatine uses the cocos2d particle style. So if you want to create some fire you do:

var emitter = null;

var game = new tine.Game(null, {
  preload: function() {
    game.load.image('particle', 'assets/particle_red.png');
  },

  create: function() {
    var image = game.create.bitmap('particle', {regX:'center', regY:'center'});
    emitter = new tine.Emitter(image, 500);
    emitter.emitX = 512;
    emitter.emitY = 288;
    emitter.angle = -90;
    emitter.angleVar = 10;
    emitter.speed = 100;
    emitter.speedVar = 20;
    emitter.life = 2000;
    emitter.lifeVar = 500;
    emitter.emissionRate = 150;
    emitter.startScale = 0.3;
    emitter.compositeOperation = 'lighter';
    
    emitter.start(-1);
    game.stage.addChild(emitter);
  },

  update: function() {
    emitter.update(game.time.delta);

    if (game.mouse.isDown(tine.buttons.LEFT)) {
      emitter.emitX = game.mouse.x;
      emitter.emitY = game.mouse.y;
    }
  }

})

Unfortunately, the current particle system has some limitations. For example, it cannot change the particle colors due to performance. It also must be updated manually, sometimes I forget that!

Sounds and Storage

The SoundManager is simpler now, it does not separate music from sound effects, but you still can add sound groups to it. The coolest thing is that sound works together with the StorageManager, so when you change the volume or the mute, the sound manager stores this information locally and you don’t have to worry about that anymore!

Legacy Stuff

Some things will be changed to a better structure, such as the layout managers and the custom display objects. They are still in creatine but they weren’t updated this time.

Moar of Creatine

To now more about new stuffs in creatine, check it out:

You can also contact me for any doubt or suggestion.

Read more

The 32th ludum dare happened this weekend (April 16, 2015), with the theme “unconventional weapon“.

Theme

I have have to say that I hate this theme. Really, there were so many good themes there, why this one could win? Damn you!!!! The theme isn’t an excuse to not do a game, but I spent so much time thinking of what I could do with this… A game not based on fights? Weapon is love? The weapon must be abstract! This is clichê? Oh damn… I finally came up with an idea, after 14 hours (counting sleep time)!

My game entry is about “democracy”, with quotes. The democracy and progress are the weapon of the government in the game, they want you to attack other species in order to “spread democracy and progress through the galaxy”. The player controls the invasions to planets inhabited by bugs with the goal to kill the natives and collect the planet resources.

The game is a very humble tribute to starship troopers (novel by Robert Heinlein and film by Paul Verhoven and Edward Neumeier). I wanted to create, somehow, the sense of order and progress presented by movie.

Development

I always start by the core mechanics because it is the main component of the game – if I can’t find time to make graphics, at least I have a block-based game.

I also always wanted to create a game in a circular world, that was my excuse. I had no idea how to do that, but at is was pretty simple. You have a world centered at (0, 0) with radius (r), than you can set the origin of all objects in the world to (0, r) and only manipulate the rotation to place than in the world.

After the basic world structure, I could drop structures, and these structures could create units. To control the units, I created a behavior tree to control each unit – the first time I really use behavior3js – and a behavior tree to control the bugs strategy. Figure below show these behaviors trees:

Behavior tree for player and enemy units.

Behavior tree for player and enemy units – Click to see in full size.

Behavior tree for the nests, its used to create orders to enemy units

Behavior tree for the nests, its used to create orders to enemy units – Click to see in full size.

Then it came to particles and easing! Man, I love these two. The animation below shows the game at this point:

Sample of democracy

After 28 hours I started to create the sprites and visual things in the world. I was stupid enough to lost time adding some details to sprites that don’t even will see because the sprites are very small (about 20 pixels). I also spend a good time trying to create a futurist screen aspect, which ended up very cool.

I added some scenes, UI and some other effects to the graphics:

sample3

When the clock marked 5 hours to end the competition I started create sounds effects and music. I was desperate because of the time, I still had to adjust the levels of my game and I didn’t know what to do with sounds. At the end it was pretty simple and I didn’t do much, actually recorded some sounds with Audacity, generated most of them in BFXR and generated the music in SoundHelix.

I finished the game in the packing hour, the extra hour after 48, the time to deploy and write about your game.

Summary:

Good stuff:

  • Game finished is always good!
  • I’m using BTs successfully, even to control hundreds of creatures.
  • A circular world (always wanted to try).
  • Visually smooth and lot of cool PARTICLES!!!!!
  • Generative music and sounds worked well.

Bad stuff:

  • Balancing is hard as hell, I couldn’t do that properly.
  • Some details missing, especially the visual feedback when you win the game and the bug when restarting a level before a tween is complete.
  • Isn’t much fun due to balance, few types of units, and few levels.

I’m very critic about my games, I really fell for to not balance properly and create more content to the game, but well, it was made in 48 hours and this time the good stuff was really good! Moreover, this was the most complex and complete game I ever made for LD, it was really hard to do, thus of course some things would be missing.

logo-full

PLAY HERE | LUDUM DARE

Read more

Following the new milestone of CreateJS, I just released Creatine 0.2.0!

This version has some cool new additions to the library:

  • Tile Maps: now you can load maps created with Tiled by using the new TMXMap. It supports all maps projections of tiles (orthogonal, isometric and staggered) and all type of layers (tile, image and object). Check it out the examples.
  • Jukebox: a helper class to handle music and sound playback. With this class, you can set different volume setting for music and sounds, and play random sounds from a group.
  • Storage: a helper class to handle persistent data using the HTML5 localStorage. With this class you overcome the type limitation in localStorage (it only accept string variables) and , thus, can save and retrieve objects, numbers, arrays, etc.
  • Entity-Component-System: a ultra basic implementation of ECS model, I hope to provide more features in the future.

Moreover, there are some other modifications on the existing features:

  • Sizers now manage scale and registration point properties of children.
  • Fixed an initialization bug present in several transition.
  • A complete update to the class and inheritance model of creatine, following the new style of CreateJS.

Together with this new version, I also published the new website for creatine (the old one http://guineashots.com/creatine now redirects to the new site):

http://creatine.guineashots.com

Right now I’m updating my boilerplate to follow the new releases and to include a new improved architecture.

Read more

CreateJS is a collection of 4 libraries: EaselJS, PreloadJS, SoundJS and TweenJS. EaselJS provides tools to work with the HTML5 canvas; PreloadJS helps you to load the application assets; SoundJS to work with all kind of sounds; and finally, TweenJS provides interpolation functions for easing effects. Together, they allow you to create graphical and interactive applications in an easy and fast manner.

The thing is, the CreateJS suite does not focus on game development, thus, it lacks of important structures and algorithms that helps you to develop games. creatine logo

Having this in mind, I’m developing Creatine, which the first version was published today. Creatine aims to provide all algorithms and structures present in games today and that are not implemented on the CreateJS suite.

Take a look at some examples above, use the following code as base:

<!DOCTYPE html>
<html>
<head>

<script src="http://code.createjs.com/createjs-2013.12.12.min.js"></script>
<script src="creatine-0.1.min.js"></script>

<script>
    var canvas   = null;
    var stage    = null;
    var director = null;

    function init() {
        // code here

        createjs.Ticker.addEventListener('tick', onTick);
    }

    // update stage every tick
    function onTick() {
        stage.update();
    }
</script>
</head>
<body onLoad="init();">

<canvas id="canvas" width="600" height="300">alternate content</canvas>

</body>
</html>

 

Creating some Random Scenes

Let’s create some random scenes using Creatine. First you need to create the base objects:

function init() {
    canvas   = document.getElementById('canvas');
    stage    = new createjs.Stage(canvas);
    director = new creatine.Director(stage);
    
    director.replace(newScene());
    
    createjs.Ticker.addEventListener('tick', onTick);
}

Together with the base object, we create a new scene and add it to director at line 6, and registered 2 events at lines 8 and 9. The line 6 uses the function newScene(), let’s define it:

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

function createScene() {
    var scene = new creatine.Scene();

    var background = new createjs.Shape();
    background.graphics.beginFill(getRandomColor());
    background.graphics.drawRect(0, 0, canvas.width, canvas.height);
    scene.addChild(background);

    return scene;
}

The createScene function create a new empty scene and add a background with a random color. Now, when the user click on the stage let’s change the scene. Put this on init:

stage.on('stagemousedown', onClick);

And create the function onClick:

function onClick() {
    director.replace(createScene());
}

Done! Now check it out the result:

 Changing Scenes with Effects

To put some effect on the scene transition, just change the onClick function:

director.replace(createScene(), new creatine.transitions.MoveOut(creatine.LEFT));

Resulting on:

Learn More

To see more examples, check it out the official repository: https://github.com/renatopp/creatine

To know more about creatine, take a look at the official page: http://guineashots.com/creatine/

Read more