Cocos2d-JS中使用CocosStudio资源——序

Cocos2d官网上对于Cocos2d-JS和CocosStudio的教程有很多,但是对于如何将二者连接起来的教程却很少,至于如何在Cocos2d-JS中使用从CocosStudio导出的资源方面的教程就更少得可怜。也应博友的要求,我最近会写一个系列的教程,都是关于如何在Cocos2d-JS中使用从CocosStudio导出的资源方面的,希望大家关注。在这篇博客中,我会简单介绍一下学习的准备工作。我们会从简单的按钮,输入框开始,一直到帧动画,地图等的使用。如果你准备好了,那就跟我一起来吧。

一、环境准备

为了防止由于环境不同导致的麻烦,在这里,我很有必要说一下我的环境,如下:

(1) Cocos2d-JS引擎版本:V3.3

(2) Cocos版本:V2.1.5 For Win

(3) Cocos Code IDE版本:V1.2.0 For Win(64bit)

如果你还没有配置好环境,希望你能够和我保持一致,避免不必要的麻烦。如果你已经配置好了,在你遇到麻烦的时候,也希望你能够提出来,我们一起讨论,共同解决。

二、资源准备

本系列教程,将主要围绕官网推荐的CocosStudio案例进行学习。所以,你首先需要下载我们需要学习的素材,下载地址,可以去Cocos中的示例中去下载,如下:

PS:本系列教程中,将不详细包含CocosStudio的使用,Cocos2d-JS的使用。如果想学习这两部分内容的朋友,请去官网查看相应的文档和教程。

时间: 2024-12-15 07:12:24

Cocos2d-JS中使用CocosStudio资源——序的相关文章

Cocos2d-JS中使用CocosStudio资源——关卡选择界面

在本篇博客中,我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的关卡选择界面资源的例子,来简要介绍以下内容:Button控件,Text控件,PageView控件,即翻页容器的使用. 一.CocosStudio准备 第一步:从官网下载相应的示例,LevelSelection.效果图如下: 第二步:修改其中的一些控件的名称,方便寻找获取,如: 由于官网给的例子中的控件名字有的较复杂,所以可以按照自己的想法进行修改. 第三步:发布资源.注意发布设置中应该将数据格式改为JSON格式

Cocos2d-JS中使用CocosStudio资源——帧动画(1)

在本篇博客中,我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的帧动画资源的例子,来简要介绍以下内容:利用ActionTimeLine进行动画切割,如何使用导出的帧动画资源.关于帧动画,由于内容繁杂.我们将分为两篇进行介绍.本篇将主要介绍资源的准备工作,下一篇将主要介绍资源的使用问题. 不得不说: 按照原来的进度安排,帧动画和骨骼动画我准备最后介绍.但是,看到好多朋友非常期待动画的讲解,于是就修改了一下计划.其实,关于帧动画,前几天就大体研究明白了,这几天一直围绕着一个"坑

Cocos2d-JS中使用CocosStudio资源——设置界面

在本篇博客中,我们将通过一个在Cocos2d-JS中使用从CocosStudio导出的设置界面资源的例子,来简要介绍以下内容:Slider控件的使用. 一.CocosStudio准备 第一步:从官网下载相应的示例,setting.效果图如下: 第二步:修改其中的一些控件的名称,方便寻找获取,如: 将Music那个滑动条的控件名字改为musicSlider,从而方便查找. 类似的修改还可以有:Continue按钮,Sound滑动条等. 第三步:发布资源.注意发布设置中应该将数据格式改为JSON格式

Cocos2d-JS中使用CocosStudio资源——帧动画(2)

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

Cocos2d-JS中使用CocosStudio资源——ListView和ScrollView

在本篇博客中,我们将简要分析一下ListView和ScrollView之间的关系,如何正确使用两个控件进行设计,目前CocosStudio对两个控件的支持状况等. 一.ListView和ScrollView的一些思考 1. 两者联系: 首先,我们要知道ListView是继承自ScrollView的,也就是说,ListView在ScrollView的基础上,对一些细节功能进行了细化.ScrollView有的方法,ListView都有,而ListView有的,ScrollView未必有. 官方的JS

cocos2d JS 中的数组拼接与排序

1 var arrA = [];//创建三个局部变量的新数组 2 var arrB = []; 3 var arrC = []; 4 var newCards = this.MyMahjong;//创建一个新的局部变量等于一个全局变量的数组:并把里面的内容依次拆开再全部拼接 5 for(var t=0;t<newCards.length;t++){ 6 var char = newCards[t].charAt(0); 7 if(char == "a"){ 8 arrA.push

cocos2d js ClippingNode 制作标题闪亮特效

1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似的效果. 顺便给我公司的游戏打下广告.https://itunes.apple.com/cn/app/kuang-zhan-san-guo/id691116157? mt=8 2.效果原理 很easy.就是一张白色两边羽化的图片在标题上从左往右移动.可是普通的移动会穿帮.我们须要以标题作为模板来截取白色的图片

Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 用 Spring MVC 开发应用程序,对于初学者有一个很头疼的问题,那就是程序数据都已经查询出来了,但界面样式仍然十分丑陋,加载不了 css,js,图片等资源文件.当你在浏览器上直接输入某个css文件的路径时,直接得到404错误,而路径肯定没有错,其原因就在于在web.xml 中配置了类似如下的 spring servlet: 程序代码 <servlet>    <servlet-name&g

SpringMVC中css,js,图片等静态资源被拦截的解决办法

一.静态资源的存放路径 css,js,图片等静态资源存放在项目的路径必须为 二.html.jsp导入静态资源文件 html.jsp页面中的导入静态资源文件: js: css: 图片: 二.web.xml和SpringMVC配置文件中的配置 方法一: web.xml中的配置: SpringMVC配置文件中的配置: 方法二: web.xml中的配置: 与之对应的SpringMVC配置文件中不用特别配置 方法三: web.xml中的配置: 或者 与之对应的SpringMVC配置文件中不用再添加特殊配置