cocos2d-js的UI用cocoStudio结合开发笔记

最新推荐文章于 2019-07-23 10:30:24 发布
最新推荐文章于 2019-07-23 10:30:24 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： cocos2d-js学习笔记 文章标签： ui cocostudio 控件 cocos2d-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuweitiandian/article/details/46988933
版权
本文介绍了如何使用cocos2d-js与cocoStudio进行UI开发，包括通过ccs.load加载json文件、添加节点、获取控件、监听事件等步骤。详细阐述了对slider、button、TextField和checkbox等控件的事件处理方法。
摘要由CSDN通过智能技术生成
1、首先用ccs.load().node来加载json文件并加入节点。 
settingScene = ccs.load(res.setting_json).node;
 
 2、在当前层中加入改节点。 

 

 
 
this.addChild(settingScene);
 
 
 
 3、通过ccui.helper.seekWidgetByName(node,name)获得控件 

 

 
 
musicSlider = ccui.helper.seekWidgetByName(settingScene, "musicSlider");



                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  fonglezen
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
cocos2d-js-lite-game:如何创建 cocos2d-js (cocos2d-html5) 到智能手机游戏应用程序。适用于 iphone 和 android。如何使用 cocos2d-js lite 版本制作和使用智能手机应用程序游戏

				
			

			

				

					06-18
				

			

		

		

			
				
定制版本: 用你需要的特性定制你自己的Cocos2d-JS版本，你应该知道这些特性的含义来构建一个合适的版本。 您选择的所有功能都将包含在下载的引擎 js 文件中。 用法 用法已经在下载的包中进行了演示，可以看到在Hello...

			
		

	



                

              
                



	

		

			

				
					
Cocos2d-x实战：JS卷——Cocos2d-JS开发

				
			

			

				

					07-23
				

			

		

		

			
				
资源名称：Cocos2d-x实战：JS卷——Cocos2d-JS开发内容简介：本书是介绍Cocos2d-x游戏编程和开发技术书籍，介绍了使用Cocos2d-JS中核心类、瓦片地图、物理引擎、音乐音效、数据持久化、网络通信、性能优化、多平台...

			
		

	



                


  
              

                


	

		

			

				
					
在cocos2d-js-v3.0 中使用cocostudio UI的正确方式

				
			

			

				

					虫子猫的专栏
				

				

					07-15
					
					3637
					
				

			

		

		

			
				
用新版本cocos2d-js开发jsb，发现怎么也无法jiazai

			
		

	





	

		

			

				
					
【Cocos2d-Js基础教学（7）界面UI更新方法（会用到第三方类库）】

				
			

			

				

					weixin_34099526的博客
				

				

					05-18
					
					120
					
				

			

		

		

			
				
我们游戏中会遇到很多UI更新的时候，大部分时候我们会remove该节点，再重新绘制的方法来进行UI更新。
但是这种更新效率并不高，这里我推荐大家一个第三方的库，来通过注册更新的方式来对UI进行更新管理；
它的大名其实很响亮，就是“js-signals”。官方地址：http://www.bootcdn.cn/js-signals/
官方的定义是：Custom Event/Messaging s...

			
		

	



		

			
		



	

		

			

				
					
Cocos2d-JS中使用CocosStudio资源——帧动画（2）

				
			

			

				

					秋梦尘的博客
				

				

					05-10
					
					6256
					
				

			

		

		

			
				
在本篇博客中，我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的帧动画资源的例子，来简要介绍以下内容：利用ActionTimeLine进行动画切割，如何使用导出的帧动画资源。关于帧动画，由于内容繁杂。我们将分为两篇进行介绍。在上一篇中，我们已经做好了前期的资源准备和CocosCodeIDE中的简单处理，本篇将主要介绍资源的使用问题。

			
		

	





	

		

			

				
					
cocos2d-x-3rd-party-libs-src:cocos2d-x的依存关系

				
			

			

				

					05-28
				

			

		

		

			
				
 对于cocos2d-x开发人员和/或想要：  生成特定库的更新版本（例如：将libpng 1.6.2升级到1.6.14）  将cocos2d-x移植到其他平台（例如：将其移植到Android ARM64或Tizen等）  生成所有第3方库的DEBUG版本 笔记：  ...

			
		

	





	

		

			

				
					
Cocos2d-x实战++JS卷++Cocos2d-JS开发+PDF电子书下载+带书签目录+完整

				
			

			

				

					09-11
				

			

		

		

			
				
3. Cocos2d-JS开发：这里强调的是使用Cocos2d-x框架结合JavaScript语言进行开发的过程。由于Cocos2d-x支持多种编程语言（包括C++、JavaScript和Lua），Cocos2d-JS意味着开发者可以采用JavaScript来构建游戏项目。  4...

			
		

	





	

		

			

				
					
quick-cocos2d-x 学习系列之五 ccsloader学习

					
热门推荐

				
			

			

				

					badman250的专栏
				

				

					02-23
					
					3万+
					
				

			

		

		

			
				
quick-cocos2d-x 学习系列之五 ccsloader学习
 
         这个ccsloader 用例主要是实现将cocosdudio中导出的文件加入到游戏当中。想到后续能使用这么精彩的画面心里还是有点小激动的。让我们一起好好学习下这个神奇SAMPLE吧。
代码路径还是老地方：\quick\samples\ccsloader
 
1.  DEMO总体逻辑
程序从mai

			
		

	





	

		

			

				
					
cocos js 代码阅读笔记_170510（一）

				
			

			

				

					W_han__的博客
				

				

					05-10
					
					966
					
				

			

		

		

			
				
var create$ = function (sceneNode) {
    var func = function (query, rootNode) { 		//JQuery 语句，查找rootNode节点
        var arr = query.split(/\./g); 			//正则表达式，删除. 然后返回string。
        var t = rootNode ||

			
		

	





	

		

			

				
					
Cocos2d-JS中使用CocosStudio资源——登录界面

				
			

			

				

					秋梦尘的博客
				

				

					05-04
					
					8211
					
				

			

		

		

			
				
在本篇博客中，我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的登录界面资源的例子，来简要介绍以下内容：Button控件，TextField输入框，CheckBox等控件的使用。

			
		

	





	

		

			

				
					
【cocos2d-js系列问题】cocos2d-js 获取cocostudio中的UI组件

				
			

			

				

					Astor的专栏
				

				

					11-06
					
					1703
					
				

			

		

		

			
				
cocos2d-js 3.8.1
1、先加载cocostudio导出的json文件，代码如下所示：

var dong = ccs.load("res/Login.json");
//_login.setPosition(size.width/2,size.height/2);
//_login.setTag(10000);
this.addChild(dong.node);

			
		

	





	

		

			

				
					
Cocos2d-js笔记

				
			

			

				

					Lin&Yi的专栏
				

				

					12-24
					
					336
					
				

			

		

		

			
				
1、读取cocosStudio导出的json文件

var json = ccs.load("ccs-res/cocosui/UITest/UITest.json");
var widget = json.node;
this.addChild(widget, -1);
2、解析单独的一个控件


var btn = ccui.helper.seekWidgetByName(widge

			
		

	





	

		

			

				
					
cocos stuido的ccs文件加载成功 缺不显示图片的问题

				
			

			

				

					W_han__的博客
				

				

					10-05
					
					1954
					
				

			

		

		

			
				
出现这种问题，主要是ccs 文件的路径导致的问题


解决办法，将ccs文件放到res 目录下，不能再有耳机目录了，否则图片会显示不出来

			
		

	





	

		

			

				
					
Cocosd2d-js 使用Cocos Studio生成的Json界面文件

				
			

			

				

					在代码身上，用心去飞翔
				

				

					04-27
					
					1820
					
				

			

		

		

			
				
使用Cocos Studio生成界面文件，用Js进行加载，将生成Json文件和图片素材放在res目录下，比如登陆界面的LoginScene.json文件加载如下：
        var UIroot = ccs.load(game.resources["LoginScene_json"]).node;
        UIroot.setAnchorPoint(cc.p(0.5,0.5));

			
		

	





	

		

			

				
					
cocos2d-js实现自动绑定cocostudioUI控件与事件

				
			

			

				

					木木三的专栏
				

				

					07-23
					
					400
					
				

			

		

		

			
				
转载自：https://blog.csdn.net/6346289/article/details/42453479

一.起因

   在客户端游戏开发中最让人恶心的工作就是UI相关的东西，虽然有了像cocostudio这样的可视化工具，但界面中有大量需要由代码访问的控件的时候，需要写太多重复的代码例如：

//加载UI配置文件
  var root = ccs.uiReader...

			
		

	





	

		

			

				
					
cocos2d-js常用方法一览表

				
			

			

				

					寒风的技术博客
				

				

					03-31
					
					2777
					
				

			

		

		

			
				
精灵
var sprite = new cc.Sprite(res.);
sprite.setPosition(, );
this.addChild(sprite);
文本标签
var label = new cc.LabelTTF("", "", 30);
label.x = ;
label.y = ;
this.addChild(label);


数字标签
var atlas

			
		

	





	

		

			

				
					
Cocos2d-js02_实现UI流程和场景跳转

				
			

			

				

					Astor的专栏
				

				

					06-26
					
					1738
					
				

			

		

		

			
				
Cocos2d-js02_实现UI流程和场景跳转
1、菜单场景代码：
/**
 * Created by chaoge on 15/6/19.
 */
var MenuLayer = cc.Layer.extend({
    sprite:null,
    helloLabel:null,
    size:null,
    ctor:function () {
        this

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值