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