本節書摘來自異步社群《ios和tvos 2d遊戲開發教程》一書中的第1章，第1.1節開始，作者 【美】raywenderlich.com教程開發組，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視
第1章 精靈
ios和tvos 2d遊戲開發教程
ray wenderlich撰寫
既然你已經知道了什麼是sprite kit以及為什麼要使用它，現在我們來自己嘗試一下。我們将要建構的第一款小遊戲叫做zombie conga，其完成後的樣子如圖1-1所示。
圖1-1
在zombie conga中，你負責扮演無憂無慮的、隻是想參加舞會的僵屍。好在，僵屍所占據的海邊小鎮有足夠多的小貓。你隻需要咬住這些小貓，它們就會加入到僵屍的舞隊中來。
不過要小心瘋狂的貓女士！這些身穿紅色的衣服的老太太，對于想要偷走她們心愛的小貓的任何人都會毫不客氣，并且會拼盡全力讓僵屍平靜下來——讓它們永久地平靜下來。
我們将在接下來的7章中建構這款遊戲。
第1章 精靈。你已經開始閱讀本章了。我們将開始給遊戲添加精靈，主要是一個背景以及僵屍。
第2章 手動移動。我們将讓僵屍跟随對螢幕的觸摸而移動，并且我們會在本章快速學習基本的2d向量數學。
第3章 動作。把小貓和瘋狂的貓女士添加到遊戲中，并且添加了基本的碰撞檢測和遊戲設定。
第4章 場景。我們将給遊戲添加一個主菜單，還添加了獲勝或失敗的畫面。
第5章 相機。我們将讓遊戲從左向右滾動，并且最終添加其自己的康茄舞隊。
第6章 标簽。我們将添加一個标簽來顯示僵屍的生命值，以及它所吃到的小貓的數目。
第7章 初識tvos。我們将讓zombie conga遊戲在tvos上運作，而這隻需要幾個簡單的步驟就可以做到。
讓我們開始開發這個遊戲吧！
1.1 開始
啟動xcode并且從主菜單中選擇filenewproject...。選擇iosapplicationgame模闆，并且點選next按鈕，如圖1-2所示。
圖1-2
在product name字段中輸入zombieconga，在language欄選擇swift，在game technology欄選擇spritekit，在devices欄選擇universal，然後點選next按鈕，如圖1-3所示。
圖1-3
選擇想要将工程儲存在硬碟上的什麼位置，并且點選create按鈕。此時，xcode将會生成一個簡單的sprite kit初始工程。
看一下所生成的sprite kit工程。在xcode的工具欄上，選擇iphone 6并點選play按鈕，如圖1-4所示。
在一個簡短的開始螢幕之後，可以看到一個标簽顯示“hello, world!”。當在該螢幕上點選的時候，會出現一個旋轉的飛船，如圖1-5所示。
在sprite kit中，有一個叫做場景的對象，它可以控制你的app的每一個“界面”。場景是sprite kit的skscene類的一個子類。
圖1-5
現在，這個app隻有一個單個的場景，就是gamescene。打開gamescene.swift，你将會看到顯示這個标簽和旋轉的飛船的代碼。了解這些代碼并不是很重要，我們打算完全删除它，并且一步一步地來建構自己的遊戲。
現在，删除gamescene.swift中的所有内容，并且用如下的代碼替代。
didmovetoview()是sprite kit在向你展示一個場景之前所調用的方法，這個方法是對場景的内容進行一些初始設定的好地方。在這裡，我們直接将背景顔色設定為黑色。
zombie conga設計為以橫向模式運作，是以，要為app進行這一設定。從工程導航器中選擇zombieconga工程，然後選擇zombieconga target。點選general标簽頁，并且確定隻有landscape left和landscape right選項選中，如圖1-6所示。
圖1-6
還需要進行一些修改。打開info.plist并找到supported interface orientations (ipad)條目。删除在這裡所看到的portrait (bottom home button)和portrait (top home button)條目，而隻保留橫向模式的相關選項，如圖1-7所示。
圖1-7
sprite kit模闆自動建立了一個名為gamescene.sks的檔案。可以使用xcode内建的場景編輯器來編輯這個檔案，以可視化地布局遊戲場景。請将這個場景編輯器當做是sprite kit的一個簡單的interface builder。
我們将在本書第7章中介紹場景編輯器，但是我們不會在zombie conga遊戲中用到它，因為對于這款遊戲來說，通過程式設計來建立精靈要更為容易和直接。
是以，按下control鍵并點選gamescene.sks，選擇delete，然後選擇move to trash。由于不再使用這個檔案了，還必須相應地修改模闆代碼。
打開gameviewcontroller.swift，并且用如下的内容替換它。
之前，視圖控制器從gamescene.sks加載場景，但是現在，它通過在gamescene上調用一個初始化程式來建立場景。
注意，當建立該場景的時候，通過直接編碼為2048×1536的大小，并且将縮放模式設定為aspectfill。現在，很适合介紹一下如何将這款遊戲設計為一個通用app。
1.1.1 通用app支援
注意
本小節是可選的内容，适合那些特别感興趣的讀者。如果你隻想要盡可能快地編寫代碼，可以跳到下一個小節閱讀。
我們在本書中的所有遊戲都是作為通用的app而設計的，這意味着它們在iphone和ipad上都能運作。
本書中的這款遊戲的場景已經設定為2048×1536，或者說是橫屏模式（和豎屏模式相反），其縮放模式設定為aspectfill。aspectfill讓sprite kit縮放場景的内容以填充整個螢幕，即便sprite kit在這麼做的時候可能需要裁切一部分内容。
這會導緻場景似乎顯示于ipad retina上，而ipad retina的分辨率是2048×1536，但是，在iphone上會進行縮放/裁剪以适應手機較小的螢幕以及不同的高寬比。
如下的幾個例子，展示了本書中的遊戲在不同的裝置上的橫屏模式顯示的樣子，包括從最小高寬比到最大的高寬比，如圖1-8所示。
圖1-8
ipad retina [4:3或1.33]：顯示很适合2048×1536的螢幕大小。
ipad non-retina [4:3或1.33]：aspectfill将把一個2048×1536的可見區域縮放到0.5，以适應1024×768的螢幕。
iphone 4s [3:2或1.5]：aspectfill将把一個2048×1536的可見區域縮放到0.47，以适應960×640的螢幕。
iphone 5 [16:9或1.77]：aspectfill将把一個2048×1152的可見區域縮放到0.56，以适應1136×640的螢幕。
iphone 6 [16:9或1.77]：aspectfill将把一個2048×1152的可見區域縮放到0.64，以适應1334×750的螢幕。
iphone 6 [16:9或1.77]：aspectfill将把一個2048×1152的可見區域縮放到0.93，以适應1920×1080的螢幕。
由于aspectfill會針對iphone從頂部和底部裁剪場景，我們把本書中的遊戲設定為擁有一個主要的“遊戲區域”，進而保證其在所有的裝置上都可見。基本上，遊戲将會在橫屏模式的頂部/底部或者豎屏模式的左邊/右邊擁有192個像素的邊距，你應該避免将基本内容放置到這個邊距之中。在本書稍後，我們将向你可視化地展示這一點。
注意，你隻需要為此指定一組美工圖檔就可以工作，圖檔适合于最大的螢幕尺寸2048×1536就可以了。在ipad retina之外的其他裝置上，這些圖檔将會縮小。
這種方法的缺點是，圖檔會比某些裝置實際所需的大小還要大，例如對于iphone 4s這樣的裝置，這會造成材質記憶體和空間的浪費。這種方法的優點是，遊戲在所有裝置上都顯示的更好且更容易顯示，并且能很好地工作。
這種方法的一個替代方案是，針對每種裝置和縮放比例來添加不同的圖像（例如，ipad@1x、ipad @2x、iphone@2x、iphone @3x），這要借助apple的強大的資源目錄來實作。然而，在編寫本書的時候，sprite kit并不能在所有情況下根據各種裝置和縮放從資源目錄加載正确的圖像，是以，我們現在仍然使用簡單的做法。
1.1.2 添加圖像
接下來，我們需要給工程添加遊戲圖像。
在xcode中，打開assets.xcassets，選擇spaceship條目并且按下删除鍵以删除它，遺憾的是，我們這個遊戲并不是關于太空僵屍的遊戲！現在，隻有appicon還保留着，如圖1-9所示。
圖1-9
選中appicon之後，從starterresourcesicons中将合适的圖示拖放到每一組之中，如圖1-10所示。
然後，将starterresourcesimages中的所有檔案拖放到左邊的邊欄中，如圖1-11所示。
通過将圖像包含到資源目錄中，xcode将會在背景建立材質圖冊以包含這些圖像，并且在遊戲中使用它們，這會自動地提高性能。
圖1-11
1.1.3 啟動界面
本小節是可選内容，因為它對遊戲的運作不會有任何的影響，這隻是為遊戲“錦上添花”。如果你想要直接進行編碼，可以跳到下一個小節閱讀。
讓遊戲邁上正軌之前，還有最後一件事情要做，就是配置啟動界面。
啟動界面是當你的app初次加載的時候，ios所顯示的内容，它通常會顯示幾秒鐘的時間。啟動界面使得玩家一開始就能夠快速對你的app有印象，當然，至少它不是黑色的螢幕。對于zombie conga來說，我們将顯示帶有遊戲名稱的一個啟動界面。
你的app實際上已經有了一個啟動界面。你之前啟動app的時候，可能已經注意到了有一個簡短的、空白的白色界面，那就是啟動界面。
在ios中，app有一個特殊的啟動界面檔案，它基本上就是一個故事闆，在這個工程中就是launchscreen. storyboard檔案；可以配置它進而在app加載的時候在螢幕上顯示一些内容。和隻是顯示一幅圖像的老辦法相比，這種方法的優點是，你可以使用auto layout來更精細地控制這個界面在不同的裝置上的樣子。
讓我們來嘗試一下。打開launchscreen.storyboard。将會看到如圖1-12所示的内容。
圖1-12
在右邊欄的object library中，拖動一個圖像視圖到視圖之中，并且重新調整其大小以填充整個區域，如圖1-13所示。
圖1-13
接下來，需要設定這個圖像視圖，以便它總是和其包含視圖具有相同的寬度和高度。要做到這一點，確定選中了圖像視圖，然後點選右下方的pin按鈕（它看上去就像是一架戰鬥機）。在add new constraints視窗中，點選4條紅色的線條，以便圖像視圖鎖定到每一個邊上。確定constrain to margins沒有選中，并且所有的值都設定為0，然後點選add 4 constraints按鈕，如圖1-14所示。
圖1-14
保持圖像視圖仍然是選中的，確定選擇了attributes檢視器，這是右邊的第4個标簽頁。将image設定為mainmenu，并且将view mode設定為aspect fill，如圖1-15所示。
圖1-15
再次編譯并運作app。這一次，你會看到簡短的zombie conga啟動界面，如圖1-16所示。
很快，接下來就是一個空白的、黑色界面，如圖1-17所示。
圖1-17
這看上去可能還不太像樣子，但是現在，有了一個起點，我們可以在此基礎上建構第一個sprite kit遊戲。
讓我們繼續下一個任務，這也可能是在制作遊戲的時候最重要和最常見的任務之一，即在螢幕上顯示圖像。