{"id":950,"date":"2020-10-03T20:26:15","date_gmt":"2020-10-03T10:26:15","guid":{"rendered":"http:\/\/www.ruzzgames.com\/?page_id=950"},"modified":"2020-10-03T20:26:52","modified_gmt":"2020-10-03T10:26:52","slug":"2d-arcade-mac-ios-app","status":"publish","type":"page","link":"https:\/\/www.ruzzgames.com\/index.php\/2d-arcade-mac-ios-app\/","title":{"rendered":"2D Arcade Mac \/ iOS App"},"content":{"rendered":"\n<h3 class=\"wp-block-heading\" id=\"block-444e25b5-26ca-4105-97fa-4ba0ce547f8b\">Apple iOS &amp; MacOS\/X<\/h3>\n\n\n\n<p>The following will make the 2D Arcade game for both iOS (phone \/ iPad) and Mac OS\/X (Mac Desktop).<\/p>\n\n\n\n<p>We can make the app for both desktop and mobile together as the code will be very similar for both. The difference will be the sizes of the images.<\/p>\n\n\n\n<p id=\"block-366bf71b-df08-4826-89a0-956c52f352fc\">In Xcode, create a new project and select Game and iOS. This is the app for the iPhone and iPad. Later we will add the Mac OS desktop app as well to this project.<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-ed9d8f33-8f6f-4260-8286-1bf6d2514a54\"><img decoding=\"async\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2020\/04\/ios2darcade1-1024x726.png\" alt=\"This image has an empty alt attribute; its file name is ios2darcade1-1024x726.png\"\/><\/figure>\n\n\n\n<p id=\"block-7d42b600-b01a-448c-acd7-5009e28a4f57\">I added my game name and company name (make one up). I added my Apple account by clicking on Add account&#8230;<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-d0ec69e3-d43c-4141-856e-f044fb9f2047\"><img decoding=\"async\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2020\/04\/ios2darcade2-1024x730.png\" alt=\"This image has an empty alt attribute; its file name is ios2darcade2-1024x730.png\"\/><\/figure>\n\n\n\n<p id=\"block-4b56f87b-96db-4226-804c-967ce071a806\">Select where to save your project. I enabled Git source control &#8211; this will keep track of source code versions.<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-d7c0f143-9ece-4f8e-9257-11c66d99d3ed\"><img decoding=\"async\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2020\/04\/2darcademac3-1024x569.png\" alt=\"This image has an empty alt attribute; its file name is 2darcademac3-1024x569.png\"\/><\/figure>\n\n\n\n<p id=\"block-8a1a559d-59fb-48a6-84f6-3b60a742d336\">Click on the blue Star Invaders on the top left, then click on Targets, then click on the plus sign underneath to add another target. We will add the Mac OS app to this.<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-672ef21d-9cdc-4914-b1e9-b64c91e86e8c\"><img decoding=\"async\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2020\/04\/mactarget2darcade-649x1024.png\" alt=\"This image has an empty alt attribute; its file name is mactarget2darcade-649x1024.png\"\/><\/figure>\n\n\n\n<p id=\"block-0fbaadad-52f8-4024-a87c-d98a94f323d4\">Select macOS and Game as below.<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-3612c804-b6c0-4455-9923-87a64d47300b\"><img decoding=\"async\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2020\/04\/arcademac1-1024x727.png\" alt=\"This image has an empty alt attribute; its file name is arcademac1-1024x727.png\"\/><\/figure>\n\n\n\n<p id=\"block-1e0cb1f2-ba78-4337-a3d9-db516e8ec6c4\">I named it Star Invaders MacOS<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-54ac5f1a-b443-4daf-bfa7-75c1de2f03f6\"><img decoding=\"async\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2020\/04\/2darcademac4-1024x735.png\" alt=\"This image has an empty alt attribute; its file name is 2darcademac4-1024x735.png\"\/><\/figure>\n\n\n\n<p id=\"block-85e3e591-bba8-4338-a6ec-6cc83c2fa0c5\">Press the Play button and select iPhone. This will build your project and create an iPhone simulator (this can be chosen to what you prefer) or you can build it directly to your phone or even iPad (you will need to give your app permission to run under General -&gt; Settings -&gt; Device Management -&gt; Apple Development)<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-d2c65590-7164-47aa-b993-c6dabaea6972\"><img decoding=\"async\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2020\/04\/ios2darcade5.png\" alt=\"This image has an empty alt attribute; its file name is ios2darcade5.png\"\/><\/figure>\n\n\n\n<p id=\"block-2855dbc2-69bd-4d3c-8347-c6286ee745d4\"><br>This will show you the iPhone view. If you press on the screen, you get some coloured rectangles:<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-903c30ea-534f-48e4-9810-c50893be337f\"><img decoding=\"async\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2020\/04\/ios2darcade7-576x1024.png\" alt=\"This image has an empty alt attribute; its file name is ios2darcade7-576x1024.png\"\/><\/figure>\n\n\n\n<p id=\"block-cedac22a-1208-4185-922e-fc8db0a6f7d7\">Your App will display below if you press the home button of the phone<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-b2231aae-b817-44d4-971a-04ea605ed63a\"><img decoding=\"async\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2020\/04\/ios2darcade8-576x1024.png\" alt=\"This image has an empty alt attribute; its file name is ios2darcade8-576x1024.png\"\/><\/figure>\n\n\n\n<p id=\"block-38a2f057-71de-483b-a4d1-fe786787940b\">Select Star Invaders MacOS and then press the Play button and select the MacOS. You will see it as below.<\/p>\n\n\n\n<figure class=\"wp-block-image\" id=\"block-763218b0-6762-4c76-93e9-456c185eb16c\"><img decoding=\"async\" src=\"https:\/\/www.ruzzgames.com\/wp-content\/uploads\/2020\/04\/arcademac2-1024x801.png\" alt=\"This image has an empty alt attribute; its file name is arcademac2-1024x801.png\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"block-956c6d3f-1271-473b-b756-08cf6acf72d6\">Apple iOS and MacOS App code<\/h3>\n\n\n\n<p id=\"block-8bd40bae-0eae-4e78-adec-5d2b93d1500c\">Documentation of the SpriteKit is <a href=\"https:\/\/developer.apple.com\/documentation\/spritekit\/\">here<\/a>.<\/p>\n\n\n\n<p id=\"block-5435172b-7cd0-43c2-be62-b5887250cece\">There is a good tutorial on starting SpriteKit <a href=\"https:\/\/www.raywenderlich.com\/71-spritekit-tutorial-for-beginners\">here.<\/a> You can add images in your app &#8211; instructions are <a href=\"https:\/\/infinitecortex.com\/2014\/03\/working-with-images-in-spritekit-image-sets\/\">here.<\/a><\/p>\n\n\n\n<p id=\"block-6e31302d-2c11-4cc7-a624-1fa9f60a9a6e\">Documentation on setting up an app for iOS and MacOS is via the&nbsp;<a href=\"https:\/\/developer.apple.com\/documentation\">apple developer documentation<\/a>. To develop for iOS, you use&nbsp;<a href=\"https:\/\/developer.apple.com\/documentation\/uikit\">UIKit&nbsp;<\/a>and for MacOS, you use&nbsp;<a href=\"https:\/\/developer.apple.com\/documentation\/appkit\">AppKit<\/a>.&nbsp;<\/p>\n\n\n\n<p id=\"block-7ec16678-e959-4548-984d-1ba1a0064c4a\">Some useful tutorials:<\/p>\n\n\n\n<ul class=\"wp-block-list\" id=\"block-747e74ce-e19a-408e-82f4-46ae147445fd\"><li>making a <a href=\"https:\/\/www.makeschool.com\/academy\/track\/build-ios-games\/build-hoppy-bunny-with-spritekit-in-swift\/getting-started-H6c=\">flappy bird type clone<\/a><\/li><li>making an <a href=\"https:\/\/www.makeschool.com\/academy\/track\/build-ios-games\/clone-angry-birds-with-spritekit-and-swift-3\/getting-started-grw=\">angry birds clone<\/a><\/li><li>making a <a href=\"https:\/\/www.makeschool.com\/academy\/track\/build-ios-games\/clone-angry-birds-with-spritekit-and-swift-3\/main-menu\">menu scene<\/a><\/li><\/ul>\n\n\n\n<p id=\"block-bf8d17b9-2e74-4e9d-b675-f52687df43ed\">The initial template that is given via default when you create a new project from SpriteKit. It contains default code to display some text and display some coloured spinning rectangles.<\/p>\n\n\n\n<p id=\"block-740f1a65-bdce-460a-b871-3366febe3d78\">The code in AppDelegate.swift contains application code to initialise your app, specifies what it does when the app runs in the background when inactive, and what happens when the user ends the app.<\/p>\n\n\n\n<p id=\"block-6c49d180-8ced-4dff-bd11-5f0cf4ac7847\">The code in GameViewController.swift (or ViewController.swift) loads the game scene.<\/p>\n\n\n\n<p id=\"block-ad5ad027-1e52-4af9-8529-a6f48c36ecec\">The main game code is in GameScene.swift and this is where all the game code will be written. It has a class GameScene which is inherited from SKScene (Sprite Kit Scene). It contains the functionality of our game. You can override functions using the <strong>override func<\/strong> keywords.<\/p>\n\n\n\n<p id=\"block-7e341163-2013-46c1-b9ce-e584dea3ee0f\">It contains a function <strong>override<\/strong> <strong>func<\/strong> update(<strong>_<\/strong> currentTime: TimeInterval) which updates once per frame &#8211; it also keeps track of time via a built in game timer to make the game run smoothly.<\/p>\n\n\n\n<p id=\"block-1b246402-190f-442d-87dd-c7c95d9c7eab\">The next step is to alter the game code in GameScene.swift to build our game. We can pretty much use the same game code for both the iOS and MacOS game.<\/p>\n\n\n\n<p id=\"block-39fe2c79-2500-4764-8fb6-ea319fda1c6d\"><strong>Note:<\/strong> Gamescene.sks and Actions.sks are files that you can use to build your game without much code. A tutorial on using this is<a href=\"https:\/\/www.raywenderlich.com\/1514-introduction-to-the-sprite-kit-scene-editor\"> here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Apple iOS &amp; MacOS\/X The following will make the 2D Arcade game for both iOS (phone \/ iPad) and Mac OS\/X (Mac Desktop). We can make the app for both desktop and mobile together as the code will be very similar for both. The difference will be the sizes of the images. In Xcode, create &hellip; <a href=\"https:\/\/www.ruzzgames.com\/index.php\/2d-arcade-mac-ios-app\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">2D Arcade Mac \/ iOS App<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-950","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/pages\/950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/comments?post=950"}],"version-history":[{"count":2,"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/pages\/950\/revisions"}],"predecessor-version":[{"id":952,"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/pages\/950\/revisions\/952"}],"wp:attachment":[{"href":"https:\/\/www.ruzzgames.com\/index.php\/wp-json\/wp\/v2\/media?parent=950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}