HTML 5开发RPG游戏之一（地图人物实现）
dxm0 2012-05-15
| 本篇将以零基础的视点，来讲解如何开发一款RPG游戏。 在游戏的世界里，我们可以看到各种地图，各种游戏人物，看到人物在地图上行走，对话等，无论是地图还是人物，其实都是图片的处理与显示，把不同的图片显示到屏幕上，我们就看到不同的游戏界面，要想让这些图片同时显示到界面上，我们就需要处理好层次，让他们来分层显示，我们可以想象，如果游戏人物显示在地图的下层的话，显然会被地图遮挡住。 一款RPG游戏，我简单把它分为地图层，人物层，效果层(一些法术效果等)，对话层，控制层(按钮菜单等)。 如下图
我们只要依次将图片画在屏幕上，游戏人物将站在地图上，如果有对话，对话将出现在人物和地图的上面，而按钮等控件会出现在游戏的最外层 下面，我们一步步来实现一个简单的RPG游戏的开发 准备工作 一，库件下载 本游戏开发，需要用到开源库件：LegendForHtml5Programming 请到这里下载最新版的LegendForHtml5Programming，本次开发需要1.2版以上 http://code.google.com/p/legendforhtml5programming/downloads/list 库件的开发过程请看这里 http://bbs.html5cn.org/thread-2712-1-1.html 二，库件配置 首先建立一个文件夹rpg(你也可以起其他的名字) 然后将下载的库件解压，解压后将legend文件夹放到与rpg文件夹同目录 然后，在rpg文件夹里建一个index.html文件和一个js文件夹，在js文件夹里建一个Main.js文件 最后，在index.html里加入下面的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>rpg</title> </head> <body> <div id="mylegend">loading……</div> <!-- 引入LegendForHtml5Programming库件 --> <script type="text/javascript" src="../legend/legend.js"></script> <script type="text/javascript" src="./js/Main.js"></script> </body></html> |
当然，你也可以将legend文件夹放到其他地方，但是你需要修改legend文件夹下的legend.js文件中的LEGEND_PATH的值，来配置库件的路径
游戏地图的实现
接下来，我们先来画最底层的地图层，
地图当然就是是由图片来组成的，如何在画面上显示一张图片，我之前已经写过专门的文章，代码如下
var loader;
function main(){
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
loader.load("map.jpg","bitmapData");
}
function loadBitmapdata(event){
var bitmapdata = new LBitmapData(loader.content);
var bitmap = new LBitmap(bitmapdata);
addChild(bitmap);
} 如果想更详细了解的话，看下面的帖子
用仿ActionScript的语法来编写html5——第一篇，显示一张图片http://bbs.html5cn.org/thread-2700-1-1.html
