青瓷引擎

青瓷引擎是一套开源免费的JavaScript游戏引擎类库，其基于开源免费的Phaser游戏引擎，并提供了一套完全基于浏览器的跨平台集成式HTML5游戏编辑器。

功能描述：

上手容易，学习成本低

引擎、编辑器、后台均基于JavaScript数百个工程示例Demo及完整游戏教程助力用户学习掌握。

开发效率高

重新定义了HTML5游戏的开发工作流，开发、调试尽在浏览器内。不断丰富的插件库，让游戏开发更加便捷、简单。

一站式集成工具套件

开发和整合了游戏中用到的各种工具，强调了各工具之间的无缝融合，大大提升了开发效率。

传播更广

游戏无需浏览器安装额外插件，适应性更广，更利于传播。

开源免费便于扩展

MIT开源协议，面向组件式编程，支持组件热拔插，方便扩展维护。核心库及编辑器都是纯JavaScript，便于用户自行扩展修改。

可视化编辑所见即所得

先进的UI界面布局规则，简单几步，无需编码即可适配各种分辨率。强大的可视化编辑功能，拖拖拽拽便可以实现很多复杂的功能。

安装说明：

Windows下安装

首先安装Node.js环境

如果您本机已经安装了Node.js，推荐您升级到最新版本，青瓷引擎支持的Node.js版本：

Node.js合并io.js之前任何v0.12.x的版本

Node.js合并io.js之后任何高于v4.1的版本

下载青瓷引擎

通过青瓷引擎官网下载免安装包，并解压

运行青瓷引擎

双击start-win.bat运行，青瓷引擎编辑器将自动在浏览器中打开：

也可在解压目录下，通过命令行启动node./editorservice/StartService.js

青瓷引擎编辑器可运行在任何支持HTML5的浏览器，但建议采用GoogleChrome浏览器运行性能最佳

浏览器的访问地址为：https://localhost:port/project.html?其中port端口值见控制台（默认都为5002）：

在浏览器中打开的界面如图：

操作示例说明：

创建工程

指定工程文件夹名：HelloWorld。操作方法如下：

工程设置

设定编辑器布局为：竖屏。操作方法：选择菜单“Layout/Portrait”

选择菜单“Project/Settings...”，在Inspector面板中打开工程设置界面

设置值如下：

ProjectName（工程名）：HelloWorld

GameName（游戏名）：HelloWorld

Company（开发者姓名或公司名）：qcplay

Identifier（游戏唯一标识符，需要保证唯一）：com.qici.helloworld

Version（当前工程的版本号）：0.9

其他字段使用默认值

创建场景

创建一个空的场景，步骤如下：

选择菜单“Project/NewScene”

场景中挂载个UIRoot对象（暂时可以理解为放界面元素的根节点就好了）

保存场景，场景名称：HelloWorld，场景的文件路径：Assets/state/HelloWorld.bin

设置为入口场景

将刚才创建的新场景HelloWorld加入到场景列表中。方法是打开ProjectSetting面板，将场景选中：

在场景列表中，第一个即为入口场景（系统会自动加载）

场景需要勾选后，才能被加载。否则发布时将视为无效场景

添加脚本

这里，我们使用代码创建一个文本，并显示：”HelloWorld!“。

在Project面板中，右击”Script“创建一个js文件：Init.js

双击打开，编辑代码如下：

?var?Init?=?qc.defineBehaviour('qc.helloworld.Init',?qc.Behaviour,?function()?{?},?{?});?Init.prototype.awake?=?function()?{?????//?create?a?text?????var?node?=?this.game.add.text(this.gameObject);?????node.text?=?'Hello?World!';?????node.color?=?new?qc.Color(0xffffff);?};

将此代码挂载到UIRoot节点（方法是直接拖拽到节点上），这样此脚本就能被调度运行。

代码讲解

首先，我们定义一个类：qc.helloworld.Init。qc.defineBehaviour接收4个参数，这里可以先简单了解下：第一个参数：类的名字为qc.helloworld.Init第二个参数：所有挂载到场景对象（本示例为UIRoot节点）的脚本，都应该继承自：qc.Behaviour第三个参数：脚本对象的构造函数第四个参数：可被序列化的对象字段及其类型描述

??var?Init?=?qc.defineBehaviour('qc.helloworld.Init',?qc.Behaviour,?function()?{??},?{??});

然后，在Init对象的awake函数中，添加逻辑代码以创建text。awake并不需要开发者自己去调度，当UIRoot这个节点被反序列化后，系统自动调用脚本的awake方法

在awake方法中：

this.game：游戏实例的引用

this.game.add：对象创建工厂（可以用来创建文本、图片、精灵等对象）

this.gameObject：本逻辑脚本挂载的目标游戏对象（本实例为UIRoot）

this.game.add.text(this.gameObject)：在UIRoot节点下，创建一个Text对象

然后设置文本内容为：'HelloWorld!'

最后设置文本颜色值为白色

运行起来

保存当前场景

点击”运行“按钮，查看结果

让文字居中

默认情况下，文本的位置在屏幕左上角(0,0)。修改Init.js代码，在awake中，添加如下代码：

????//?设置文本对象原点在中心????node.pivotX?=?0.5;????node.pivotY?=?0.5;????//?位置居中????node.x?=?this.gameObject.width/2;????node.y?=?this.gameObject.height/2;????//?文本水平对齐????node.alignH?=?qc.UIText.CENTER;

运行之，现在文本居中显示了。

换个方式：不要编码

在之前的实现方式中，如果非编码人员（如策划人员、美术人员）想要调整显示的文字、位置和样式等，他们是没有能力自行修改的。因此我们换一种方式，直接在场景中可视化创建文字对象，并设置其内容、文字大小等信息：

将Init.js从UIRoot对象中干掉，这样此脚本将无法自动被调度了

在UIRoot下创建UIText节点，并在Inspector面板中设置其内容

运行查看效果

是不是比手写代码快很多？

这一切如何发生的呢？

从传统的编程方式来看，到这里会有一些疑问：程序执行入口在哪？编辑器”偷偷摸摸“干了些啥？让我们依次展开详细解释。首先，将本工程发布出来打开文件：StartGame.html，查看文件内容。这里按顺序摘取主要内容依次解释。

游戏配置由编辑器根据ProjectSettings自动生成

??qici.config?=?{??????projectName:?'HelloWorld',??????gameName:?'HelloWorld',??????companyName:?'qcplay',??????bundleIdentifier:?'com.qici.helloworld',??????gameInstance:?'qc_game',??????backgroundColor:?4671303,??????runInBackground:?true,??????antialias:?true,??????transparent:?false,??????developerMode:?false,??????renderer:?'Auto',??????loadingPrefab:?'',??????scene:?{??????"HelloWorld"?:?"Assets/state/HelloWorld.bin"??????},??????entityScene?:?'HelloWorld',??????loading:?{??????????loadingInterval:?200,??????????brightingInterval:?10,??????????blinkingCount:?5,??????????blinkingInterval:?70,??????????fadingInterval:?400??????}??};

导入引擎库文件和用户脚本文件游戏一开始会出现吃豆子的加载动画，这过程加载如下几个代码文件：

??qici.scripts?=?[????????'./Assets/meta/globalUrlMap.js',??????????'https://engine.zuoyouxi.com/lib/0.97.06/phaser.min.js',??????????'https://engine.zuoyouxi.com/lib/0.97.06/webfontloader.js',????????'https://engine.zuoyouxi.com/lib/0.97.06/qc-core.js',?????????//?External?scripts?for?plugins????????//?User?scripts???????'./js/game-scripts-mini-0.9.js'??];

加载这些js文件和播放进度的动画表现，在qc-loading.js脚本中实现：

<body?onload="qici.init();"??<div?id="gameDiv-lkpgc"?style="position:relative;"</div??<script?src='https://engine.zuoyouxi.com/lib/0.97.06/qc-loading.js'</script</body

游戏实例初始化在编辑器目录，打开lib/qc-loading-debug.js文件。加载js文件和进度表现的逻辑忽略不看；当js文件加载完毕后，调用qici.loadGame方法：

qici.loadGame?=?function()?{??var?game?=?window[qici.config.gameInstance]?=?new?qc.Game({??????width:?'100%',??????height:?'100%',??????parent:?'gameDiv',??????state:?qici.splashState,??????editor:?qici.config.editor?===?true,??????backgroundColor:?new?qc.Color(qici.config.backgroundColor),??????runInBackground:?qici.config.runInBackground,??????antialias:?qici.config.antialias,??????transparent:?qici.config.transparent,??????debug:?qici.config.developerMode?===?true,??????renderer:?(function()?{????????????????if?(qici.config.renderer?===?'WebGL')?{??????????????????????return?Phaser.WEBGL;??????????}??????????????if?(qici.config.renderer?===?'Canvas'){??????????????????????return?Phaser.CANVAS;??????????}????????????????????return?Phaser.AUTO;??????})()??});??game.bundleIdentifier?=?qici.config.bundleIdentifier;??game.log.important('****?[QICI?Engine]Starting?game:?{0}',?qici.config.gameName);};

游戏的初始化流程在这里实现了：实例化qc.Game，构造函数接收一个object进行配置。大部分配置属性暂时不去理会，这里着重看下state(值为qici.splashState)

SplashState这个其实是个空的内置场景，此场景完成一些初始化信息（例如loading动画等）。最重要的是：通过此场景载入入口场景（本例子为HelloWorld）。主流程如下：

qici.splashState?=?{??init:?function()?{????????window[qici.config.gameInstance].fullScreen();??},??preload:?function()?{????????var?game?=?window[qici.config.gameInstance];??????????if?(qici.config.loadingPrefab)?{??????????game.assets.load('__loading_prefab__',?qici.config.loadingPrefab);??????}???????????var?text?=?game.add.text();??????text.text?=?'Initializing,?please?wait?...';??????text.setAnchor(new?qc.Point(0,?0),?new?qc.Point(1,?1));??????text.left?=?0;??????text.right?=?0;??????text.top?=?0;??????text.bottom?=?0;??????text.alignH?=?qc.UIText.CENTER;??????text.alignV?=?qc.UIText.MIDDLE;??????text.fontSize?=?24;??????text.color?=?new?qc.Color(0xffffff);??????text.strokeThickness?=?2;??????text.stroke?=?new?qc.Color(0x000000);??????game._initText_?=?text;??????game.updateScale(true);??},??create:?function()?{????????????var?game?=?window[qici.config.gameInstance];??????game.state.entity?=?qici.config.entityScene;??????game.state.list?=?qici.config.scene;????????????var?node;????????????if?(qici.config.loadingPrefab)?{???????????????????var?prefab?=?game.assets.find('__loading_prefab__');???????????????if?(prefab)?{??????????????node?=?game.add.clone(prefab);??????????????node.ignoreDestroy?=?true;??????????????node.visible?=?false;??????????}??????}????????????if?(game._initText_)?{???????????????????if?(node)?{??????????????game._initText_.destroyImmediately();??????????}??????????delete?game._initText_;??????}??????game.phaser.time.events.add(1,?function()?{?game.state.load(game.state.entity,?true);?});????????if?(qici.config.frameRate)?game.time.frameRate?=?qici.config.frameRate;??}};

进入主场景后，系统反序列化场景内容并逐一构建场景对象。构建完毕后依次初始化场景节点（通过调用逻辑脚本的awake函数）

初始化流程总结

这些初始化流程编辑器已经自动帮你完成：

实例化qc.Game

Game启动后，依次调用SplashState场景（空的内置场景）的init、preload和create，并载入入口场景

下载、反序列化入口场景，将场景重新构建后调用awake方法（挂载到对象的逻辑脚本才会调用）

更新日志：

场景统一使用：scene（原来部分使用了state）

修改截屏接口的包围盒获取方式，使用相对自己的坐标而非世界坐标

TileLayer增加接口：setTileIndex，支持动态修改地图块

增加2个加密/解密接口：qc.Des.encrypt和qc.Des.decrypt

Tween组件duration参数默认为1（原来为0）

合并Arcade物理插件帧调度时机

图片在canvas渲染模式下，当宽高为0时不绘制

Node节点增加事件：onDeserialized（反序化完成事件）

qc.Color增加属性：r、g、b

DOM节点增加alpha属性

Canvas绘制时，默认开启roundPixeds选项

替换编辑器首页样式

部分内置文件夹限制删除，如以下目录：Assets/raw、Assets/scene等

开启脏矩形时，当父节点被移除后，子节点所在范围没有更新

NodeMask组件在RenderTexture中绘制时，位置更新不及时

在X5浏览上，DOM插入到隐藏节点位置绘制不对

Slider中的滑块不是固定大小时，追踪点击失效

Button在开启NativeClick时，父亲节点隐藏后依然可以响应点击

图集只有一张图片时，frameNames属性错误

输入框被编辑时，父亲节点隐藏时依然可见

数组类型字段反序列化时，存在多处引用

帧率限制在发布后不起效

富文本插件

粒子插件预览版

动画编辑器预览版

Box2D物理插件预览版

固定游戏大小功能（见ProjectSetting的fixedGameSize配置）

Tags:青瓷引擎,Phaser游戏引擎,HTML5游戏编辑器.