{"id":2838,"date":"2010-04-01T09:50:15","date_gmt":"2010-04-01T07:50:15","guid":{"rendered":"http:\/\/www.devapp.it\/wordpress\/?p=2838"},"modified":"2010-04-04T11:27:11","modified_gmt":"2010-04-04T09:27:11","slug":"t029-muoviamo-una-pallina-tramite-l-accelerometro","status":"publish","type":"post","link":"https:\/\/www.devapp.it\/wordpress\/t029-muoviamo-una-pallina-tramite-l-accelerometro\/","title":{"rendered":"T#029 &#8211; Muoviamo una pallina tramite l&#8217;accelerometro"},"content":{"rendered":"<p><a href=\"..\/wp-content\/uploads\/2010\/03\/pallina.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignleft\" src=\"..\/wp-content\/uploads\/2010\/03\/pallina.png\" alt=\"\" width=\"50\" height=\"50\" \/><\/a> L&#8217;accelerometro \u00e8 uno dei componenti pi\u00f9 importanti e di successo del nostro iPhone \/ iPod Touch (e presto iPad), ad oggi sfruttato in molte applicazioni e videogiochi presenti in App Store. Se vi accingete, infatti, a programmare giochi per iPhone, sicuramente non potete sottovalutare questo componente hardware. Per questo motivo, nel tutorial di oggi, vi guider\u00f2 all&#8217;uso (semplicissimo) di questo fantastico strumento creando una piccola applicazione che, sfruttando questo componente, vi permetter\u00e0 di muovere una pallina a seconda dell&#8217;inclinazione che darete al vostro dispositivo mobile.<!--more--><\/p>\n<p>Iniziamo col progettare la nostra piccola applicazione, essendo essa molto semplice ci servir\u00e0:<\/p>\n<ul>\n<li>un componente che ci dia l&#8217;inclinazione, quindi l&#8217;accelerometro. Classe: <a title=\"Documentazione Apple\" href=\"http:\/\/developer.apple.com\/iphone\/library\/documentation\/UIKit\/Reference\/UIAccelerometer_Class\/Reference\/UIAccelerometer.html\" target=\"_blank\">UIAccelerometer;<\/a><\/li>\n<li>una classe che gestisca il movimento della pallina;<\/li>\n<li>la pallina \ud83d\ude42<\/li>\n<\/ul>\n<p><strong>Piccola nota:<\/strong> quasi mai si trover\u00e0 un programma come Interface Builder che ti costruisce l&#8217;interfaccia grafica con il drag&amp;drop quindi, in questo tutorial, creeremo la grafica via codice, il che \u00e8 pi\u00f9 divertente e molto pi\u00f9 &#8220;dinamico&#8221; a mio parere.<\/p>\n<p>Apriamo Xcode e creiamo un nuovo progetto &#8220;Window-Based Application&#8221;.<\/p>\n<p>Iniziamo con una cosa banale, inseriamo l&#8217;immagine della nostra pallina.<br \/>\nPotete usare la mia, che trovate giusto qui sopra, oppure potete crearne una voi, molto pi\u00f9 carina!<br \/>\nInseriamola nella cartella &#8220;Resources&#8221;.<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-10.51.59.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-2841 aligncenter\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-10.51.59.png\" alt=\"\" width=\"159\" height=\"88\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Creiamo la nostra classe per la gestione del movimento della pallina, quindi aggiungiamo una nuova classe nella cartella &#8220;Classes&#8221; figlia di UIViewController (quale classe migliore):<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-10.50.10.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-2842\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-10.50.10-300x258.png\" alt=\"\" width=\"300\" height=\"258\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-10.50.10-300x258.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-10.50.10.png 664w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Iniziamo a scrivere nel file di intestazione .h (l&#8217;header)\u00a0 i campi che ci serviranno: l&#8217;immagine della pallina e una variabile che ci servir\u00e0 per impostare la sensibilit\u00e0 del nostro accelerometro:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.10.31.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-2843\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.10.31-300x48.png\" alt=\"\" width=\"300\" height=\"48\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.10.31-300x48.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.10.31.png 380w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Passiamo quindi al file di implementazione (.m) di questa classe. Notiamo molti metodi gi\u00e0 costruiti per noi da Xcode, anche se gran parte di loro sono racchiusi in tag di commenti. Leggendo si pu\u00f2 capire a cosa servano, nel nostro caso useremo il metodo <em>-(void)loadView<\/em> che viene chiamato non appena viene richiesto di visualizzare la view di questo <em>UIViewCotroller<\/em>. Eliminiamo quindi i tag di commento per questo metodo e scriviamo il codice per inizializzare la vista di questa nostra classe:<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n- (void)loadView {\r\n\t\/\/ creiamo l'immagine della pallina\r\n\tpallinaView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@\"pallina.png\"]];\r\n\r\n\t\/\/ creiamo la vista del nostro UIViewController\r\n\tUIView *controllerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)];\r\n\r\n\t\/\/ aggiungiamo la pallina alla nostra vista (di modo che sia visibile)\r\n\t[controllerView addSubview:pallinaView];\r\n\r\n\t\/\/ impostiamo la vista creata, come la vista di questo UIViewController\r\n\t[self setView:controllerView];\r\n\r\n\t\/\/ rilasciamo l'oggetto che ormai non ci serve pi\u00f9\r\n\t[controllerView release]; \/\/ notare che l'oggetto rimarr\u00e0 \"vivo\" perch\u00e8 il nostro controller ha fatto un \"retain\" quando abbiamo fatto \"setView:\"\r\n<\/pre>\n<p>Visto che abbiamo allocato la pallinaView e non rilasciata, ricordiamoci di farlo nel dealloc:<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n- (void)dealloc {\r\n    [pallinaView release];\r\n    [super dealloc];\r\n}<\/pre>\n<p>La grafica \u00e8 fatta! Molto semplice vero? Non \u00e8 necessario scomodare Interface Builder.<\/p>\n<p>Ora passiamo al cuore dell&#8217;applicazione: l&#8217;accelerometro! Come si pu\u00f2 leggere dalla documentazione Apple, per richiamarlo basta scrivere <strong>[UIAccelerometer sharedAccelerometer]<\/strong> e usare uno dei due metodi elencati.<\/p>\n<p>Sempre nel loadView attiviamo l&#8217;accelerometro in questo modo:<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n\/\/ attiviamo l'accelerometro\r\n[[UIAccelerometer sharedAccelerometer] setDelegate:self];\r\n[[UIAccelerometer sharedAccelerometer] setUpdateInterval:0.001];\r\n\r\n\/\/ impostiamo la sensibilit\u00e0 a 4\r\nsensibilita = 4;\r\n\r\n}\r\n<\/pre>\n<p>Impostando il delegato (colui che ricever\u00e0 i dati dell&#8217;accelerometro) a <em>self<\/em> e compilando a questo punto, ci verr\u00e0 restituito un warning, per risolvere, baster\u00e0 correggere l&#8217;header in questo modo:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.11.50.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-2846\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.11.50-300x35.png\" alt=\"\" width=\"300\" height=\"35\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.11.50-300x35.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.11.50.png 555w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Ora dobbiamo aggiungere il metodo del delegato, cercando nella documentazione Apple eccolo qua:<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration;\r\n<\/pre>\n<p>Ogni volta che l&#8217;accelerometro avr\u00e0 delle informazioni da darci, ce le passer\u00e0 qui, e noi le sfrutteremo per spostare la pallina.<\/p>\n<p>Per il movimento ho scritto un semplice algoritmo che mi limito a riportare commentato, \u00e8 molto semplice. Calcola semplicemente la posizione che avr\u00e0 la pallina e se dovesse uscire dallo schermo la &#8220;blocca&#8221;. Eccovi il codice:<\/p>\n<pre lang=\"objc\" escaped=\"true\">\r\n- (void)accelerometer:(UIAccelerometer *)accelerometer didAccelerate:(UIAcceleration *)acceleration {\r\n\t\/\/ ricaviamo lo spostamento che avr\u00e0 la pallina nelle due direzioni\r\n\tCGPoint spostamento = CGPointMake(acceleration.x * sensibilita, acceleration.y * sensibilita * -1);\r\n\r\n\t\/\/ calcoliamo se la pallina, con tale spostamento, finir\u00e0 fuori dallo schermo\r\n\tCGRect pallinaFrame = pallinaView.frame;\r\n\t\/\/ impostiamo le coordinate che dovrebbe avere\r\n\tpallinaFrame.origin.x += spostamento.x;\r\n\tpallinaFrame.origin.y += spostamento.y;\r\n\t\/\/ se la pallina uscisse a sinistra\r\n\tif (pallinaFrame.origin.x &lt; 0)\r\n            pallinaFrame.origin.x = 0;\r\n        \/\/ se uscisse a destra\r\n        if (pallinaFrame.origin.x &gt; (pallinaView.superview.frame.size.width - pallinaFrame.size.width))\r\n\t    pallinaFrame.origin.x = (pallinaView.superview.frame.size.width - pallinaFrame.size.width);\r\n\t\/\/ se uscisse in alto\r\n\tif (pallinaFrame.origin.y &lt; 0)\r\n            pallinaFrame.origin.y = 0;\r\n        \/\/ se uscisse in basso\r\n        if (pallinaFrame.origin.y &gt; (pallinaView.superview.frame.size.height - pallinaFrame.size.height))\r\n            pallinaFrame.origin.y = (pallinaView.superview.frame.size.height - pallinaFrame.size.height);\r\n\r\n\t\/\/ sposto la pallina\r\n\tpallinaView.frame = pallinaFrame;\r\n\r\n}\r\n<\/pre>\n<p>Tutto a posto, ora la classe dovrebbe funzionare a dovere. Ultima cosa da fare \u00e8 che qualcuno ora la chiami &#8216;sta classe!<\/p>\n<p>Andiamo quindi in <em>nomeprogettoAppDelegate.h<\/em> e importiamo la nostra classe:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.24.57.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-2847\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.24.57-300x101.png\" alt=\"\" width=\"300\" height=\"101\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.24.57-300x101.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-11.24.57.png 479w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>E implementiamo a dovere:<\/p>\n<p><center><br \/>\n<a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-12.25.27.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-2848\" src=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-12.25.27-300x195.png\" alt=\"\" width=\"300\" height=\"195\" srcset=\"https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-12.25.27-300x195.png 300w, https:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Schermata-2010-03-31-a-12.25.27.png 538w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><br \/>\n<\/center><\/p>\n<p>Ricordatevi, infine, di rilasciare l&#8217;oggetto nel dealloc!<\/p>\n<p>Potete scaricare il mio progetto completo da <a href=\"http:\/\/www.devapp.it\/wordpress\/wp-content\/uploads\/2010\/03\/Pallina.zip\" target=\"_blank\">questo link<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>L&#8217;accelerometro \u00e8 uno dei componenti pi\u00f9 importanti e di successo del nostro iPhone \/ iPod Touch (e&#8230;<\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[39,90,5,1,162,23],"class_list":["post-2838","post","type-post","status-publish","format-standard","hentry","category-tutorial-pratici","tag-accelerometro","tag-animazioni","tag-objective-c","tag-tutorial-pratici","tag-uiaccelerometer","tag-xcode"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/2838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/comments?post=2838"}],"version-history":[{"count":24,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/2838\/revisions"}],"predecessor-version":[{"id":2914,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/posts\/2838\/revisions\/2914"}],"wp:attachment":[{"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/media?parent=2838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/categories?post=2838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devapp.it\/wordpress\/wp-json\/wp\/v2\/tags?post=2838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}