{"id":29566,"date":"2017-04-14T03:01:41","date_gmt":"2017-04-13T17:01:41","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=29566"},"modified":"2017-04-14T09:06:25","modified_gmt":"2017-04-13T23:06:25","slug":"xcode-spritekit-game-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/xcode-spritekit-game-primer-tutorial\/","title":{"rendered":"Xcode SpriteKit Game Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Xcode SpriteKit Game Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.jpg\" title=\"Xcode SpriteKit Game Primer Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Xcode SpriteKit Game Primer Tutorial<\/p><\/div>\n<p>We&#8217;re always on the lookout for the word &#8220;cross&#8221; within I.T. circles (<font size=1>not because we have any anger management issues, but<\/font>), because it might mean some relief from &#8220;platform fatigue&#8221;.  By that, we mean that the number of different devices and platforms you write code for, and hope to achieve just the one codebase, makes you pay attention, especially when working in an IDE when the word &#8220;cross&#8221; is prominent.<\/p>\n<p>And so it was as we upgraded our MacBook Pro&#8217;s Xcode to version 8.3.1, and that set into play a revisit of this great IDE and a revisit of one of the great anticipatory parts of a good upgrade, the revisit to an IDE&#8217;s File -&gt; New Project functionality.  Xcode did not disappoint, offering templates for Apple platforms &#8230;<\/p>\n<ul>\n<li>iOS &#8230; Apple iPhones and iPads and iPods<\/li>\n<li>watchOS &#8230; Apple watch<\/li>\n<li>tvOS &#8230; Apple TV<\/li>\n<li>macOS &#8230; Apple Mac OS X &#8230; as with this MacBook Pro &#8230; and &#8230; da, da da da da da, da da da &#8230;<\/li>\n<li>Cross-platform &#8230; yay!!!! &#8230; feature today&#8217;s project of choice &#8230;<br \/>\n<code><br \/>\nCross-platform SpriteKit Game<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>Now the test using &#8220;Cross-platform SpriteKit Game&#8221; would be, for us, is integrating with all those other (albeit, only, Apple) platforms be seamless and easy?  And turn away now in both a horizontal and vertical direction to avoid spoiler alert &#8230; you were warned &#8230; yes, as long as you have an Apple Developer Signup going if you might send your game to the Apple Store, otherwise you can do unit testing with device simulators.  And that is where, for us, those Apple white leads become so important for real device testing with the MacBook Pro&#8217;s USB ports (hang on to your older version MacBook Pros?!) interfacing hardwarewise with the Apple white leads and softwarewise with the MacBook Pro&#8217;s iTunes desktop application, first up, where any Syncing and\/or Ejecting of those real devices can take place, and be the springboard for Xcode projects to Product -&gt; Destination (or via some much more self-explanatory &#8220;top of screen&#8221; ways, now, with Xcode 8.3.1) to manage lots of device scenarios.  And you&#8217;ll want that using Xcode&#8217;s File -&gt; New Project -&gt; Cross-platform -&gt; Cross-platform SpriteKit Game work, because you&#8217;ll get a lot of work done fast.  By the way, we pick Objective-C as the language of project rather than the newer Swift for today.<\/p>\n<p>Which brings us to today&#8217;s &#8220;Cross-platform SpriteKit Game&#8221; work.  Yes, you guessed it &#8230; Hello World &#8230; but we do a few easy embellishments, which we&#8217;ll outline below, but we also say that you may get from our PDF <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf'>slideshow<\/a> presentation today &#8230;<\/p>\n<ul>\n<li>Open Xcode (IDE) desktop application (now 8.3.1 for us) on MacBook Pro<\/li>\n<li>File -&gt; New Project -&gt; Cross-platform -&gt; Cross-platform SpriteKit Game  &#8230; see <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf#page=3'>slide 3<\/a> &#8230; etcetera etcetera etcetera<\/li>\n<li>ensure Project -&gt; General (tab) -&gt; Signing -&gt; Team involves a real option, if you intend to do more than unit testing and debugging in Simulators<\/li>\n<li>ensure Project -&gt; General (tab) -&gt; Deployment Info -&gt; Deployment Target involves a version low enough to cover the operating system of all your devices &#8230; we lowered it to 10.0 to cater for our iPad  &#8230; see <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf#page=7'>slide 7<\/a><\/li>\n<li>we add some Emojis into the Share folder&#8217;s GameScene.sks &#8220;scene&#8221;&#8216;s &#8220;helloLabel&#8221;&#8216;s Attribute Inspector&#8217;s &#8220;Text&#8221; field via Edit -&gt; Emoji and Symbols submenu &#8230; see <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf#page=6'>slide 6<\/a><\/li>\n<li>we change the Share folder&#8217;s GameScene.sks &#8220;scene&#8221;&#8216;s &#8220;helloLabel&#8221;&#8216;s Attribute Inspector&#8217;s we change &#8220;Rotation&#8221;, &#8220;Color&#8221;, &#8220;font&#8221; fields (which is pretty intuitive) for some variety &#8230; see <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf#page=10'>slide 10<\/a><\/li>\n<li>we start to look at the Share folder&#8217;s Actions.sks &#8220;scene&#8221;&#8216;s &#8220;Pulse&#8221;&#8216;s Attribute Inspector&#8217;s &#8220;Fade In&#8221;, &#8220;Fade Out&#8221;, &#8220;Scale&#8221; actions &#8230; see <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf#page=11'>slide 11<\/a> and <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf#page=12'>slide 12<\/a> (to see its context in total time)<\/li>\n<li>we want to add code to introduce audio to application and start looking at GameScene.h and GameScene.m where code changes will take place &#8230; see <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf#page=15'>slide 15<\/a> and <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf#page=16'>slide 16<\/a> and <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf#page=17'>slide 17<\/a> and <a target=_blank title='Click picture' href='http:\/\/www.rjmprogramming.com.au\/Mac\/Xcode\/spritexcode.pdf#page=18'>slide 18<\/a> &#8230; so, what we do for &#8230;\n<ol>\n<li>adding audio &#8220;notes of a piano&#8221; (that we had floating around) into the project&#8230; and, before we forget, thanks to <a target=_blank title='Useful link' href='http:\/\/stackoverflow.com\/questions\/11482999\/how-to-play-a-sound-with-avaudioplayer'>this very usefiul link<\/a> here &#8230;<br \/>\nunder iOS -&gt; Support Files (group) TwoFinger-&gt;Gesture New Group &#8230; call it &#8216;resource&#8217; &#8230;<br \/>\nagree to any Bundle Group relationships &#8230; that makes this Group permeate to all the different Target platform apps when building &#8230;<br \/>\ndrag those audio files to the &#8216;resource&#8217; Group &#8230;<br \/>\ncheck in Project -&gt; Build Phases -&gt; Copy Bundle Resources that those audio files happen that (anticipated) way &#8230; otherwise &#8230; Gooooooooogggggggggllllleee!\n<\/li>\n<li>low sound at a touch down or mouse down event &#8230;<br \/>\nGameScene.h <b>changes<\/b> as per &#8230;<br \/>\n<code><br \/>\n\/\/<br \/>\n\/\/  GameScene.h<br \/>\n\/\/  Cross Two<br \/>\n\/\/<br \/>\n\/\/  Created by pgAgent on 12\/4\/17.<br \/>\n\/\/  Copyright \u00a9 2017 RJM Programming. All rights reserved.<br \/>\n\/\/<br \/>\n<b><\/b><br \/>\n#import &lt;SpriteKit\/SpriteKit.h&gt;<br \/>\n<b>#import &lt;AVFoundation\/AVFoundation.h&gt;<\/b><br \/>\n<b><\/b><br \/>\n@interface GameScene : SKScene<br \/>\n+ (GameScene *)newGameScene;<br \/>\n@end<br \/>\n<\/code><br \/>\nGameScene.m <b>changes<\/b> up the top as per &#8230;<br \/>\n<code><br \/>\n\/\/<br \/>\n\/\/  GameScene.m<br \/>\n\/\/  Cross Two<br \/>\n\/\/<br \/>\n\/\/  Created by pgAgent on 12\/4\/17.<br \/>\n\/\/  Copyright \u00a9 2017 RJM Programming. All rights reserved.<br \/>\n\/\/<br \/>\n<b><\/b><br \/>\n#import \"GameScene.h\"<br \/>\n<b><\/b><br \/>\n@implementation GameScene {<br \/>\n    SKShapeNode *_spinnyNode;<br \/>\n    SKLabelNode *_label;<br \/>\n    <b>AVAudioPlayer *player;<\/b><br \/>\n}<br \/>\n\/\/ ... more code below<br \/>\n<\/code><br \/>\nGameScene.m <b>changes<\/b> up the top of (void)setUpScene as per us making that sound be the lowest A on your normal piano (ie. A0.mp3) &#8230;<br \/>\n<code><br \/>\n\/\/ ... more code above<br \/>\n- (void)setUpScene {<br \/>\n    <b>\/\/ Set up play sound<br \/>\n    NSURL *url = [NSURL fileURLWithPath:[NSString stringWithFormat:@\"%@\/A0.mp3\", [[NSBundle mainBundle] resourcePath]]];<br \/>\n    player = [[AVAudioPlayer alloc] initWithContentsOfURL:url error:nil];<br \/>\n    player.numberOfLoops = 0;<\/b><br \/>\n<b><\/b><br \/>\n    \/\/ Get label node from scene and store it for use later<br \/>\n    _label = (SKLabelNode *)[self childNodeWithName:@\"\/\/helloLabel\"];<br \/>\n    _label.alpha = 0.0;<br \/>\n    [_label runAction:[SKAction fadeInWithDuration:2.0]];<br \/>\n\/\/ ... more code below<br \/>\n<\/code><br \/>\nGameScene.m <b>changes<\/b> bottom of (void)touchesBegan as per &#8230;<br \/>\n<code><br \/>\n\/\/ ... more code above<br \/>\n- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {<br \/>\n    [_label runAction:[SKAction actionNamed:@\"Pulse\"] withKey:@\"fadeInOut\"];<br \/>\n<b><\/b><br \/>\n    for (UITouch *t in touches) {<br \/>\n        [self makeSpinnyAtPoint:[t locationInNode:self] color:[SKColor greenColor]];<br \/>\n    }<br \/>\n    <b>[player play];<\/b><br \/>\n}<br \/>\n\/\/ ... more code below<br \/>\n<\/code><br \/>\nGameScene.m <b>changes<\/b> bottom of (void)mouseDown as per &#8230;<br \/>\n<code><br \/>\n\/\/ ... more code above<br \/>\n- (void)mouseDown:(NSEvent *)event {<br \/>\n    [_label runAction:[SKAction actionNamed:@\"Pulse\"] withKey:@\"fadeInOut\"];<br \/>\n<b><\/b><br \/>\n    <b>[player play];<\/b><br \/>\n    [self makeSpinnyAtPoint:[event locationInNode:self] color:[SKColor greenColor]];<br \/>\n}<br \/>\n\/\/ ... more code below<br \/>\n<\/code>\n<\/li>\n<li>some higher sound Actions.sks actions &#8230; which requires only GUI style work &#8230;<br \/>\nat the Share folder&#8217;s Actions.sks &#8220;scene&#8221;&#8216;s &#8220;Pulse&#8221;&#8216;s Attribute Inspector&#8217;s Object Library&#8217;s &#8220;PlaySoundFileNamed Action&#8221; drag into the desired timeslot and fill out &#8220;Start Time&#8221;, &#8220;Duration&#8221; and &#8220;Filename&#8221; (from a dropdown that should contain entries for each of those *.mp3 files you added into the project earlier) &#8230;<br \/>\nrepeat at different times for some &#8220;bird chirping&#8221; feeling randomosity, as required\n<\/li>\n<\/ol>\n<\/li>\n<li>to prepare the ground for the next run USB plug in any real device you want to test run, via USB port and Apple lead &#8230;<\/li>\n<li>to further prepare the ground for the next run, visit Product -&gt; Destination and pick appropriate Simulator or real device  &#8230;<\/li>\n<li>to test a device whether simulated or real Product -&gt; Run &#8230; and on a real device it will leave an installed version should it build correctly, and that you can revisit and run separate to being hooked up to the MacBook Pro, after you use the MacBook Pro&#8217;s iTunes device button Eject option, when you&#8217;ve finished testing, and want to unplug the real device <font size=1>&#8230; and &#8220;let it be mobile&#8221;, <strike>man<\/strike>person<strike>age<\/strike><\/font><\/li>\n<\/ul>\n<p>Get a few real devices and simulators going &#8230; and &#8230; <strike>&#8220;Weird Forest Sounds&#8221; (was the vision, but)<\/strike>&#8220;an instructional Xcode 8.3.1 Cross-platform SpriteKit Game project tutorial&#8221; YouTube video follows <strike>(above the MacBook Pro&#8217;s fan problems today &#8230; <font size=5>cut, cut!<\/font>)<\/strike>.<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/v5rEmWVIO6o\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d29566' onclick='var dv=document.getElementById(\"d29566\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/cross-platform\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d29566' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re always on the lookout for the word &#8220;cross&#8221; within I.T. circles (not because we have any anger management issues, but), because it might mean some relief from &#8220;platform fatigue&#8221;. By that, we mean that the number of different devices &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/xcode-spritekit-game-primer-tutorial\/\">Continue reading <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":[12,15,20,29,37],"tags":[91,113,278,320,322,385,476,477,558,585,626,630,631,641,1795,723,725,734,2178,795,796,797,2180,852,913,997,999,2175,2173,2174,2179,1319,2177,1347,1369,2176,1473],"class_list":["post-29566","post","type-post","status-publish","format-standard","hentry","category-elearning","category-games","category-ios","category-operating-system","category-tutorials","tag-apple","tag-audio","tag-cross-platform","tag-desktop-application","tag-device","tag-emoji","tag-game","tag-games-2","tag-hello-world","tag-ide","tag-ios","tag-ipad","tag-iphone","tag-itunes","tag-lead","tag-mac","tag-mac-os-x","tag-macbook-pro","tag-macos","tag-mobile","tag-mobile-app","tag-mobile-application","tag-mp3","tag-objective-c","tag-pdf","tag-programming","tag-project","tag-scene","tag-sprite","tag-spritekit","tag-toutube","tag-tutorial","tag-tvos","tag-usb","tag-video","tag-watchos","tag-xcode"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29566"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=29566"}],"version-history":[{"count":12,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29566\/revisions"}],"predecessor-version":[{"id":29591,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/29566\/revisions\/29591"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=29566"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=29566"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=29566"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}