一，话说全国年夜事
  前没有暂看到lufy的专客上，有一名伴侣念要一个RPG游戏引擎，出于兴趣筹办入手做一做。因为我研讨lufylegend有冶时间了，对它有必然的依赖性，因而便筹办将那个引擎基于lufylegend。临时定名为lufylegendRPG。究竟结果基于lufylegend，假如名称中没有减上lufylegend那寂字的话，有面说欠亨啊。。。最远公布了0.1.0版，可是不睬念，连医柽皆是鼓舞战赞扬我的lufy老师长教师皆是出于至心的暗示没有合意。念理解0.1.0版的伴侣能够吭哟那里（其实最好别看，由于1.0正在用法上做了很年夜的调解）：
  http://blog.csdn.net/yorhomwang/article/details/8738733

于是我不能不从头去开发它。起首念到了舆图类，明天便去完成一下。
  我们的舆图不该该是一张年夜舆图，而是用小舆图拼接而成，如许便利我们修正舆图。
  如许的话我们需求许多舆图块的图片，凡是我们把它枚膛正在一张擅埽我们便用lufy老师长教师blog上一张图片做为例子，给各人吭哟这类拆谦小舆图的年夜图是甚么样的：

我们要完秤弈效果是甚么样的呢？渭已它放正在那里，完成后吭哟完成度到底有几：

两，如何完成

[color=ize:18px]筹办工做：
  起首您需求下载lufylegend，最新版本是1.7.5，用1.7.3皆止。
  下载地点：http://lufylegend.com/lufylegend
  上里有它的API战论坛，能够吭哟。
  别的保举一底细闭图书，lufy写的，叫《html5 Canvas游戏开发拭魅战》。用于教习根底战理解开发技巧仍是没有错的。此中借有一些很没有错的js手艺指点。值得一看。

册本引见：http://lufylegend.com/book/view/1

开端编写
  因为lufylegend做的比力完美，那末我枚题拆起去便比力简单了。吭哟LTileMap完好机关器：
  function LTileMap(data,img,width,height){
var s = this;
base(s,LSprite,[]);
s.x = 0;
s.y = 0;
s.mapData = data;
s.imgData = img;
if(!width){
  var wbitmap = new LBitmapData(s.imgData);
  s.partWidth = wbitmap.image.width;
}else{
  s.partWidth = width;
}
if(!height){
  var hbitmap = new LBitmapData(s.imgData);
  s.partHeight = hbitmap.image.height;
}else{
  s.partHeight = height;
}
s.onshow();
}起首为了削减引擎的巨细，我们把变量s战this等起去，上面用到this的处所便皆能用s去完成了。
  
  起首我们让它继承LSprite，如许假如我梅崮变x战y属性后就能够间接变话诨置了。再逃减两个属性：mapData战imgData。
  mapData是经由过程data参数赋值的，data的赋值该当是一个两维数组，格局以下：
  [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],  
[18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],  
[18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],  
[18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],  
[18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],  
[18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],  
[18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],  
[18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],  
[18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],  
[18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]它拆载着舆图块狄座式，18洞喀的图块战55洞喀的图块是纷歧样的。前面我们会细讲。
  
  imgData望文生义，它是一个拆图片的容器。
  借有两个参数，它们是用去暗示舆图快的下度战宽度的。例如每张舆图块是32*42的，那末便要将width设为32，height设为42。如许的话便会将拆谦舆图块的图片分红小舆图。例如我们把上里那张图片分红每一个小舆图块是32*32的，也便是说width设为32，height也设为32，那末便显现现以下的情势：

（以上图片我间接用了lufy专客里的图片）这时候您能够吭哟18战55所洞喀的是甚么。18是一棵树，而55洞喀的是火，因而我们便做到了让每张舆图块隐示得没有同。
  接下去是onshow办法：
  LTileMap.prototype.onshow = function(){
var s = this;
var mapdata = s.mapData;
var partWidth = s.partWidth;
var partHeight = s.partHeight;

var i,j;
var index,indexY,indexX;
var bitmapdata,bitmap;

for(i=0;i<mapdata.length;i++){
  for(j=0;j<mapdata[0].length;j++){
   index = mapdata[j];
   indexY = Math.floor(index/mapdata.length);
   indexX = index - indexY*mapdata.length;

bitmapdata = new LBitmapData(s.imgData,indexX*partWidth,indexY*partHeight,partWidth,partHeight);
   bitmap = new LBitmap(bitmapdata);
   bitmap.x = j*partWidth + s.x;  
   bitmap.y = i*partHeight + s.y;

s.addChild(bitmap);
         }
}
}它的功用很简单，便是绘出舆图。此中的逻辑皆很简单。次要是那里：
  
  for(i=0;i<mapdata.length;i++){
for(j=0;j<mapdata[0].length;j++){
  index = mapdata[j];
  indexY = Math.floor(index/mapdata.length);
  indexX = index - indexY*mapdata.length;

bitmapdata = new LBitmapData(s.imgData,indexX*partWidth,indexY*partHeight,partWidth,partHeight);
  bitmap = new LBitmap(bitmapdata);
  bitmap.x = j*partWidth + s.x;  
  bitmap.y = i*partHeight + s.y;

s.addChild(bitmap);
}
}那冶漾码是绘出舆图的中心，起首它遍历了舆图数组，然后每遍历一个便绘一张，然后减到本身中。因为本身是继承自LSprite，所本地吐减到本身中时，再将本身减到蹬鲢或者其他Sprite中时，整个截里便会隐示。
  
  over，很简单是否是？完成后我玫刘么用它呢？看以下代码：
  <!DOCTYPE html>
< html lang="en">
<head>
<meta charset="utf-8" />
<title>LTileMap</title>
<script type="text/JAVAscript" src="../lufylegend-1.7.3.min.js"></script>
<script type="text/javascript" src="../lufylegendrpg-1.0.0.min.js"></script>
<script>
init(30,"legend",480,320,main);
LGlobal.setDebug(true);
var backLayer,loadingLayer;
var map;
var loadData = [
  {name:"map",path:"./map.jpg"}
];
var imglist = [];
var mapData = [  
  [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],  
  [18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],  
  [18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],  
  [18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],  
  [18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],  
  [18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],  
  [18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],  
  [18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],  
  [18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],  
  [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]
];
function main(){
  //参加进度条
  loadingLayer = new LoadingSample1();
  addChild(loadingLayer);
  //减载图片并隐示进度
  LLoadManage.load(
   loadData,
   function(progress){
    loadingLayer.setProgress(progress);
   },
   gameInit
  );
}
function gameInit(result){
  removeChild(loadingLayer);
  imglist = result;
  //初初化层
  backLayer = new LSprite();
  addChild(backLayer);
  //参加舆图
  addMap();
}
function addMap(){
  map = new LTileMap(mapData,imglist["map"],32,32);
  backLayer.addChild(map);
}
</script>
</head>
<body>
   <div id="legend"></div>
</body>
< /html>
运转代码得到以下效果：更多请查看：http://www.shengshiyouxi.com

HTML5 RPG游戏引擎 地图实现篇的更多相关文章

  1. 如何制作一款HTML5 RPG游戏引擎——第五篇，人物&人物特效

    上一次,我们实现了对话类,今天就来做一个游戏中必不可少的——人物类. 当然,你完全是可以自己写一个人物类,但是为了方便起见,还是决定把人物类封装到这个引擎里. 为了使这个类更有意义,我还给人物类加了几 ...

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

    今天我们来实现情景对话.这是一个重要的功能,没有它,游戏将变得索然无味.所以我们不得不来完成它. 但是要知道,使用对话可不是一件简单的事,因为它内部的东西很多,比如说人物头像,人物名称,对话内容... ...

  3. 如何制作一款HTML5 RPG游戏引擎——第三篇，利用幕布切换场景

    开言: 在RPG游戏中,如果有地图切换的地方,通常就会使用幕布效果.所谓的幕布其实就是将两个矩形合拢,直到把屏幕遮住,然后再展开直到两个矩形全部移出屏幕. 为了大家做游戏方便,于是我给这个引擎加了这么 ...

  4. 如何制作一款HTML5 RPG游戏引擎——第二篇，烟雨+飞雪效果

    今天我们来实现烟雨+飞雪效果.首先来说,一款经典的RPG游戏难免需要加入天气的变化.那么为了使我们的RPG游戏引擎更完美,我们就只好慢慢地实现它. 本文为该系列文章的第二篇,如果想了解以前的文章可以看 ...

  5. 如何制作一款HTML5 RPG游戏引擎——第一篇，地图类的实现

    一,话说天下大事 前不久看到lufy的博客上,有一位朋友想要一个RPG游戏引擎,出于兴趣准备动手做一做.由于我研究lufylegend有一段时间了,对它有一定的依赖性,因此就准备将这个引擎基于lufy ...

  6. HTML5开源RPG游戏引擎lufylegendRPG 0.1发布

    一,小小开篇   首先不得不先介绍一下这个引擎: lufylegendRPG是lufylegend的拓展引擎,使用它时,需要引入lufylegend.同时您也需要了解lufylegend语法,这样才能 ...

  7. 推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库

    推荐一些好用的 HTML5 & JavaScript 游戏引擎开发库 0. 引言 如果你是一个游戏开发者,并且正在寻找一个可以与 JavaScript 和 HTML5 无缝工作的游戏引擎.那么 ...

  8. HTML5开源RPG游戏引擎lufylegendRPG 1.0.0发布

    经历了几个月的改进,终于发布1.0.0版了.虽然引擎依然存在漏洞,但是比起上次更新还是要好多了.在这里不得不感谢各位网友的大力支持. 首先为引擎做一个开场白吧,也好让大家了解一下它: lufylege ...

  9. RPG JS:免费开源的跨平台RPG游戏引擎

    RPG JS是一个2D RPG游戏制作引擎,目前版本基于Ease|JS游戏引擎,基于Canvas Engine的新版本即将发布. RPG JS是免费且开源的. RPG JS有着完善的文档支持. RPG ...

随机推荐

  1. <摘录>详谈高性能TCP服务器的开发

    对于开发一款高性能服务器程序,广大服务器开发人员在一直为之奋斗和努力.其中一个影响服务器的重要瓶颈就是服务器的网络处理模块.如果一款服务器程序不能及时的处理用户的数据.则服务器的上层业务逻辑再高效也是 ...

  2. Android应用开发学习笔记之绘图

    作者:刘昊昱 博客:http://blog.csdn.net/liuhaoyutz 一.绘图常用类介绍 在Android中绘图时,常用到的几个类是Paint.Canvas.Bitmap和Bitmapt ...

  3. hdu 4055 Number String(有点思维的DP)

    Number String Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  4. STL 之 queue、priority_queue 源代码剖析

    /* * Copyright (c) 1994 * Hewlett-Packard Company * * Permission to use, copy, modify, distribute an ...

  5. Nancy.Host的Web应用

    Nancy.Host实现脱离iis的Web应用 本篇将介绍如何使用Nancy.Host实现脱离iis的Web应用,在开源任务管理平台TaskManagerV2.0代码里面已经使用了Nancy.Host ...

  6. 详谈隐藏Tabbar的几种方法

    如今正在写的一个项目,涉及到了使用两个TabBar,然后我须要显示当中一个的时候,然后隐藏另外一个,可是中间却出现故障了.我查了一些资料,想总结一下关于TabBar的隐藏. 第一种方法是: //隐藏t ...

  7. [Android代码阅读]分类简介

    分类简介: 阅读他人的代码,可以学到很多东西,从思路,到方案,一系列都可以在项目代码中体现,所以,此分类专门用于记录阅读过的项目代码,并在上面给出自己的理解和注释 在此,感谢原作者开源分享项目代码

  8. ZOJ 1654 二分匹配基础题

    题意: 给你一副图, 有草地(*),空地(o)和墙(#),空地上可以放机器人, 机器人向上下左右4个方向开枪(枪不能穿墙),问你在所有机器人都不相互攻击的情况下能放的最多的机器人数. 思路:这是一类经 ...

  9. git merge，rebase和*(no branch)

    上一篇:http://blog.csdn.net/xiaoputao0903/article/details/23933589,说了git的分支,相关的使用方法没说到可是仅仅要google就能搜出一大 ...

  10. hdu-4833-Best-Financing（DP）

    Best Financing Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...