html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现

原创 2011年12月23日 01:45:05

前两篇,RPG的开发已经实现了添加地图和添加游戏人物,本篇来实现地图的卷轴滚动和人物对话的实现,效果如下



想要了解前两篇内容,请电击下面的链接

html5游戏开发-零基础开发RPG游戏-开源讲座(一)

http://blog.csdn.net/lufy_legend/article/details/7063316


html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄

http://blog.csdn.net/lufy_legend/article/details/7076064




地图的滚动

关于地图的滚动原理,可以参照下图

按照上图说明,实现地图滚动,只需要先把即将出现的地图(中黄色部分)画上,然后滚动地图,待地图滚动完毕之后,将屏幕之外的部分(图中绿色部分)移除

首先要添加一个变量来控制地图是否滚动

//地图滚动
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 < 480 - 2*STEP)break;
			if(480 - mapLayer.x >= map[0].length*STEP)break;
			addMap(1,0);
			mapmove = true;
			break;
		case DOWN:
			if(self.y < 288 - 2*STEP)break;
			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<0?-1:0,my = cy<0?-1:0;
	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<9 +Math.abs(cy) && i-mapY < map.length;i++){
		for(j=mx;j<15 +Math.abs(cx)&& j-mapX < map[0].length;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<mapLayer.childList.length;i++){
		bitmap = mapLayer.childList[i];
		if(bitmap.x + mapLayer.x < 0 || bitmap.x + mapLayer.x >= 480 || 
				bitmap.y + mapLayer.y < 0 || bitmap.y + mapLayer.y >= 288){
			mapLayer.removeChild(bitmap);
			i--;
		}
	}
}

看一下效果如下



人物的对话

对话的实现,在点击控制按钮的方形按钮时添加,所以,先在鼠标抬起的时候,判断是否点击了方形按钮

function onup(event){
	isKeyDown = false;
	if(event.offsetX >= ctrlLayer.x + 280 && event.offsetX <= ctrlLayer.x+330){
		if(event.offsetY >= ctrlLayer.y+40 && event.offsetY <= ctrlLayer.y+100){
			//对话
			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 < talkScript.length){
		//得到对话内容
		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://lufylegend.com/demo/rpg/index.html

lufylegend.js引擎包内包含这个demo,请直接下载lufylegend.js引擎,查看引擎包内源码

lufylegend.js引擎下载地址

http://lufylegend.com/lufylegend


下一篇,将研究地图的切换,和如何将游戏脚本化,请大家多支持


html5游戏开发-零基础开发RPG游戏-开源讲座(一)

http://blog.csdn.net/lufy_legend/article/details/7063316


html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄

http://blog.csdn.net/lufy_legend/article/details/7076064


lufylegend.js引擎的官方网址

http://lufylegend.com/lufylegend



人生如梦游戏间,RPG游戏开源开发讲座(JAVA篇)[5]——一树双花

继续,考虑到日后扩充的需要,开始将代码模块化重构,将原有MyPanel分解成Common,GameMap,GameHandle及MyPanel等4个子模块,逐步实现Sprite操作。0-5讲源码下载地...
  • cping1982
  • cping1982
  • 2007年08月17日 11:30
  • 8119

人生如梦游戏间,RPG游戏开源开发讲座(JAVA篇)[0]——月晕础润

开场诗:不儒不道又不仙,非神非圣也非贤。轻吐心头寻常语,开辟文武一片天。 自表诗:北冥沉渊有鲲鹏,吞噬金乌戮真龙。一日扶摇凌天起,三千世界可横行。       小子“...
  • w00w12l
  • w00w12l
  • 2013年06月20日 21:00
  • 1614

人生如梦游戏间,RPG游戏开源开发讲座(JAVA篇)[0]——月晕础润

开场诗:不儒不道又不仙,非神非圣也非贤。轻吐心头寻常语,开辟文武一片天。 自表诗:北冥沉渊有鲲鹏,吞噬金乌戮真龙。一日扶摇凌天起,三千世界可横行。      小子“鹏凌三千”,欲将心...
  • cping1982
  • cping1982
  • 2007年06月20日 16:46
  • 14480

html5游戏开发-零基础开发RPG游戏-开源讲座(一)

因为上一篇雷电的开发中,有朋友反应不太理解,本篇将以零基础的视点,来讲解如何开发一款RPG游戏。在游戏的世界里,我们可以看到各种地图,各种游戏人物,看到人物在地图上行走,对话等,无论是地图还是人物,其...
  • lufy_Legend
  • lufy_Legend
  • 2011年12月13日 13:49
  • 41183

人生如梦游戏间,RPG游戏开源开发讲座(JAVA篇)[4]——一步莲华

         从星期一开始一直郁闷……最近的状况……用迷信的说法就是犯小人,以社会学的观点是由于出现人际交往困难造成社会评价降低……无比郁闷中,继续写这个……上一回我们写到关于如何改变角色的移动样...
  • cping1982
  • cping1982
  • 2007年08月17日 09:29
  • 9161

实现一款简单的RPG游戏

RPG游戏地图教程 相信很多人的童年是在红白机、世嘉游戏机下长大的,那些经典的游戏如:魂斗罗,超级玛丽,世嘉的战斧、怒之铁拳等等一系列的经典。如今那些经典的记忆,已经随着时间的冲刷慢慢减淡了。 今...
  • tornodo
  • tornodo
  • 2018年01月27日 16:23
  • 115

RPG项目开发总结

十虎项目开发回顾 第一部分 项目概况 一、项目时间        十虎从2009年10月正式开始,截止到2011年12月,共开发了2年2个月。 游戏的最初的主体是:重现一度湮没的武林。   1、最...
  • maxwall123
  • maxwall123
  • 2016年11月22日 11:50
  • 1100

Html5游戏开发-145行代码完成一个RPG小Demo

由于我写这个示例只是为了娱乐一下,所以没有写一句注释(在下实在是太懒了……),为了方便大家理解,我说一下整个游戏的制作过程和设计方式。 首先,我们的游戏主体应该是一像模板样的东西,数据和这些模板分开,...
  • yorhomwang
  • yorhomwang
  • 2013年06月26日 22:51
  • 12502

卷轴式游戏地图实现

卷轴式游戏地图实现,可以用键盘的方向键和鼠标的左键及滑轮全局浏览世界地图。...
  • qq2399431200
  • qq2399431200
  • 2013年09月14日 18:33
  • 1326

如何制作一款HTML5 RPG游戏引擎——第四篇,情景对话

今天我们来实现情景对话。这是一个重要的功能,没有它,游戏将变得索然无味。所以我们不得不来完成它。 但是要知道,使用对话可不是一件简单的事,因为它内部的东西很多,比如说人物头像,人物名称,对话内容。。...
  • yorhomwang
  • yorhomwang
  • 2013年06月11日 21:26
  • 8873
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现
举报原因:
原因补充:

(最多只允许输入30个字)