{"id":167,"date":"2014-10-20T19:44:17","date_gmt":"2014-10-21T02:44:17","guid":{"rendered":"http:\/\/appinventor.pevest.com\/?p=167"},"modified":"2014-10-20T19:44:17","modified_gmt":"2014-10-21T02:44:17","slug":"using-imagesprites-for-animated-app-inventor-graphics","status":"publish","type":"post","link":"https:\/\/coldstreams.com\/appinventor\/2014\/10\/20\/using-imagesprites-for-animated-app-inventor-graphics\/","title":{"rendered":"Using ImageSprites for animated App Inventor graphics"},"content":{"rendered":"<p>I described the basics of <a href=\"http:\/\/appinventor.pevest.com\/?p=125\">creating a bouncing ball animation<\/a> earlier and mentioned that &#8220;image sprites&#8221; are similar to the bouncing ball graphic, but provide a way to specify your own image for the ball. To introduce a bit about images in App Inventor, we took a quick look at <a href=\"http:\/\/appinventor.pevest.com\/?p=161\">using the phone&#8217;s camera<\/a>.<\/p>\n<p><span style=\"text-decoration: underline;\"><em>This tutorial starts with the original bouncing ball program and then modifies it to use an Image Sprite instead of a ball. Be sure to read the bouncing ball and camera tutorials first!<\/em><\/span><\/p>\n<p><strong>Previous:<\/strong><\/p>\n<ul>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=125\">Create a bouncing ball animation<\/a><\/li>\n<li><a href=\"http:\/\/appinventor.pevest.com\/?p=161\">Using the camera&#8217;s phone and images<\/a><\/li>\n<\/ul>\n<p><em>The ImageSprite component is almost identical to the ball component!<\/em><\/p>\n<p><!--more--><\/p>\n<blockquote><p><em>If you have created the bouncing ball animation<\/em>, save a copy of that app under a new name, such as &#8220;ImageSpriteDemo&#8221; &#8211; after saving, the new &#8220;ImageSpriteDemo&#8221; will be open in the App Inventor designer. If you do not already have the bouncing ball animation app, then go ahead and enter it now, and save a copy as the original ball program and save a new copy for conversion to an image sprite.<\/p><\/blockquote>\n<p>Drag an <em>ImageSprite<\/em> component to the Viewer and drop it on the <em>Canvas<\/em>. Find the <em>ImageSprite<\/em> component in the Drawing and Animation section of the Palette:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/ImageSprit.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-168\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/ImageSprit-300x194.png\" alt=\"ImageSprit\" width=\"300\" height=\"194\" \/><\/a><\/p>\n<p>Select the <em>ImageSprite<\/em> by clicking on it, and then look over at the Properties. Click in the <em>Picture<\/em> text box on the Properties sheet to upload an image file (jpg or gif or png) to the component:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/ImageSprite_Picture.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-169\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/ImageSprite_Picture-152x300.png\" alt=\"ImageSprite_Picture\" width=\"152\" height=\"300\" \/><\/a><\/p>\n<p>You can use any picture file that you wish. You can use your own drawings created in a drawing or paint program, or photographs, or clip art graphics that are often available for free from many clip art graphics libraries and web sites. I chose a diamond shaped graphic from <a href=\"http:\/\/free-graphics.com\/\">Free-Graphics.com<\/a>:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/balls119.gif\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-170\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/balls119.gif\" alt=\"balls119\" width=\"27\" height=\"27\" \/><\/a><\/p>\n<p><strong>The User Interface<\/strong><\/p>\n<p>Here is how the image sprite animation demo appears on the phone&#8217;s screen:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/Screenshot_2014-10-20-15-53-14.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-185\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/Screenshot_2014-10-20-15-53-14-168x300.png\" alt=\"Screenshot_2014-10-20-15-53-14\" width=\"168\" height=\"300\" \/><\/a><\/p>\n<p><strong>Programming the Animation<\/strong><\/p>\n<p>Now, switch to the Blocks editor. \u00a0In the Blocks editor we need change references to the original <em>Ball1<\/em> object to the <em>ImageSprite1<\/em> object.<\/p>\n<p><strong>Set Up the <em>EdgeReached<\/em> Event<\/strong><\/p>\n<p>Click on the <em>ImageSprite1<\/em> item in the Palette&#8217;s list and select the .<em>EdgeReached<\/em> event. Set this up just like was done with the ball, except reference the <em>ImageSprite1<\/em>&#8216;s events, methods and properties:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/ImageSpriteEdgeReached.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-175\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/ImageSpriteEdgeReached.png\" alt=\"ImageSpriteEdgeReached\" width=\"379\" height=\"135\" \/><\/a><\/p>\n<p><strong>Remove the Original Ball1 Object<\/strong><\/p>\n<p>Delete the original ball from the Designer and the Blocks (deleting it from the Designer window will delete it from the Blocks editor too). But be aware &#8211; <em><strong>this removes all references to the original Ball1 component from the Blocks program! This means you need to replace the original references to the ball&#8217;s speed or heading with the image sprite name.<\/strong><\/em><\/p>\n<p>For example, the original ball start and stop\u00a0blocks looked like this:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/BallStartStop.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-136\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/BallStartStop.png\" alt=\"BallStartStop\" width=\"1110\" height=\"146\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><em>When the Ball1 object is deleted, the set blocks simply vanish as there is no longer a Ball1 object!<\/em><\/p>\n<p>All of those <em>Ball1<\/em> references need to be replaced with <em>ImageSprite1<\/em> instead as shown here:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/ImageSpriteUpdate1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-174\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/ImageSpriteUpdate1.png\" alt=\"ImageSpriteUpdate1\" width=\"721\" height=\"481\" \/><\/a><\/p>\n<p>The set heading blocks code also needs to be updated to reference <em>ImageSprite1<\/em>:<\/p>\n<p><a href=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/ImageSpriteUpdate2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-176\" src=\"http:\/\/appinventor.pevest.com\/wp-content\/uploads\/2014\/10\/ImageSpriteUpdate2.png\" alt=\"ImageSpriteUpdate2\" width=\"602\" height=\"198\" \/><\/a><\/p>\n<p>Load your updated program into your Android phone or tablet and test it out.<\/p>\n<p><strong><em>Where did the name &#8220;Sprite&#8221; come from?<\/em><\/strong><\/p>\n<p>Sprite is an old word referring to an elf, fairy or goblin, according to <a href=\"http:\/\/dictionary.com\">Dictionary.com<\/a>, sometimes referring to a &#8220;nimble&#8221; case as in a nimble goblin. \u00a0Hence, a sprite is something that readily moves about a screen. \u00a0I do not know precisely when &#8220;sprite&#8221; became associated with moving computer graphic elements, but I do know that in the early 1980s, there was an 8-bit graphics-oriented computer for home gaming known as the Commodore-64 which used the term &#8220;sprite&#8221; to describe the method of supporting move-able graphic elements on the screen, particularly those used for gaming, and which could support detection of collisions with other objects.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I described the basics of creating a bouncing ball animation earlier and mentioned that &#8220;image sprites&#8221; are similar to the bouncing ball graphic, but provide a way to specify your own image for the ball. To introduce a bit about images in App Inventor, we took a quick look at using the phone&#8217;s camera. This &hellip; <a href=\"https:\/\/coldstreams.com\/appinventor\/2014\/10\/20\/using-imagesprites-for-animated-app-inventor-graphics\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Using ImageSprites for animated App Inventor graphics<\/span> <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,10],"tags":[],"class_list":["post-167","post","type-post","status-publish","format-standard","hentry","category-components","category-programming-method"],"_links":{"self":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/comments?post=167"}],"version-history":[{"count":0,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/posts\/167\/revisions"}],"wp:attachment":[{"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/media?parent=167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/categories?post=167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coldstreams.com\/appinventor\/wp-json\/wp\/v2\/tags?post=167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}