2019-06-27 17:13:12 S_clifftop 阅读数 1619
  • 走入 Cocos Creator视频教程

    Cocos Creator游戏视频培训课程设计上,由一个简单的游戏,引入课程主体。先熟练开发流程,在熟练API,后熟练使用UI,理解碰撞和物理系统。循序渐进,课程中穿插很多小案例实践功能,压缩枯燥内容。

    1840 人正在学习 去看看 姜威

Cocos Creator 在 v2.0.9 提供了一套新的 API —— cc.tween。cc.tween 能够对对象的任意属性进行缓动,功能类似于 cc.Action(动作系统)。但是 cc.tween 会比 cc.Action 更加简洁易用,因为 cc.tween 提供了链式创建的方法,可以对任何对象进行操作,并且可以对对象的任意属性进行缓动。

但类型定义文件不完善~等官方修复不知道要什么时候,毕竟排期可能不是特别优先


问题及解决方法

为了支持Typescript以及高效开发,cocos有类型定义文件creator.d.ts,但是只有类的声明,所以直接用其中的方法tween(target?: any): Tween; 会报错,所以需要修改一下d.ts文件,或者新建一个d.ts从模块出导出该方法便可以使用

1、tween无法找到 :属性“tween”在类型“typeof cc”上不存在

  • 添加export function tween(target?: any): Tween;

2、调用to方法:An argument for ‘opts’ was not provided

  • 这个虽然会报错,但能运行,嫌提示烦可以改为可选参数建议类似的方法里面的参数除了必要的其余全都改为可选参数to(duration: number, props?: any, opts?: {progress: Function; easing: Function|string; }): Tween;

3、类型“{ easing: string; }”的参数不能赋给类型“{ progress: Function; easing: string | Function; }”的参数。 Property ‘progress’ is missing in type ‘{ easing: string; }’ but required in type ‘{ progress: Function; easing: string | Function; }’.

  • 和上面一样,报错,但能运行,建议使用type来列出所需要使用的参数,例如: type Ease="cubicOut" | "quintInOut"
  • 然后替换to(duration: number, props: any, opts: {progress: Function; easing: Function|Ease; }): Tween;

下面是creator.d.ts中修改后的Tween及其中的方法(直接复制替换完事):

	/** !#en
	Tween provide a simple and flexible way to create action.
	Tween's api is more flexible than cc.Action:
	 - Support creating an action sequence in chained api,
	 - Support animate any objects' any properties, not limited to node's properties.
	   By contrast, cc.Action needs to create a new action class to support new node property.
	 - Support working with cc.Action,
	 - Support easing and progress function.
	!#zh
	Tween 提供了一个简单灵活的方法来创建 action。
	相对于 Cocos 传统的 cc.Action,cc.Tween 在创建动画上要灵活非常多:
	 - 支持以链式结构的方式创建一个动画序列。
	 - 支持对任意对象的任意属性进行缓动,不再局限于节点上的属性,而 cc.Action 添加一个属性的支持时还需要添加一个新的 action 类型。
	 - 支持与 cc.Action 混用
	 - 支持设置 {{#crossLink "Easing"}}{{/crossLink}} 或者 progress 函数 */
	export class Tween {		
		/**
		!#en
		Insert an action or tween to this sequence
		!#zh
		插入一个 action 或者 tween 到队列中
		@param other other 
		*/
		then(other: Action|Tween): Tween;		
		/**
		!#en
		Set tween target
		!#zh
		设置 tween 的 target
		@param target target 
		*/
		target(target: any): Tween;		
		/**
		!#en
		Start this tween
		!#zh
		运行当前 tween 
		*/
		start(): Tween;		
		/**
		!#en
		Stop this tween
		!#zh
		停止当前 tween 
		*/
		stop(): Tween;		
		/**
		!#en
		Clone a tween
		!#zh
		克隆当前 tween
		@param target target 
		*/
		clone(target?: any): Tween;		
		/**
		!#en
		Add an action which calculate with absolute value
		!#zh
		添加一个对属性进行绝对值计算的 action
		@param duration duration
		@param props {scale: 2, position: cc.v3(100, 100, 100)}
		@param opts opts 
		*/
		to(duration: number, props?: any, opts?: tweenOpts): Tween;		
		/**
		!#en
		Add an action which calculate with relative value
		!#zh
		添加一个对属性进行相对值计算的 action
		@param duration duration
		@param props {scale: 2, position: cc.v3(100, 100, 100)}
		@param opts opts 
		*/
		by(duration: number, props?: any, opts?: tweenOpts): Tween;		
		/**
		!#en
		Directly set target properties
		!#zh
		直接设置 target 的属性
		@param props props 
		*/
		set(props: any): Tween;		
		/**
		!#en
		Add an delay action
		!#zh
		添加一个延时 action
		@param duration duration 
		*/
		delay(duration: number): Tween;		
		/**
		!#en
		Add an callback action
		!#zh
		添加一个回调 action
		@param callback callback 
		*/
		call(callback: Function): Tween;		
		/**
		!#en
		Add an hide action
		!#zh
		添加一个隐藏 action 
		*/
		hide(): Tween;		
		/**
		!#en
		Add an show action
		!#zh
		添加一个显示 action 
		*/
		show(): Tween;		
		/**
		!#en
		Add an removeSelf action
		!#zh
		添加一个移除自己 action 
		*/
		removeSelf(): Tween;		
		/**
		!#en
		Add an sequence action
		!#zh
		添加一个队列 action
		@param actions actions 
		*/
		sequence(actions: [Action|Tween]): Tween;		
		/**
		!#en
		Add an parallel action
		!#zh
		添加一个并行 action
		@param actions actions 
		*/
		parallel(actions: [Action|Tween]): Tween;		
		/**
		!#en
		Add an repeat action.
		This action will integrate before actions to a sequence action as their parameters.
		!#zh
		添加一个重复 action,这个 action 会将前一个动作作为他的参数。
		@param repeatTimes repeatTimes
		@param action action 
		*/
		repeat(repeatTimes: number, action?: Action|Tween): Tween;		
		/**
		!#en
		Add an repeat forever action
		This action will integrate before actions to a sequence action as their parameters.
		!#zh
		添加一个永久重复 action,这个 action 会将前一个动作作为他的参数。
		@param action action 
		*/
		repeatForever(action?: Action|Tween): Tween;		
		/**
		!#en
		Add an reverse time action.
		This action will integrate before actions to a sequence action as their parameters.
		!#zh
		添加一个倒置时间 action,这个 action 会将前一个动作作为他的参数。
		@param action action 
		*/
		reverseTime(action?: Action|Tween): Tween;		
		/**
		
		@param target the target to animate 
		*/
		tween(target?: any): Tween;	
	}	
	/** 
	 * 
	 *导出 tween方法 
	 * 
	 * */
	export  function tween(target?: any): Tween;

    type Ease = "linear" | "fade" |
        "quadIn" | "quadOut" | "quadInOut" | "quadOutIn" |
        "cubicIn" | "cubicOut" | "cubicInOut" | "cubicOutIn" |
        "quartIn" | "quartOut" | "quartInOut" | "quartOutIn" |
        "quintIn" | "quintOut" | "quintInOut" | "quintOutIn" |
        "sineIn" | "sineOut" | "sineInOut" | "sineOutIn" |
        "expoIn" | "expoOut" | "expoInOut" | "expoOutIn" |
        "circIn" | "circOut" | "circInOut" | "circOutIn" |
        "elasticIn" | "elasticOut" | "elasticInOut" | "elasticOutIn" |
        "backIn" | "backOut" | "backInOut" | "backOutIn" |
        "bounceIn" | "bounceOut" | "bounceInOut" | "bounceOutIn";

    type tweenOpts = {
        progress?: Function;
        easing?: Function | Ease;
    }

2019-08-30 16:31:11 weixin_43142073 阅读数 300
  • 走入 Cocos Creator视频教程

    Cocos Creator游戏视频培训课程设计上,由一个简单的游戏,引入课程主体。先熟练开发流程,在熟练API,后熟练使用UI,理解碰撞和物理系统。循序渐进,课程中穿插很多小案例实践功能,压缩枯燥内容。

    1840 人正在学习 去看看 姜威

cocos creator 实现手机震动的效果(最全说明)

之前在做creator时,需要打包调用安卓震动,看了许多其他博客的方法,虽然意思说明了但是东西不全,因此也花了不少时间。然后自己总结了套最全的傻瓜教程,有兴趣的可以看下。

1.将Cocos Creator项目打包发布形成build文件夹
用Android-studio打开如下目录(图中红色标记):
*/build/jsb-link/frameworks/runtime-src/proj.android-studio/app/src/org/cocos2dx/javascript/AppActivity.java
在这里插入图片描述

在AppActivity.java中导入类

import android.os.Vibrator;
import android.app.Service; 

在这里插入图片描述

2.在class AppActivity( )方法中添加静态成员和静态方法:

代码:

Public static Vibrator myVibrator;

// 获得系统的Vibrator实例
myVibrator = (Vibrator)getSystemService(Service.VIBRATOR_SERVICE);

Public static Void vibrator(int time){
            myVibrator.vibrator(time);// 参数为震动时间
};

在这里插入图片描述

3.最后在AndroidManifest.xml文件中添加权限(#不要忽略此步骤)

<uses-permission android:name="android.permission.VIBRATE"/>

在这里插入图片描述

4.在cocos creator脚本中添加震动方法(调用即可)

代码:

// 震动效果
vibrationEffect(){
    if (cc.sys.os === cc.sys.OS_IOS){
        //调用苹果的方法;
    }
    else if (cc.sys.os === cc.sys.OS_ANDROID) {
        jsb.reflection.callStaticMethod("org/cocos2dx/javascript/AppActivity", "vibrate", "(I)V", 3000);
    }
},

5.其他(此部分想更加了解cocos creator原生调用可以看下)
参数剖析:
参数一:“org/cocos2dx/javascript/AppActivity”:java中的包名(.换成/)+class文件名,就当是路径好了
参数二:“vibrate”:方法名(必须public static)
参数三:“ (I)V”:()内的是调用的java方法的参数类型,()外面的是返回值类型
【类型对应表:java类型int —I java类型float----F java类型boolean(布尔)-----Z java类型String-----L java/lang/String;】
参数四:是java方法需要传入的参数(可以多个,与参数三中()内的数量和类型一一对应)
参数签名说明: https://docs.cocos.com/creator/2.0/manual/zh/advanced-topics/java-reflection.html?h=java.
上面的调用
//根据指定的模式进行震动
//第一个参数:该数组中第一个元素是等待多长的时间才启动震动,
//之后将会是开启和关闭震动的持续时间,单位为毫秒
//第二个参数:重复震动时在pattern中的索引,如果设置为-1则表示不重复震动

    long[] patter = {1000, 10000, 1000, 10000};
    vibrator.vibrate(patter, -1);

间隔震动

public static void vibrateLong(){
    long[] patter = {1000, 1000, 500, 1000};
    myVibrator.vibrate(patter,-1);
}

creator调用方法

if (cc.sys.os === cc.sys.OS_ANDROID) {
    jsb.reflection.callStaticMethod("org/cocos2dx/javascript/AppActivity","vibrateLong","()V");
}
2019-04-10 22:39:15 yulin009 阅读数 388
  • 走入 Cocos Creator视频教程

    Cocos Creator游戏视频培训课程设计上,由一个简单的游戏,引入课程主体。先熟练开发流程,在熟练API,后熟练使用UI,理解碰撞和物理系统。循序渐进,课程中穿插很多小案例实践功能,压缩枯燥内容。

    1840 人正在学习 去看看 姜威

Cocos Creator note 2.0

1. Cocos Creator 是游戏引擎吗?

Cocos Creator 是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现(不需要学习一个新的引擎),以及能让你更快速开发游戏所需要的各种图形界面工具

2. 我使用 Cocos Creator 能开发面向哪些平台的游戏?

Cocos Creator 目前支持发布游戏到 Web、iOS、Android、各类"小游戏"、PC 客户端等平台,真正实现一次开发,全平台运行。

3. 下载安装地址

Cocos Creator 产品首页

4. 项目结构
ProjectName(项目文件夹)
├──assets
├──library
├──local
├──settings
├──temp
└──project.json
  • 资源文件夹(assets)
    assets 将会用来放置您游戏中所有本地资源、脚本和第三方库文件。只有在 assets 目录下的内容才能显示在 资源管理器 中。assets 中的每个文件在导入项目后都会生成一个相同名字的 .meta 文件,用于存储该文件作为资源导入后的信息和与其他资源的关联。一些第三方工具生成的工程或设计原文件,如 TexturePacker 的 .tps 文件,或 Photoshop 的 .psd 文件,可以选择放在 assets 外面来管理。

  • 资源库(library)
    library 是将 assets 中的资源导入后生成的,在这里文件的结构和资源的格式将被处理成最终游戏发布时需要的形式。如果您使用版本控制系统管理您的项目,这个文件夹是不需要进入版本控制的。

    当 library 丢失或损坏的时候,只要删除整个 library 文件夹再打开项目,就会重新生成资源库。

  • 本地设置(local)
    local 文件夹中包含该项目的本地设置,包括编辑器面板布局,窗口大小,位置等信息。您不需要关心这里的内容,只要按照您的习惯设置编辑器布局,这些就会自动保存在这个文件夹。一般 local 也不需要进入版本控制。

  • 项目设置(settings)
    settings 里保存项目相关的设置,如 构建发布 菜单里的包名、场景和平台选择等。这些设置需要和项目一起进行版本控制。

  • project.json
    project.json 文件和 assets 文件夹一起,作为验证 Cocos Creator 项目合法性的标志。只有包括了这两个内容的文件夹才能作为 Cocos Creator 项目打开。而 project.json 本身目前只用来规定当前使用的引擎类型和插件存储位置,不需要用户关心其内容。

    这个文件也应该纳入版本控制。

5. 编辑器界面介绍
  • 资源管理器
  • 层级管理器
  • 场景编辑器
  • 动画编辑器
  • 属性检查器
  • 控件库
  • 控制台
  • 设置
  • 项目设置
  • 主菜单
  • 工具栏
6. 推荐使用VS Code作为代码编辑器

并在settings.json文件里面添加如下代码:

"search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    "build/": true,
    "temp/": true,
    "library/": true,
    "**/*.anim": true
},
"files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true,
    "**/*.meta": true,
    "library/": true,
    "local/": true,
    "temp/": true
}

目的是设置文件显示和过滤

2018-02-02 17:20:56 auccy 阅读数 3771
  • 走入 Cocos Creator视频教程

    Cocos Creator游戏视频培训课程设计上,由一个简单的游戏,引入课程主体。先熟练开发流程,在熟练API,后熟练使用UI,理解碰撞和物理系统。循序渐进,课程中穿插很多小案例实践功能,压缩枯燥内容。

    1840 人正在学习 去看看 姜威
使用VS Code配合 Chrome与VS Code 插件:Debugger for Chrome 调试cocos creator项目的网页版时 出现访问失败的情况

这是因为通过
的操作生成出来的launch.json 文件的默认端口为8080

而通过Cocos Creator编辑器启动的网页访问的端口为7456(我的设备)
将launch.json里的端口配置成Cocos Creator可以成功访问的端口即可调试

调整之后运行
成功打印出调试信息
2018-06-14 14:39:54 jiuwanli666 阅读数 3064
  • 走入 Cocos Creator视频教程

    Cocos Creator游戏视频培训课程设计上,由一个简单的游戏,引入课程主体。先熟练开发流程,在熟练API,后熟练使用UI,理解碰撞和物理系统。循序渐进,课程中穿插很多小案例实践功能,压缩枯燥内容。

    1840 人正在学习 去看看 姜威

温馨提示:标准动画为24帧/秒;(即每秒播放画面24张)
1、创建节点(该节点必须有Sprite组件)
这里写图片描述
2、在1中创建的节点上添加动画组件,并创建动画保存动画
这里写图片描述
3、开始编辑动画
这里写图片描述
4、添加动画属性(添加图片)
这里写图片描述

这里写图片描述
5、播放动画

let anim = cc.find('Canvas/test');// 步骤1中创建的节点
anim = anim.getComponent(cc.Animation);// 获取节点中的动画组件
anim.play('test');// 播放动画
/* 该节点运动到某个位置
   cc.p(x,y),运动到父节点的x,y坐标处(此处要注意父节点的基准坐标参照点在哪里)
*/
let move = cc.moveTo(0.2,cc.p(0,-160));
anim.runAction(move);

温馨提示:更多方法请参考官方文档http://docs.cocos.com/creator/api/zh/classes/Animation.html

Cocos Creator 开篇

阅读数 611

没有更多推荐了,返回首页