cocos中,setPosition就是设置一个sprite的锚点在父级元素的坐标 默认锚点是sprite矩形的中点 可以用getBoundingBox返回一个sprite所占矩形范围.范围用Rect表示,其基于父级元素的坐标系. Rect的四个成员是x,y,width,height:分别表示左下角顶点的位置,以及长宽 来自为知笔记(Wiz)…

坐标系详解 Cocos2d-x坐标系和OpenGL坐标系相同,都是起源于笛卡尔坐标系.原点为屏幕左下角,x向右,y向上. 世界坐标系(World Coordinate) VS 本地坐标系(Node Local) 世界坐标系也叫做绝对坐标系,本地坐标系也叫相对坐标系,是和节点相关联的坐标系.每个节点都有独立的坐标系,当节点移动或改变方向时,和该节点关联的坐标系将随之移动或改变方向.我们通过Node的setPosition设定元素的位置使用的是相对与其父节点的本地坐标系而非世界坐标系.最后在绘制屏幕…

Cocos引擎开发者指南 英文原版:http://www.cocos2d-x.org/docs/programmers-guide/1/ 中午翻译:http://www.cocos.com/doc/tutorial/show?id=2047 https://github.com/chukong/programmers-guide-samples 一.什么是Cocos2d-x Cocos2d-x创始于2010年,它是一个开源跨平台的游戏引擎.它包含了很多强大的特性可以让游戏开发者轻松的创建出伟大的…

看了很多朋友问怎么用一个3D物体做一个按钮,而且网上好像还真比较难找到答案, 今天翻了一下cocos源码发现Ray 已经封装了intersects函数,那么剩下的工作其实很简单了, 从屏幕的一个point 转化为 一条射线, 然后从一个3D物体拿到碰撞盒后调用intersects 就可以了. : void HelloWorld::onEnter(){ Scene::onEnter(); //添加一只3D的乌龟在场景, 作为一个按钮 auto orc = cocos2d::Sprite3D::cr…

前面的话 本文将简要介绍 Cocos Creator 中的碰撞系统,Cocos Creator 内置了一个简单易用的碰撞检测系统,支持圆形.矩形以及多边形相互间的碰撞检测 编辑碰撞组件 当添加了一个碰撞组件后,可以通过点击 inspector 中的 editing 来开启碰撞组件的编辑 [多边形] 如果编辑的是多边形碰撞组件,会出现如下图所示的多边形编辑区域,区域中的这些点是可以拖动的,拖动的结果会反映到多边形碰撞组件的 points 属性中 当鼠标移动到两点连成的线段上时,鼠标指针会变成添加样…

前面的话 本文将详细介绍 cocos 场景制作流程 节点和组件 Cocos Creator 的工作流程是以组件式开发为核心的,组件式架构也称作组件-实体系统,简单的说,就是以组合而非继承的方式进行实体的构建 在 Cocos Creator 中,节点(Node)是承载组件的实体,通过将具有各种功能的组件(Component)挂载到节点上,来让节点具有各式各样的表现和功能 要最快速的获得一个具有特定功能的节点,可以通过层级管理器左上角的创建节点按钮 以创建一个最简单的 Sprite(精灵)节点为例,…

前面的话 Cocos Creator 是一个完整的游戏开发解决方案,包括了 cocos2d-x 引擎的 JavaScript 实现,以及快速开发游戏所需要的各种图形界面工具.Cocos Creator 的编辑器完全为引擎定制打造,包含从设计.开发.预览.调试到发布的整个工作流所需的全功能,该编辑器提供面向设计和开发的两种工作流,提供简单顺畅的分工合作方式.Cocos Creator 目前支持发布游戏到 Web.Android 和 iOS,真正实现一次开发,全平台运行.Cocos Creator…

1.简介 节点(cc.Node)是渲染的必要组成部分.所有需要在游戏场景中显示的内容都必须是节点或者依附于节点之上.节点负责控制显示内容的位置.大小.旋转.缩放.颜色等信息. 2.节点属性 1: name: 获取节点的名字 2: active: 设置节点的可见性; 3: position: 相对坐标,参照物是父亲节点; 4: rotation: 旋转,顺时针为正, 数学逆时针为正; 5: scale: 缩放; 6: anchor: 锚点, 左下角(0, 0), 右上角(1, 1) 可以超过这个范…

1.场景树 Cocos Creator是由一个一个的游戏场景组成,场景是一个树形结构,场景由 有各种层级关系的节点(下一节有具有介绍)组成: 如创建一个HelloWorld的默认项目NewProject中,并在其中创建了一个UI渲染节点-Button,更改名为newBtn: 具体HelloWorld场景的场景树表现为下图所示 2.节点 2.1.1 创建节点----在层级管理器窗口中鼠标单击右键即可创建节点,或者按如下图进行点击创建节点按钮 单击鼠标右键后会显示三项: a)创建空节点:点击即可创建…

Cocos Creator编辑器界面主要窗口包含如下: * 资源管理器窗口 * 场景编辑器窗口 * 层级管理器窗口 * 属性检查器窗口 * 上方功能按钮 * 偏好设置 * 串口输出 * 预览和构建 1.资源管理器窗口 资源管理器是Cocos Creator编辑器访问和管理项目资源的窗口.在游戏制作中,场景.图片.声音.视频.脚本(代码)和动画等都是资源,均在这里进行展示与操作.资源管理器中的成员与项目asset文件夹下的文件和文件夹逐一对应. 界面预览 界面主要分为创建按钮(或在资源管理器窗口内…

精灵是2D游戏中最重要的元素,可以用来构成游戏中的元素,如人物,建筑等,用Sprite类表示,他将一张纹理的一部分或者全部矩形区域绘制到屏幕上.我们可以使用精灵表来减少OpenGL ES 绘制的次数,可以使用Sprite来播放动画,也可以设置Sprite的颜色,与场景中其他元素的混合模式等.另外一些复杂的元素,如地图,粒子系统,字体等,都是基于Sprite构建的.通过指定一张纹理和该纹理上的一个区域,就可以创建一个Sprite对象. Sprite类定义了几个重载方法以方便的创建Sprite对象.…

在CCNode的类中,有一个得到 一个节点坐标系转换父亲坐标系的一个矩阵,节点内坐标乘以这个矩阵,就可以转换为在节点父节点中的坐标,方法名为: Mat4& Node::getNodeToParentTransform() 现在简单分析一下转换原理: /* 得到节点坐标系转换到父亲的坐标系的 矩阵 某个点(在本地也就是节点坐标) 乘以这个矩阵,就得到自己在父亲节点下的坐标,嵌套坐标 举例子:LayerA 添加 LayerB,B的原点坐标也就是左下角坐标为10,10,也就是这一点在自身坐标下为0,0…

理论部分 Node类继承自Ref类,是cocos框架中基础底层的一个封装类,与画面渲染相关的类一般都是继承自该类,例如Scene,Layer,Sprite,Sprite3D,Label,SpriteBatchNode,MenuItem,ClippingNode,DrawNode,ParticleBatchNode, ParticleSystem等都是继承自Node类. 代码部分 父子节点关系API virtual void addChild (Node *child)添加一个子节点到容器内,z-…

第一章 JavaScript 快速入门 1.1 变量 在 JavaScript 中,我们像这样声明一个变量: var a; 保留字 var 之后紧跟着的,就是一个变量名,接下来我们可以为变量赋值: var a = 12; 在阅读其他人的 JavaScript 代码时,你也会看到下面这样的变量声明: a = 12; 如果你在浏览器控制台中尝试,会发现 JavaScript 在面对省略 var 时的变量声明并不会报错,但在 Cocos Creator 项目脚本中,声明变量时的 var 是不能省略的,…

本文的cocos creator版本为v1.9.01.color赋值cc.Label组件并没有颜色相关的属性,但是Node有color的属性. //如果4个参数,在ios下有问题let rgb = [13,225,122]; node.color = new cc.Color(...rgb); 下面是错误的写法: node.color="rgba(13,225,122,1)" node.color="#ff00000" 2.坐标系子节点的位置属性(position)…

预览效果 具体内容 ■ 这一期,主要讲解主页中间人物效果的实现.也就是,在下方列表选择不同人物,上方显示不同的人物,播放不同的效果,即下图的效果实现,此部分也是采用预制 Prefab 进行实现. 英雄Hero预制组成 ■ 英雄预制 Hero 主要四部分组成:旋转的光.大小变化的光球.英雄本身.英雄的武器.这四部分,都会根据英雄的不同等级,动态的更换对应的纹理即可,游戏过程中,使用的动画,无须变化. ■ 使用到的几个精灵,都需要根据不同等级,进行纹理的更换,于是就封装了一个通用的方法,传入精灵节点…

用 shader + mesh 立个 flag 吧! 文章底部获取完整代码! 效果预览 使用方法 创建一个空节点 添加用户脚本组件 mesh-texture-flag 添加图片 修改对应属性 实现原理 概括来说就是创建 mesh 网格模型,通过顶点着色器对顶点坐标不断的修改,达到飘动的效果.关于 mesh 的介绍,可以参考上一篇文章. 确定顶点坐标 为了让顶点着色器里有多个顶点可以改变位置,需要把一个形状分割成多个方形(三角形).分割数量越大,效果越精细,但需要消耗更多的性能消耗.下图是分割成两…

使用setFlippedX后,又改变锚点为1.此时代码中坐标需要相对于cocos studio 中增加它本身的width,因为(0.5,0.5)是相对于自己中点的翻转,不变坐标.而(1,0.5)是相对于自己最右边的翻转,会改变坐标(例:最右边向右平移一个自己的width.注:即时之后setContentSize,也只需要平移一个自己的width.)…

[MenuItem("CONTEXT/RectTransform/Auto")] public static void AutoRectAnior() { Debug.Log("自适应锚点"); //获得当前设置UI RectTransform rect = Selection.activeGameObject.GetComponent<RectTransform>(); //获取其父级 RectTransform parent = rect.paren…

前段时间Cocos2d-x更新了一个Cocos引擎,这是一个集合源码,IDE,Studio这一家老小的整合包,我们可以使用这个Cocos引擎来创建我们的项目. 在Cocos2d-x被整合到Cocos引擎之前,我们可以不那么方便地在我们创建的工程里调试Cocos2d-x的代码,当我们使用了整合后的Cocos引擎,调试Cocos2d-x的代码就变得更加,非常不方便了! 使用Cocos2d-x创建的项目,在最先的版本必须是在Cocos2d-x引擎的目录下,放到其他的位置需要进行各种麻烦的设置,诸如头文…

科普 Cocos Creator是触控最新一代游戏工具链的名称.如果不太清楚的,可以先看一些新闻.   新编辑器Cocos Creator发布: 对不起我来晚了! http://ol.tgbus.com/news/cyxw/201601/13772206.shtml   2016新年致辞信——Cocos引擎创始人王哲 http://www.pcpop.com/view/1/1669/1669613.shtml?r=11115552   触控推出新编辑器Cocos Creator等四个引擎商业化新…

以下是在cocos2dx-3.10.win7.Cocos Code IDE1.2下假定你已经配置好了cocos2dx的环境.1.修改源代码步骤(1)在Cocos/Cocos2d-x/cocos2d-x-3.10/extensions/assets-manager/中修改了源代码AssetsManagerEx.hAssetsManagerEx.cppManifest.hManifest.cpp(2)在Cocos/Cocos2d-x/cocos2d-x-3.10/cocos/scripting/lu…

一直知道cocos是做游戏的,想学习一下,结果去官网一看就懵逼了.Cocos Creator,Cocos2d-x,cocos studio,Cocos2d-js,Cocos2d-x-lua,那一种才是我要的? 1.cocos studio 可以看出cocos Studio是偏向于做界面 动画的部分. 2.cocos creater 这是Bs结构的编译器.说明:目前这个编译器编译出来的游戏只能放到服务器上,本地不能运行(需要提供外部访问功能). 3.cocos2d 用来写客户端代码. 环境搭建 参…

转载自:http://cn.cocos2d-x.org/tutorial/show?id=1621 从Samples中找到CoinFlip文件夹,复制其中的 res 和 script 文件夹覆盖新建工程中的 res 和 script文件. 用player运行,游戏可正常打开. 打开main.lua function __G__TRACKBACK__(errorMessage) print("----------------------------------------") print…

今天在做angularJS项目过程中,遇见了一个需求,在一个页面中有多个表格,每个表格都有对应的分页,点击顶部对应的模块,可以定位到每个表格模块具体的位置. 页面如下所示: 在angular中,为了使url地址访问的时候更加方便,我们使用了html5mode方式,改变了url默认的hash样式,对html5mode详细了解请查看为什么angularjs使用ui-router时要使用html5Mode? 这时,如果我们使用锚点的方法就会存在一个问题,当我们点击顶部的tab部分是, 页面的url就回…

概念 <a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接.但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件.用id属性指向任何元素.如果没有<a>元素没有href属性的话,可以作为原本链接位置的占位符,常用于home链接 [注意]任何文档流内容都可以被嵌套,只要不是交互内容类别(如按钮.链接等) 属性 href href属性表示地址,共包括以下3种: 1.链接地址 <a href="http…

在普通的html网页中,我们可以通过在url后边添加  #elementid 的方式,将页面显示定位到某个元素,也就是锚点. 但是在angularjs应用的网页中,页面路由的写法是 #route/route   锚点的写法会被当做一个页面路由解析过去,达不到定位的目的. angular提供一个$anchorScroll  用来做锚点的功能. 用法如下: $scope.goto = function (id) { $location.hash(id); $anchorScroll(); } 进入页…

只做实现..完全没考虑性能优化.所以我实现了以后特别卡. 第一个是在通讯录右边的索引条上进行滑动,滑动到相应字母就跳转到相应字母的锚点上. 思路:监听touchmove事件,获取clientX和clientY,传入到elementFromPoint,然后获取到元素以后执行click()即可. 这里会有个问题,就是如果你的页面中有遮罩层这一类的顶层元素的话,请将其pointer-events:none,就算这个元素的display:none;也没用,实践出真知.可以去试下. index为索引div…

平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有“小尾巴”. 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/37.htm HTML文件代码: <!DOCTYPE html> <html> <head> <meta charset=…

24. 解决链接锚点的生硬问题 $('.nav .btn[href*=#],.icon2,.icon3').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length &am…