Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Animation seems to be a bit rough even with a single circle on mobile devices.

See original GitHub issue

First of all, I really like Crafty. It is super easy to learn and use. I have been playing with this library for some time now and even though everything works as expected there is a noticeable lag. Please take a look at this fiddle to see what I mean.

Am I unknowingly using the library sub-optimally? This is my complete animation code:

$(document).ready(function () {
        var gWidth = window.innerWidth;
        var gHeight = window.innerHeight;
        $("#game, canvas").css({width: gWidth, height: gHeight});

        Crafty.init(gWidth, gHeight, document.getElementById('game'));     

        var myCircle = Crafty.e("2D, Canvas, Color, Collision").attr({
            x: gWidth/2
            , y: gHeight/2
            , w: 0.04*gHeight
            , h: 0.04*gHeight
            , r: 0.02*gHeight
            , color: 'brown'
            , xDirection: 0.005*gWidth
            , yDirection: 0.005*gHeight
        }).bind("EnterFrame", function (eventData) {
            this.x += this.xDirection;
            this.y += this.yDirection;
            if (this.x < 0) this.xDirection *= -1;
            if (this.y < 0) this.yDirection *= -1;
            if (this.x > (0.96*gWidth)) this.xDirection *= -1;
            if (this.y > (0.96*gHeight)) this.yDirection *= -1;

The animation has a slight lag even on PC. Is there something that I can do about it?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

200sccommented, Sep 11, 2016

I don’t see any frame rate drop on my android, but I’d generally avoid doing anything that required redefining a draw call or adding draw logic to the draw binding in crafty. Crafty is useful for games built on sprite animations, but it’s not particularly focused on performance from my experience. That said, I didn’t have any issues performance wise with crafty until I had to deal with drawing thousands of tiles.

9itishcommented, Sep 11, 2016

After some testing, it seems like the lag appears only on android version 4.4 and below. So, it is not the library but the android webview which is at fault. 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

2. Animating Custom Views Written by Prateek Prasad
Building a custom view is a fairly common option for Android developers who are writing custom, highly tailored behaviors. Custom views offer greater ......
Read more >
25 cool CSS animation effects and how to create them
It may seem like CSS animation is limited, and it is to an extent, ... It's a great effect to start with because...
Read more >
Myth Busting: CSS Animations vs. JavaScript
As interactive projects got more aggressive and mobile devices burst onto the ... to animate in a truly distinct way on a single...
Read more >
10 Problems (and Solutions) for Blender Newbies - dummies
Objects don't appear when rendering · Camera clipping. The fix for this is to either change the position of the object that's too...
Read more >
How To Create An Advanced Photoshop Animation
Even though Photoshop is still a long way off from being able to create the high-end and cinematic animations of such programs as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found