【问题标题】:Drawing slice in cocos2d-js在 cocos2d-js 中绘制切片
【发布时间】:2014-05-21 00:12:04
【问题描述】:

我用Phaser 引擎编写了一个游戏,但遗憾的是,即使使用 cocoonjs,我也没有得到任何好的性能。我试图优化它,但我认为我无法优化。

所以我正在尝试切换到 cocos2d-js。我用 cocos2d 尝试了一些例子,效果很好。我想我会得到我正在寻找的性能。我只需要实现两件事。我尝试在 DrawNode 类中使用方法,但我做不到。我是计算机图形学的新手。

  • 绘制切片,就像this gist中的drawSlice方法一样
  • 沿具有给定半径和角度的圆弧书写文本

更新:我需要由本机代码完成的昂贵计算。我有大约 18 个这种形状,通过用户输入在 100 毫秒内独立地将半径设置为 75-200 像素。我在 Phaser 中面临的问题是这种昂贵的计算。

Update2:现在我可以在@Sebastian 的帮助下绘制this。还是不完整的。

Update3:我在使用 Phaser 时获得了不错的性能,但有一些 hack。也许我不需要这个,尽管其他人可能需要它。

切片:

文字:

【问题讨论】:

    标签: javascript canvas graphics cocos2d-x cocos2d-js


    【解决方案1】:

    这个功能在 cocos2d-html5 中还没有完成。我可以为您提供的最佳解决方案是此功能I submitted a while ago。这并不理想,但它应该可以解决问题。如果您不知道如何处理它,我稍后会将这个函数包装在必要的样板代码中(我离我的家用 PC 有几个小时的路程,我现在没有时间做一个完整的例子):

    var drawSolidArc= function(center, radius, degreesFrom, degreesTo, segments){
        if(degreesTo<degreesFrom){
            var temp = degreesTo;
            degreesTo = degreesFrom;
            degreesFrom = temp;
        }
        var i;
        for(i=degreesFrom; i<=degreesTo;i++){
            cc.drawingUtil.drawCircle(center, radius, cc.DEGREES_TO_RADIANS(-i+90), segments, true);
        }
    };
    

    此外,此代码适用于 v2.2.2,应迁移到使用 v2.2.3(或 v3)DrawNode。很抱歉答案不完整,但我希望它会暂时向您发送正确的方向。

    至于写弯曲的文字,我认为这是我所知道的最接近的东西:https://github.com/supersuraccoon/CircleLabelTTFDemo-HTML5

    【讨论】:

    • 感谢您的回复,我会在几个小时内尝试您的解决方案。
    • 我只能用你的函数画this。我可以解决一些问题来绘制切片。我想知道补间该绘图的最有效方法。我将更改 degreeFrom 和 degreeTo 并且形状将使用这些新变量重新绘制。我可以在改变后立即画画,但我认为它不会给我带来任何好的表现。你能给我一些关于动态自定义绘图对象的例子吗?
    • 我想我明白了,我扩展了 Node 类并创建了一个成员 DrawNode 对象。在我的节点的绘图函数中,我正在调用 drawNode.draw(ctx)。
    • 对于延误,我深表歉意。是的,你需要做的是创建一个绘制函数来重绘每一帧(别担心,它的性能并没有听起来那么糟糕)。
    • 对不起,我错误地发送了该评论,之后它不允许我编辑。它继续:我能给你的最快指导是转到samples/tests/DrawPrimitivesTest/DrawPrimitivesTest.js 文件并查看DrawOldAPITest 测试。在那里,添加我的函数并在draw 方法中调用它。我在这个示例原型中将此代码用作“prgress-circle”:proto.heart-bit.com.ar/2013_08-joy_inc(在游戏中查看右下角,当您按下“箭头”按钮时它会改变)
    猜你喜欢
    • 1970-01-01
    • 2021-06-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-08-30
    • 2021-10-30
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多