青瓷引擎

青瓷引擎是一套开源不收费的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的浏览器，但建议使用谷歌 Chrome浏览器运行性能最好

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

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

操作示例说明：

创建工程

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

工程设置

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

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

设置值如下：

Project Name（工程名）： HelloWorld

Game Name（游戏名）：HelloWorld

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

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

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

其他字段用默认值

创建场景

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

选择菜单“Project/New Scene”

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

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

设置为入口场景

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

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

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

添加脚本

这里，大家用代码创建一个文本，并显示：”Hello World!“。

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

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

varInit=qc.defineBehaviour{},{});Init.prototype.awake=function{//createatextvarnode=this.game.add.text;node.text=HelloWorld!;node.color=newqc.Color;};

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

代码解说

第一，大家概念一个类：qc.helloworld.Init。qc.defineBehaviour接收4个参数，这里可以先简单认识下：
第一个参数：类的名字为qc.helloworld.Init
第二个参数：所有挂载到场景对象（本示例为UIRoot节点）的脚本，都要继承自：qc.Behaviour
第三个参数：脚本对象的架构函数
第四个参数：可被序列化的对象字段及其种类描述

varInit=qc.defineBehaviour{},{});

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

在awake办法中：

this.game：游戏实例的引用

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

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

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

然后设置文本内容为：Hello World!

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

运行起来

保存目前场景

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

让文字居中

默认状况下，文本的地方在屏幕左上角。修改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，查询文件内容。这里按顺序摘取主要内容依次讲解。

游戏配置
由编辑器依据Project Settings自动生成

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,http://engine.zuoyouxi.com/lib/0.97.06/phaser.min.js,http://engine.zuoyouxi.com/lib/0.97.06/webfontloader.js,http://engine.zuoyouxi.com/lib/0.97.06/qc-core.js,//Externalscriptsforplugins//Userscripts./js/game-scripts-mini-0.9.js];

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

bodyonload=qici.init;divid=gameDivstyle=position:relative;/divscriptsrc=http://engine.zuoyouxi.com/lib/0.97.06/qc-loading.js/script/body

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

qici.loadGame=function{vargame=window[qici.config.gameInstance]=newqc.Game,runInBackground:qici.config.runInBackground,antialias:qici.config.antialias,transparent:qici.config.transparent,debug:qici.config.developerMode===true,renderer:{if{returnPhaser.WEBGL;}if{returnPhaser.CANVAS;}returnPhaser.AUTO;})});game.bundleIdentifier=qici.config.bundleIdentifier;game.log.important;};

游戏的初始化步骤在这里达成了：实例化qc.Game，架构函数接收一个object进行配置。大多数配置属性暂时不去理会，这里着重看下state

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

qici.splashState={init:function{window[qici.config.gameInstance].fullScreen;},preload:function{vargame=window[qici.config.gameInstance];if{game.assets.load;}vartext=game.add.text;text.text=Initializing,pleasewait...;text.setAnchor,newqc.Point);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=newqc.Color;text.strokeThickness=2;text.stroke=newqc.Color;game._initText_=text;game.updateScale;},create:function{vargame=window[qici.config.gameInstance];game.state.entity=qici.config.entityScene;game.state.list=qici.config.scene;varnode;if{varprefab=game.assets.find;if{node=game.add.clone;node.ignoreDestroy=true;node.visible=false;}}if{if{game._initText_.destroyImmediately;}deletegame._initText_;}game.phaser.time.events.add{game.state.load;});ifgame.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配置）

TAG标签：青瓷引擎(1)Phaser游戏引擎(1)HTML5游戏编辑器(1)

转载请说明来源于当快软件园（https://www.lrvxg.com）

本文地址：https://www.lrvxg.com/soft/8401.html

郑重声明：文章来源于网络作为参考，本站仅用于分享不存储任何下载资源,如果网站中图片和文字侵犯了您的版权，请联系我们处理！邮箱3450399331@qq.com