• 技术文章 >web前端 >H5教程

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

    2016-05-17 09:09:04原创1235
    本篇将以零基础的视点，来讲解如何开发一款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里加入下面的代码




    5. rpg


    8. loading……




    复制代码

    当然，你也可以将legend文件夹放到其他地方，但是你需要修改legend文件夹下的legend.js文件中的LEGEND_PATH的值，来配置库件的路径

    游戏地图的实现

    接下来，我们先来画最底层的地图层，

    地图当然就是是由图片来组成的，如何在画面上显示一张图片，我之前已经写过专门的文章，代码如下
    1. var loader;
    2. function main(){
    3. loader = new LLoader();
    4. loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
    5. loader.load("map.jpg","bitmapData");
    6. }
    7. function loadBitmapdata(event){
    8. var bitmapdata = new LBitmapData(loader.content);
    9. var bitmap = new LBitmap(bitmapdata);
    10. addChild(bitmap);
    11. }
    复制代码

    如果想更详细了解的话，看下面的帖子

    用仿ActionScript的语法来编写html5——第一篇，显示一张图片

    http://bbs.html5cn.org/thread-2700-1-1.html

    游戏中的地图可以是一张比较大的图片，即整个图片就是游戏的地图，当人物或者地图移动的时候，改变图片显示的区域范围，从而实现地图的滚动和显示等，这样的话，必须为每个场景准备一张地图。

    另外，地图也可以是由许多小的地图块儿来组成，比如，我们熟悉的《吞食天地》，《勇者斗恶龙》等经典小型rpg游戏，这样的地图，我们需要准备一张或几张地图块儿，把这些地图块组合成地图来显示，比如下图

    0_13238754463fxE.gif


    在地图显示的时候，首先把图片切割，然后在根据预先设定好的位置显示到地图层上，这样我们就看到了一张完整的地图了

    接下来，打开Main.js

    在里面加入
    1. init(50,"mylegend",480,320,main);
    复制代码

    在legendForHtml5Progarmming中，用init这个函数来初始化canvas，上面的代码表示，初始化一个速度为50，名字为mylegend，大小为480*320的游戏界面，初始化完成后调用main(),这个速度值是说每个多少毫秒游戏循环一次，所以这个值设定的越小，游戏运行的速度就越快

    因为要调用main方法，所以我们要写一个main方法，main方法里做一些简单的准备工作。

    虽说读取图片只需要一个
    1. loader.load("map.jpg","bitmapData");
    复制代码

    但是游戏中往往用到很多张图片，你可以用到哪一张再加载哪一张，也可以一次性全部加载完，然后再开始显示游戏

    为了一次性把图片加载完，我的做法是，将需要的图片放到一个数组里，然后设定一个索引，每加载一个图片，让这个索引加1，当这个索引小于数组的长度，则继续加载，直到将数组中的图片全部加载完，然后开始进行下一步的工作

    具体实现看下面的代码
    1. //图片path数组
    2. var imgData = new Array();
    3. //读取完的图片数组
    4. var imglist = {};

    6. function main(){
    7. //准备读取图片
    8. imgData.push({name:"map",path:"./image/map.jpg"});
    9. imgData.push({name:"mingren",path:"./image/mingren.png"});
    10. imgData.push({name:"e1",path:"./image/e1.png"});
    11. imgData.push({name:"e2",path:"./image/e2.png"});
    12. //实例化进度条层
    13. loadingLayer = new LSprite();
    14. loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
    15. addChild(loadingLayer);
    16. //开始读取图片
    17. loadImage();
    18. }
    19. function loadImage(){
    20. //图片全部读取完成，开始初始化游戏
    21. if(loadIndex >= imgData.length){
    22. removeChild(loadingLayer);
    23. legendLoadOver();
    24. gameInit();
    25. return;
    26. }
    27. //开始读取图片
    28. loader = new LLoader();
    29. loader.addEventListener(LEvent.COMPLETE,loadComplete);
    30. loader.load(imgData[loadIndex].path,"bitmapData");
    31. }
    32. function loadComplete(event){
    33. //进度条显示
    34. loadingLayer.graphics.clear();
    35. loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
    36. loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");
    37. //储存图片数据
    38. imglist[imgData[loadIndex].name] = loader.content;
    39. //读取下一张图片
    40. loadIndex++;
    41. loadImage();
    42. }
    复制代码

    上面的代码不难明白，当图片没有读取完之前，会不断循环loadImage和loadComplete两个方法，当读取完之后，移除进度条，用legendLoadOver告诉游戏已经读取完成，然后调用gameInit方法，进行游戏的初始化工作。

    看gameInit方法
    1. function gameInit(event){
    2. //游戏层显示初始化
    3. layerInit();
    4. //添加地图
    5. addMap();
    6. //添加人物
    7. addChara();
    8. }
    复制代码

    在gameInit方法中，首先进行游戏层的初始化，然后添加游戏地图，然后添加人物

    游戏层显示初始化，按照我们一开始所说，我们一次来初始化地图层，人物层，效果层，对话层，控制层
    1. //游戏层显示初始化
    2. function layerInit(){
    3. //游戏底层添加
    4. backLayer = new LSprite();
    5. addChild(backLayer);
    6. //地图层添加
    7. mapLayer = new LSprite();
    8. backLayer.addChild(mapLayer);
    9. //人物层添加
    10. charaLayer = new LSprite();
    11. backLayer.addChild(charaLayer);
    12. //效果层添加
    13. effectLayer = new LSprite();
    14. backLayer.addChild(effectLayer);
    15. //对话层添加
    16. talkLayer = new LSprite();
    17. backLayer.addChild(talkLayer);
    18. //控制层添加
    19. ctrlLayer = new LSprite();
    20. backLayer.addChild(ctrlLayer);
    21. }
    复制代码

    有了游戏层次的划分，我们在添加游戏对象的时候，将地图添加到地图层，人物添加到人物层，他们就会依次显示在游戏的界面

    下面开始添加地图

    首先我们需要准备好显示地图的数组
    1. //地图图片数组
    2. var map = [
    3. [18,18,18,18,18,18,18,18,18,18,18,18,55,55,18],
    4. [18,18,18,17,17,17,17,17,17,17,17,17,55,55,18],
    5. [18,18,17,17,17,17,18,18,17,17,17,17,55,55,18],
    6. [18,17,17,17,18,18,18,18,18,17,17,55,55,17,18],
    7. [18,17,17,18,22,23,23,23,24,18,17,55,55,17,18],
    8. [18,17,17,18,25,28,26,79,27,18,55,55,17,17,18],
    9. [18,17,17,17,17,10,11,12,18,18,55,55,17,17,18],
    10. [18,18,17,17,10,16,16,16,11,55,55,17,17,17,18],
    11. [18,18,17,17,77,16,16,16,16,21,21,17,17,17,18],
    12. [18,18,18,18,18,18,18,18,18,55,55,18,18,18,18]
    13. ];
    复制代码

    这些数字分别对应着图中如下位置

    0_13238754743Gp2.gif



    然后看下面代码
    1. //添加地图
    2. function addMap(){
    3. var i,j,index,indexX,indexY;
    4. var bitmapdata,bitmap;
    5. //地图图片数据
    6. bitmapdata = new LBitmapData(imglist["map"]);
    7. //将地图图片拆分，得到拆分后的各个小图片的坐标数组
    8. imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);

    10. //在地图层上，画出15*10的小图片
    11. for(i=0;i<10;i++){
    12. for(j=0;j<15;j++){
    13. //从地图数组中得到相应位置的图片坐标
    14. index = map[i][j];
    15. //小图片的竖坐标
    16. indexY = Math.floor(index /10);
    17. //小图片的横坐标
    18. indexX = index - indexY*10;
    19. //得到小图片
    20. bitmapdata = new LBitmapData(imglist["map"],indexX*32,indexY*32,32,32);
    21. bitmap = new LBitmap(bitmapdata);
    22. //设置小图片的显示位置
    23. bitmap.x = j*32;
    24. bitmap.y = i*32;
    25. //将小图片显示到地图层
    26. mapLayer.addChild(bitmap);
    27. }
    28. }
    29. }
    复制代码

    这样，我们就把预先设置好的图片显示到了游戏界面上，形成了地图

    先把addChara方法加上
    1. //添加人物
    2. function addChara(){
    3. }
    复制代码

    然后运行游戏

    可以得到下面画面

    0_1323875497G8BG.gif



    游戏人物的实现

    为了更好的实现游戏人物的控制，我们新建一个游戏人物类Character.js

    里面代码如下
    1. function Character(data,row,col,speed){
    2. base(this,LSprite,[]);
    3. var self = this;
    4. //设定人物动作速度
    5. self.speed = speed==null?3:speed;
    6. self.speedIndex = 0;
    7. //设定人物大小
    8. data.setProperties(0,0,data.image.width/col,data.image.height/row);
    9. //得到人物图片拆分数组
    10. var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);
    11. //设定人物动画
    12. self.anime = new LAnimation(this,data,list);
    13. };
    14. Character.prototype.onframe = function (){
    15. var self = this;
    16. if(self.speedIndex++ < self.speed)return;
    17. self.speedIndex = 0;
    18. self.anime.onframe();
    19. };
    复制代码

    在legendForHtml5Programming里，有一个LAnimation类，用来实现图片数组顺序播放，形成动画
    使用LAnimation类需要三个参数，一个是显示动画的层，一个是图片，一个是图片的坐标数组

    然后，调用LAnimation类的onframe方法，就可以实现动画的播放了

    在index.html中引入Character类，然后修改addChara方法
    1. //添加人物
    2. function addChara(){
    3. bitmapdata = new LBitmapData(imglist["mingren"]);
    4. player = new Character(bitmapdata,4,4);
    5. player.x = 32*5;
    6. player.y = 32*6;
    7. charaLayer.addChild(player);

    9. }
    复制代码

    在gameInit的末尾添加循环事件
    1. //添加贞事件，开始游戏循环
    2. backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
    复制代码

    最后，添加onframe方法
    1. /**
    2. * 循环
    3. * */
    4. function onframe(){
    5. player.onframe();
    6. }
    复制代码

    运行代码，看到了吗

    一个会动的鸣人出现在游戏的地图上了

    0_1323875534sUfb.gif





    游戏演示

    http://fsanguo.comoj.com/html5/rpg/index.html

    最后，附上这次的游戏源代码

    http://legend-demo.googlecode.com/files/rpg.zip



    本文转自个人博客：http://blog.csdn.net/lufy_legend
    声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。
    专题推荐：HTML5教程 HTML5中国 html5游戏开发-零基础开发RPG游戏-开源讲座(一) admin html5资料 h
    上一篇：HTML5每日一练之Canvas标签的应用-绘制圆形 下一篇：用Canvas绘制贝赛尔曲线
    PHP编程就业班

    相关文章推荐

    • html5离线存储有哪些• 深入解析asp.net中mvc4自定义404页面（分享）• h5新增标签audio与video的使用• 你值得了解的HTTP缓存机制（代码详解）• 使用HTML5 SVG绘制各种雪花图案

    全部评论我要评论

  • 取消发布评论发送
    • 1/1

    PHP中文网

    首页 首页课程 课程文章文章问答 问答博客博客词典 词典手册 手册资源 资源搜索 搜索APP下载 APP下载