十二月 « 2014 « 爱好玩

由于没有找到有关egret性能测试的文章,决定自己动手测一下

测试方法

下载egret-examples-1.5.0.zip 拷贝其中的monkey.son和monkey.png
修改resource.json
新建一个egret工程
修改egretProperties.json中document_class为Test
新建一个Test.ts
代码如下

class Test extends egret.DisplayObjectContainer {
    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);
    }

    private onAddToStage():void {
        egret.Profiler.getInstance().run();
        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResLoaded,this);
        RES.loadConfig("resource/resource.json","resource/");
        RES.loadGroup("monkey");
    }

    private random(a:number,b:number):number {
        return Math.round(a + Math.random() * b);
    }

    private onResLoaded():void {
        var data = RES.getRes("monkey_json");
        var texture = RES.getRes("monkey_png");

        for (var i = 0; i < 200; i++) {
            var monkey = new egret.MovieClip(data, texture);
            monkey.x = this.random(0, 480 - 100);
            monkey.y = this.random(0, 800 - 100);
            egret.MainContext.instance.stage.addChild(monkey);
            monkey.frameRate = 24;
            monkey.gotoAndPlay("attack");
        }

    }
}

class Test extends egret.DisplayObjectContainer {

public constructor() {

super();

this.addEventListener(egret.Event.ADDED_TO_STAGE,this.onAddToStage,this);

}

private onAddToStage():void {

egret.Profiler.getInstance().run();

RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onResLoaded,this);

RES.loadConfig("resource/resource.json","resource/");

RES.loadGroup("monkey");

}

private random(a:number,b:number):number {

return Math.round(a + Math.random() * b);

}

private onResLoaded():void {

var data = RES.getRes("monkey_json");

var texture = RES.getRes("monkey_png");

for (var i = 0; i < 200; i++) {

var monkey = new egret.MovieClip(data, texture);

monkey.x = this.random(0, 480 - 100);

monkey.y = this.random(0, 800 - 100);

egret.MainContext.instance.stage.addChild(monkey);

monkey.frameRate = 24;

monkey.gotoAndPlay("attack");

}

发布

egret publish {ProjectName}

1	egret publish {ProjectName}

拷贝到自己服务器上用手机打开看看吧

说一下这边的测试结果

机型	个数	帧数
ip5s	200	45
ip5s	2000	8
ip5	200	48
红米Note4.4.2	200	7
三星G Note4 4.4.4	200	57

官方的一条FAQ

为什么Egret开发的游戏在某些Android设备上特别卡？

在 Android 早期版本（ 4.4 之前），Android WebView 并不 100% 支持 HTML5 特性，如 WebGL、PageVisibility 、 WebSocket 等。

Google 为了解决这些问题，在 4.4 版本中，完全删除了原有的 WebView ，将其替换为了 chromium 架构的新 WebView。

由于这个修改的工作量过大，在部分特性在尚未全部完成的情况下，Android 就发布了 4.4.2 版本作为过渡，这导致了部分特性在 4.3版本是存在的，但是4.4.2 反而丢失了。其中我们遇到的情况就是 Canvas 硬件加速特性丢失。

在 Android 4.4.4 版本中，google 完全完成了 WebView的架构迁移，Canvas硬件加速特性被重新置入 WebView中。

由于 HTML5 游戏依赖于 Canvas 渲染，而是否存在硬件加速对渲染结果有几十倍的差异，所以 HTML5游戏在 Android 4.4.2 系统上卡顿的问题由于操作系统限制，几乎不可能在应用层解决。

Egret是什么

简单来说,白鹭引擎就是一款用TypeScript开发的开源游戏引擎

它可以编译成HTML5直接在移动端的浏览器运行

或者编译成Android,iOS等(相信支持WP不是问题)原生应用

用他们自己的Egret runtime跑出接近原生APP的性能~~介绍是这样的,谁知道呢~~

优势

如今微信如(heng)日(xing)中(ba)天(dao),著名的”围住神经猫”就是用Egret编写的,易于传播是HTML5游戏的优势

可以做一些游戏的HTML5试玩版,让玩家过度新手教程,然后提示下载APP,推广效果绝对比”老婆不在家玩的游戏“效果好,而且导入的用户全都是优质用户~~让23:59分开服去死吧~~

正题

进入官网 –> 进入下载页

可以看到Egret的工具链非常完善

Egret Engine 引擎安装文件
Egret Wing UI编辑器
EgretVS VS的插件
Res Depot 资源配置文件生成
Texture Merger 纹理打包工具
TS Conversion 语法转换工具(AS3->TS)
Egret Feather 粒子编辑器
Egret-Android-support 编译成安卓工程
Egret-iOS-support 编译成xcode工程
Egret Inspector Chrome调试插件
Egret DragonBones 骨骼动画

其中Egret Engine是必须下载的

玩命地安装…

作者还是很幽默的…

关于egret命令

用法: egret <command> [-v]

command 列表:

    build                         构建指定项目,编译指定项目的 TypeScript 文件

    create                        创建新项目

    create_app                    从h5游戏生成app

    create_manifest               在工程目录下生成manifest.json清单文件

    info                          获得Egret信息

    publish                       发布项目，使用GoogleClosureCompiler压缩代码

    startserver                   启动HttpServer,并在默认浏览器中打开指定项目

    upgrade                       升级项目代码

参数列表:

    -v                            打印详细日志

使用 egret help <command> 了解各个 command 的细节

用法: egret <command> [-v]

command 列表:

build 构建指定项目,编译指定项目的 TypeScript 文件

create 创建新项目

create_app 从h5游戏生成app

create_manifest 在工程目录下生成manifest.json清单文件

info 获得Egret信息

publish 发布项目，使用GoogleClosureCompiler压缩代码

startserver 启动HttpServer,并在默认浏览器中打开指定项目

upgrade 升级项目代码

参数列表:

-v 打印详细日志

使用 egret help <command> 了解各个 command 的细节

创建第一个工程

egret create HelloEgret

1	egret create HelloEgret

编译

egret build HelloEgret

1	egret build HelloEgret

运行

egret startserver HelloEgret

1	egret startserver HelloEgret

然后浏览器就打开了有木有(推荐Chrome)

但是要注意一点,ts不能直接运行,需要编译成js后才能被浏览器直接运行

关于工具

Mac下推荐WebStorm.Windows下VS2013或者WebStorm都可以

题外话

个人觉得这款引擎潜力很大,但是毕竟刚刚起步,还有很多不完善的地方,举个栗子,官网引擎已经到1.5了,但是ios-support还是1.1.4,而工具对版本的一致性要求很高,导致同一批次下载的不同工具不能配合使用,需要降级引擎才能在ios上开发.

总之,移动开发是大方向,我也陪quick-x一路走来,现在quick-x也正式更名cocos-lua,也算大事一件,希望Egret越做越好吧!

在出现对话的时候,我们往往不希望文字一下子突然出现,于是有了这个需求

文字要慢慢的出现,但是点击时,一下子显示完

local TimerLabel = class("TimerLabel",function(params)
    return display.newTTFLabel(params)
end)

local TimerLabel = class("TimerLabel", function(params)
    return display.newTTFLabel(params)
end)

TimerLabel.ON_COUNT_DOWN = "ON_COUNT_DOWN"

function TimerLabel:ctor(params)
    cc(self):addComponent("components.behavior.EventProtocol"):exportMethods()
    self:setNodeEventEnabled(true)
    self._triggerTime = params.triggerTime or 0
    self._time = params.time
    self._format = params.format
    self:setString(self:formatTime(self._time,self._format))
end

function TimerLabel:formatTime(timeValue, format)
    if not timeValue then
        return "unknow time"
    end
    local as = math.floor(timeValue / 1000)
    local s = as % 60
    local am = math.floor(as / 60)
    local m = am % 60
    local h = math.floor(am / 60)

    local ss =  nil
    if s < 10 then
        ss = string.format("0%d", s)
    else
        ss = string.format("%d", s)
    end

    local ms =  nil
    if m < 10 then
        ms = string.format("0%d", m)
    else
        ms = string.format("%d", m)
    end

    local hs =  nil
    if h < 10 then
        hs = string.format("0%d", h)
    else
        hs = string.format("%d", h)
    end

    local newTimeString = string.gsub(format, "@H", hs)
    newTimeString = string.gsub(newTimeString, "@M", ms)
    newTimeString = string.gsub(newTimeString, "@S", ss)
    return newTimeString
end

function TimerLabel:update(dt)
    local lastTime = math.ceil(self._time / 1000)
    self._time = self._time - dt * 1000
    if self._time <= 0 then
        self._time = 0
    end

    local nowTime = math.ceil(self._time / 1000)
    if lastTime ~= nowTime then
        self:setString(self:formatTime(self._time,self._format))
    end

    if self._time <= self._triggerTime then
        self:dispatchEvent({name = TimerLabel.ON_COUNT_DOWN})
        if self._updateEntry then
            cc.Director:getInstance():getScheduler():unscheduleScriptEntry(self._updateEntry)
            self._updateEntry = nil
        end
    end
end

function TimerLabel:onEnter()
    self._updateEntry = cc.Director:getInstance():getScheduler():scheduleScriptFunc(handler(self,self.update),0,false)
end

function TimerLabel:onExit()
    if self._updateEntry then
        cc.Director:getInstance():getScheduler():unscheduleScriptEntry(self._updateEntry)
        self._updateEntry = nil
    end
end

return TimerLabel

local TimerLabel = class("TimerLabel",function(params)

return display.newTTFLabel(params)

end)

local TimerLabel = class("TimerLabel", function(params)

return display.newTTFLabel(params)

end)

TimerLabel.ON_COUNT_DOWN = "ON_COUNT_DOWN"

function TimerLabel:ctor(params)

cc(self):addComponent("components.behavior.EventProtocol"):exportMethods()

self:setNodeEventEnabled(true)

self._triggerTime = params.triggerTime or 0

self._time = params.time

self._format = params.format

self:setString(self:formatTime(self._time,self._format))

end

function TimerLabel:formatTime(timeValue, format)

if not timeValue then

return "unknow time"

end

local as = math.floor(timeValue / 1000)

local s = as % 60

local am = math.floor(as / 60)

local m = am % 60

local h = math.floor(am / 60)

local ss = nil

if s < 10 then

ss = string.format("0%d", s)

else

ss = string.format("%d", s)

end

local ms = nil

if m < 10 then

ms = string.format("0%d", m)

else

ms = string.format("%d", m)

end

local hs = nil

if h < 10 then

hs = string.format("0%d", h)

else

hs = string.format("%d", h)

end

local newTimeString = string.gsub(format, "@H", hs)

newTimeString = string.gsub(newTimeString, "@M", ms)

newTimeString = string.gsub(newTimeString, "@S", ss)

return newTimeString

end

function TimerLabel:update(dt)

local lastTime = math.ceil(self._time / 1000)

self._time = self._time - dt * 1000

if self._time <= 0 then

self._time = 0

end

local nowTime = math.ceil(self._time / 1000)

if lastTime ~= nowTime then

self:setString(self:formatTime(self._time,self._format))

end

if self._time <= self._triggerTime then

self:dispatchEvent({name = TimerLabel.ON_COUNT_DOWN})

if self._updateEntry then

cc.Director:getInstance():getScheduler():unscheduleScriptEntry(self._updateEntry)

self._updateEntry = nil

end

function TimerLabel:onEnter()

self._updateEntry = cc.Director:getInstance():getScheduler():scheduleScriptFunc(handler(self,self.update),0,false)

end

function TimerLabel:onExit()

if self._updateEntry then

cc.Director:getInstance():getScheduler():unscheduleScriptEntry(self._updateEntry)

self._updateEntry = nil

end

return TimerLabel

用法如下

    local typingLabel = TypingLabel.new({
        text = "这是一个打字机效果,n支持中英数组合,n数字123456英文abcdefg"
    })
    
    typingLabel:addEventListener(TypingLabel.ON_FINISH_TYPING,function(event)
        print("打字机结束")
    end)
    
    typingLabel:align(display.LEFT_TOP,50,display.height - 100):addTo(self)

local typingLabel = TypingLabel.new({

text = "这是一个打字机效果,n支持中英数组合,n数字123456英文abcdefg"

})

typingLabel:addEventListener(TypingLabel.ON_FINISH_TYPING,function(event)

print("打字机结束")

end)

typingLabel:align(display.LEFT_TOP,50,display.height - 100):addTo(self)

有倒计时功能的标签这个还是挺常见的

直接上代码吧

local TimerLabel = class("TimerLabel",function(params)
    return display.newTTFLabel(params)
end)

local TimerLabel = class("TimerLabel", function(params)
    return display.newTTFLabel(params)
end)

TimerLabel.ON_COUNT_DOWN = "ON_COUNT_DOWN"

function TimerLabel:ctor(params)
    cc(self):addComponent("components.behavior.EventProtocol"):exportMethods()
    self:setNodeEventEnabled(true)
    self._triggerTime = params.triggerTime or 0
    self._time = params.time
    self._format = params.format
    self:setString(self:formatTime(self._time,self._format))
end

function TimerLabel:formatTime(timeValue, format)
    if not timeValue then
        return "unknow time"
    end
    local as = math.floor(timeValue / 1000)
    local s = as % 60
    local am = math.floor(as / 60)
    local m = am % 60
    local h = math.floor(am / 60)

    local ss =  nil
    if s < 10 then
        ss = string.format("0%d", s)
    else
        ss = string.format("%d", s)
    end

    local ms =  nil
    if m < 10 then
        ms = string.format("0%d", m)
    else
        ms = string.format("%d", m)
    end

    local hs =  nil
    if h < 10 then
        hs = string.format("0%d", h)
    else
        hs = string.format("%d", h)
    end

    local newTimeString = string.gsub(format, "@H", hs)
    newTimeString = string.gsub(newTimeString, "@M", ms)
    newTimeString = string.gsub(newTimeString, "@S", ss)
    return newTimeString
end

function TimerLabel:update(dt)
    local lastTime = math.ceil(self._time / 1000)
    self._time = self._time - dt * 1000
    if self._time <= 0 then
        self._time = 0
    end

    local nowTime = math.ceil(self._time / 1000)
    if lastTime ~= nowTime then
        self:setString(self:formatTime(self._time,self._format))
    end

    if self._time <= self._triggerTime then
        self:dispatchEvent({name = TimerLabel.ON_COUNT_DOWN})
        if self._updateEntry then
            cc.Director:getInstance():getScheduler():unscheduleScriptEntry(self._updateEntry)
            self._updateEntry = nil
        end
    end
end

function TimerLabel:onEnter()
    self._updateEntry = cc.Director:getInstance():getScheduler():scheduleScriptFunc(handler(self,self.update),0,false)
end

function TimerLabel:onExit()
    if self._updateEntry then
        cc.Director:getInstance():getScheduler():unscheduleScriptEntry(self._updateEntry)
        self._updateEntry = nil
    end
end

return TimerLabel

local TimerLabel = class("TimerLabel",function(params)

return display.newTTFLabel(params)

end)

local TimerLabel = class("TimerLabel", function(params)

return display.newTTFLabel(params)

end)

TimerLabel.ON_COUNT_DOWN = "ON_COUNT_DOWN"

function TimerLabel:ctor(params)

cc(self):addComponent("components.behavior.EventProtocol"):exportMethods()

self:setNodeEventEnabled(true)

self._triggerTime = params.triggerTime or 0

self._time = params.time

self._format = params.format

self:setString(self:formatTime(self._time,self._format))

end

function TimerLabel:formatTime(timeValue, format)

if not timeValue then

return "unknow time"

end

local as = math.floor(timeValue / 1000)

local s = as % 60

local am = math.floor(as / 60)

local m = am % 60

local h = math.floor(am / 60)

local ss = nil

if s < 10 then

ss = string.format("0%d", s)

else

ss = string.format("%d", s)

end

local ms = nil

if m < 10 then

ms = string.format("0%d", m)

else

ms = string.format("%d", m)

end

local hs = nil

if h < 10 then

hs = string.format("0%d", h)

else

hs = string.format("%d", h)

end

local newTimeString = string.gsub(format, "@H", hs)

newTimeString = string.gsub(newTimeString, "@M", ms)

newTimeString = string.gsub(newTimeString, "@S", ss)

return newTimeString

end

function TimerLabel:update(dt)

local lastTime = math.ceil(self._time / 1000)

self._time = self._time - dt * 1000

if self._time <= 0 then

self._time = 0

end

local nowTime = math.ceil(self._time / 1000)

if lastTime ~= nowTime then

self:setString(self:formatTime(self._time,self._format))

end

if self._time <= self._triggerTime then

self:dispatchEvent({name = TimerLabel.ON_COUNT_DOWN})

if self._updateEntry then

cc.Director:getInstance():getScheduler():unscheduleScriptEntry(self._updateEntry)

self._updateEntry = nil

end

function TimerLabel:onEnter()

self._updateEntry = cc.Director:getInstance():getScheduler():scheduleScriptFunc(handler(self,self.update),0,false)

end

function TimerLabel:onExit()

if self._updateEntry then

cc.Director:getInstance():getScheduler():unscheduleScriptEntry(self._updateEntry)

self._updateEntry = nil

end

return TimerLabel

用法如下

    local timerLabel = TimerLabel.new({
        time = 60000,
        format = "TimerLabel演示:@M:@S"
    })

    timerLabel:addEventListener(TimerLabel.ON_COUNT_DOWN,function(event)
        print("倒计时结束")
    end)

    timerLabel:align(display.LEFT_TOP,50,display.height - 50):addTo(self)

local timerLabel = TimerLabel.new({

time = 60000,

format = "TimerLabel演示:@M:@S"

})

timerLabel:addEventListener(TimerLabel.ON_COUNT_DOWN,function(event)

print("倒计时结束")

end)

timerLabel:align(display.LEFT_TOP,50,display.height - 50):addTo(self)

除了text外,display.newTTFLabel里的所有参数都有效
新增了time参数(单位毫秒),format参数(支持H M S),triggerTime参数(触发事件,不传时为0)
倒计时结束会触发TimerLabel.ON_COUNT_DOWN

2.x时代的CCControlButton的确十分方便,策划们也十分喜欢按下有缩放的效果

到了3.x的项目,工具链已经相当完善,我使用的是cocos2dx3.2+quick3.2rc1+cocos code ide 1.0.1+cocos studio 1.6(以下简称ccs)

在ccs里建立的按钮,到了程序里实际上是UIPushButton

从quick的源码可以看出,UIPushButton继承于UIButton,UIButton继承于cc.Node

那么按下弹起的效果就得自己写了,好在quick扩展的方式很方便

local UIButton = require("framework.cc.ui.UIButton")

UIButtonEx = {}

function UIButtonEx.extend(btn)
	function btn:setPressedActionEnabled(enabled)
		if enabled then
			self.onPressed = function()
				self:setScale(0.9) --1.1
			end

			self.onRelease = function()
				self:setScale(1.0)
			end
			self:onButtonPressed(self.onPressed)
			self:onButtonRelease(self.onRelease)
		else
			if self.onPressed then
				self:removeEventListenersByEvent(UIButton.PRESSED_EVENT)
				self.onPressed = nil
			end
			if self.onRelease then
				self:removeEventListenersByEvent(UIButton.RELEASE_EVENT)
				self.onRelease = nil
			end

		end
	end
end

local UIButton = require("framework.cc.ui.UIButton")

UIButtonEx = {}

function UIButtonEx.extend(btn)

function btn:setPressedActionEnabled(enabled)

if enabled then

self.onPressed = function()

self:setScale(0.9) --1.1

end

self.onRelease = function()

self:setScale(1.0)

end

self:onButtonPressed(self.onPressed)

self:onButtonRelease(self.onRelease)

else

if self.onPressed then

self:removeEventListenersByEvent(UIButton.PRESSED_EVENT)

self.onPressed = nil

end

if self.onRelease then

self:removeEventListenersByEvent(UIButton.RELEASE_EVENT)

self.onRelease = nil

end

我用起来是全局的

在载入ccs之后,会遍历所有节点,找出node.__cname == “UIPushButton”的元素,然后UIButtonEx.extend(node); node:setPressedActionEnabled(true)就可以了

需要按钮放大的,把0.9改成1.1就行了

一	二	三	四	五	六	日
« 9月				1月 »
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

爱好玩

Stay Hungry, Stay Foolish.

Monthly Archives: 十二月 2014

[egret]简单的性能测试

官方的一条FAQ

为什么Egret开发的游戏在某些Android设备上特别卡？

[egret]白鹭引擎环境搭建

Egret是什么

优势

正题

玩命地安装…

关于egret命令

关于工具

题外话

[quick]TypingLabel打字机效果的标签

[quick]TimerLabel具有倒计时功能的Label

[quick3.x]UIButton按下弹起的缩放效果扩展