《游戏脚本的设计与开发》-(RPG部分)3.1 RPG地图到底怎么做？ - CSDN博客
《游戏脚本的设计与开发》-(RPG部分)3.1 RPG地图到底怎么做？
话说好久没有更新博客了，其实这段时间主要是工作忙，没时间。那又是什么刺激了我呢，为什么又有时间了呢？原因有两个，第一个，前两天看到一款战棋网游《三国志を抱く》，这款游戏和我在家偷摸儿设想的游戏竟然出奇的相同，原来我一直想要做的事儿，在我还在抱怨没有时间的时候，已经被其他人做了，这着实让人感慨，也极其让人不爽。这也让我觉得，我再不做点儿什么的话，自己可能会遇到更不爽的事儿。有句话说的好，时间就像海绵里的水，挤一挤总是有的，当然时间也像？？，好了，当我没说。于是我从犄角旮旯里挤出来了点儿（除了从睡觉的时间挤还能从哪里挤啊...），跟各位在这里侃一侃大山。第二个，就是引擎1.8.5发布了，下周的某天会接着发布1.8.6，正好宣传一下。终于?嗦完了，下面开始干正事儿。由于战棋脚本部分写的比较早，用的是lufylegend1.7.7版，很多新功能，比如自定义事件，mvc框架等都还没有添加，所以打算抽时间把战棋部分重构一下。在重构这段时间，我就先跳过战棋部分，直接从下一个比较大的模块，RPG模块开始写了。我之前也写过一个短篇系列《零基础开发RPG游戏开源讲座》，介绍的也比较简单，这次我会更深入也更具体的介绍一下RPG游戏的开发过程。游戏嘛，首先得有画面吧，所以本篇还是先来研究一下地图到底怎么做。一张地图，可能是由一张大图组成的，如下也可能是由一些小图块儿组成，如下本次来研究一下如何开发一个两种情况都可用的地图系统。原理很简单，将大地图也看作小地图块儿就可以了，比如设定一个数组，里面装有一些小地图块儿。［ ［地图块1,地图块2,地图块3］, ［地图块4,地图块5,地图块6］］一张大地图的时候，就是一种特殊情况，如下［ ［地图块1］］当然，一张地图，不能只有图片，还要有地形。在《零基础开发RPG游戏开源讲座》里，每个小地图块和一个地形坐标是一一对应的，其实这不是必须的，比如上面的几张小图块儿图片用它们来拼接地图的话，就不需要和地形坐标一一对应了，也就是说图片只是用来显示的，和地形并无关联。如此，我们就可以设计下面一个地图文件{
width:1280
,height:720
[0,0,0......]
,[0,0,0......]
,pieceWidth:1280
,pieceHeight:720
[{img:&map-1&,rect:[0,0],path:&map-1.png&},{img:&map-2&,rect:[0,0],path:&map2.png&},......]
,[{img:&map-1&,rect:[0,0],path:&map-1.png&},{img:&map-2&,rect:[0,0],path:&map2.png&},......]
}其中，各个变量含义如下width：地图的有效宽度
height：地图的有效高度
data：地图的地形数组，结合地图的有效宽度和高度，就可以计算出，地形数组的一个单位的大小
pieceWidth：地图块儿的宽度
pieceHeight：地图块儿的高度
imgs：地图块儿数组有了这个定义，地图层的显示，我们就可以这么写MapView.prototype.mapLayerInit=function(){
var self =
//获取地图定义
var map = self.model.
for(var i=0;i&map.imgs.i++){
for(var j=0;j&map.imgs[i].j++){
var imgObj = map.imgs[i][j];
var bitmap = new LBitmap(new LBitmapData(LMvc.datalist[imgObj.img],imgObj.rect[0],imgObj.rect[1],map.pieceWidth,map.pieceHeight));
bitmap.x = j*map.pieceW
bitmap.y = i*map.pieceH
self.mapLayer.addChild(bitmap);
//地图点击事件
self.mapLayer.addEventListener(LMouseEvent.MOUSE_UP, self.controller.mapClick);
};代码解析：首先获取小地图块儿数组，循环二维数组，将所有小地图块儿添加到地图层的相应的位置上，这样就组成一张完整的地图了。注：此处当然还可以优化，本次只将实现，优化处理下次会介绍。地形部分，其实没有必要显示到页面上的，但是为了便于大家理解，我把地形以网格的形势显示到画面上，如下MapView.prototype.gridLayerInit=function(){
var self =
var map = self.model.
var grids = map.
var stepWidth = map.width/grids[0].
var stepHeight = map.height/grids.
self.controller.stepWidth = stepW
self.controller.stepHeight = stepH
self.gridLayer.graphics.add(function (){
var c = LGlobal.
c.beginPath();
c.strokeStyle = �&;
for(var i=1;i&grids.i++){
c.moveTo(0,stepHeight*i);
c.lineTo(map.width,stepHeight*i);
for(var i=1;i&grids[0].i++){
c.moveTo(stepWidth*i,0);
c.lineTo(stepWidth*i,map.height);
c.stroke();
c.beginPath();
c.fillStyle = &#FF0000&;
for(var i=0;i&grids.i++){
for(var j=0;j&grids[i].j++){
if(grids[i][j] == 0)
c.rect(stepWidth*j+stepWidth*0.25, stepHeight*i+stepHeight*0.25, stepWidth*0.5, stepHeight*0.5);
};代码解析：graphics.add函数是在lufylegend.js引擎中使用canvas原生的绘图处理，graphics的相关使用请看官方API文档。上面代码将地形以网格的形式画到了网格层上，并且当地形不可移动的时候，在网格层上加上了红色的矩形方框。这两部分的效果如下图RPG游戏怎么会没有角色上阵呢，下面我利用LAnimationTimeline来创建一个角色类Character，然后用它来新建一个角色添加到地图上。MapView.prototype.charaLayerInit=function(){
var self =
var map = self.model.
var grids = map.
var stepWidth = map.width/grids[0].
var stepHeight = map.height/grids.
var chara = new Character(LMvc.datalist[&hero&],stepWidth,stepHeight);
chara.setCoordinate(20*stepWidth,8*stepHeight);
self.charaLayer.addChild(chara);
self.hero =
};代码解析：Character类待会儿随代码下载。本次主要介绍地图相关的处理，所以上面只是简单创建了一个角色，后续扩展等后面再详细讲。加入角色后，效果如下接着当然要有寻路和移动了，我在《(战棋部分) 战场上的寻路和移动》里面提供了一个A*寻路的类LStarQuery，这里可以直接拿来用了。用法很简单，大家可以到前面的文章里看一下。在RPG游戏里，人物移动的时候，实际上是地图在移动，就是当人物移动的时候，同时改变地图层坐标，具体实现如下MapController.prototype.mapMove=function(){
var self =
var map = self.model.
//根据地图缩放比例，重新计算缩放后的地图大小
var w = map.width*self.view.baseLayer.scaleX;
var h = map.height*self.view.baseLayer.scaleY;
//根据地图缩放比例，重新计算地图的实际显示范围
var showW = LGlobal.width/self.view.baseLayer.scaleX;
var showH = LGlobal.height/self.view.baseLayer.scaleY;
if(w & LGlobal.width){
//移动人物层，保持角色的x始终处在地图中央
self.view.charaLayer.x
= showW*0.5 - self.view.hero.x;
if(self.view.charaLayer.x & 0){
self.view.charaLayer.x = 0;
}else if(self.view.charaLayer.x & showW - map.width){
self.view.charaLayer.x = showW - map.
self.view.charaLayer.x = 0;
if(h & LGlobal.height){
//移动人物层，保持角色的y始终处在地图中央
self.view.charaLayer.y
= showH*0.5 - self.view.hero.y;
if(self.view.charaLayer.y & 0){
self.view.charaLayer.y = 0;
}else if(self.view.charaLayer.y & showH - map.height){
self.view.charaLayer.y = showH - map.
self.view.charaLayer.y = 0;
//保持其他层的坐标和人物层一致
self.view.mapLayer.x = self.view.gridLayer.x = self.view.maskLayer.x = self.view.charaLayer.x;
self.view.mapLayer.y = self.view.gridLayer.y = self.view.maskLayer.y = self.view.charaLayer.y;
};代码解析：现在的游戏，手机是主流了，手机画面比较小，所以讲画面放大是很有用的一个功能，而画面放大后，可视范围就缩小了，所以我加入了缩放功能，以方便玩家切换，具体的实现方法大家一会儿下载代码自己看看吧。虽然还是半成品，最后的效果如下。只是为了测试功能，所以用的地图不一定合适，地形也是随便设置了几个遮挡点，大家将就这看一看吧。测试连接：代码下载地址：关于代码，lufylegend-1.8.5.min.js，lufylegend.ui-0.4.0.min.js，lufylegend.mvc.0.1.0.js等引擎相关文件，请自己下载lufylegend.js引擎获取。注意，单单就地图功能来说，这也只是一个半成品，比如地图的优化工作没有做，比如人物移动的时候直线速度和斜角速度是不一样的，这些留着下次解决了，为什么要下次？这年头，不分开几次讲，怎么赚回头率啊？欢迎大家继续关注。《游戏脚本的设计与开发》系列文章目录本章就讲到这里，欢迎继续关注我的博客转载请注明：
本文已收录于以下专栏：
相关文章推荐
先占个坑，有空写文章，时间长了，忘了写什么了，国庆快到了，我是多想立即给zhugu
地图跳转，顾名思义，就是从一张地图跳转到另一张地图（这不是废话嘛），体现在游戏程序中，就是当人物走到了某一个坐标区域，或者在游戏中触发了某事件之后，游戏程序将当前地图和地图上的所有东西清除，简单说就是...
http://blog.csdn.net/lufy_legend/article/details/
话说好久没有更新博客了，其实这段时间主要是工作忙，没时间。那又是什...
做一款像素游戏项目，需要读取TMX文件中的阻挡区域，生成box2d的fixture，来做阻挡  使用cocos2dx版本: 2.2.2
1.在tmx文件中创建一个&Physics&的...
项目里面需要加载一个很大的地图，目测最少是的分辨率。
        先不考虑什么引擎最大支持多大的图啊，大图加载效率啊等等这些问题，光是4k x 4k的分辨率，ARGB8888...
给定A, B两个整数，不使用除法和取模运算，求A/B的商和余数。
1．   最基本的算法是，从小到大遍历：
for (i = 2 to A -1)
         if (i * B &...
K-means聚类算法是一种非层次聚类算法，在最小误差的基础上将数据划分了特定的类，类间利用距离作为相似度指标，两个向量之间的距离越小，其相似度就越高。程序读取全国省市经纬度坐标，然后根据经纬度坐标进...
本人最近在研究Radon变换，在查阅了各种资料之后在此写下个人的理解，希望与各位牛牛进行交流共同进步，也使得理解更加深刻些。
Radon变换的本质是将原来的函数做了一个空间转换，即，将原来的XY平...
Matlab绘图强大的绘图功能是Matlab的特点之一，Matlab提供了一系列的绘图函数，用户不需要过多的考虑绘图的细节，只需要给出一些基本参数就能得到所需图形，这类函数称为高层绘图函数。此外，Ma...
由于csdn贴图不方便，并且不能上传附件，我把原文上传到了资源空间CT图像重建技术
计算机层析成像(Computed Tomography，CT)是通过对物体进行不同角度的射线投影测量而...
他的最新文章
讲师：王禹华
讲师：宋宝华
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)相关资源：
《热血战队》生化模式幻想曲
传奇最经典网页版，多人团战跨服竞技玩法冰火战场，十年最经典游戏，英雄合击，3D特效绚丽，赶紧注册试玩一下，
人类：操控着各种特种兵武器 火*** 带榴弹的步***(榴弹自行拾取) 可以双发的散弹(双发威力是单发威力的一倍 双发消耗**X2) 带透视的狙击(可以看到隐身的铁血和异型) 弹夹海量的轻(后坐力小 **多 威力小)近战的时候按ALT键可以击退敌人
开场随机出现1个萨姆公爵和1个妮?女王
公爵用格林+自带+裁决+手雷有5000血，被生化抓会掉血
女王用毁灭+自带手***+刀子+手雷也有5000血被生化抓会掉血
有士气：杀一个生化+25%士气，最高200%，
生化有怒气值，满了可以使用自爆技能，被炸得人被感染为生化
当人类被抓的只剩下8分之一时，
可变为公爵或女王，用上述武器和血量，会被抓死
人类还保留的击杀升级
750血，三格血，一格250，只有没被打掉完全一格血可以回满 打掉一格就只剩下两格 必须拾取药包回血 路上有药包和弹药包补充
获胜条件，到达某个地方后胜利 中途击杀铁血或异型有分数加成 途中人类全体同时死亡则输 人类数量：8 死亡后可复活一次 复活之后必须要队友解救才能活动
铁血：操控各种高科技的外星武器 肩炮(远距离武器)地雷(放置型陷阱) 鱼叉 飞盘(中距离武器) 钢爪(近战武器) 隐身(遇水和攻击或被攻击显形)热成像的眼镜 中距离隔空跳跃 飞扑 用来扑到人类或者异型 1000血 五格 地雷和肩炮需要能量 飞盘和鱼叉有数量限制 鱼叉最多带一支 飞盘两个 同样路上可以补充各种武器和血包
获胜条件 杀掉全部异型 途中杀掉人类有分数加成 但若人类在异型全体死亡前全体阵亡或铁血同时全部阵亡 则铁血输 铁血数量：3 死亡后可以复活一次 不需要队友解救即可活动
异型：原始的猎杀技能 快速跑技能(平常速度是人类和铁血的两倍，快速跑是人类和人类的四倍速度 有时间限制)在黑暗中隐身 可以看到铁血的隐身和隔墙看到近距离的人类或铁血 可以攀爬墙壁 600血 一格血 只要没被打死在一个地方休息一段时间就可以回满血 飞扑技能 用来扑到铁血或人类 可以携带寄生虫 扑到铁血或人类后释放寄生虫寄生 被寄生者立即没一格血 若不挣扎就一击必杀 可以秒杀一格血的人类和铁血 被寄生的铁血或人类就会变成异型
获胜条件：击杀所有人类 中途击杀铁血有分数加成 若全部异型同时死亡则输 异型数量：7 死亡后可复活两次 复活后不需要队友解救即可活动
《热血战队》相关文章
(阅读:203)
(阅读:134)
(阅读:1763)
(阅读:1329)
(阅读:423)
(阅读:372)
(阅读:289)
(阅读:353)
近日，游戏圈最高人气的UP主敖厂长微博发布了一组图片，盛赞参与极限游戏开发的少年们：“有想法、有内涵“，还表示自己”生不逢时”。而微博提及的“游戏极限开发“，指的是腾讯NEXT IDEA高校游戏创意制作大赛系列活动之一，72小时游戏制作夏令营现场。现场来自全国各地的数十名大学生分为不同小组，在72小时内进行封闭式头脑风暴和游戏开发，最终制作出一款可玩的游戏DEMO并展示。
??7月25日，《饭局的诱惑》节目官方正版授权、腾讯首款狼人杀APP《饭局狼人杀》全量上线，所有玩家都可前往微信、手Q、应用宝、腾讯视频及各大应用商店下载。和朋友异地连麦，随时开局，相爱相杀就在《饭局狼人杀》。更值得期待的是，7月26日至28日期间，还有马东携众葩们在游戏里上演陪玩活动，和喜爱的明星一起偶遇吧！《饭局狼人杀》开饭了！腾讯合作版今日上线腾讯代理《饭局狼人杀》 7.25开饭了7月12 ...
扫描二维码