【quick-cocos2d-lua】 使用Cocos Studio制作界面并应用

怎么使用Cocos Studio制作界面：

 

1.打开Cocos Studio，选择UI Editor

2.打开后界面如下：

3.点击文件，新建项目，输入项目名称和项目路径。

点击确定之后，项目创建成功，可到该路径查看，NewUi.xml.ui为该工程，之后可通过cocos studio打开该项目，Resources用来放工程需要的图片资源，可将需要的图片一起放入该文件夹，也可通过studio编辑器导入。

点击确定之后，studio编辑器变为如下画面：

4.点击画布，更改界面大小为你的游戏的界面的大小

5.导入图片资源，如果已经放置到Resources文件夹下，则进行下一步。也可通过studio导入图片资源：

6.接下来就可以把UI控件放到画布上，进行布局和属性的设置：

例如：添加一个Button到画布上，选择Button控件，拖拽到画布上，或者右键添加。

然后给Button选择图片，将资源下面准备好的Button图片拖拽到属性窗口下的特性下面，Button有三种状态，可准备不同的图片

 

其他属性可自行调节，button需要勾上交互，默认是勾上的，其他在程序中需要有响应的UI控件这一栏也必须勾上。

7.最后导出项目（该项目文件才为程序调用），导出的文件放在Quick工程下的res文件夹下，就可以应用啦。

 

 

 

 

怎么应用Cocos Studio制作界面：

加载 CocoStudio 1.x 资源

示例：

 
 

   
   

    
    

   
   
   
   

    
    

     
     -- 加载UI界面导出的json（包括ExportJson）文件。
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	local ccsNode = cc.uiloader:
     
     load(
     
     "NewUi_9/NewUi_1.ExportJson")
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     self:addChild(ccsNode)
    
    
   
   
 
 

 
 

   
   

    
    

   
   
   
   

    
    

     
     ---- 加载导出的UI界面上的某个控件，例如button控件
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	local loginNode = cc.uiloader:seekNodeByPath(ccsNode, 
     
     "Panel_14/LoginButton")
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     	loginNode:onButtonClicked(
     
     function(event)
    
    
   
   

   
   

    
    

   
   
   
   

    
    
		
     
     print(
     
     "loginNode login button clicked")
    
    
   
   

   
   

    
    

   
   
   
   

    
    
	
     
     end)