青瓷引擎-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!

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

相关文章推荐

PhysX物理引擎(入门教程) —— PhysX,Hello World!

  Author:huawenguang版权所有 E-MAIL:huawenguang@sina.com  DATE:06/7/20  Hi,大家好,好久没有写过东西了.最近在研究物理引擎,在网上搜索...
  • left_la
  • left_la
  • 2011年04月24日 12:25
  • 6277

首个腾讯开源毫秒服务引擎msec的Hello World程序

第一时间看到腾讯开源了毫秒服务引擎msec,就迫不及待想体验尝试一番,经过两天的折腾,总算是初步搭建好了,并成功输出了第一个hello word程序,搭建过程中遇到了各种编译问题,配置文件问题,hel...

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

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

2D游戏引擎Allegro 系列教程(二) Hello world!

本系列文章由sky编写,转载请注明出处。 http://blog.csdn.net/qq573011406/article/details/8172949 作者:袁全伟   邮箱: qq...

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

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

hello world

  • 2014年09月11日 22:59
  • 16KB
  • 下载

hello world

  • 2014年08月14日 19:06
  • 60B
  • 下载

Android Studio教程-创建第一个项目Hello World

转自:http://www.2cto.com/kf/201605/505712.html 第一步,打开android studio 输入你的项目名称“Hello World”. “C...

hello world

  • 2009年12月16日 22:26
  • 693B
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:青瓷引擎-Hello World!
举报原因:
原因补充:

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