Cocos-2d 坐标系及其坐标转换

anchor point 究竟是怎么回事? 之所以造成不容易理解的是因为我们平时看待一个图片是 以图片的中心点 这一个维度来决定图片的位置的。而在cocos2d中决定一个 图片的位置是由两个维度 一个是 position 也就是图片的中心点 另外一个是anchor point。只要我们搞清楚他们的关系,自然就迎刃而解。

他们的关系是这样的:

actualPosition.x = position.x + width*(0.5 - anchor_point.x); acturalPosition.y = position.y + height*(0.5 - anchor_point.y)

actualPosition 是sprite实际上在屏幕显示的位置, poistion是 程序设置的, achor_point也是程序设置的。

具体看下面的例子一:

[html] view plaincopy

  1. CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
  2. sprite.position=ccp(0,0);
  3. sprite.anchorPoint=ccp(0,0);
  4. [self addChild:sprite];

具体效果如下:

根据上面的公式: 假设精灵的width = height = 10.

actualPosition.x = 0 + 10*(0.5 - 0) = 5; actualPosition.y  = 0 + 10*(0.5 - 0) = 5; 

(5, 5) 这个结果正是现在图片的在屏幕上的实际位置。

例子 二:

[html] view plaincopy

  1. CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
  2. sprite.position=ccp(0,0);
  3. sprite.anchorPoint=ccp(-1,-1);
  4. [self addChild:sprite];

具体效果如下:

根据上面的公式: 假设精灵的width = height = 10.

actualPosition.x = 0 + 10*(0.5 - (-1)) = 15; actualPosition.y  = 0 + 10*(0.5 - (-1)) = 15; 

(15, 15) 这个结果正是现在图片的在屏幕上的实际位置。

例子三

[html] view plaincopy

  1. CCSprite *sprite = [CCSprite spritewithFile:@"blackSquare.png"];
  2. sprite.anchorPoint=ccp(1,1);
  3. sprite.position=ccp(sprite.contentSize.width , sprite.contentSize.height);
  4. [self addChild:sprite];

根据上面的公式: 假设精灵的width = height = 10.

actualPosition.x = 10 + 10*(0.5 - (1)) = 5; actualPosition.y  = 10 + 10*(0.5 - (1)) = 5; 

(5, 5) 这个结果正是现在图片的在屏幕上的实际位置。

Cocos-2d 坐标系及其坐标转换

时间: 2024-10-24 16:58:58

Cocos-2d 坐标系及其坐标转换的相关文章

C#WPF 如何绘制几何图形 图示教程 绘制sin曲线 正弦 绘制2D坐标系 有图有代码

C#WPF 如何绘制几何图形? 怎么绘制坐标系? 这离不开Path(System.Windows.Shapes)和StreamGeometry(System.Windows.Media)类. 一.建立WPF工程 二.添加代码 MainWindow.xaml 中代码 <Window x:Class="WPFDrawingTraning.MainWindow"         xmlns="<a target=_blank href="http://sche

[OpenGL]OpenGL坐标系及坐标转换

OpenGL通过相机模拟.可以实现计算机图形学中最基本的三维变换,即几何变换(模型变换-视图变换(两者合称几何变换)).投影变换.裁剪变换.视口变换等,同时,OpenGL还实现了矩阵堆栈等.理解掌握了有关坐标变换的内容,就算真正走进了精彩地三维世界. 坐标系统 世界坐标系:在现实世界中,所有的物体都具有三维特征,但计算机本身只能处理数字,显示二维的图形,将三维物体及二维数据联系在一起的唯一纽带就是坐标.为了使被显示的三维物体数字化,要在被显示的物体所在的空间中定义一个坐标系.这个坐标系的长度单位

kivy学习之路--坐标系和坐标转换函数

参考kivy文档796页,kivy大多数控件默认使用绝对坐标系,即window坐标系,原点位于屏幕window左下角,所有控件的坐标都是相对屏幕左下角的绝对坐标. RelativeLayout使用的是相对坐标系,即relative 坐标系,如果控件树中存在RelativeLayout,那么隶属于该布局的控件的坐标原点是该布局的左下角,而不是屏幕左下角.如果存在多个RelativeLayout,那么控件以最靠近它的RelativeLayout类型的父控件的左下角为坐标原点.如果控件自身也是Rela

iPhone cocos 2D新手笔记二

设置颜色 1:最简单的,[objSprite setColor:ccc3(r,g,b)]; 2:简单的渐变,要使用CCFadeIn [objSprite setColor:ccc3(r,g,b)]; [objSprite setPosition:ccp(w,h)]; [objSprite setOpacity:0.0f]; [objSprite runAction:[CCFadeIn actionWithDuration:2.0f]]; 3.动态渐变的颜色 CCGradientLayer *gr

iPhone cocos 2D新手笔记一

1.从文件中创建一个精灵: CCSprite s = [CCSprite spriteWithFile:@"pic.png"]; [s setPosition:ccp(20,20)];//注意,这是笛卡尔坐标,从左下角作为起点 s.anchorPoint = ccp(0.5f,0);//anchorPoint可以理解为一张白纸的固定点 [s.setScale:1.5f]; [self.addChild:s z:2 tag:"demo"]; 2.精灵帧,载入Sprit

Cocos Creator 中 _worldMatrix 到底是什么(上)

Cocos Creator 中 _worldMatrix 到底是什么(上) 1. (矩阵)Matrix是什么,有什么用 (矩阵)Matrix一个神奇的存在?在开发过程中对里边各项值的含义是不是抓耳挠腮,百思不得其解?今天我们就来庖丁解牛,拨开它的神秘面纱.由于内容较多,关于Cocos Creator 中的_worldMatrix会分为三篇文章完成.最终形成一个完整的demo 首先我们先看看在Cocos Creator编辑器中,对应图形的变化都有那些属性,如下图 红框的地方分别是位移.旋转.缩放.

Cocos开发中性能优化工具介绍之Visual Studio内存泄漏检测工具——Visual Leak Detector

那么在Windows下有什么好的内存泄漏检测工具呢?微软提供Visual Studio开发工具本身没有什么太好的内存泄漏检测功能,我们可以使用第三方工具Visual Leak Detector(以下简称vld). vld工具是VC++环境下一款小巧易用.免费开源的内存泄漏检测工具,vld可以显示导致内存泄漏的完整内存分配调用堆栈.vld的检测报告能够对每个内存泄漏点提供完整的堆栈跟踪,并且包含其源文件及行号信息. 安装过程是,先在到地址http://vld.codeplex.com/下载vld安

QLGame 2d Engine SpriteBatch类创建

GitHub地址:https://github.com/wsgzxl/QLGame2dEngine 今天说五个问题: 1.前面说到的 颜色不对的问题,是因为FreeImage读取出来的数据格式与OpenGL显示需要的顺序不一致,所以有些颜色不对,已经在TextureManager类TextureManager::FIBitmap2GLBitmap方法进行了处理! 2.对PNG透明图片的渲染采用的是用 glEnable(GL_BLEND); glBlendFunc(GL_SRC_ALPHA,GL_

地图坐标转换 -- 火星坐标与GPS坐标

第一次处理地理位置的数据的人,没什么经验,往往掉入很多坑浪费不少时间.我也是刚刚从坑里爬出来.这篇博文主要是把入门GPS轨迹分析的经验总结一下,以方便大家少走些弯路. (1)可视化 GPS 路径 刚拿到一堆GPS轨迹数据,想看看它长什么样?于是先想办法把它们可视化出来.有很多地图的API可以用,如果不是想搞演示,只是为了快速随便看一眼的话,推荐用百度的在线示例API  http://developer.baidu.com/map/jsdemo.htm#c1_3  里面有比较详细的例子,很丰富的操