做一個類似Cut The Rote 的游戲(一)

先放最終效果圖:

剪斷

更新01/20/2017:由Kevin Colligan更新為iOS 10,Xcode 8和Swift 3。原文Tammy Coron發表,最近由Nick Lockwood更新。原文鏈接

Cut The Rope是一種受歡迎的物理驅動游戲,玩家通過剪切掛起糖果的繩索喂養一只名叫Om Nom的怪獸。在正確的時間和地點切斷繩索,Om Nom將獲得美味佳肴。

在對Om Nom充分尊重的情況下,游戲的真正主角是模擬物理學:繩索擺動,重力拉動,讓糖果按照您在現實生活中期望那樣下落。

您可以使用Apple的2D游戲框架SpriteKit的物理引擎構建類似的體驗。在本教程中,您將會做一個名為Snip The Vine的游戲。

注意:本教程假設您有一些SpriteKit的經驗。如果您是SpriteKit的新手,請查看我們的SpriteKit Swift初學者教程

入門

Snip The Vine,您可以將菠蘿喂給鱷魚。在開始之前,請下載啟動項目。在Xcode中打開項目,以便快速查看它的結構。

項目文件分割在多個文件夾中。在本教程中,您可以使用包含主代碼文件的Classes文件夾。隨便瀏覽其他文件夾,如下所示:

文件結構

設定常數

常數通過避免重復使用含義不明確的字符串或數字,使您的代碼更易于閱讀和維護。

打開Constants.swift并添加以下代碼:

struct ImageName  { 
  static  let Background = “Background” 
  static  let Ground = “Ground” 
  static  let Water = “Water” 
  static  let VineTexture = “VineTexture” 
  static  let VineHolder = “VineHolder” 
  static  let CrocMouthClosed = “CrocMouthClosed” 
  static  let CrocMouthOpen = “ CrocMouthOpen“ 
  static  let  CrocMask = ”CrocMask”
  static  let  Prize = “Pineapple” 
  static  let PrizeMask = “PineappleMask” 
  }
  
struct  SoundFile  {  
  static  let  BackgroundMusic = “CheeZeeJungle.caf” 
  static  let  Slice = “Slice.caf” 
  static  let Splash = “Splash.caf” 
  static  let NomNom = “NomNom.caf” 
  }

使用以上代碼,您定義了一些常量保存sprite圖像名稱和聲音文件名稱。

在下面添加以下內容:

struct  Layer  {
  static  let  Background: CGFloat = 0 
  static  let  Crocodile: CGFloat = 1 
  static  let  Vine: CGFloat = 1 
  static  let  Prize: CGFloat = 2 
  static  let  Foreground: CGFloat = 3 
  }

struct  PhysicsCategory  {
  static  let  Crocodile: UInt32 = 1 
  static  let  VineHolder: UInt32 = 2 
  static  let  Vine: UInt32 = 4 
  static  let  Prize: UInt32 = 8 
  }

上面的代碼聲明了兩個結構體:LayerPhysicsCategory,它們分別包含一些static CGFloatUInt32的屬性。當您將它們添加到場景中時,將使來指定精靈的zPosition和物理學屬性。

最后再添加一個struct

struct  GameConfiguration  {
  static  let  VineDataFile = “VineData.plist” 
  static  let CanCutMultipleVinesAtOnce = false 
  }

VineDataFile指定了葡萄藤所在位置文件的名稱。

CanCutMultipleVinesAtOnce允許通過簡單的方式修改游戲參數。怎樣的游戲決策會使游戲更有趣,這總是并不明確的。這樣的常數提供了一種簡單的開關方式,讓你可以稍后改變你的游戲。

現在,您可以開始向場景添加節點。

向場景添加背景Sprite

打開GameScene.swift并將以下內容添加到setUpScenery()

let background = SKSpriteNode(imageNamed: ImageName.Background)
background.anchorPoint = CGPoint(x: 0, y: 0)
background.position = CGPoint(x: 0, y: 0)
background.zPosition = Layer.Background
background.size = CGSize(width: size.width, height: size.height)
addChild(background)
    
let water = SKSpriteNode(imageNamed: ImageName.Water)
water.anchorPoint = CGPoint(x: 0, y: 0)
water.position = CGPoint(x: 0, y: 0) 
water.zPosition = Layer.Foreground
water.size = CGSize(width: size.width, height: size.height * 0.2139)
addChild(water)

setUpScenery()didMove()方法中被調用。在這個方法中,創建一些SKSpriteNode實例,并調用SKSpriteNode(imageNamed:)進行初始化。為了處理多個屏幕尺寸,您需要顯式設置背景圖像的大小。

您將節點的anchorPoint從默認值(0.5,0.5)更改為(0,0)。這意味著節點從原本的相對于中心定位變成了相對于左下角定位,這使您可以輕松地將backgroundwater與場景底部對齊。

注意:anchorPoint屬性使用單位坐標系,其中(0,0)表示圖像的左下角,(1,1)表示右上角。因為它的值總是從0到1,所以這些坐標與圖像尺寸和寬高比無關。

您還可以設置Sprite的zPosition,控制節點在屏幕上的繪制順序。

回想一下,在Constants.swift中,您指定了一些用于zPosition的值。這里使用其中的:Layer.BackgroundLayer.Foreground,確保背景總是落在另外的Sprite之后,前景將始終畫在最前面。

編譯并運行您的項目。如果您做的一切正確,您應該看到以下效果:

背景圖

下一篇文章將開始在項目中添加游戲的主角——鱷魚。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,156評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,401評論 3 415
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 176,069評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,873評論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,635評論 6 408
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,128評論 1 323
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,203評論 3 441
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,365評論 0 288
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,881評論 1 334
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,733評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,935評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,475評論 5 358
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,172評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,582評論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,821評論 1 282
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,595評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,908評論 2 372

推薦閱讀更多精彩內容