html5游戏开发-零基础开发RPG游戏-开源讲座(一)-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 17, 2016 am 09:09 AM

admin h

本篇将以零基础的视点，来讲解如何开发一款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里加入下面的代码

rpg
loading……

复制代码

当然，你也可以将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

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

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

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

接下来，打开Main.js

在里面加入

init(50,"mylegend",480,320,main);

复制代码

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

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

虽说读取图片只需要一个

loader.load("map.jpg","bitmapData");

复制代码

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

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

具体实现看下面的代码

//图片path数组
var imgData = new Array();
//读取完的图片数组
var imglist = {};
function main(){
//准备读取图片
imgData.push({name:"map",path:"./image/map.jpg"});
imgData.push({name:"mingren",path:"./image/mingren.png"});
imgData.push({name:"e1",path:"./image/e1.png"});
imgData.push({name:"e2",path:"./image/e2.png"});
//实例化进度条层
loadingLayer = new LSprite();
loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
addChild(loadingLayer);
//开始读取图片
loadImage();
}
function loadImage(){
//图片全部读取完成，开始初始化游戏
if(loadIndex >= imgData.length){
removeChild(loadingLayer);
legendLoadOver();
gameInit();
return;
}
//开始读取图片
loader = new LLoader();
loader.addEventListener(LEvent.COMPLETE,loadComplete);
loader.load(imgData[loadIndex].path,"bitmapData");
}
function loadComplete(event){
//进度条显示
loadingLayer.graphics.clear();
loadingLayer.graphics.drawRect(1,"black",[50, 200, 200, 20],true,"#ffffff");
loadingLayer.graphics.drawRect(1,"black",[50, 203, 200*(loadIndex/imgData.length), 14],true,"#000000");
//储存图片数据
imglist[imgData[loadIndex].name] = loader.content;
//读取下一张图片
loadIndex++;
loadImage();
}

复制代码

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

看gameInit方法

function gameInit(event){
//游戏层显示初始化
layerInit();
//添加地图
addMap();
//添加人物
addChara();
}

复制代码

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

游戏层显示初始化，按照我们一开始所说，我们一次来初始化地图层，人物层，效果层，对话层，控制层

//游戏层显示初始化
function layerInit(){
//游戏底层添加
backLayer = new LSprite();
addChild(backLayer);
//地图层添加
mapLayer = new LSprite();
backLayer.addChild(mapLayer);
//人物层添加
charaLayer = new LSprite();
backLayer.addChild(charaLayer);
//效果层添加
effectLayer = new LSprite();
backLayer.addChild(effectLayer);
//对话层添加
talkLayer = new LSprite();
backLayer.addChild(talkLayer);
//控制层添加
ctrlLayer = new LSprite();
backLayer.addChild(ctrlLayer);
}

复制代码

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

下面开始添加地图

首先我们需要准备好显示地图的数组

//地图图片数组
var map = [
[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 addMap(){
var i,j,index,indexX,indexY;
var bitmapdata,bitmap;
//地图图片数据
bitmapdata = new LBitmapData(imglist["map"]);
//将地图图片拆分，得到拆分后的各个小图片的坐标数组
imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,10,10);
//在地图层上，画出15*10的小图片
for(i=0;i
for(j=0;j
//从地图数组中得到相应位置的图片坐标
index = map[i][j];
//小图片的竖坐标
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*32;
bitmap.y = i*32;
//将小图片显示到地图层
mapLayer.addChild(bitmap);
}
}
}

复制代码

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

先把addChara方法加上

//添加人物
function addChara(){
}

复制代码

然后运行游戏

可以得到下面画面

游戏人物的实现

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

里面代码如下

function Character(data,row,col,speed){
base(this,LSprite,[]);
var self = this;
//设定人物动作速度
self.speed = speed==null?3:speed;
self.speedIndex = 0;
//设定人物大小
data.setProperties(0,0,data.image.width/col,data.image.height/row);
//得到人物图片拆分数组
var list = LGlobal.divideCoordinate(data.image.width,data.image.height,row,col);
//设定人物动画
self.anime = new LAnimation(this,data,list);
};
Character.prototype.onframe = function (){
var self = this;
if(self.speedIndex++
self.speedIndex = 0;
self.anime.onframe();
};

复制代码

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

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

在index.html中引入Character类，然后修改addChara方法

//添加人物
function addChara(){
bitmapdata = new LBitmapData(imglist["mingren"]);
player = new Character(bitmapdata,4,4);
player.x = 32*5;
player.y = 32*6;
charaLayer.addChild(player);
}

复制代码

在gameInit的末尾添加循环事件

//添加贞事件，开始游戏循环
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);

复制代码

最后，添加onframe方法

/**
* 循环
* */
function onframe(){
player.onframe();
}

复制代码

运行代码，看到了吗

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

游戏演示

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

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

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

本文转自个人博客：http://blog.csdn.net/lufy_legend

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

What's New in Windows 11 KB5054979 & How to Fix Update Issues

3 weeks ago By DDD

How to fix KB5055523 fails to install in Windows 11?

2 weeks ago By DDD

InZoi: How To Apply To School And University

4 weeks ago By DDD

How to fix KB5055518 fails to install in Windows 10?

2 weeks ago By DDD

Roblox: Dead Rails – How To Summon And Defeat Nikola Tesla

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7843

Java Tutorial

1649

CakePHP Tutorial

1403

Laravel Tutorial

1300

PHP Tutorial

1240

Related knowledge

How uniapp achieves rapid conversion between mini programs and H5 Oct 20, 2023 pm 02:12 PM

How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia

What is the role and usage of springboot admin monitoring May 25, 2023 pm 06:52 PM

Applicable scenarios: 1. The project scale is not large. 2. The number of users is not very large, and the concurrency requirements are not strong. 3. There is no dedicated operation and maintenance force. 4. Exquisite team size. For some regular projects, or units where the division of corporate responsibilities is not very clear. explain. Often a system goes from requirements to design, development, testing to final launch, operation and maintenance. Often 80% of the tasks are completed by the development team. Therefore, in addition to implementing the system's functions, developers must also provide customers with consultation and answer questions and solve production problems. Just imagine, after an application is launched, there are no monitoring measures. Just like driving a car without any dashboard, no one feels safe on the road like this. How to balance simplicity and efficiency is something worth thinking about. 1. Springb

Which one is better between win101909 and 21h2? Dec 26, 2023 pm 02:01 PM

Windows 101909 is currently considered one of the most stable and reliable versions. However, unfortunately, service support for this version has ended recently. 21H2 is a relatively stable version. In fact, from the actual situation, both are very good choices. Which one is better, win101909 or 21h2? Answer: 1909 is more stable, and 21h2 will be more secure. In the current environment, 1909 is still generally regarded as one of the most stable and reliable versions. However, the Win101909 version has officially stopped serving on May 11, 2021. WindowsServer21h2 is committed to providing more professional IT function support to the majority of users. 1. After actual testing by many users,

Which version is more stable: win1121h2 or 22h2? Jan 04, 2024 am 08:53 AM

Comparing the two versions of win1121h2 and 22h2, the latter 22h2 is more stable, and 22h2 has more functions. Compared with the previous 21h2, many functions have been improved. Let’s take a look. Which one is more stable, win1121h2 or 22h2: Answer: 22h2 is more stable. Comparing win1121h2 and 22h2, 22h2 is more stable. 22h2 adds a lot of features, and the problems of 21h2 have also been improved in 22h2. 22h2 update feature: Applications folder in start menu. Adjustable fixed area in the Start menu. Drag and drop on the taskbar. Focus Assist is integrated with the Notification Center. New "Spotlight" wallpaper feature. new

Which is the better choice: win1123h2 or 22h2? Dec 28, 2023 pm 03:09 PM

The 23h2 version and the 22h2 version in the Windows 11 system will be released in 2023 and 2022 respectively. Generally speaking, system updates are getting better and better. The editor also believes that the 23h2 version is better than the 22h2 version. Which one is better, win1123h2 or 22h2? Answer: win1123h2 is better. According to reports, win1123h2 is a cumulative version update from 22h2 to the next version, and they are all the same platform. This means that there are no compatibility issues between the two versions. It is recommended that you update them in time. The win1123h2 version brings us many practical features, such as the never-merge mode for taskbar window applications. There are more

Solve the problem of not getting Win11 23H2 update Jan 14, 2024 pm 09:24 PM

Everyone wants to update the 23H2 version of Win11 recently, but a small number of users have not received the update push message yet. It may be that a process in the background update progress is stuck, and it will be fine after a while. What to do if the Win11 update fails to get 23H2. Method 1: Wait patiently. If the user checks the update status of the computer and finds that it is stuck, we can wait for a while and the system will continue to update. Method 2: Clear the updated cache. If the user has updated the system before and has not cleared the more detailed cache, it will affect the normal update of 23h2. You can manually clear it. Method three: Use image installation. It is recommended that you go to Microsoft's official website to download the image file of win1123h2, and then update the file.

You need the permissions provided by admin to make changes to this file. How to solve this problem? Jul 26, 2023 am 10:56 AM

You need the permissions provided by admin to make changes to this file. Solution: 1. After selecting the administrator account on the login interface and entering the password, you can modify the file smoothly; 2. You can right-click the file and select "As Administrator" Solution: 3. Modify file permissions, right-click the file, select "Properties", click the "Security" tab, then click the "Edit" button, select your username, and then check the "Full Control" option ; 4. Use the command prompt to solve the problem; 5. Set UA permissions.

How to write thinkphp admin May 28, 2023 pm 02:16 PM

thinkphpadmin is written as "

See all articles