{"id":7661,"date":"2015-09-29T06:16:04","date_gmt":"2015-09-29T06:16:04","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/09\/29\/html5-canvas-moving-panning-world-with-arrow-keys-in-easeljs-open-source-projects-createjs-easeljs\/"},"modified":"2015-09-29T06:16:04","modified_gmt":"2015-09-29T06:16:04","slug":"html5-canvas-moving-panning-world-with-arrow-keys-in-easeljs-open-source-projects-createjs-easeljs","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/09\/29\/html5-canvas-moving-panning-world-with-arrow-keys-in-easeljs-open-source-projects-createjs-easeljs\/","title":{"rendered":"HTML5 Canvas: Moving\/panning world with arrow keys in EaselJS-open source projects CreateJS\/EaselJS"},"content":{"rendered":"<p>After a year of studying and experimenting through trial-and-error, I feel that I am starting to understand JavaScript a bit more. So, now, I wanna try my hand at writing a simple 2D platform game (think Super Mario World or Sonic the Hedgehog). For this, I&#8217;ll be employing the EaselJS library.<\/p>\n<p>I am trying to figure out how I can move\/pan the &#8216;world&#8217; within a canvas by use of the left and right arrow keys. I know how I can run a function upon a <code>keydown<\/code> of the arrow key, but I&#8217;m not too sure how I should approach the moving\/panning.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.stack.imgur.com\/uPd1M.jpg\" \/><\/p>\n<p>Should I adjust the position\/coordinates of every single thing within the canvas when a key is pressed? Or should I perhaps put everything in a container and move the position\/coordinates of the container?<\/p>\n<p>I&#8217;ll appreciate anything that nudges me into the right direction. Tyvm \ud83d\ude42<\/p>\n<p><strong>Updated with answer<\/strong> The chosen answer below confirmed that I indeed had to put everything in a container so that I can set the position of that container. This is the code I drafted, and it works.<\/p>\n<pre><code>\/\/ Canvas\nvar stage = new createjs.Stage('game');\ncreatejs.Ticker.addEventListener('tick', tick);\nfunction tick(event) {\n    stage.update();\n}\n\n\/\/ Cave\nvar cave = new createjs.Bitmap('img\/cave.png');\ncave.x = cave.y = 0;\n\n\/\/ World\n\/\/ Pans World if the left or right arrow keys are pressed\nvar world = new createjs.Container();\nworld.x = 0;\nworld.y = 0;\nworld.addChild(cave);\nstage.addChild(world);\n$(window).keydown(function(e){\n    switch (e.which || e.keyCode){\n        case 39: \/\/ right arrow key\n            world.regX += 10;\n            break;\n        case 37: \/\/ left arrow key\n            world.regX -= 10;\n            break;\n    }\n});\n<\/code><\/pre>\n<p>I tried updating <code>world.x<\/code> as well as <code>world.regX<\/code>. Somehow, <code>world.regX<\/code> seems to go smoother.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>After a year of studying and experimenting through trial-and-error, I feel that I am starting to understand JavaScript a bit more. So, now, I wanna try my hand at writing a simple 2D platform game (think Super Mario World or Sonic the Hedgehog). For this, I&#8217;ll be employing the EaselJS library. I am trying to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7661","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7661"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7661\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}