关于45度角地图中像素坐标和地图坐标之间的转换,网上有各种方法,其实坐标转换就是计算tite宽和tile高在像素坐标中的偏移值,本方法是针对 tite块原点坐标在菱形的顶点的位置的坐标转换,在45度角地图中,方块形状为菱形,你可以用flash cs工具或其他绘图工具很快的创建出这种菱形方块,按以下3个步骤就可以了:
1、 绘制一个任意大小的正方形;
2、 把这个正方形旋转45度;
3、 把旋转的正方形的高度缩放为原来的50%。
还有一点就是方块尺寸的问题,菱形方块的宽度是高度的2倍,其次方块尺寸比例应该是2:1。例如64像素X 32像素或100像素 X 50像素等,这样的尺寸刚好能使方块在地图铺设的时候很好地排列在屏幕上。
至于坐标间的转换其实大家看图就好理解了:
图中是一个以红色(0,0)位置为原点,红点每向地图坐标系M轴上移动一个单位,原点相对像素坐标系X中的偏移值为:方块宽度/2
菱形方块宽 var tileW :Number;
菱形方块高 var tileH :Number;
地图的行数 var row :int;
地图的列数 var col :int;
红色原点坐标(像素坐标系) var originP : Point;
那么红色的原点坐标在地图坐标系中的位置为:
originP.x = row * tileW /2;
originP.y = 0;
原点坐标出来了,那么其它点的坐标呢?
思路是先求出在地图坐标系下(M方向或N方向)每移动一个单位的像素坐标系X轴和像素坐标系Y轴的像素偏移值。
如红色原点移动到黑色点的位置:
M在像素坐标系X轴的偏移像素 = tileW /2;(向右偏移)
M在像素坐标系Y轴的偏移像素 = tileH /2; (向下偏移)
N在像素坐标系X轴的偏移像素 = - tileW /2;(向左偏移)
N在像素坐标系Y轴的偏移像素 = tileH /2; (向下偏移)
假如有个地图坐标点(M,N),那么它对应的像素坐标系的点为var p:Point
p.x = 原点坐标X + M在像素坐标系X轴的偏移像素 × M + N在像素坐标系X轴的偏移像素 × N = originP.x + tileW /2 × M + (-tileW/2) × N = originP.x + (M – N) × tileW/2;
p.y = 原点坐标Y + M在像素坐标系Y轴的偏移像素 × M + N在像素坐标系Y轴的偏移像素 × N = originP.y + tileH/2 × M + tileH/2 × N = originP.y + (M + N) × tileH/2;
原文地址:http://blog.sina.com.cn/s/blog_6807f539010103ce.html
相关推荐
但在45度斜角地图中,我们需要将这些坐标转换为新的角度。这涉及到数学中的向量旋转和平移,可以使用矩阵运算来实现。 2. **瓷砖图**:2D地图通常由一个个小的“瓷砖”组成,每个瓷砖代表地图上的一个单元格。在45...
标题中的“斜角tmx地图”指的是使用Tiled Map Editor(TMX)创建的一种地图格式,它支持45度角的斜向视角,通常用于2D游戏开发中,以实现类似3D效果的视觉表现。TMX是XML为基础的文件格式,用于存储地图的结构、图块...
《手机游戏45度斜角地图编辑器》是一款专为手机游戏设计的高效地图编辑工具,主要用于《仙剑奇侠传》以及《合金弹头》等游戏的地图制作。这款编辑器的强大之处在于它能帮助开发者和玩家轻松创建、编辑和管理45度斜角...
2. **坐标系统转换**:为了实现斜角效果,需要将地图的平面坐标转换为透视坐标。这通常涉及到二维到三维的转换,可能使用到线性代数中的矩阵变换。 3. **图形绘制**:GDI+提供的API会被用来绘制地图,包括基本形状...
通过45mapEditor,我们可以学习到如何处理45度视角下的坐标转换,理解地图编辑器的关键功能实现,以及如何优化性能和提升用户体验。这对于想要进入游戏开发或GIS领域的程序员来说,是一次宝贵的实践机会。
菱形的宽和高分别是w和h xstart与ystart代表第一张图块左上角贴图坐标 左上点X坐标 = xstart + 行编号 * w/2 左上点Y坐标 = ystart + 列编号 * h/2 地图宽 = (列数+行数)* w/2 地图高 = (列数+行数)* h/2
【45度斜视角地图编辑器(附源代码)】是一个专为开发45度视角游戏设计的地图编辑工具。在游戏开发中,45度斜视角通常用于创建类似经典RPG游戏的视觉体验,比如《仙剑奇侠传》或《勇者斗恶龙》系列。这种视角可以提供...
总结,利用Cocos2d-x的TiledMap功能创建斜45度地图场景,需要理解Tiled编辑器的使用、TMX文件格式、坐标转换以及在C++代码中的处理。通过这些步骤,开发者可以构建出丰富多样的游戏环境,为玩家提供更沉浸式的游戏...
使用说明: 1、菜单中的“新增”按钮可以增加一个新的地图工程,地图选择本地图片,可以设置宽度和高度以及每...用EB163 MapEditor 45度开源游戏地图编辑器创建新地图 http://www.eb163.com/club/thread-14363-1-1.html
斜角地图是使用菱形瓦片构建的,通过旋转45度,产生三维游戏世界的错觉。斜角地图曾经被广泛使用于早期电子游戏中,因为当时的硬件性能限制,无法运行三维游戏。现在,随着硬件性能的提高,斜角地图已经不再是推荐的...
使用Direct2D实现斜角效果 源码 功能介绍: Direct2D 是微软新的二维图形 API,可为二维几何图形、位图和文本提供高性能和高质量的呈现。Direct2D 支持硬件加速,无论是绘制速度还是绘制质量,Direct2D 都要比 GDI...
办公自动化Axure RP8.0 标准课程斜角矩形和菱形.mp4
通过设置四个边框不等宽,可以形成一个斜角,进一步调整边框颜色来达到菱形的效果。同时,背景颜色或图片可以用来增强视觉效果。 3. **CSS3转换(Transforms)**:这是实现翻转效果的核心。`transform`属性允许我们...
"纯CSS3制作倾斜45度封页角特效"是一个利用CSS3技术实现的独特设计,常用于增强图片或产品列表的展示效果,为用户界面增添了一种精致而专业的视觉感受。 这个特效主要通过CSS3的transform属性来实现,该属性允许...
此外,还可以通过调整边框的透明度(border-color的alpha值)实现渐变斜角。 ```css .navbar { border-top: 5px solid #f00; border-bottom: 5px solid transparent; } ``` 为了进一步完善斜角效果,可以使用伪...
本篇将深入探讨如何使用CSS来创建斜角导航条,这是一项既实用又具有创意的技术。 首先,我们从基础开始。CSS(层叠样式表)是一种用于描述HTML或XML(包括SVG、MathML等各种XML方言)元素样式的语言。在HTML中,...
1. **视角转换**:斜角视图需要将游戏世界的平面坐标转换为屏幕上的像素坐标。这涉及到矩阵运算,例如使用透视投影或轴对齐的投影矩阵,将3D空间的物体投射到2D屏幕上,从而营造出斜角视角。 2. **贴图技术**:...
《手机游戏j2me MapEditor地图编辑器详解》 手机游戏的发展日新月异,而作为游戏开发的重要一环,地图编辑器起着至关重要的作用。在Java 2 Micro Edition (J2ME) 平台上,MapEditor是一款专门用于创建和编辑手机...
图片列表样式,图片会从斜角方向滚动依次显示或者消失,效果不错,懒人之家推荐下载
【纯CSS3制作倾斜45度封页角特效特效代码】是一种常见的网页设计技术,它利用CSS3的新特性来实现视觉上的创新效果。在网页设计中,封页角特效可以为图片或产品列表添加一种独特且专业的外观,使得页面元素显得更加...