처음 두 글에서는 RPG의 발전에 대해 맵 추가와 게임 캐릭터 추가를 구현해봤습니다. 이번 글에서는 맵의 스크롤 스크롤과 캐릭터 대사 구현을 구현해보겠습니다
지도 스크롤
지도 스크롤 원리 , 아래 그림을 참고하시면 됩니다
위 그림의 지시에 따라 지도 스크롤을 구현하면 됩니다. 곧 출시될 지도(사진의 노란색 부분)를 먼저 스크롤한 후 지도를 스크롤한 후 화면 바깥 부분(사진의 녹색 부분)을 제거하세요.
먼저 지도 스크롤 여부를 제어하는 변수를 추가합니다
//地图滚动 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.pideCoordinate(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 다음 숫자는 각 대화 단위의 캐릭터 번호를 나타냅니다. 캐릭터의 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 엔진 패키지에는 이 데모가 포함되어 있습니다. lufylegend.js 엔진을 직접 다운로드하고 엔진 패키지에서 소스 코드를 확인하세요
lufylegend.js 엔진 다운로드 주소
http:// lufylegend .com/lufylegend
위는 html5 게임 개발 -제로- 기반 개발 RPG 게임 - 오픈소스 강의(3) - 스크롤 및 대화 구현 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!