chillJS - tutorials: Getting started

Setting up your HTML document

<!DOCTYPE html>
<html>
<head>
	<title>My first chillJS application</title>
	<meta charset="utf-8" />
	<link rel="stylesheet" href="path-to-chillJS/chill.css" />
</head>
<body>
	<div id="myDiv"></div>
	
	<script src="path-to-chillJS/chill.min.js"></script>
	<script>
		// code here
	</script>
</body>
</html>

Initialize the Scene

Chill.out(new Chill.App(), 'myDiv');

This code creates an empty application. Chill is a global namespace, the Chill.out method initializes the application inside an HTML element (second parameter). This parameter could be an element id (string), or a reference to an HTML element. You will learn about Chill.App in the next chapter.

Add elements to the Scene

There is an optional third parameter in the Chill.out method. This is a callback function, which gives us the actual Scene. In order to add an Element to it, you will need a Layer first.

Chill.out(new Chill.App(), 'myDiv', function(scene) {
	scene.resize(320, 80);
	
	var layer = scene.createLayer();
	var element = layer.create('Text', { text: 'Hello World!' });
	
	layer.add(element);
	scene.addLayer(layer);
	
	scene.start();
});

Or simply, you can just write:

Chill.out(new Chill.App(), 'myDiv', function(scene) {
	scene.resize(320, 80).insertLayer().insert('Text', { text: 'Hello World!' });
	
	scene.start();
});

The Scene.insertLayer is a shorthand for Scene.createLayer and Scene.addLayer, the Layer.insert is a shorthand for Layer.create and Layer.add.

Lazy start

Chill.out(new Chill.App(), 'myDiv', function(scene) {
	scene.resize(320, 80).insertLayer().insert('Text', { text: 'Hello World!' });
}).start();

see demo

The Chill.out method returns the created Scene