【第22期】观点:IT 行业加班,到底有没有价值?

青瓷引擎-Hello World!

原创 2016年08月30日 21:30:55

创建工程

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

Create Project

创建脚本

  1. 在Project面板中,右击“Scripts”文件夹;
  2. 在弹出菜单中选择菜单项“New JavaScript File”;
    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节点,引擎自动创建实例并挂载到目标节点。

Link Script

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

Inspector

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

工作原理

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

这里写图片描述

G.init中,创建了一个game实例:

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

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

Start Up

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

// Link a component to a Node
var 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 Project

Create JavaScript File

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

New Javascript File

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!’.

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.

Link Script

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.

Inspector

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.

Start Up

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

// Link a component to a Node
var 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!

版权声明:本文为博主原创文章,未经博主允许不得转载。 举报

相关文章推荐

《Drools7.0.0.Final规则引擎教程》第3章 3.1 Hello World 实例

3.1 Hello World 实例在上一章中介绍了Drools5x版本中规则引擎使用的实例,很明显在Drools7中KnowledgeBase类已经标注为“@Deprecated”——废弃。在本章节...

青瓷引擎打造HTML5游戏第一弹——《神奇的六边形》Part 1

近期出现一款魔性的消除类HTML5游戏《神奇的六边形》,今天我们一起来看看如何通过开源免费的青瓷引擎(<a style="color: navy;" href="http://www.cnblogs.com/www.zuoyouxi.com" target="

PHP-Zend引擎剖析之Hello World(二)

前言 这一次,我围绕Hello World来展开Zend虚拟机的执行过程。Hello World的PHP版本:      echo 'Hello World'; ?> 前一...

PHP-Zend引擎剖析之Hello World(二)

前言 这一次,我围绕Hello World来展开Zend虚拟机的执行过程。Hello World的PHP版本: &lt;?php      echo 'Hello World'; ?&gt; 前一篇文章聊

LayaAir引擎学习日志9---- LayaAir IDE中显示文本Hello World(JS)

前面的博客,我们已经讲了如何下载安装配置 LayaAir IDE 开发环境。接下来我们来看看如何创建一个 Hello World 项目,在控制台打印输出 Hello World 和在舞台上显示 Hel...
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)