Posted on 2013-10-15 11:49
點點滴滴 閱讀(351)
評論(0) 編輯 收藏 引用 所屬分類:
02 編程語言
其效果如圖所示：
NGUI的ScrollView能夠實現鼠標或者手勢對圖標的滾動操作，現在在很多的游戲中都能夠見到。例如在《憤怒的小鳥》中的關卡選擇等等。實現圖標的滾動操作在NGUI中很容易實現，只要在Panel中加入一個UIDragPanelContents組件，再做些細節上的操作就可以了。在本教程中，我們將分三步來完成這個例子。第一步，創建窗口背景；第二步，創建和實現圖標滾動效果；第三步，實現一些小細節上的效果。
第一步，創建窗口
1. 選擇菜單上的NGUI->Create a new UI,出現UI Tool窗口，選擇Camera為Simple2D，然后點擊Create Your UI，創建原始的GUI對象結構，在此不給出截圖，節約點圖片。哈哈。2. 調整它的原始結構，把Anchor改名為Anchor-Center，為Anchor-Center添加一個空的子游戲對象，并命名為WindowRoot，并且reset一下，接著把panel改名為Panel-Window，并拖到WindowRoot下成為其子物體，成為如圖所示：
現在來完成Panel-Window的制作。創建一個空游戲對象，命名為Background，并成為Panel-Window的子對象，并reset一下。在其下使用Create a new widget對話框，創建一個Tiled Sprite件，其參數為Atlas：WoodenAtlas，Font：Arimo14，Template：TileSprite，Sprite：Honeycomb；大小X：770，Y：570；Color Tint為R：255，G：236，B：206，把剛才那個木質背景改名為background，如圖所示：
為它創建一個窗口邊框，使用Create a new Widget對話框創建一個Sliced Sprite元件，Atlas為WoodenAtlas，Font為Arimo14，Template為Sliced Sprite，Sprite為Glow-Outer，大小為X：
814，Y為614，Color Tint為黑色，其，Depth為-3，比background低一個數值。把該元件改名為Glow，如圖所示：
接下來制作窗口的上方Title。創建一個空的游戲對象，命名為Title，并成為WindowRoot的子對象，要記得reset一下。創建一個TiledSprite，參數為WoodenAtlas，Font為Arimo14，Template
為TitedSprite,Color Tint為淺灰色；并成為Title的子對象，并命名為background。
創建一個SlicedSprite，其Sprite參數為Glow-Inner，該元件命名為Glow，Color Tint為黑色，Depth為-1，調整它的大小和位置，使得其圍繞Title下的background的外圍；
創建一個SlicedSprite，Sprite為Glow-Inner，Color Tint為暗灰色，并命名為Shadow，調整大小和位置，使得它覆蓋Title下的background。
最后創建一個Label，參數為Font：Arimo20，Effect為OutLine，顏色為天藍色，這樣可以為它添加一個字體外框。其文本為Scroll View，最后的結果如圖所示：
創建一個Label，參數為Font：Arimo18，Line Width為720，Effect為Shadow，Shadow顏色為黑色，Color Tint為深棕黃色。其效果如圖所示：
創建圖標滾動背景。創建一個SlicedSprite，參數為Template為SlicedSprite，Sprite為Hightlight-Shadow，Color Tint為黑色，大小X為724，Y為266，并調整它的位置，并命名為Outline，如圖所示：
創建一個ScrollBar，參數為Template為ScrollBar，Background為Hightlight-Shadows，Foreground為Button，Direction為Horizontal。如圖所示：
這樣，就創建好了基本的窗口了。待續。。。。。