NGUI 製作簡易揹包UI

阿新 • • 發佈：2019-01-01

前言

最近閒的時候，體驗了幾款比較火爆的手遊，其中個人認為做的比較好的一款是暗黑黎明。

正好自己的小遊戲，要做一個揹包的UI，就模仿下，暗黑黎明吧

先看一下暗黑黎明本身的揹包的UI

一個佔據螢幕整體的UI設計，左邊是人物裝備，右邊是揹包，最右邊是tabs，可以切換成不同的分類。

揹包欄裡面是一個一個小格子，是可以根據手指的滑動而上下滾動的。

恩，我要做的UI，也是簡單的實現上面的功能。

Scroll view

首先在NGUI 的UIRoot下，建立一個sprite來作為揹包的背景圖片，命名為beibao

在beibao下面，建立一個scroll view

上面掛有兩個指令碼，UIPanel，UIScroll view

在scroll view下建立Grid，並且在grid下，建立sprite作為揹包格子，並且新增collider元件和 Drag Scroll view指令碼。這樣就可以在格子上，滑動滑鼠來進行移動了，

建立一個格子後，按 ctrl+D，複製多個格子。修改grid指令碼引數，可以自動排列格子，這裡不得不說，NGUI很強大

到這裡，一個揹包面板就做好了，而且是可以滑動檢視更多哦！，下面來看看通過tab來切換不同面板

Tabs

這裡只是簡單的使用ngui現有的指令碼，如果想要了解更多，請自行研究

這樣就可以實現面板的切換了。最後看一下整體效果

恩，感覺和暗黑黎明沒法比啊哈哈~~~~~~~~

NGUI 製作簡易揹包UI

前言最近閒的時候，體驗了幾款比較火爆的手遊，其中個人認為做的比較好的一款是暗黑黎明。正好自己的小遊戲，要做一個揹包的UI，就模仿下，暗黑黎明吧先看一下暗黑黎明本身的揹包的UI 一個佔據螢幕整體的UI設計，左邊是人物裝備，右邊是揹包，最右邊是tab

用NGUI製作揹包系統

第一步：　　在場景中通過NGUI 建立了一個UIRoot節點第二步：在UIRoot下建立一個名為beibao的背景作為揹包的顯示面板，在其子節點建立一個Sprite紋理作為背景面板，儲存為預設體複製9個格子排好序，併為每個格子取名為cell，新增BoxColld

（4）qt5製作簡易計算器詳細步驟（ui介面）

網上很多資源都是純程式碼的，本文使用ui介面做（1）新建專案，一路預設“下一步”，完成建立（2）選擇3個Line Edit 1個Push Button 2個Label 佈局並且改名以及改變物件名稱（單擊右鍵）（3）Mainwindow.h中新增槽 privat

Day1-使用Html+css+JavaSrcipt製作簡易計算器

Day1-使用Html+css+JavaSrcipt製作簡易計算器第一步：需要製作前端介面使用表格和表單佈局 <div class="main"> <div class="math"> <table> <tr

使用LineRenderer製作簡易的寫字板

using System.Collections; using System.Collections.Generic; using UnityEngine; public class DrawLineScript&nbs

日記式之jQuery製作簡易選單（2018.12.7）

<html> <head> <meta charset="utf-8"/> <title>jQuery製作簡易選單</title> </head> <script src="js/jquery-

GUI，UGUI，NGUI三種編輯UI介面的外掛

出現順序：GUI，UGUI，NGUI的出現順序：GUI-->NGUI-->UGUI。 GUI：GUI是unity內建的，擁有大量的UI方面的類和方法。GUI用起來很繁瑣，因為沒有內建的按鈕之類的，所以所有的按鈕都要用程式碼實現，而且......不執行是無法看到U

使用opengl製作簡易貪吃蛇小遊戲

#include<iostream> #include<algorithm> #include<functional> #include<cstdlib> #include<cstdio> #include<g

HTML製作簡易百度首頁

前些天為了學習頁面佈局，做了一個簡易的百度首頁。做百度首頁的原因是因為它的佈局比較簡單，需要顧及的地方比較少，但是需要相關的知識點又基本上都能用上，對自己理解頁面佈局以及一些標籤（如float和margin）的用法有很大的幫助。仿做一個網頁之前需要分析該網頁的佈局，下圖是

用H5表單屬性製作簡易的登陸介面

今天學了H5新增的表單屬性，知道如何用新增的那些屬性（如form、placeholder）製作一個建議的登陸介面。首先，在form中用input寫一個文字框。關鍵程式碼如下： <form method="post"> 使用者名稱：<input typ

JavaScript——setTimeout()製作簡易計時器

不得不說，setTimeout()是一個非常神奇的東西，我們可以用它來掌控時間，從而達到意想不到的結果。這裡先看一下setTimeout()的定義。定義和用法 setTimeout() 方法用於在指定的毫秒數後呼叫函式或計算表示式。提示： 1000 毫秒=

JavaScript_製作簡易QQ聊天介面

題目：製作一個簡易聊天介面，當用戶在介面下方的文字框中輸入資訊後，點擊發送按鈕，文字框中的資訊傳送到介面中部的資訊顯示區域，同時資訊輸入文字框中的資訊被清空，等待下次資訊錄入。資訊從上往下一條條顯示。操作介面如下圖所示：題目分析： 1.使用者輸入資訊，需要文字框text； 2.確定輸

利用matlab guide製作簡易計算器

前言：當然了這個太簡單了，新手可以借鑑一下，舉一反三的話還可以新增一些功能或者簡潔一些。比如下拉框啊之類的而且呢，這個你弄明白了，所有運算有關的，輸入輸出有關的，都大致相同。實現過程先是一個個的新增。漫長的過程~~ 下面圖錯了，最右邊應該新增text而不是edit，我

製作簡易的LED閃爍測試工具

隨著可選擇的LED燈越來越多，選擇在客廳或工作場所最適合你的燈並不是一件容易的事情。LED燈具的發光質量取決於燈具的拓撲設計和關鍵部件的選擇。與交流線路有關的光閃爍頻率通常是線路頻率的兩倍(100Hz或120Hz)，大多數人不易察覺。但是在高強

chrome谷歌瀏覽器外掛製作簡易教程

1.在磁碟上建立一個目錄，用來放應用的程式碼和資源 2.在這個目錄中，建立一個文字檔案，命名為manifest.json，其內容為： { "manifest_version": 2, "name": "Getting started examp

製作簡易的個人主頁(程式碼筆記）

//html<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="description" content="This is a

unity3d學習筆記（八）--NGUI製作遊戲介面

本系列文章由Aimar_Johnny編寫，歡迎轉載，轉載請標明出處，謝謝。 http://blog.csdn.net/lzhq1982/article/details/12706199 有關NGUI的介紹我這裡就不多說了，由於unity3d自帶的介面繪製工具GUI效率低下

C#WinForm練習——製作簡易計算器

using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usi

【Unity3D】【NGUI】如何在UI上顯示3D模型

NGUI討論群：333417608 1、建立一個3D攝像機，渲染3D模型。（我為了方便就把模型放到了Camera的下面，你可以不這樣） 2、在2D裡面指定一個TopLeft和BottomRight，用來表示模型渲染到UI上面的區域。 3、在之前的3D攝像機上掛上UIVi

用jquery製作簡易日曆

html程式碼如下: div align="center" id="divAll"> <table id="tab" border="1" cellpadding="0" cellspacing="10"> <tr> <td date="一月

NGUI 製作簡易揹包UI

前言

Scroll view

Tabs

相關推薦