{"id":62,"date":"2015-02-13T17:17:47","date_gmt":"2015-02-13T17:17:47","guid":{"rendered":"http:\/\/buildanhtml5game.com\/?page_id=62"},"modified":"2015-02-13T17:20:18","modified_gmt":"2015-02-13T17:20:18","slug":"chapter-2-exercise-2-experimenting-with-easing","status":"publish","type":"page","link":"http:\/\/buildanhtml5game.com\/?page_id=62","title":{"rendered":"Chapter 2, Exercise 2 – Experimenting With Easing"},"content":{"rendered":"

In the .animate call, we specify easing : “linear”. Try using “swing” and think about why this may not be appropriate for Bubble Shooter but may be a better animation method for other games. Then look at more easing settings at http:\/\/api.jqueryui.com\/easings\/<\/a> and see if you can incorporate any of them into the code.<\/em><\/p>\n

Changing fireBubble in ui.js to the following produces a slightly different feel:<\/p>\n

fireBubble : function(bubble,coords,duration){
\n  bubble.getSprite().animate({
\n    left : coords.x - ui.BUBBLE_DIMS\/2,
\n    top : coords.y - ui.BUBBLE_DIMS\/2
\n  },
\n  {
\n    duration : duration,
\n    easing :\"swing\"
\n  });
\n}<\/code><\/p>\n

If you download jquery UI from http:\/\/jqueryui.com\/download\/ <\/a>and load jquery-ui.min.js into Bubble Shooter with the other files using Modernizr then you could try an easing setting such as easeInOutBack<\/code>:<\/p>\n

fireBubble : function(bubble,coords,duration){
\n  bubble.getSprite().animate({
\n    left : coords.x - ui.BUBBLE_DIMS\/2,
\n    top : coords.y - ui.BUBBLE_DIMS\/2
\n  },
\n  {
\n    duration : duration,
\n    easing :\"easeInOutBack\"
\n  });
\n}<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"

In the .animate call, we specify easing : “linear”. Try using “swing” and think about why this may not be appropriate for Bubble Shooter but may be a better animation method for other games. Then look at more easing settings at http:\/\/api.jqueryui.com\/easings\/ and see if you can incorporate any of them into the code. Changing […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":22,"menu_order":22,"comment_status":"open","ping_status":"open","template":"practice-answer-page.php","meta":[],"_links":{"self":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/62"}],"collection":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=62"}],"version-history":[{"count":2,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/62\/revisions"}],"predecessor-version":[{"id":64,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/62\/revisions\/64"}],"up":[{"embeddable":true,"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=\/wp\/v2\/pages\/22"}],"wp:attachment":[{"href":"http:\/\/buildanhtml5game.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=62"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}