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

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

开源免费的HTML5游戏引擎——青瓷引擎(QICI Engine) 1.0正式版发布了!

青瓷引擎是一套开源免费的JavaScript游戏引擎类库,其基于开源免费的Phaser游戏引擎,并提供了一套完全基于浏览器的跨平台集成式HTML5游戏编辑器。...
  • QICIEngine
  • QICIEngine
  • 2015年12月15日 13:39
  • 1881

将字符串【"Hello world" 】 倒序结果为【"world Hello " 】

将字符串【"Hello world" 】 倒序结果为【"world Hello " 】 具体代码如下: public void exchange(){     Strin...
  • DreamTL
  • DreamTL
  • 2017年01月14日 09:05
  • 904

爆笑三国之张飞流水账【爆笑中体验哲理】

张飞流水帐 一我写这个流水帐的时候,大哥和二哥都在睡觉,军师也在睡觉。赤兔马站在我窗外,也在睡觉。  小时侯我就研究马为什么会站着睡觉,研究了很长一段时间后,我发现没有答案。而苦恼的是我的童年唯一能记...
  • bycz123456
  • bycz123456
  • 2010年07月06日 22:31
  • 10979

你知道Hello World程序的由来吗?

Hello World是一个最著名的程序。对每一位程序员来说,这个程序几乎是每一门编程语言中的第一个示例程序。实际上,这个程序的功能只是告知计算机显示Hello World这句话。传统意义上,程序员一...
  • testcs_dn
  • testcs_dn
  • 2016年09月26日 20:56
  • 2539

输出"HELLO WORLD" ASM

;法一 stack segment stack ; 定义堆栈段 db 100 dup(?) ;堆栈段长100字节, 这里db就是字节的意思,如果是用dw就是字,100 dup(?) 中的dup是重复...
  • zcdy810
  • zcdy810
  • 2012年11月07日 09:07
  • 1217

VC6.0创建hello-World程序

最近在看《数据结构》,想用C语言写个算法,想到了用VC6.0,本科期间,对C语言这门课是很自豪的,无奈时间长没 碰,一个helloWorld都写不成了。看来语言和IDE都是要经常去碰的,否则真的会生疏...
  • UP19910522
  • UP19910522
  • 2014年09月18日 11:02
  • 5679

python第一个hello world注意问题!!

如果你第一次写python代码,想写一个通常的hello world ,那么你需要注意这个hello world的写法,这和python的版本有直接关系!!! Python 3.x: prin...
  • sunylat
  • sunylat
  • 2016年12月24日 10:36
  • 1088

HDU3257 Hello World!【打印图案+位运算】

问题链接:HDU3257 Hello World!。 问题简述:参见上述链接。 问题分析:图案输出,关键在于读懂题意。 程序说明: 需要注意16进制数的输入方法。 需要注意位运算。 需要注意用方便的...
  • tigerisland45
  • tigerisland45
  • 2017年05月18日 22:36
  • 716

将一串字符(hello world I am c_player)反转为(c_player am I world hello)

hello world I am c_player >> c_player am I world hello 如果将转换后的字符串中的每个单词进行反转得到 re...
  • Linux_Daemon
  • Linux_Daemon
  • 2017年05月02日 09:41
  • 431

用stm32说hello world

http://blog.sina.com.cn/s/blog_a7a377090102vy7e.html
  • xing414736597
  • xing414736597
  • 2017年03月16日 12:26
  • 329
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:青瓷引擎-Hello World!
举报原因:
原因补充:

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