html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现 ... ...
程序员文章站
2022-04-23 18:06:06
...
了解上两篇的内容请点击:
html5游戏开发-零基础开发RPG游戏-开源讲座(一)
http://www.html5cn.org/article-1737-1.html
html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄
http://www.html5cn.org/article-1738-1.html
前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下
本次开发,更新了一下库件至1.3,请点击下面的链接,下载库件1.3版以上版本
http://code.google.com/p/legendforhtml5programming/downloads/list
地图的滚动
关于地图的滚动原理,可以参照下图
按照上图说明,实现地图滚动,只需要先把即将出现的地图(图中黄色部分)画上,然后滚动地图,待地图滚动完毕之后,将屏幕之外的部分(图中绿色部分)移除
首先要添加一个变量来控制地图是否滚动
复制代码
然后,在人物移动的时候,判断地图是否需要滚动
复制代码
在移动过程中,判断地图是否处于滚动状态,如果地图处于滚动,则滚动地图,否则移动人物
复制代码
最后,将地图的数组和地形扩大为大于屏幕大小
复制代码
为了实现地图滚动,修改添加地图的方法,根据参数来实现添加上面图片的黄色地图部分
复制代码
看一下效果如下
人物的对话
对话的实现,在点击控制按钮的方形按钮时添加,所以,先在鼠标抬起的时候,判断是否点击了方形按钮
复制代码
在完善addTalk()方法的时候,首先准备好对话的内容
复制代码
talk1,talk2中talk后面的数字,代表人物的编号,其中每个对话单位的img为人物的头像,name为人物的名称,msg为对话的内容
添加对话时的做法是,当点击方形按钮后,判断小鸣人前方是否有人,如果有人,则将这个人物的编号取出来,再从上面的数组中获取相应的对话内容,然后,将相应的内容显示到游戏屏幕上,具体实现代码如下
复制代码
效果看下图
游戏演示地址
http://fsanguo.comoj.com/html5/rpg3/index.html
之前其他地方也稍微做了修改,具体修改请看源代码,此次更新源代码,下载地址如下
http://legend-demo.googlecode.com/files/rpg3.zip
html5游戏开发-零基础开发RPG游戏-开源讲座(一)
http://www.html5cn.org/article-1737-1.html
html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄
http://www.html5cn.org/article-1738-1.html
前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下
本次开发,更新了一下库件至1.3,请点击下面的链接,下载库件1.3版以上版本
http://code.google.com/p/legendforhtml5programming/downloads/list
地图的滚动
关于地图的滚动原理,可以参照下图
按照上图说明,实现地图滚动,只需要先把即将出现的地图(图中黄色部分)画上,然后滚动地图,待地图滚动完毕之后,将屏幕之外的部分(图中绿色部分)移除
首先要添加一个变量来控制地图是否滚动
- //地图滚动
- var mapmove = false;
然后,在人物移动的时候,判断地图是否需要滚动
- /**
- * 地图是否滚动
- **/
- Character.prototype.checkMap = function (dir){
- var self = this;
- mapmove = false;
- //如果不是英雄,则地图不需要滚动
- if(!self.isHero)return;
-
- switch (dir){
- case UP:
- if(self.y + charaLayer.y> STEP)break;
- if(mapLayer.y >= 0)break;
- addMap(0,-1);
- mapmove = true;
- break;
- case LEFT:
- if(self.x + charaLayer.x > STEP)break;
- if(mapLayer.x >= 0)break;
- addMap(-1,0);
- mapmove = true;
- break;
- case RIGHT:
- if(self.x
- if(480 - mapLayer.x >= map[0].length*STEP)break;
- addMap(1,0);
- mapmove = true;
- break;
- case DOWN:
- if(self.y
- if(288 - mapLayer.y >= map.length*STEP)break;
- addMap(0,1);
- mapmove = true;
- break;
- }
- };
在移动过程中,判断地图是否处于滚动状态,如果地图处于滚动,则滚动地图,否则移动人物
- /**
- * 开始移动
- **/
- Character.prototype.onmove = function (){
- var self = this;
- //设定一个移动步长中的移动次数
- var ml_cnt = 4;
- //计算一次移动的长度
- var ml = STEP/ml_cnt;
- //根据移动方向,开始移动
- switch (self.direction){
- case UP:
- if(mapmove){
- mapLayer.y += ml;
- charaLayer.y += ml;
- }
- self.y -= ml;
- break;
- case LEFT:
- if(mapmove){
- mapLayer.x += ml;
- charaLayer.x += ml;
- }
- self.x -= ml;
- break;
- case RIGHT:
- if(mapmove){
- mapLayer.x -= ml;
- charaLayer.x -= ml;
- }
- self.x += ml;
- break;
- case DOWN:
- if(mapmove){
- mapLayer.y -= ml;
- charaLayer.y -= ml;
- }
- self.y += ml;
- break;
- }
- self.moveIndex++;
- //当移动次数等于设定的次数,开始判断是否继续移动
- if(self.moveIndex >= ml_cnt){
- //一个地图步长移动完成后,如果地图处于滚动状态,则移除多余地图块
- if(mapmove)delMap();
- self.moveIndex = 0;
- //如果已经松开移动键,或者前方为障碍物,则停止移动,否则继续移动
- if(!isKeyDown || !self.checkRoad()){
- self.move = false;
- return;
- }else if(self.direction != self.direction_next){
- self.direction = self.direction_next;
- self.anime.setAction(self.direction);
- }
- //地图是否滚动
- self.checkMap(self.direction);
- }
- };
最后,将地图的数组和地形扩大为大于屏幕大小
- //地图图片数组
- var map = [
- [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18,18,18],
- [18,18,18,17,17,17,17,17,17,17,17,17,55,55,17,17,18],
- [18,18,17,17,17,17,18,18,17,17,17,17,55,55,17,17,18],
- [18,17,17,17,18,18,18,18,18,17,17,55,55,17,17,17,18],
- [18,17,17,18,22,23,23,23,24,18,17,55,55,17,17,17,18],
- [18,17,17,18,25,28,26,79,27,18,55,55,17,17,17,17,18],
- [18,17,17,17,17,10,11,12,18,18,55,55,17,17,17,17,18],
- [18,18,17,17,10,16,16,16,11,55,55,17,17,17,17,17,18],
- [18,18,17,17,77,16,16,16,16,21,21,17,17,17,17,17,18],
- [18,18,17,17,77,16,16,16,16,55,55,17,17,17,17,17,18],
- [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18,18,18]
- ];
- //地图地形数组
- var mapdata = [
- [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
- [1,1,1,0,0,0,0,0,0,0,0,0,1,1,0,0,1],
- [1,1,0,0,0,0,1,1,0,0,0,0,1,1,0,0,1],
- [1,0,0,0,1,1,1,1,1,0,0,1,1,0,0,0,1],
- [1,0,0,1,1,1,1,1,1,1,0,1,1,0,0,0,1],
- [1,0,0,1,1,1,0,1,1,1,1,1,0,0,0,0,1],
- [1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,1],
- [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
- [1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
- [1,1,0,0,0,0,0,0,0,1,1,0,0,0,0,0,1],
- [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1]
- ];
为了实现地图滚动,修改添加地图的方法,根据参数来实现添加上面图片的黄色地图部分
- //添加地图
- function addMap(cx,cy){
- var i,j,index,indexX,indexY;
- var bitmapdata,bitmap;
- var mapX = mapLayer.x / STEP;
- var mapY = mapLayer.y / STEP;
- var mx = cx
- if(imageArray == null){
- //地图图片数据
- bitmapdata = new LBitmapData(imglist["map"]);
- //将地图图片拆分,得到拆分后的各个小图片的坐标数组
- imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);
- }
- mapLayer.removeAllChild();
- //在地图层上,画出15*10的小图片
- for(i=my;i
- for(j=mx;j
- //从地图数组中得到相应位置的图片坐标
- index = map[i-mapY][j-mapX];
- //小图片的竖坐标
- indexY = Math.floor(index /10);
- //小图片的横坐标
- indexX = index - indexY*10;
- //得到小图片
- bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);
- bitmap = new LBitmap(bitmapdata);
- //设置小图片的显示位置
- bitmap.x = j*STEP - mapLayer.x;
- bitmap.y = i*STEP - mapLayer.y;
- //将小图片显示到地图层
- mapLayer.addChild(bitmap);
- }
- }
- }
- //移除多余地图块
- function delMap(){
- var bitmap,i;
- for(i=0;i
;i++){
- bitmap = mapLayer.childList[i];
- if(bitmap.x + mapLayer.x = 480 ||
- bitmap.y + mapLayer.y = 288){
- mapLayer.removeChild(bitmap);
- i--;
- }
- }
- }
看一下效果如下
人物的对话
对话的实现,在点击控制按钮的方形按钮时添加,所以,先在鼠标抬起的时候,判断是否点击了方形按钮
- function onup(event){
- isKeyDown = false;
- if(event.offsetX >= ctrlLayer.x + 280 && event.offsetX
- if(event.offsetY >= ctrlLayer.y+40 && event.offsetY
- //对话
- addTalk();
- }
- }
- }
在完善addTalk()方法的时候,首先准备好对话的内容
- var talkScriptList = {
- "talk1":new Array(
- {img:"m",name:"鸣人",msg:"我是木叶村的鸣人,你是谁?"},
- {img:"n",name:"黑衣忍者甲",msg:"你就是鸣人?九尾还在你身体里吗?"}
- ),
- "talk2":new Array(
- {img:"n",name:"黑衣忍者乙",msg:"鸣人,听说忍者大战就要开始了。"},
- {img:"m",name:"鸣人",msg:"真的吗?一定要想想办法啊。"}
- )
- };
talk1,talk2中talk后面的数字,代表人物的编号,其中每个对话单位的img为人物的头像,name为人物的名称,msg为对话的内容
添加对话时的做法是,当点击方形按钮后,判断小鸣人前方是否有人,如果有人,则将这个人物的编号取出来,再从上面的数组中获取相应的对话内容,然后,将相应的内容显示到游戏屏幕上,具体实现代码如下
- //对话内容
- var talkScript;
- var talkScriptList = {
- "talk1":new Array(
- {img:"m",name:"鸣人",msg:"我是木叶村的鸣人,你是谁?"},
- {img:"n",name:"黑衣忍者甲",msg:"你就是鸣人?九尾还在你身体里吗?"}
- ),
- "talk2":new Array(
- {img:"n",name:"黑衣忍者乙",msg:"鸣人,听说忍者大战就要开始了。"},
- {img:"m",name:"鸣人",msg:"真的吗?一定要想想办法啊。"}
- )
- };
- //对话序号
- var talkIndex = 0;
- //对话中
- var talking = false;
- /**
- * 添加对话
- * */
- function addTalk(){
- //如果对话内容为空,则开始判断是否可以对话
- if(talkScript == null){
- var key,tx = player.x,ty = player.y;
- switch (player.direction){
- case UP:
- ty -= STEP;
- break;
- case LEFT:
- tx -= STEP;
- break;
- case RIGHT:
- tx += STEP;
- break;
- case DOWN:
- ty += STEP;
- break;
- }
- for(key in charaLayer.childList){
- //判断前面又没有npc,有则开始对话
- if(charaLayer.childList[key].x == tx && charaLayer.childList[key].y == ty){
- if(talkScriptList["talk"+charaLayer.childList[key].index]){
- talkScript = talkScriptList["talk"+charaLayer.childList[key].index];
- talkIndex = 0;
- }
- }
- }
- //如果前方没有npc,则返回
- if(talkScript == null)return;
- }
- //将对话层清空
- talkLayer.removeAllChild();
- //当对话开始,且按照顺序进行对话
- if(talkIndex
- //得到对话内容
- var talkObject = talkScript[talkIndex];
- //对话背景
- bitmapdata = new LBitmapData(imglist["talk"]);
- bitmap = new LBitmap(bitmapdata);
- bitmap.width = 330;
- bitmap.height = 70;
- bitmap.x = 100;
- bitmap.y = 20;
- bitmap.alpha = 0.7;
- talkLayer.addChild(bitmap);
- //对话头像
- bitmapdata = new LBitmapData(imglist[talkObject.img]);
- bitmap = new LBitmap(bitmapdata);
- bitmap.x = 0;
- bitmap.y = 0;
- talkLayer.addChild(bitmap);
- //对话人物名称
- var name = new LTextField();
- name.x = 110;
- name.y = 30;
- name.size = "14";
- name.color = "#FFFFFF";
- name.text = "[" + talkObject.name + "]";
- talkLayer.addChild(name);
- //对话内容
- var msg = new LTextField();
- msg.x = 110;
- msg.y = 55;
- msg.color = "#FFFFFF";
- msg.text = talkObject.msg;
- talkLayer.addChild(msg);
- //对话内容逐字显示
- msg.wind();
- talkLayer.x = 20;
- talkLayer.y = 50;
- talkIndex++;
- }else{
- //对话结束
- talkScript = null;
- }
- }
效果看下图
游戏演示地址
http://fsanguo.comoj.com/html5/rpg3/index.html
之前其他地方也稍微做了修改,具体修改请看源代码,此次更新源代码,下载地址如下
http://legend-demo.googlecode.com/files/rpg3.zip
本文转自个人博客:http://blog.csdn.net/lufy_legend
推荐阅读
-
html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化&地图跳转
-
html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现
-
html5游戏开发-零基础开发RPG游戏-开源讲座(一)
-
html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现 ... ...
-
html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现 ... ...
-
零基础开发RPG游戏开源讲座(四)-游戏脚本化&地图跳转
-
html5游戏开发-零基础开发RPG游戏-开源讲座(四)-游戏脚本化&地图跳转
-
html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄
-
零基础开发RPG游戏开源讲座(四)-游戏脚本化&地图跳转
-
html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄