青瓷引擎-Hello World!

创建工程

按照如下步骤，创建一个新的工程“HelloWorld”：
1. 在启动界面，选择“New Project”标签页；
2. 设置工程保存的路径；
3. 点击“Create”按钮，新的工程创建完毕。

创建脚本

1. 在Project面板中，右击“Scripts”文件夹；
2. 在弹出菜单中选择菜单项“New JavaScript File”；
   
3. 输入文件名：HelloWorld；
4. 双击新创建的JavaScript文件，键入代码：

var HelloWorld = qc.defineBehaviour('qc.demo.HelloWorld', qc.Behaviour, function() {}, {});HelloWorld.prototype.awake = function() {    alert('Hello World!');};

保存并关闭文件。我们逐行解释下：
- 第1行：调用方法qc.defineBehaviour定义一个组件。第一个参数为组件的完整类名（qc.demo.HelloWorld）；第二个参数为基类（都必须从qc.Behaviour继承）.
- 第2行：第三个参数是个方法，当组件实例化时首先被调用以完成一些初始化工作。可以视为类的构造函数。
- 第3行：第四个参数是个数值对，指明需要序列化的字段名和类型。
- 第5行：定义类的方法awake。当本组件被挂载到实体对象时，本方法会自动被调用。
- 第6行：弹出个消息框，消息内容为Hello World!

关联脚本

此时我们创建了个代码脚本，为了使这个脚本起作用，还需要一个对象（Node）来挂载此脚本（这个脚本是个组件，他必须依附于某个实体对象）。选择菜单“GameObject/Empty Node”创建一个空的Node节点，本节点将显示在Hierarchy面板中。

将脚本从Project面板中拖放到node节点，引擎自动创建实例并挂载到目标节点。

在Hierarchy中选中node节点，在Inspector面板中就可以看到新挂载的脚本组件了，如下图：

选择主菜单“Project/Save Scene”保存场景，场景名称为：Main。点击“运行”按钮，浏览器将会弹出个提示框（内容为Hello World！）。

工作原理

入口在哪里？到工程根目录中，打开index.html文件。本文件由编辑器自动生成，运行时由浏览器加载，并调用函数：G.init()。

在G.init中，创建了一个game实例：

var game = new qc.Game(...);

当game实例被创建时，底层自动加载入口场景，并将场景的节点进行反序列化、逐一构建。当node反序列化时，类qc.demo.HelloWorld被实例化。引擎的启动流程如下图：

往一个Node节点添加组件，唯一的方式是通过调用方法addScript，例如：

// Link a component to a Nodevar c = node.addScript('qc.demo.HelloWorld');

先看看引擎底层的addScript是如何实现的（部分关键代码）：

Node.prototype.addScript = function(script) {    var clazz = qc.Util.findClass(script);    if (typeof clazz !== 'function') {        this.game.log.error('Class:{0} not exists', script);        return;    }    var c = new clazz(this);    if (!(c instanceof qc.Behaviour)) {        this.game.log.error("Must inherit from qc.Behaviour");        return;    }    // Call the function: awake    this.scripts.push(c);            if (c.awake && (this.game.device.editor !== true ||                     c.runInEditor === true)) {        c.awake();    }    return c;};

• 第8~12行：确保组件是从qc.Behaviour继承；
• 第18行：调用脚本的awake方法（本例子中，HelloWorld.prototype.awake将被调用）

总结

本例子中，当运行按钮被点击后，底层做了如下事情：
1. 实例化qc.Game
2. 加载入口场景：Main
3. 反序列化场景，创建node节点
4. 添加组件qc.demo.HelloWorld并调用awake方法，我们自己的代码（alert(…)）被执行

附：Hello World!

Create New Project

Follow these steps to create a new project ‘HelloWorld’ ：
1. In the Start-up Interface, select the ‘New Project’ tab.
2. Set the Project Location manually using the ‘Set…’ button.
3. Click the ‘Create’ button. The new project and, as yet nameless, scene opens in the QICI editor.


Create JavaScript File

1.  Right-click the file ‘Scripts’ in the Project view.                                                                                                                                              2.  Select the menu ‘New JavaScript File’ in the context menu.                                                               

3. Type in the file name: HelloWorld.
4. Double-click the javascript file to open it, and type in codes:

var HelloWorld = qc.defineBehaviour('qc.demo.HelloWorld', qc.Behaviour, function() {}, {});HelloWorld.prototype.awake = function() {    alert('Hello World!');};

Save and close the file. Let’s explain the codes line by line:
- Line 1 - Call method qc.defineBehaviour to define a component script. The first parameter is the component’s full name (here is qc.demo.HelloWorld); The second parameter is the component’s base name (every component must inherit from qc.Behaviour).
- Line 2 - The third parameter is a function that will be called when instantiated.
- Line 3 - The fourth parameter is a object where we define the fields name and type. QICI will serialize/deserialize them automatically.
- Line 5 - Define a method awake in the class HelloWorld. When instantiated this function will be called automatically.
- Line 6 - Alert a message: ‘Hello World!’.

Link Script to Node

All right, you already have a script in the project, but you also need an object in the scene to attach the script to (this script is a component, so it needs to be set as one of the components on an object). Select ‘GameObject/Empty Node’, and a blank Node will appear in the Hierarchy list. Now drag the script from the Project view over to the Hierarchy view and drop it on the empty Node. QICI will highlight valid places to drop the script, and dropping it on the Node will attach the script to that script. To verify that the script is attached to the object, select the object and look at the Inspector view. You should see your script below the Transform.

When a script is linked to an object, you’ll see something like figure bellow, with the script showing up as a component in the Inspector. Now the script will execute when you play the scene.

You could now save the scene; that would create a .bin file with the QICI icon. The scene file is a snapshot of everything currently loaded in the game so that you can reload this scene later. It’s hardly worth saving this scene because it’s so simple (just a single empty Node). Click Project/Save Scene and type in the scene name: Main.

Now, click the Play button, and you’ll see an pop-up message (Hello World!) in the browser.

How it works?

Where is the Main function? Open the index.html file in the root folder of the project. This file is generated by QICI editor automatically. When the file loaded, function G.init is called.

In the function G.init, a game instance is created:

var game = new qc.Game(...);

This is where the magic happened. When the game is instantiated, the entry scene is downloaded and loaded. QICI deserializes the scene and restore all the objects. The class qc.demo.HelloWorld is instantiated once the node is restored.

The only way to add a component to a Node with code is calling the function addScript. For example:

// Link a component to a Nodevar c = node.addScript('qc.demo.HelloWorld');

Let’s have a look at addScript function codes implemented by QICI (a part of the original codes):

Node.prototype.addScript = function(script) {    var clazz = qc.Util.findClass(script);    if (typeof clazz !== 'function') {        this.game.log.error('Class:{0} not exists', script);        return;    }    var c = new clazz(this);    if (!(c instanceof qc.Behaviour)) {        this.game.log.error("Must inherit from qc.Behaviour");        return;    }    // Call the function: awake    this.scripts.push(c);            if (c.awake && (this.game.device.editor !== true ||                     c.runInEditor === true)) {        c.awake();    }    return c;};

• Line 8-12: The component must inherit from the class qc.Behaviour.
• Line 18: If the component has awake function, call it (In this sample, HelloWorld.prototype.awake will be called).

Summary

In this sample, when the play button is pressed, somethings happen as following:
1. Instantiate qc.Game.
2. Load the first scene: Main.
3. Deserialized the scene and create the node.
4. Add component ‘qc.demo.HelloWorld’ and call it’s function: awake, Then our code (alert(…)) is executed.

These steps are all implemented by QICI!